@trendmicro/react-table

    2.0.2 • Public • Published

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

    Install

    npm i @trendmicro/react-table

    DownloadsWeekly Downloads

    391

    Version

    2.0.2

    License

    MIT

    Unpacked Size

    103 kB

    Total Files

    5

    Last publish

    Collaborators

    • trendmicro-frontend
    • cheton
    • rothpeng
    • smalltase