DryUI — Human-led, agent-assisted UI

				Status
Northstar	Enterprise	240	$4,200	Active
Orbit Labs	Growth	48	$2,180	Trial
Mosaic	Starter	12	$480	Paused
Signal Works	Enterprise	312	$3,610	Active

Accessibility

Styled quick start

Copy this entrypoint first. It includes the imports required to get the component on screen.

svelte

<script lang="ts">
  import '@dryui/ui/themes/default.css';
  import '@dryui/ui/themes/dark.css';
  import { DataGrid } from '@dryui/ui';
</script>

<DataGrid.Root items={rows} pageSize={10}>
  <DataGrid.Table>
    <DataGrid.Header>
      <DataGrid.Row>
        <DataGrid.Column key="name" sortable>Name</DataGrid.Column>
        <DataGrid.Column key="status">Status</DataGrid.Column>
      </DataGrid.Row>
    </DataGrid.Header>
    <DataGrid.Body>
      {#snippet children({ items })}
        {#each items as row (row.id)}
          <DataGrid.Row rowId={row.id}>
            <DataGrid.Cell>{row.name}</DataGrid.Cell>
            <DataGrid.Cell>{row.status}</DataGrid.Cell>
          </DataGrid.Row>
        {/each}
      {/snippet}
    </DataGrid.Body>
  </DataGrid.Table>
  <DataGrid.Pagination />
</DataGrid.Root>

Import options

Root package

import { DataGrid } from '@dryui/ui'

Per-component subpath

import { DataGrid } from '@dryui/ui/data-grid'

API

Props, CSS variables, and the public data attributes you can target when styling.

Prop	Type	Description	Default	Required	Bindable
DataGrid.Root
striped	boolean	—	false	—	—
items	T[]	—	—	✓	—
pageSize	number	—	10	—	—
selectable	boolean	—	false	—	—
onSelectionChange	(selected: string[]) => void	—	—	—	—
actionBar	Snippet<[{ selectedCount: number; clearSelection: () => void }]>	—	—	—	—
children	Snippet	Content rendered inside the component.	—	✓	—
DataGrid.Table
children	Snippet	Content rendered inside the component.	—	✓	—
DataGrid.Header
children	Snippet	Content rendered inside the component.	—	✓	—
DataGrid.Column
key	string	—	—	✓	—
sortable	boolean	—	—	—	—
filterable	boolean	—	—	—	—
pinned	boolean	—	—	—	—
resizable	boolean	—	—	—	—
header	Snippet	—	—	—	—
children	Snippet	Content rendered inside the component.	—	✓	—
DataGrid.Body
children	Snippet<[{ items: T[]; page: number }]>	Content rendered inside the component.	—	✓	—
DataGrid.Row
rowId	string	—	—	—	—
children	Snippet	Content rendered inside the component.	—	✓	—
DataGrid.Cell
children	Snippet	Content rendered inside the component.	—	✓	—
DataGrid.Pagination
children	Snippet< [ { page: number; totalPages: number; totalItems: number; pageSize: number; canPrevious: boolean; canNext: boolean; previous: () => void; next: () => void; goto: (page: number) => void; } ] >	Content rendered inside the component.	—	—	—
DataGrid.SelectAll
DataGrid.SelectCell
rowId	string	—	—	✓	—
rowLabel	string	—	—	—	—
DataGrid.ExpandableRow
rowId	string	—	—	✓	—
expandable	Snippet	—	—	✓	—
children	Snippet	Content rendered inside the component.	—	✓	—
DataGrid.ExpandTrigger
rowId	string	—	—	✓	—
children	Snippet	Content rendered inside the component.	—	—	—

API

DataGrid.Root

DataGrid.Table

DataGrid.Header

DataGrid.Column

DataGrid.Body

DataGrid.Row

DataGrid.Cell

DataGrid.Pagination

DataGrid.SelectAll

DataGrid.SelectCell

DataGrid.ExpandableRow

DataGrid.ExpandTrigger