DataTable
A full-featured, column-definition driven data table with client-side sorting, row selection with indeterminate header checkbox, and pagination.
Installation
npx dafink-ui add data-tableDemo
Paginator:
| Status | ||||||
|---|---|---|---|---|---|---|
| Alice Chen | Engineer | Platform | Active | 2022-03-14 | $145,000 | |
| Bob Ruiz | Designer | Product | Away | 2021-07-01 | $130,000 | |
| Carol Smith | Engineering Mgr | Platform | Active | 2020-01-20 | $165,000 | |
| Dave Park | Data Analyst | Analytics | Active | 2023-05-10 | $120,000 | |
| Eve Torres | Designer | Product | Active | 2022-11-03 | $128,000 |
Showing 1–5 of 12
Props
| Name | Type | Default | Description |
|---|---|---|---|
| data | T[] | - | Array of data objects to display. |
| columns | ColumnDef<T>[] | - | Column definitions controlling headers, keys, sorting, and cell rendering. |
| keyField | keyof T & string | - | Property key used as a unique row identifier. |
| selectable | boolean | false | Prepends a checkbox column for row selection. |
| onSelectionChange | (selected: T[]) => void | undefined | Called with selected rows whenever selection changes. |
| pageSize | number | 10 | Rows per page. Set to 0 to show all rows. |
| emptyMessage | string | 'No data' | Text shown when data is empty. |
| className | string | '' | Additional classes on the root wrapper. |