DataTable

Variant

Palette

Size

Elevation

Rounded

Prop	Type	Default
variant	`"flat" \| "outlined" \| "ghost"`	`"flat"`
palette	`"accent" \| "tone" \| "neutral"`	`"tone"`
size	`"sm" \| "md" \| "lg"`	`"md"`
elevation	`"none" \| "subtle" \| "hard"`	`"none"`
rounded	`boolean`	`false`
columns	`Column[]`	`—`
rows	`Record<string, any>[]`	`—`

Prop variant

Type "flat" | "outlined" | "ghost"

Default "flat"

Prop palette

Type "accent" | "tone" | "neutral"

Default "tone"

Prop size

Type "sm" | "md" | "lg"

Default "md"

Prop elevation

Type "none" | "subtle" | "hard"

Default "none"

Prop rounded

Type boolean

Default false

Prop columns

Type Column[]

Default —

Prop rows

Type Record<string, any>[]

Default —

Usage

Svelte

<DataTable
    columns={[
        { key: "name", label: "Name" },
        { key: "role", label: "Role" },
        { key: "status", label: "Status" },
    ]}
    rows={[
        { name: "Alice", role: "Engineer", status: "Active" },
        { name: "Bob", role: "Designer", status: "Away" },
    ]}
/> 

API

DataTable

Prop	Type	Default
variant	`"flat" \| "outlined" \| "ghost"`	`"flat"`
palette	`"accent" \| "tone" \| "neutral"`	`"tone"`
size	`"sm" \| "md" \| "lg"`	`"md"`
elevation	`"none" \| "subtle" \| "hard"`	`"none"`
rounded	`boolean`	`false`
columns	`Column[]`	`—`
rows	`Record<string, any>[]`	`—`

Prop variant

Type "flat" | "outlined" | "ghost"

Default "flat"

Prop palette

Type "accent" | "tone" | "neutral"

Default "tone"

Prop size

Type "sm" | "md" | "lg"

Default "md"

Prop elevation

Type "none" | "subtle" | "hard"

Default "none"

Prop rounded

Type boolean

Default false

Prop columns

Type Column[]

Default —

Prop rows

Type Record<string, any>[]

Default —

Column

Property	Type	Required
key	`string`	yes
label	`string`	yes
cell	`Snippet<[any]>`	no

Property key

Type string

Required yes

Property label

Type string

Required yes

Property cell

Type Snippet<[any]>

Required no