Data Table

A table with sorting, filtering, pagination and row selection.

Import

tsx

import { DataTable } from "@indoku/ui"

Examples

Basic usage

Select all rows on this page
Select row: INV001	INV001	paid	ken99@example.com	$250.00
Select row: INV002	INV002	pending	abe45@example.com	$150.00
Select row: INV003	INV003	failed	monserrat44@example.com	$350.00
Select row: INV004	INV004	paid	silas22@example.com	$450.00
Select row: INV005	INV005	paid	carmella@example.com	$550.00

tsx

function DataTableDemo() {  return (    <DataTable.Root data={invoices} columns={invoiceColumns} getRowId={(row) => row.id} pageSize={5} selectable>      <DataTable.Toolbar>        <DataTable.Search />        <DataTable.ColumnToggle />      </DataTable.Toolbar>      <DataTable.Table />      <DataTable.Pagination />    </DataTable.Root>  )}

Props

Root

Prop	Type	Default	Description
`data*`	`T[]`	–
`columns*`	`DataTableColumn<T>[]`	–
`getRowId`	`(row: T, index: number) => string`	–	Unique id of each row (used for selection). Defaults to the index in `data`.
`pageSize`	`number`	–
`defaultSort`	`SortState`	–
`selectable`	`boolean`	–
`onSelectionChange`	`(rows: T[]) => void`	–
`labels`	`Partial<DataTableLabels>`	–
`children`	`ReactNode`	–

* required. Style props and HTML attributes are accepted as well.

← Direction Overview →

Created by @indokudev