@trendmicro/react-table

React Table component

Showing:

Popularity

Downloads/wk

399

GitHub Stars

24

Maintenance

Last Commit

2yrs ago

Contributors

4

Package

Dependencies

4

Size (min+gzip)

27.7KB

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

Readme

react-table build status Coverage Status

NPM

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

NameTypeDefaultDescription
minimalistBooleanfalseSpecify whether the table should not be bordered.
columnsObject[][]The columns config of table, see Column below for details.
dataObject[][]Data record array to be rendered.
emptyRenderFunction() => { return 'No Data'; }Empty content render function.
emptyTextString'No Data'The text when data is null.
heightNumberThe height of the table.
loadingBooleanfalseWhether table is loading.
loaderRenderFunctionLoading content render function.
widthNumber(required)The width of the table.

TableHeaderCell

NameTypeDefaultDescription
widthNumber(required)The width of the table.

TableCell

NameTypeDefaultDescription
widthNumber(required)The width of the table.

TableTemplate

NameTypeDefaultDescription
minimalistBooleanfalseSpecify whether the table should not be bordered.
columnsObject[][]The columns config of table, see Column below for details.
dataObject[][]Data record array to be rendered.
emptyRenderFunction() => { return 'No Data'; }Empty content render function.
emptyTextString'No Data'The text when data is null.
heightNumberThe height of the table.
hideHeaderBooleanfalseWhether table head is hiden.
hoverableBooleanfalseWhether use row hover style.
loadingBooleanfalseWhether table is loading.
loaderRenderFunctionLoading content render function.
useFixedHeaderBooleanfalseWhether table head is fixed.
widthNumber(required)The width of the table.

Column

NameTypeDefaultDescription
titleReact Node or Function(): React NodeTitle of this column.
dataKeyStringDisplay field of the data record.
widthString or Number150Width of the specific proportion calculation according to the width of the columns.
renderFunction(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

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100