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

1. Install the latest version of react and react-table:

npm install --save react @trendmicro/react-table @trendmicro/react-paginations

2. 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