Data components

DataTable Link to DataTable

A sortable table with skeleton loading rows, custom cells and an accessible caption.

Live demo

Team members
			Status
OSOmar Saleh	Engineering	12	Active
YKYousef Karim	Engineering	9	Active
LHLina Haddad	Design	7	Active
SNSara Nasser	Product	4	Away
MFMaya Fares	Design	3	Active

Props

Prop	Type	Description
`columns`	`DataColumn<T>[]`	{ key, label, sortable?, align?, render?, sortValue? }.
`rows`	`T[]`	Data.
`loading / loadingRows`	`boolean / number`	Skeleton rows while loading.
`defaultSort / onSortChange`	`{ key, direction }`	Initial sort and change callback.
`remote`	`boolean`	Sort on the server — the table only reports changes.
`caption`	`string`	Table name for screen readers.

Accessibility

DataTable keyboard support
Key	Action
`Tab`	Moves between sortable column headers
`Enter` / `Space`	Toggles the sort on the focused header

DataTable · React

<DataTable
  caption="Team members"
  rows={members}
  loading={isLoading}
  columns={[
    { key: 'name', label: 'Name', sortable: true },
    { key: 'projects', label: 'Projects', sortable: true, align: 'end' },
    { key: 'status', label: 'Status', render: (m) => <Badge>{m.status}</Badge> },
  ]}
/>

DataTable · Vue

<DataTable caption="Team members" :rows="members" :loading="isLoading"
  :columns="[{ key: 'name', label: 'Name', sortable: true },
             { key: 'projects', label: 'Projects', sortable: true, align: 'end' }]">
  <template #cell-name="{ row }"><strong>{{ row.name }}</strong></template>
</DataTable>

DataTable · Svelte

<DataTable rows={members} loading={isLoading}
  columns={[{ key: 'name', label: 'Name', sortable: true },
            { key: 'projects', label: 'Projects', sortable: true, align: 'end' }]} />

DataTable · Astro

<DataTable caption="Team members" rows={members}
  sort={{ key: Astro.url.searchParams.get('sort') ?? 'name', direction: 'asc' }}
  sortHref="?sort={key}&dir={dir}"
  columns={[{ key: 'name', label: 'Name', sortable: true }]} />

DataTable · React Native

<DataTable rows={members} loading={isLoading}
  columns={[{ key: 'name', label: 'Name', sortable: true, width: 160 },
            { key: 'projects', label: 'Projects', sortable: true, align: 'end' }]} />

Tree Link to Tree

Hierarchical data with expand/collapse, single, multiple or checkbox selection, filtering and lazy loading.

Live demo

src
- components
- App.tsx
- main.tsx
public
remote (lazy)
README.md

Checked: app

Props

Prop	Type	Description
`nodes`	`TreeNode[]`	{ key, label, icon?, children?, leaf? }.
`label`	`string`	Accessible name (required).
`selectionMode`	`'single' \| 'multiple' \| 'checkbox'`	Selection behaviour.
`selectedKeys / onSelectionChange`	`string[]`	Controlled selection.
`onExpand`	`(node) => TreeNode[] \| Promise`	Lazy-load children.
`filter`	`boolean`	Adds a filter box.

Accessibility

Tree keyboard support
Key	Action
`Arrow Down` / `Arrow Up`	Next / previous visible node
`Arrow Right` / `Arrow Left`	Expand or go to child / collapse or go to parent (mirrored in RTL)
`Home` / `End`	First / last node
`Enter` / `Space`	Select or check the node

ReactComing to Vue, Svelte and Angular.

Tree · React

<Tree label="Project files" selectionMode="checkbox" filter
  nodes={[{ key: 'src', label: 'src', children: [{ key: 'app', label: 'App.tsx' }] }]}
  selectedKeys={keys} onSelectionChange={setKeys} />

TreeTable Link to TreeTable

A table whose rows expand into child rows, with sortable columns.

Live demo

	Owner
Engineering	Omar	$420,000
Web platform	Yousef	$180,000
Mobile	Rami	$140,000
Infrastructure	Adam	$100,000
Design	Lina	$160,000
Operations	Sara	$90,000

Props

Prop	Type	Description
`columns`	`TreeTableColumn<T>[]`	Same shape as DataTable columns.
`nodes`	`TreeTableNode<T>[]`	{ key, data, children? }.
`caption`	`string`	Table name (required).
`defaultExpandedKeys`	`string[]`	Initially open rows.

Accessibility

TreeTable keyboard support
Key	Action
`Arrow Down` / `Arrow Up`	Move between rows
`Arrow Right` / `Arrow Left`	Expand / collapse the row
`Home` / `End`	First / last row

ReactComing to Vue, Svelte and Angular.

TreeTable · React

<TreeTable caption="Budget" nodes={budget} defaultExpandedKeys={['eng']}
  columns={[{ key: 'name', label: 'Team' }, { key: 'cost', label: 'Cost', align: 'end', sortable: true }]} />

DataView Link to DataView

