A React Component that takes a collection and presents it as an un-opiniated table. Customisable with onClick actions, data transformations and className selectors via config passed as props. By default, allows for column sorting.
const headers = ['header1', 'header2', 'header3'];
const rowData = [
{ header1: 1, header2: 2, header3: 3 },
{ header1: 1, header2: 2, header3: 3 },
];
<DataTable
headers={headers}
rowData={rowData}
/>
Property | Description |
---|---|
headers |
Array of strings that can access key values in the rowData |
rowData |
An array of objects containing the data |
specialRowData |
Object containing an additional row of data to be displayed separately |
transformations |
Config object that changes the displayed cell value without affecting the data. |
actions |
Config object that attaches a given onClick handler to a cell |
selectors |
Config object that assigns class names to the cell |
A config object passed as a prop to the DataTable can allow special behaviour for any specified header for headers, rows and the specialRow. In the following example, if the header is header1
, then special behaviour can be specified by the given function:
const configObj = {
headers: {
header1: (headers, header) => {}
},
rows: {
header1: (row, header, rowIndex) => {}
},
specialRow: {
header1: (row, header) => {}
}
}
A transformations
prop can change the displayed cell value without affecting the data.
Useful for setting default fallback or threshold values.
const transformations = {
rows: {
header1: row => !isNaN(row.header1) ? row.header1 : '-',
},
};
An actions
prop can attach an onClick handler to a cell.
const actions = {
rows: {
header1: (row, header) => { alert(`${row.header} has been clicked!`) },
},
};
A selectors
prop can assign a class name to a cell.
Useful for allowing conditional styling of cells containing particular values.
const selectors = {
rows: {
header1: row => row.header1 > 1 ? 'greater-than-one' : '',
},
};
To see a working example, build using npm run example
then open example/dist/template.html
in a browser.