Display

Table

SimpleTable styles plain table markup with a sticky header, hover rows and an optional card layout in narrow containers.

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

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

SimpleTable styles plain thead and tbody markup inside a focusable, horizontally scrolling region. For search, sorting and pagination use DataTable. It is exported from @codeatlasdev/ui. @codeatlasdev/ui/table also exports a Table, a bordered wrapper around a plain <table> that forwards native table attributes.

Default (scroll)

A regular table at every width.

Name	Email	Role	Status
Ana Souza	ana@example.com	Admin	Active
Bruno Lima	bruno@example.com	Editor	Invited
Carla Dias	carla@example.com	Viewer	Active

Code

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

  const rows = [
    { name: 'Ana Souza', email: 'ana@example.com', role: 'Admin', status: 'Active' },
    { name: 'Bruno Lima', email: 'bruno@example.com', role: 'Editor', status: 'Invited' },
    { name: 'Carla Dias', email: 'carla@example.com', role: 'Viewer', status: 'Active' },
  ];
</script>

<Card material="glass" 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>
</Card>

Cards on narrow containers

When the table's own container is narrower than 600px each row becomes a card. Every cell is captioned with its column header; `data-label` only overrides that. Resize the window to see it.

Name	Email	Role	Status
Ana Souza	ana@example.com	Admin	Active
Bruno Lima	bruno@example.com	Editor	Invited
Carla Dias	carla@example.com	Viewer	Active

Code

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

  const rows = [
    { name: 'Ana Souza', email: 'ana@example.com', role: 'Admin', status: 'Active' },
    { name: 'Bruno Lima', email: 'bruno@example.com', role: 'Editor', status: 'Invited' },
    { name: 'Carla Dias', email: 'carla@example.com', role: 'Viewer', status: 'Active' },
  ];
</script>

<Card material="glass" 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>
</Card>

Props

Prop	Type	Default	Description
`responsive`	`'scroll' \| 'cards'`	`'scroll'`	`scroll` keeps a regular table. `cards` turns each row into a card when the table's own width is below the `sm` breakpoint (600px). Cell captions come from the `thead` headers automatically.
`class`	`string`	`''`	Extra class on the wrapper.
`children`	`Snippet`	`undefined`	`thead` and `tbody` markup.