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