Render items as a list or grid with a layout toggle, sorting and built-in pagination.

Live demo

Desk lampHome$4912 in stock
Wireless keyboardTech$89Sold out
Notebook setOffice$1540 in stock
HeadphonesTech$1295 in stock

Props

Prop	Type	Description
`items`	`T[]`	Data.
`itemTemplate`	`(item, layout, index) => ReactNode`	How each item looks.
`label`	`string`	Accessible name (required).
`layout / showLayoutToggle`	`'list' \| 'grid' / boolean`	Current layout and toggle.
`paginator / rows`	`boolean / number`	Paging.
`sortField / sortOrder`	`string / 1 \| -1`	Sorting.

Accessibility

DataView keyboard support
Key	Action
`Tab`	Moves through the layout toggle, items and paginator

ReactComing to Vue, Svelte and Angular.

DataView · React

<DataView label="Products" items={products} showLayoutToggle paginator rows={4}
  itemTemplate={(p, layout) => <ProductCard product={p} compact={layout === 'list'} />} />

Paginator Link to Paginator

Full paging control with rows-per-page, page report and jump-to-page.

Live demo

Showing: records 1–10 of 240

Props

Prop	Type	Description
`totalRecords`	`number`	Total item count.
`first / rows`	`number`	Offset and page size.
`onPageChange`	`(state) => void`	{ first, rows, page, pageCount }.
`rowsPerPageOptions`	`number[]`	Page-size dropdown.
`showCurrentPageReport / showJumpToPage`	`boolean`	Extra controls.

Accessibility

Paginator keyboard support
Key	Action
`Tab`	Move between page buttons
`Enter`	Go to the typed page number

ReactComing to Vue, Svelte and Angular.

Paginator · React

<Paginator totalRecords={240} rows={rows} first={first}
  rowsPerPageOptions={[10, 20, 50]} showCurrentPageReport showJumpToPage
  onPageChange={(s) => { setFirst(s.first); setRows(s.rows); }} />

Pagination Link to Pagination

A compact page switcher with ellipsis for long ranges.

Live demo

Page: 5

Props

Prop	Type	Description
`value`	`number`	Current page (1-based).
`pageCount`	`number`	Number of pages.
`onChange`	`(page) => void`	Called with the new page.

Accessibility

Pagination keyboard support
Key	Action
`Tab`	Move between page links

Pagination · React

<Pagination value={page} pageCount={12} onChange={setPage} />

Pagination · Vue

<Pagination v-model="page" :page-count="12" />

Pagination · Svelte

<Pagination bind:value={page} pageCount={12} />

Pagination · Astro

<Pagination page={5} pageCount={12} href="?page={page}" />

Pagination · React Native

<Pagination value={page} pageCount={12} onChange={setPage} />

VirtualScroller Link to VirtualScroller

Renders only the visible rows of very long lists, with optional lazy loading.

Live demo

10,000 rows — only the visible ones are in the DOM.

00001 · GET /api/items/0 — 200

00002 · GET /api/items/919 — 300

00003 · GET /api/items/838 — 400

00004 · GET /api/items/757 — 200

00005 · GET /api/items/676 — 300

00006 · GET /api/items/595 — 400

00007 · GET /api/items/514 — 200

00008 · GET /api/items/433 — 300

00009 · GET /api/items/352 — 400

00010 · GET /api/items/271 — 200

00011 · GET /api/items/190 — 300

Props

Prop	Type	Description
`items`	`Array<T \| undefined>`	Data (undefined = not loaded yet).
`itemTemplate`	`(item, index) => ReactNode`	Row renderer.
`itemSize / height`	`number / number \| string`	Row height and viewport height.
`onLazyLoad`	`({ first, last }) => void`	Fetch the visible range.
`label`	`string`	Accessible name (required).

Accessibility

VirtualScroller keyboard support
Key	Action
`Arrow Down` / `Arrow Up`	Move the active row
`Home` / `End`	First / last row

ReactComing to Vue, Svelte and Angular.

VirtualScroller · React

<VirtualScroller label="Log lines" items={lines} itemSize={36} height={280}
  itemTemplate={(line, i) => <span>{i + 1}. {line}</span>} />

OrderList Link to OrderList

Reorder a list with buttons or the keyboard.

Live demo

Order: Fix login bug → Ship dark mode → Write release notes → Update dependencies → Plan Q3 roadmap

Props

Prop	Type	Description
`value / onChange`	`T[]`	Items in order.
`getKey / getLabel`	`(item) => Key / string`	Identity and announced name.
`header`	`string`	List title (required).
`itemTemplate`	`(item) => ReactNode`	Custom row.

Accessibility

OrderList keyboard support
Key	Action
`Arrow Down` / `Arrow Up`	Move focus
`Space` / `Enter`	Select the focused item
`Alt + Arrow Up` / `Alt + Arrow Down`	Move the selected item up / down
`Alt + Home` / `Alt + End`	Move it to the top / bottom

ReactComing to Vue, Svelte and Angular.

OrderList · React

