Table Factory

An easy to use table factory for React.

How to install

npm install table-factory

How to use?

A quick example:

const rows = [
  {id: 1, name: 'Foo', age: 34},
  {id: 2, name: 'Bar', age: 1337}
]

<TableFactory
  id='id'
  columns={{
    id: '#',
    name: 'Name',
    age: 'Age'
  }}
  data={rows}
/>

More examples can be found in examples.

API

Props

All props except data are optional. But when no columns prop is given the alternative columns specification should be given.

<TableFactory
  onRowClick={(event, row) => void} // when <tr> inside the <tbody> is clicked
  header={bool} // show thead yes or not
  id={string} // use this property of the data for the React key for the <tr>'s
  columns={objectOrArray} // specify columns
  elemProps={object} // specify elem specific props (e.g. a class for a <tr>)
  data={array} // list of row objects
/>

columns

The columns prop is either an array of column objects (with a name prop) or an object where the key is the name of the column, and the value the column object. In the second case it's also possible to specify a string as the column object, which will be translated to column object with the title set.

An example:

const columnsArray = [
  {name: 'id', title: '#'},
  {name: 'name': title: 'Name'}
]
const columnsObject = {
  id: '#',
  name: {title: 'Name'}
}

For each column the following props are supported:

Prop	Description
name	column name
title	column title
props	props that should be applied on the `<th>` and the `<td>` of the column
thProps	props that should be applied on the `<th>` of the column
tdProps	props that should be applied on the `<td>` of the column
render	a function to render the contents of the `<td>`, when discarded the value for 'name' of the row will be used

The render function has the following signature: (row, col, index, data, columns) => any.

elemProps

The prop elemProps is an object where the keys are either: 'table', 'thead', 'tbody', 'tr', 'th' or 'td'. The values are either objects which specify the props of the element or a callback function which should return an object. The arguments for the callback function vary per element type. The signatures are as following:

Element type	Arguments
table	array data, object columns
thead	array data, object columns
tbody	array data, object columns
tr	bool header, object\|null row, int index, array data, object columns
th	object column, array data, object columns
td	object column, object row, int index, array data, object columns

Alternative Columns Specification

It's also possible to specify columns using <th> children. Every sub <th> inside the <TableFactory> should have at least the prop name. This will be the name of the column. All other props on the element will be used like the props in the columns prop. The contents of the <th> will be title.