# @trendmicro/react-table > Trend Micro Components: React Table Latest version **2.0.2** (published 2020-01-21) · MIT license · 0 weekly downloads ## Install ```sh npm install @trendmicro/react-table pnpm add @trendmicro/react-table yarn add @trendmicro/react-table bun add @trendmicro/react-table ``` ## Health **Score 15/100 (F)** — status: abandoned. Positive: no vulnerabilities. Warnings: low downloads; no types; no esm support. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 2.0.2 | | Published | 2020-01-21 | | First published | 2017-03-03 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | none | | Module format | CommonJS | | Dependencies | 4 | | Unpacked size | 100.9 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 24 | | Author | Tina C Lin | | Maintainers | cheton, rothpeng, smalltase, trendmicro-frontend | | Keywords | react, react-table | ## Links - npm: https://www.npmjs.com/package/@trendmicro/react-table - Repository: https://github.com/trendmicro-frontend/react-table - Issues: https://github.com/trendmicro-frontend/react-table/issues - npm.io page: https://npm.io/package/@trendmicro/react-table ## Dependencies (4) - [lodash.get](https://npm.io/package/lodash.get.md) ^4.4.2 - [prop-types](https://npm.io/package/prop-types.md) ^15.5.8 - [styled-components](https://npm.io/package/styled-components.md) ^5.0.0 - [react-custom-scrollbars](https://npm.io/package/react-custom-scrollbars.md) ^4.2.1 ## Alternatives - [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads - [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads - [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads - [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads - [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads ## Recent versions - 2.0.2 (latest) — 2020-01-21 - 0.7.4 (hotfix/0.7.4) — 2017-12-27 - 2.0.1 — 2019-12-06 - 2.0.0 — 2019-12-06 - 1.0.1-alpha.2 — 2018-09-18 - 1.0.0-alpha.2 — 2018-09-18 - 1.0.1-alpha.1 — 2018-09-14 - 1.0.0-alpha.1 — 2018-08-28 - 1.0.0-alpha — 2018-08-21 - 0.9.0 — 2018-01-28 - 0.8.4 — 2018-01-03 - 0.8.3 — 2018-01-03 - 0.8.2 — 2017-12-27 - 0.8.1 — 2017-12-21 - 0.8.0 — 2017-12-19 - … 34 more at https://npm.io/package/@trendmicro/react-table/versions ## README # react-table [![build status](https://travis-ci.org/trendmicro-frontend/react-table.svg?branch=master)](https://travis-ci.org/trendmicro-frontend/react-table) [![Coverage Status](https://coveralls.io/repos/github/trendmicro-frontend/react-table/badge.svg?branch=master)](https://coveralls.io/github/trendmicro-frontend/react-table?branch=master) [![NPM](https://nodei.co/npm/@trendmicro/react-table.png?downloads=true&stars=true)](https://nodei.co/npm/@trendmicro/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](https://github.com/facebook/react) and [react-table](https://github.com/trendmicro-frontend/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: ```js import TableTemplate, { TableWrapper, TableHeader, TableBody, TableRow, TableCell, TableHeaderCell } from '@trendmicro/react-table'; ``` ## Usage ### Table Template ```js ``` ### Custom render ```js {({ cells, data, loader, emptyBody, tableWidth }) => { return ( { cells.map((cell, index) => { const key = `table_header_cell_${index}`; const { title, width: cellWidth, } = cell; return ( { title } ); }) } { data.map((row, index) => { const rowKey = `table_row${index}`; return ( { cells.map((cell, index) => { const key = `${rowKey}_cell${index}`; const cellValue = _get(row, cell.dataKey); return ( { typeof cell.render === 'function' ? cell.render(cellValue, row, index) : cellValue } ); }) } ); }) } ); }} ``` ## 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 --- _Source: https://npm.io/package/@trendmicro/react-table · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._