Table component
- State management is done via
useTable
React hook. - Table rendering is done using
Table
component.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
|
Column definition consists of two mandatory fields: title
and render
.
fetchData property
The fetchData property is a function that retrieves data for the table. It should return a promise that resolves to an object containing rows and resultCount. The fetchData
function can be customized to fetch data from any API endpoint and transform it as needed before passing it to the table.
Example:
1 2 3 4 |
|
Export feature
Table component supports data export functionality. To enable it:
- Add
enableExport
prop to the Table component - Configure export options in column definitions:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
|
Optionally, specify exportTitle
property for columns to customize the header in the exported file:
1 2 3 4 5 6 |
|
Optional columns
Table component supports optional columns that can be toggled by users. Optional columns allow users to customize their view by showing/hiding specific columns.
- Add
hasOptionalColumns
prop to enable optional columns functionality - Configure columns with:
id
- unique column identifierkeys
- defines which fields should be requested from API (allows optimization by fetching only needed fields)optional
- mark column as optional to allow toggling- For actions column, you can specify mandatory fields that should always be fetched from API using
mandatoryFields
prop.
Example:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
|
Ordering feature
Table component supports column ordering. To enable it:
- Add
enableOrdering
prop to the Table component - Configure columns with
orderField
property to specify which field should be used for ordering
Example:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
|
When ordering is enabled, clicking on column headers will toggle between ascending and descending order.
Filters feature
Filters are defined using the filters
prop of the Table component. This prop accepts a React component that renders the filter UI.
Example:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
|
Inline filters
The feature allows users to quickly filter table data by clicking values directly in the table cells, without manually setting filters. When column has inlineFilter
property enabled:
- A filter icon appears when hovering over cells in that column
- Clicking the icon adds a filter using the cell's value
- The
inlineFilter
function transforms row data into the filter value format
Example:
1 2 3 4 5 6 7 8 9 10 |
|
Grid mode
Table component supports switching between table and grid views. In grid mode, data is displayed as cards in a responsive grid layout.
To enable grid mode:
- Add
gridItem
prop to specify the component used to render each item in grid view - Optionally customize grid layout using
gridSize
prop which accepts Bootstrap column properties - Set
initialMode
to 'grid' if you want grid view by default (table view is default)
Example:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
|