Table
A responsive table element used as the base for data tables.
Loading preview…
1<script lang="ts">
2 import * as Table from './index.js';
3</script>
4
5<div class="w-full max-w-lg">
6 <Table.Root>
7 <Table.Caption>A list of your recent invoices.</Table.Caption>
8 <Table.Header>
9 <Table.Row>
10 <Table.Head class="w-[100px]">Invoice</Table.Head>
11 <Table.Head>Status</Table.Head>
12 <Table.Head>Method</Table.Head>
13 <Table.Head class="text-end">Amount</Table.Head>
14 </Table.Row>
15 </Table.Header>
16 <Table.Body>
17 <Table.Row>
18 <Table.Cell class="font-medium">INV001</Table.Cell>
19 <Table.Cell>Paid</Table.Cell>
20 <Table.Cell>Credit Card</Table.Cell>
21 <Table.Cell class="text-end">$250.00</Table.Cell>
22 </Table.Row>
23 <Table.Row>
24 <Table.Cell class="font-medium">INV002</Table.Cell>
25 <Table.Cell>Pending</Table.Cell>
26 <Table.Cell>PayPal</Table.Cell>
27 <Table.Cell class="text-end">$150.00</Table.Cell>
28 </Table.Row>
29 <Table.Row>
30 <Table.Cell class="font-medium">INV003</Table.Cell>
31 <Table.Cell>Unpaid</Table.Cell>
32 <Table.Cell>Bank Transfer</Table.Cell>
33 <Table.Cell class="text-end">$350.00</Table.Cell>
34 </Table.Row>
35 </Table.Body>
36 <Table.Footer>
37 <Table.Row>
38 <Table.Cell colspan={3}>Total</Table.Cell>
39 <Table.Cell class="text-end">$750.00</Table.Cell>
40 </Table.Row>
41 </Table.Footer>
42 </Table.Root>
43</div>
44Installation
1. Copy these files into your project
- ~/components/table/index.ts
- ~/components/table/table.svelte
- ~/components/table/table-header.svelte
- ~/components/table/table-body.svelte
- ~/components/table/table-footer.svelte
- ~/components/table/table-row.svelte
- ~/components/table/table-head.svelte
- ~/components/table/table-cell.svelte
- ~/components/table/table-caption.svelte
Usage
Use table primitives for structured tabular data. Compose Header, Body, Footer, Row, Head, Cell, and Caption around Root.
1<script lang="ts">
2 import * as Table from '~/components/table';
3</script>
4
5<Table.Root>
6 <Table.Caption>A list of your recent invoices.</Table.Caption>
7 <Table.Header>
8 <Table.Row>
9 <Table.Head class="w-[100px]">Invoice</Table.Head>
10 <Table.Head>Status</Table.Head>
11 <Table.Head class="text-end">Amount</Table.Head>
12 </Table.Row>
13 </Table.Header>
14 <Table.Body>
15 <Table.Row>
16 <Table.Cell class="font-medium">INV001</Table.Cell>
17 <Table.Cell>Paid</Table.Cell>
18 <Table.Cell class="text-end">$250.00</Table.Cell>
19 </Table.Row>
20 </Table.Body>
21 <Table.Footer>
22 <Table.Row>
23 <Table.Cell colspan={2}>Total</Table.Cell>
24 <Table.Cell class="text-end">$250.00</Table.Cell>
25 </Table.Row>
26 </Table.Footer>
27</Table.Root>