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.

• https://zeroheight.com/990ea04ab/p/31ffa9-table

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 |