@bdt-component-library/table NPM

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