Table
A responsive table for displaying tabular data.
| Invoice | Status | Method | Amount |
|---|---|---|---|
| INV001 | Paid | Credit Card | $250.00 |
| INV002 | Pending | PayPal | $150.00 |
| INV003 | Unpaid | Bank Transfer | $350.00 |
Installation
Installs the style saved in lily.json. For a new Diamond project,
run lily-svelte init --style diamond first.
Install the lily base and `utils` (run once per project).
npx lily-svelte@latest initCopy the table source from the registry into $lib/components/ui/table.
Usage
<script lang="ts">
import * as Table from '$lib/components/ui/table';
</script>
<Table.Root>
<Table.Header>
<Table.Row>
<Table.Head>Invoice</Table.Head>
<Table.Head class="text-right">Amount</Table.Head>
</Table.Row>
</Table.Header>
<Table.Body>
<Table.Row>
<Table.Cell>INV001</Table.Cell>
<Table.Cell class="text-right">$250.00</Table.Cell>
</Table.Row>
</Table.Body>
</Table.Root>