@softledger/sl-table

SLTable

From src/SLTable.jsx

Extension of react-table to simplify for our standard use case

prop	type	default	required	description
SubComponent	Function		❌	Subcomponent to display when a table is expanded
columns	Array		✅	array describing how to display each key in data see react-table for full description
columns[].customFilter	*		❌	custom filter defined per react-table
columns[].myFilter	Enum('Integer','Number','Date','StringAsInt','Text')		❌	Predefined filter to use, defaults to 'Text';
data	Array		❌	array of objects to display in the table
defaultSorted	Array		❌	default column to sort by
fetchData	Function		✅	function to be called when we need to fetch new data ie, when page/limit is changed or filtered
getReport	Function		❌	function which will return a csv of the data if blank, will hide menu buttons
onSaveTableFields	Function		❌	callback which returns all visible headers useful to store default headers
pageSize	Number		❌	number of items to show per page
pages	Number		❌	total # of pages
showMenu	Boolean	true	❌	whether or not to display the column toggle menu
showOverflow	Boolean	false	❌	true will allow inputs such as dropdowns etc to show

SelectTable

From src/SelectTable.jsx

Extension of react-table to simplify for our standard use case

prop	type	default	required	description
SubComponent	Function		❌	Subcomponent to display when a table is expanded
columns	Array		✅	array describing how to display each key in data see react-table for full description
columns[].customFilter	*		❌	custom filter defined per react-table
columns[].myFilter	Enum('Integer','Number','Date','StringAsInt','Text')		❌	Predefined filter to use, defaults to 'Text';
data	Array		❌	array of objects to display in the table
defaultSorted	Array		❌	default column to sort by
fetchData	Function		✅	function to be called when we need to fetch new data ie, when page/limit is changed or filtered
getReport	Function		❌	function which will return a csv of the data if blank, will hide menu buttons
keyField	String	'_id'	✅	column index to store in selection set
onSaveTableFields	Function		❌	callback which returns all visible headers useful to store default headers
pageSize	Number		❌	number of items to show per page
pages	Number		❌	total # of pages
renderButton	Function		✅	function which returns a button, called with selection set this.props.renderButton(selection)
selectionColor	String	'inherit'	❌	css color to highlight row when selected
showMenu	Boolean	true	❌	whether or not to display the column toggle menu
showOverflow	Boolean	false	❌	true will allow inputs such as dropdowns etc to show

SimpleTable

From src/SimpleTable.jsx

prop	type	default	required	description
SubComponent	Function		❌
columns	Array		✅
data	Array		❌
defaultSorted	Array		❌
loading	Boolean		❌
reportFileName	String		❌
showMenu	Boolean		❌