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