Table Component
About
This is a component published as its own package from our component library monorepo: https://github.com/BenefitsDataTrust/ui-components. Setup instructions, as well as higher-level goals and concerns can be found from the main project README.
Description
Handles display of table according to style guide conventions.
API
Table API
| prop | type | required | default | explanation |
|---|---|---|---|---|
| className | string | no | n/a | Adds an optional className to the main component container |
| maxHeightForScroll | number | no | false | Allows setting a max height for table scrolling behavior |
| columns | array(object) | yes | no | The array of column objects that allow us to set up the table according to number of columns and specify further options on a per-column basis |
| rows | array(object) | yes | no | Data to display as table rows consisting of an array of objects where the keys should match the accessor for the appropriate column data |
| updateColumnsPostSort | function(column) | no | n/a | Callback function to run after a column sort has been completed. This is useful for issuing changes to column prop data that should change after sorting, like sort direction |
Column API
| prop | type | required | default | explanation |
|---|---|---|---|---|
| accessor | string | yes | n/a | Determines id for row data |
| isActive | boolean | no | false | Determines if the column is in "active" state, which is useful for UI indications, like sorting |
| isSortable | boolean | no | false | Determines if the column allows sorting |
| sortRows | function(column) | no | undefined | The sorting function to run over the data in a given column |
| sortDirection | enum(1, -1) | no | 1 | Determines initial sort direction if using sorting (follows js sort behavior) |
| Cell | React component | no | n/a | Allows specifying a custom cell for the column. Gets passed the row value |
| Header | React component | no | n/a | Allows specifying a custom column header. Gets passed the column object |