datatable

children
Not required
arrayOf/node
columns
Required
object[ ]
data
Required
object[ ]
search
Not required
any
null
selectableRows
Not required
bool
false
rowSelection
Not required
object
{}
setRowSelection
Not required
func
() => {}
formatSelectableRowLabel
Not required
func
() => {}
paginateExpandedRows
Not required
bool
false
options
Not required
object
{}
defaultColumnSizing
Not required
bool
false

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.

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 be disabled for rows with an empty subRows array.

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}