Table API
API reference docs for theTablecomponent. For examples and details on the usage of this component, visit the component demo page.
Props
| Props | Type | Definition | Default |
|---|---|---|---|
role | 'table'|'grid' | The role attribute of the table . Use 'grid' for interactive tables that have buttons, links, or other interactive elements. | table |
data | Array | The dataset for the table.Each item in the array represents a row in the table and can be either an object or a primitive value. | _ |
columns | Array | The columns of the table. Each column is represented by a ColumnDef object, which specifies properties such as the header, accessor, and other column configurations. | _ |
pagination? | PaginationConfig | Configuration to control the pagination behavior of the table. See Pagination Configuration section below for detailed properties. | _ |
emptyTemplate? | ReactNode | Fallback template to render inside the table body when there is no data available. | _ |
|
| Sorting is enabled by default for the table. To disable sorting for the entire table, set this prop to Note: You can also disable sorting for specific columns by setting this in the column definition for the required columns. | _ |
sortDescFirst? | boolean | For numbers, the default sorting direction is DESC, while for strings, it is ASC. To apply the same sorting order (DESC) to strings as well, set this prop to true. This will make the first sorting direction DESC for all columns on the first click. | false |
sortingFns? | Record<string, SortingFn> | Custom sorting functions for the table. The key is the column accessor and the value is the sorting function. | _ |
isLoading? | boolean | Shows a loading indicator in the table body while keeping header and pagination visible. Useful for server-side data fetching scenarios to maintain visual stability. | false |
Pagination Configuration
When the pagination prop is provided, it accepts a PaginationConfig object with the following properties:
| Property | Type | Description | Default |
|---|---|---|---|
pageSize? | number | Number of rows to be displayed per page. | 10 |
pageIndex? | number | Initial page index (0-based). | 0 |
manualPagination? | boolean | When true, the table will not automatically paginate data. You will need to manually control pagination via onPaginationChange callback. This is useful for server-side pagination. | false |
rowCount? | number | The total number of rows across all pages (for server-side pagination). When provided, enables "Showing X to Y out of Z" format. When not provided, shows "Showing X to Y" format. | _ |
displayFormat? | 'detailed' | 'compact' | Display format for pagination info. 'detailed' shows "Showing X to Y out of Z" (default), 'compact' shows "X/Y" (current page / total pages). | 'detailed' |
onPaginationChange? | (pageIndex: number, pageSize: number) => void | Callback function called when pagination state changes. Required for server-side pagination when manualPagination is true. | _ |