Please review the code for comments around the structure of the columns array that will be passed to the DataTable component.
A very basic version of search has been added. This could be modified to pass custom filter/search functions through to be used.
Pagination
To add pagination information and actions below the table, make use of the
DataTable.Pagination component which supports three slots:
DataTable.Pagination.PageCount- Text showing the how far the table is paged (1 - 10 of 34)DataTable.Pagination.PerPageSelect- Select how many records to show at a time (10 per page)DataTable.Pagination.Navigation- Buttons for paging forward and backward
Any of these can be omitted as needed. For instance, the PageCount could be omitted if
using cursor-based pagination where you wouldn't have current page number.
Totals row
To display a totals row at the bottom of the table, pass a totals object with values keyed by column accessor (column id or camelCased header). The first column will automatically display "Total" as its label.
If your columns have custom cell renderers, they will be used to format the totals values as well.
Row expansion
Row expansion is automatically enabled when your data includes a subRows array in each row/object of the data prop you pass to the table.
The expand button will only appear for rows that have non-empty subRows arrays.
Row selection
Row selection is enabled when you pass the prop selectableRows={true} to the table.
You should define rowSelection and setRowSelection from the caller.
rowSelection is an object using the index of each row as the identifier, so if you have the first and third row selected,
rowSelection will be {0: true, 2: true}
Row selection with expandable rows
Row selection and row expansion can be combined. The checkbox column appears first, followed by the expand button in the first data column.