Table | COSS for Svelte

Installation

pnpm dlx shadcn-svelte@latest add https://coss-sv.vercel.app/r/table.json

Usage

<script lang="ts">
  import * as Table from "$lib/components/ui/table/index.js";
</script>

<Table.Root>
  <Table.Caption>Caption</Table.Caption>
  <Table.Header>
    <Table.Row>
      <Table.Head>Header</Table.Head>
      <Table.Head>Header</Table.Head>
    </Table.Row>
  </Table.Header>
  <Table.Body>
    <Table.Row>
      <Table.Cell>Cell</Table.Cell>
      <Table.Cell>Cell</Table.Cell>
    </Table.Row>
  </Table.Body>
</Table.Root>

The main table container component. Set variant="card" for a card-style table: separated borders, rounded corners, and row surfaces that read as cards. That pairs well with a Frame (page chrome) or CardFrame (card shell with optional header actions). The default variant is a simpler row layout with standard borders.

Prop	Type	Default
`class`	`string`
`variant`	`"default" \\| "card"`	`"default"`

<Table.Root>
  <Table.Header>...</Table.Header>
  <Table.Body>...</Table.Body>
</Table.Root>

<Table.Root variant="card">
  <Table.Header>...</Table.Header>
  <Table.Body>...</Table.Body>
</Table.Root>

Table.Header

Header section of the table containing column headers.

Prop	Type	Default
`class`	`string`

<Table.Header>
  <Table.Row>
    <Table.Head>Header</Table.Head>
  </Table.Row>
</Table.Header>

Table.Body

Body section of the table containing table rows and data.

Prop	Type	Default
`class`	`string`

<Table.Body>
  <Table.Row>
    <Table.Cell>Cell</Table.Cell>
  </Table.Row>
</Table.Body>

Table.Footer

Footer section of the table.

Prop	Type	Default
`class`	`string`

<Table.Footer>
  <Table.Row>
    <Table.Cell>Footer</Table.Cell>
  </Table.Row>
</Table.Footer>

Table.Row

A row in the table.

Prop	Type	Default
`class`	`string`

<Table.Row>
  <Table.Cell>Cell</Table.Cell>
</Table.Row>

Table.Head

A header cell in the table.

Prop	Type	Default
`class`	`string`

<Table.Head>Header</Table.Head>

Table.Cell

A data cell in the table.

Prop	Type	Default
`class`	`string`

<Table.Cell>Cell</Table.Cell>

Table.Caption

A caption for the table.

Prop	Type	Default
`class`	`string`

<Table.Caption>Caption</Table.Caption>

Examples

Card-style table

Use variant="card" when the grid itself should look like a set of cards (for example dashboards or standalone tables without an outer frame).

Table in CardFrame

Put the table in CardFrame so the grid sits inside the card shell (border, radius, clipping). Use variant="card" on Table.Root. The example below is static markup—no row selection or TanStack.

Table in Frame

Wrap the table in a Frame for bordered app-surface framing. Use variant="card" on Table.Root so rows keep the card-style treatment inside the frame.

Data table with TanStack

Use TanStack Table for Svelte with variant="card" when you need column definitions, row selection, and flexRender over the same table primitives. Add @tanstack/svelte-table to your project for headless state (sorting, pagination, selection) beyond static markup.

Changelog

Apr 12, 2026 — Table.Root adds optional variant (default or card)