mielui
Layout

Table

Display rows and columns with native table semantics.

Installation

pnpm dlx @mielui/svelte add table

Usage

Root renders a native table. Wrap it in ScrollArea when the columns can be wider than the page. Leave out Caption or Footer when the data does not need them, and set class on any part to change alignment, wrapping, or column widths.

<script lang="ts">
    import * as Table from '@mielui/svelte/components/table';
</script>

<Table.ScrollArea tabindex={0} aria-label="Invoices">
    <Table.Root>
        <Table.Caption>September invoices</Table.Caption>
        <Table.Header>
            <Table.Row>
                <Table.Head>Invoice</Table.Head>
                <Table.Head>Amount</Table.Head>
            </Table.Row>
        </Table.Header>
        <Table.Body>
            <Table.Row>
                <Table.Cell>INV-001</Table.Cell>
                <Table.Cell>$250.00</Table.Cell>
            </Table.Row>
        </Table.Body>
    </Table.Root>
</Table.ScrollArea>

Head defaults to scope="col". Set scope="row" for row headings. Head and Cell take the native colspan, rowspan, and headers attributes. Set data-state="selected" on a Row to give it the selected wash.

Examples

Inset

The default table has no frame: muted column headings, hairline row dividers, and a wash on the hovered row. variant="inset" puts the header and footer on an outer frame and the body rows on a recessed surface inside it.

Sorting and selection

Table keeps no state. Put a Button in the heading to sort and update aria-sort when the order changes. Keep the selected rows in your own state and mark them with data-state="selected".

API reference

Table.Root

  • variant
    "default" | "inset"

    inset puts the header and footer on an outer frame and the body rows on a recessed surface.

    Default 'default'

Other parts

These parts have no props of their own. They pass HTML attributes and events to their element.

  • Table.Body
  • Table.Caption
  • Table.Cell
  • Table.Footer
  • Table.Head
  • Table.Header
  • Table.Row
  • Table.ScrollArea