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}
/>

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.