DataTable
An advanced React table that supports filtering, sorting, and pagination out of the box.
Usage
The DataTable component is a powerful, flexible table that provides advanced features like sorting, filtering, grouping, and server-side data handling.
DataTable Props
Prop | Type | Default |
---|---|---|
columns | any[] | - |
data | T[] | - |
mode | "client" | "server" | "client" |
isLoading | boolean | false |
defaultSort | any | - |
query | DataTableQuery | - |
onTableQueryChange | (query: DataTableQuery) => void | - |
onLoadMore | () => Promise<void> | - |
DataTableQuery Interface
Prop | Type | Default |
---|---|---|
filters | { name: string; operator: FilterOperatorTypes; value: any; }[] | - |
sort | { key: string; order: "asc" | "desc"; }[] | - |
group_by | string[] | - |
search | string | - |
DataTableColumn Interface
Prop | Type | Default |
---|---|---|
accessorKey | string | - |
header | string | - |
columnType | "number" | "text" | "date" | "select" | - |
enableSorting | boolean | - |
enableColumnFilter | boolean | - |
enableHiding | boolean | - |
enableGrouping | boolean | - |
filterOptions | FilterSelectOption[] | - |
defaultHidden | boolean | - |
Examples
You can check live DataTable here.
Column Configuration
Columns can be configured with various options:
Filtering
The DataTable supports multiple filter types:
Filter types:
- Text: equals, not equals, contains,
- Number: equals, not equals, less than, less than or equal, greater than, greater than or equal
- Date: equals, not equals, before, on or before, after, on or after
- Select: equals, not equals
Sorting
Enable column sorting:
Grouping
Group rows by same column data: