Table components for Reactabular
npm install reactabular-tableReactabular provides three components: Table.Provider, Table.Header, and Table.Body. Table.Provider sets the data context. It may contain multiple Table.Header and Table.Body elements. You can control data per body while the provider maintains a shared column definition.
Table.ProviderTable.Provider is the core of Reactabular. It sets up a context and maps the column definition to its children components. The following example illustrates the basic idea.
``jsx
/*
import * as Table from 'reactabular-table';
*/
const rows = [
{
id: 100,
name: 'Adam',
dad: 'John',
lovesBeeGees: true
},
{
id: 101,
name: 'Brian',
dad: 'George',
lovesBeeGees: false
},
];
const columns = [
{
property: 'name',
header: {
label: 'Name'
}
},
{
property: 'dad',
header: {
label: 'Dad'
}
}
];
columns={columns}
>
`
Table.Header renders a table header within a Table.Provider context.
`react
columns={columns}
>
`
It is possible to customize a header by passing child components to it. This way you can implement filtering per column for instance.
Here search.Columns injects an additional row for the filter controls. An alternative way to handle it would be to push the problem to the column definition.
`react
columns={columns}
>
columns={columns}
onChange={value => console.log('new value', value)}
/>
`
Table.Body renders table rows within a Table.Provider context. It accepts either an array of objects or an array of arrays (see the Excel example). In the former case you should define a rowKey. This allows React to render in a more performant way.
Most often you'll define rowKey as a string. An alternative is to define it using a function like this: rowKey={({ rowData, rowIndex }) => rowData.nested.id}. This is useful if your key is nested or related to some other data. Another way to avoid this problem is to generate the field using reactabular-resolve and then point to that through a string.
Example:
`react
columns={columns}
>
`
Sometimes you might need to access the underlying DOM nodes for measuring etc. This can be achieved as follows:
`react
class RefTable extends React.Component {
constructor(props) {
super(props);
this.onRow = this.onRow.bind(this);
this.headerRef = null;
this.bodyRef = null;
}
render() {
return (
this.headerRef = header && header.getRef();
}}
/>
this.bodyRef = body && body.getRef();
}}
rows={rows}
rowKey="id"
onRow={this.onRow}
/>
);
}
onRow(row, { rowIndex, rowKey }) {
return {
onClick: () => console.log(this.headerRef, this.bodyRef)
};
}
}
`
and Table.Body RowsIt is possible to customize body behavior on a row level. onRow prop accepts function (row, { rowIndex, rowKey }) => ({...}) that allows you to set custom attributes per each row.
`react
class CustomTable extends React.Component {
render() {
return (
columns={columns}
>
/>
rowKey="id"
onRow={this.onBodyRow}
/>
);
}
onHeaderRow(row, { rowIndex }) {
return {
onClick: () => console.log('clicked header row', row)
};
}
onBodyRow(row, { rowIndex, rowKey }) {
return {
onClick: () => console.log('clicked body row', row)
};
}
}
`
It's a good idea to define a possible row handler separately to avoid binding per each render. If you write the handler inline, it will bind each time render() is called and reduce performance slightly.
FooterIt is possible to inject a custom footer like this:
`react
columns={columns}
>