Table

A flexible component for displaying tabular data with customizable cell rendering using Svelte snippets.

Props

Prop	Type	Default	Description
`caption`	`string`	`''`	An optional caption for the table.
`tableHeadItems`	`Array<T>`	`required`	Data for the header row.
`tableRowItems`	`Array<Array<U>>`	`required`	Data for the body rows.
`tableFooterItems`	`Array<V>`	`required`	Data for the footer row.
`headTemplate`	`Snippet<[T]>`	`required`	Snippet for rendering header cells.
`bodyTemplate`	`Snippet<[U]>`	`required`	Snippet for rendering body cells.
`footerTemplate`	`Snippet<[V]>`	`required`	Snippet for rendering footer cells.
`class`	`string`	`''`	CSS classes for the table element.
`captionClass`	`string`	`''`	CSS classes for the caption element.
`headClass`	`string`	`''`	CSS classes for the thead element.
`bodyClass`	`string`	`''`	CSS classes for the tbody element.
`rowClass`	`string`	`''`	CSS classes for tr elements.
`cellClass`	`string`	`''`	CSS classes for th and td elements.
`footerClass`	`string`	`''`	CSS classes for the tfoot element.
`overrideDefaultStyling`	`boolean`	`false`	If true, removes default fluid-table classes.

A basic table with header, body, and footer.

<Table

  caption="User Directory"

  tableHeadItems={['ID', 'Name']}

  tableRowItems={[[1, 'Alice'], [2, 'Bob']]}

  tableFooterItems={['Total', '2']}

  {#snippet headTemplate(item)} {item} {/snippet}

  {#snippet bodyTemplate(item)} {item} {/snippet}

  {#snippet footerTemplate(item)} <strong>{item}</strong> {/snippet}

</Table>

Applying custom classes to specific table sections.

<Table

  tableHeadItems={headers}

  tableRowItems={users}

  headClass="bg-primary-500 text-white"

  rowClass="hover:bg-neutral-100"

...

</Table>