Studio
2

Table

Installation

pnpm dlx @mielui/svelte add table

Usage

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

<Table.ScrollArea tabindex={0} aria-label="Invoices">
    <Table.Root variant="inset">
        <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>

Root renders a table. Wrap it inScrollArea when columns need horizontal scrolling. OmitCaption orFooter when the data does not need them. Setclass on each part to change alignment, wrapping, or column widths.

Head defaults toscope="col" . Usescope="row" for row headings.Cell acceptscolspan ,rowspan , andheaders .

For sorting, put a Button in the heading and updatearia-sort when the order changes. Keep selection and pagination in your application state, using Checkbox and Pagination as needed.

Inset

Sorting and selection

API reference

Table.Root

Prop Type Default
variant "inset" | "default" | undefined 'default'

Table.Body

Table.Caption

Table.Cell

Table.Footer

Table.Head

Table.Header

Table.Row

Table.ScrollArea