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 |
<script lang="ts">
import * as Table from "$lib/components/ui/table";
const invoices = [
{
invoice: "INV001",
status: "Paid",
method: "Credit Card",
amount: "$250.00"
},
{
invoice: "INV002",
status: "Pending",
method: "PayPal",
amount: "$150.00"
},
{
invoice: "INV003",
status: "Unpaid",
method: "Bank Transfer",
amount: "$350.00"
}
];
</script>
<div class="w-full max-w-lg">
<Table.Root>
<Table.Header>
<Table.Row>
<Table.Head>Invoice</Table.Head>
<Table.Head>Status</Table.Head>
<Table.Head>Method</Table.Head>
<Table.Head class="text-right">Amount</Table.Head>
</Table.Row>
</Table.Header>
<Table.Body>
{#each invoices as row (row.invoice)}
<Table.Row>
<Table.Cell class="font-medium">{row.invoice}</Table.Cell>
<Table.Cell>{row.status}</Table.Cell>
<Table.Cell>{row.method}</Table.Cell>
<Table.Cell class="text-right">{row.amount}</Table.Cell>
</Table.Row>
{/each}
</Table.Body>
</Table.Root>
</div>Installation
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>