react-table 
React Table
Demo: https://trendmicro-frontend.github.io/react-table
Version 1.x is no longer maintained by 2019/12/06
[Friendly reminder] Please migrate to 2+ asap.
Installation
- Install the latest version of react and react-table:
npm install --save react @trendmicro/react-table @trendmicro/react-paginations
- At this point you can import
@trendmicro/react-table and its styles in your application as follows:
import TableTemplate, { TableWrapper, TableHeader, TableBody, TableRow, TableCell, TableHeaderCell } from '@trendmicro/react-table';
Usage
Table Template
<TableTemplate
hoverable
useFixedHeader
columns={columns}
data={data}
width={500}
/>
Custom render
<TableWrapper
columns={columns}
data={data}
width={800}
height={320}
>
{({ cells, data, loader, emptyBody, tableWidth }) => {
return (
<Fragment>
<TableHeader>
<TableRow>
{
cells.map((cell, index) => {
const key = `table_header_cell_${index}`;
const {
title,
width: cellWidth,
} = cell;
return (
<TableHeaderCell
key={key}
width={cellWidth}
>
{ title }
</TableHeaderCell>
);
})
}
</TableRow>
</TableHeader>
<TableBody>
<Scrollbars
style={{
width: tableWidth
}}
>
{
data.map((row, index) => {
const rowKey = `table_row${index}`;
return (
<TableRow key={rowKey}>
{
cells.map((cell, index) => {
const key = `${rowKey}_cell${index}`;
const cellValue = _get(row, cell.dataKey);
return (
<TableCell
key={key}
width={cell.width}
>
{ typeof cell.render === 'function' ? cell.render(cellValue, row, index) : cellValue }
</TableCell>
);
})
}
</TableRow>
);
})
}
</Scrollbars>
</TableBody>
</Fragment>
);
}}
</TableWrapper>
API
Properties
TableWrapper
| Name |
Type |
Default |
Description |
| minimalist |
Boolean |
false |
Specify whether the table should not be bordered. |
| columns |
Object[] |
[] |
The columns config of table, see Column below for details. |
| data |
Object[] |
[] |
Data record array to be rendered. |
| emptyRender |
Function |
() => { return 'No Data'; } |
Empty content render function. |
| emptyText |
String |
'No Data' |
The text when data is null. |
| height |
Number |
|
The height of the table. |
| loading |
Boolean |
false |
Whether table is loading. |
| loaderRender |
Function |
|
Loading content render function. |
| width |
Number(required) |
|
The width of the table. |
TableHeaderCell
| Name |
Type |
Default |
Description |
| width |
Number(required) |
|
The width of the table. |
TableCell
| Name |
Type |
Default |
Description |
| width |
Number(required) |
|
The width of the table. |
TableTemplate
| Name |
Type |
Default |
Description |
| minimalist |
Boolean |
false |
Specify whether the table should not be bordered. |
| columns |
Object[] |
[] |
The columns config of table, see Column below for details. |
| data |
Object[] |
[] |
Data record array to be rendered. |
| emptyRender |
Function |
() => { return 'No Data'; } |
Empty content render function. |
| emptyText |
String |
'No Data' |
The text when data is null. |
| height |
Number |
|
The height of the table. |
| hideHeader |
Boolean |
false |
Whether table head is hiden. |
| hoverable |
Boolean |
false |
Whether use row hover style. |
| loading |
Boolean |
false |
Whether table is loading. |
| loaderRender |
Function |
|
Loading content render function. |
| useFixedHeader |
Boolean |
false |
Whether table head is fixed. |
| width |
Number(required) |
|
The width of the table. |
Column
| Name |
Type |
Default |
Description |
| title |
React Node or Function(): React Node |
|
Title of this column. |
| dataKey |
String |
|
Display field of the data record. |
| width |
String or Number |
150 |
Width of the specific proportion calculation according to the width of the columns. |
| render |
Function(value, record, rowIndex) |
|
The render function of cell, has two params: the text of this cell, the record of this row, it's return a react node. |
License
MIT
