Table
Rows and columns, numbers aligned to the end.
| Invoice | Status | Amount |
|---|---|---|
| INV-001 | Paid | $250.00 |
| INV-002 | Pending | $150.00 |
| INV-003 | Paid | $350.00 |
forSlots(TableSlots)(Recipes.Table({}))
Usage
The function that drew the preview, over the theme module Create a theme writes. The preview passes it the style picked above instead of its default.
export const TableStyle = forSlots(TableSlots)(Recipes.Table({}))
interface Invoice {
readonly id: string
readonly status: string
readonly amount: number
}
export const table = (style: NamedStyle<typeof TableSlots>, h: HtmlBuilder<never>): Html =>
Table.view<Invoice>(
{
caption: 'Recent invoices',
columns: [
{ header: 'Invoice', value: row => row.id },
{ header: 'Status', value: row => row.status },
{ header: 'Amount', numeric: true, value: row => `$${row.amount.toFixed(2)}` },
],
rows: [
{ id: 'INV-001', status: 'Paid', amount: 250 },
{ id: 'INV-002', status: 'Pending', amount: 150 },
{ id: 'INV-003', status: 'Paid', amount: 350 },
],
style,
// One highlight behind the rows, following the pointer.
fluid: true,
},
h,
)