120k
New

Table

PreviousNext

A responsive table component.

Installation

pnpm dlx shadcn@latest add @force-ui-svelte/table

Usage

<script lang="ts">
  import * as Table from "$lib/components/ui/table/index.js";
</script>
<Table.Root>
  <Table.Caption>A list of your recent invoices.</Table.Caption>
  <Table.Header>
    <Table.Row>
      <Table.Head class="w-[100px]">Invoice</Table.Head>
      <Table.Head>Status</Table.Head>
      <Table.Head>Method</Table.Head>
      <Table.Head class="text-end">Amount</Table.Head>
    </Table.Row>
  </Table.Header>
  <Table.Body>
    <Table.Row>
      <Table.Cell class="font-medium">INV001</Table.Cell>
      <Table.Cell>Paid</Table.Cell>
      <Table.Cell>Credit Card</Table.Cell>
      <Table.Cell class="text-end">$250.00</Table.Cell>
    </Table.Row>
  </Table.Body>
</Table.Root>

Composition

Use the following composition to build a Table:

Table.Root
├── Table.Caption
├── Table.Header
│   └── Table.Row
│       ├── Table.Head
│       ├── Table.Head
│       ├── Table.Head
│       └── Table.Head
├── Table.Body
│   ├── Table.Row
│   │   ├── Table.Cell
│   │   ├── Table.Cell
│   │   ├── Table.Cell
│   │   └── Table.Cell
│   └── Table.Row
│       ├── Table.Cell
│       ├── Table.Cell
│       ├── Table.Cell
│       └── Table.Cell
└── Table.Footer

Examples

Use the <Table.Footer /> component to add a footer to the table.

Actions

A table showing actions for each row using a <DropdownMenu /> component.

Data Table

You can use the <Table /> component to build more complex data tables. Combine it with @tanstack/table to create tables with sorting, filtering and pagination.

See the Data Table documentation for more information.

You can also see an example of a data table in the Tasks demo.

RTL

To enable RTL support in Force UI, see the RTL configuration guide.