<OrderList header="Priorities" value={items} onChange={setItems}
  getKey={(i) => i.id} getLabel={(i) => i.name} />

PickList Link to PickList

Move items between two lists — available and selected.

Live demo

Team: Noor

Props

Prop	Type	Description
`value / onChange`	`{ source: T[]; target: T[] }`	Both lists.
`getKey / getLabel`	`(item) => Key / string`	Identity and announced name.
`sourceHeader / targetHeader`	`string`	List titles.

Accessibility

PickList keyboard support
Key	Action
`Arrow Down` / `Arrow Up`	Move focus within a list
`Enter` / `Space`	Select the focused item
`Tab`	Reach the transfer buttons

ReactComing to Vue, Svelte and Angular.

PickList · React

<PickList value={lists} onChange={setLists} getKey={(p) => p.id} getLabel={(p) => p.name}
  sourceHeader="Available" targetHeader="On the team" />

OrganizationChart Link to OrganizationChart

A top-down tree for org charts and hierarchies, with selection and collapsing.

Live demo

Selected: none

Props

Prop	Type	Description
`value`	`OrgChartNode`	Root { key, label, children? }.
`label`	`string`	Accessible name (required).
`selectionMode`	`'single' \| 'multiple'`	Selectable nodes.
`collapsible`	`boolean`	Allow hiding branches.
`nodeTemplate`	`(node) => ReactNode`	Custom node card.

Accessibility

OrganizationChart keyboard support
Key	Action
`Arrow keys`	Move between parent, children and siblings
`Enter` / `Space`	Select the node

ReactComing to Vue, Svelte and Angular.

OrganizationChart · React

<OrganizationChart label="Company structure" collapsible selectionMode="single"
  value={{ key: 'ceo', label: 'CEO', children: [{ key: 'cto', label: 'CTO' }, { key: 'cfo', label: 'CFO' }] }} />

Timeline Link to Timeline

Events in vertical, horizontal or alternating layouts, with status markers, icons or avatars, relative times, date groups, expandable details and a progress connector.

The rich options (layouts, dates, details) are React-only for now; other frameworks render the classic vertical timeline.

Live demo

Yesterday

6:12 PM (Oct 15, 2026, 6:12 PM)
Order placed (completed)
3 items · $128.00
7:12 PM (Oct 15, 2026, 7:12 PM)
Payment confirmed (completed)

Today

3h ago (Oct 16, 2026, 6:12 PM)
Lina Haddad: Shipped from Amman (current)
Packed by Lina
Out for delivery

Props

Prop	Type	Description
`items`	`TimelineItem[]`	{ title, description?, time?, date?, status?, variant?, icon?, avatar?, details?, meta? }.
`layout`	`'vertical' \| 'horizontal' \| 'alternate'`	Horizontal and alternate fall back to vertical in narrow containers.
`relative / locale / now`	`boolean / string / Date`	"2h ago" labels with the full date in the tooltip.
`groupBy`	`'day' \| 'month' \| (item) => string`	Date headings (Today, Yesterday…).
`loading`	`boolean`	Skeleton while data loads.
`reveal`	`boolean`	Fade items in on scroll (off with reduced motion).

Accessibility

Timeline keyboard support
Key	Action
`Enter` / `Space`	Show or hide the details of an item (on its toggle)

Timeline · React

<Timeline relative groupBy="day" items={[
  { title: 'Order placed', date: placedAt, status: 'complete', icon: <CartIcon /> },
  { title: 'Shipped', date: shippedAt, status: 'current', details: <Tracking id="1Z999" /> },
  { title: 'Delivered', status: 'upcoming' },
]} />

Timeline · Vue

<Timeline :items="events" />

Timeline · Svelte

<Timeline items={events} />

Timeline · Astro

<Timeline items={events} />

Timeline · React Native

<Timeline items={events} />

Accessibility

Theme

Contrast & color

Text

Reading aids

Motion & media

Interaction

Sound

DataTable #Link to DataTable

Props

Accessibility

Code

Tree #Link to Tree

Props

Accessibility

Code

TreeTable #Link to TreeTable

Props

Accessibility

Code

DataView #Link to DataView

Props

Accessibility

Code

Paginator #Link to Paginator

Props

Accessibility

Code

Pagination #Link to Pagination

Props

Accessibility

Code

VirtualScroller #Link to VirtualScroller

Props

Accessibility

Code

OrderList #Link to OrderList

Props

Accessibility

Code

PickList #Link to PickList

Props

Accessibility

Code

OrganizationChart #Link to OrganizationChart

Props

Accessibility

Code

Timeline #Link to Timeline

Yesterday

Today

Props

Accessibility

Code

DataTable Link to DataTable

Tree Link to Tree

TreeTable Link to TreeTable

DataView Link to DataView

Paginator Link to Paginator

Pagination Link to Pagination

VirtualScroller Link to VirtualScroller

OrderList Link to OrderList

PickList Link to PickList

OrganizationChart Link to OrganizationChart

Timeline Link to Timeline