Display

Table

SimpleTable adds a sticky header, hover rows and an optional card layout on small screens.

<script>
  import { SimpleTable } from "@codeatlasdev/ui";
</script>

<SimpleTable responsive="cards">
  <thead>…</thead>
  <tbody>…</tbody>
</SimpleTable>

SimpleTable styles plain thead and tbody markup. For search, sorting and pagination use DataTable. In cards mode the header row stays available to screen readers.

Default (scroll)

A regular table at every width.

Name	Email	Role	Status
Ana Souza	[email protected]	Admin	Active
Bruno Lima	[email protected]	Editor	Invited
Carla Dias	[email protected]	Viewer	Active

Code

<script lang="ts">
  import { SimpleTable, GlassCard } from '@codeatlasdev/ui';

  const rows = [
    { name: 'Ana Souza', email: '[email protected]', role: 'Admin', status: 'Active' },
    { name: 'Bruno Lima', email: '[email protected]', role: 'Editor', status: 'Invited' },
    { name: 'Carla Dias', email: '[email protected]', role: 'Viewer', status: 'Active' },
  ];
</script>

<GlassCard flush full>
  <SimpleTable>
    <thead>
      <tr><th>Name</th><th>Email</th><th>Role</th><th>Status</th></tr>
    </thead>
    <tbody>
      {#each rows as r}
        <tr>
          <td class="primary">{r.name}</td>
          <td>{r.email}</td>
          <td>{r.role}</td>
          <td>{r.status}</td>
        </tr>
      {/each}
    </tbody>
  </SimpleTable>
</GlassCard>

Cards on mobile

Below 900px each row becomes a card. Put `data-label` on every `td`; it is rendered as the field name. Resize the window to see it.

Name	Email	Role	Status
Ana Souza	[email protected]	Admin	Active
Bruno Lima	[email protected]	Editor	Invited
Carla Dias	[email protected]	Viewer	Active

Code

<script lang="ts">
  import { SimpleTable, GlassCard } from '@codeatlasdev/ui';

  const rows = [
    { name: 'Ana Souza', email: '[email protected]', role: 'Admin', status: 'Active' },
    { name: 'Bruno Lima', email: '[email protected]', role: 'Editor', status: 'Invited' },
    { name: 'Carla Dias', email: '[email protected]', role: 'Viewer', status: 'Active' },
  ];
</script>

<GlassCard flush full>
  <SimpleTable responsive="cards">
    <thead>
      <tr><th>Name</th><th>Email</th><th>Role</th><th>Status</th></tr>
    </thead>
    <tbody>
      {#each rows as r}
        <tr>
          <td class="primary" data-label="Name">{r.name}</td>
          <td data-label="Email">{r.email}</td>
          <td data-label="Role">{r.role}</td>
          <td data-label="Status">{r.status}</td>
        </tr>
      {/each}
    </tbody>
  </SimpleTable>
</GlassCard>

Props

Prop	Type	Default	Description
`responsive`	`'scroll' \| 'cards'`	`'scroll'`	`cards` turns each row into a card below the md breakpoint (900px). Requires `data-label` on each `td`.
`class`	`string`	`''`	Extra class on the wrapper.
`children`	`Snippet`	`undefined`	`thead` and `tbody` markup.