{"id":13755495,"url":"https://github.com/trendmicro-frontend/react-table","last_synced_at":"2025-09-04T14:32:30.916Z","repository":{"id":57167658,"uuid":"83695809","full_name":"trendmicro-frontend/react-table","owner":"trendmicro-frontend","description":"React Table component","archived":false,"fork":false,"pushed_at":"2023-09-22T14:11:10.000Z","size":7648,"stargazers_count":24,"open_issues_count":2,"forks_count":8,"subscribers_count":20,"default_branch":"master","last_synced_at":"2024-12-08T11:09:43.229Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://trendmicro-frontend.github.io/react-table","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/trendmicro-frontend.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2017-03-02T15:53:41.000Z","updated_at":"2023-09-22T14:11:15.000Z","dependencies_parsed_at":"2024-01-17T15:20:54.456Z","dependency_job_id":null,"html_url":"https://github.com/trendmicro-frontend/react-table","commit_stats":null,"previous_names":[],"tags_count":49,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/trendmicro-frontend%2Freact-table","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/trendmicro-frontend%2Freact-table/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/trendmicro-frontend%2Freact-table/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/trendmicro-frontend%2Freact-table/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/trendmicro-frontend","download_url":"https://codeload.github.com/trendmicro-frontend/react-table/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":231970098,"owners_count":18453911,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-03T10:00:55.278Z","updated_at":"2024-12-31T09:32:52.388Z","avatar_url":"https://github.com/trendmicro-frontend.png","language":"JavaScript","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)\n\n[![NPM](https://nodei.co/npm/@trendmicro/react-table.png?downloads=true\u0026stars=true)](https://nodei.co/npm/@trendmicro/react-table/)\n\nReact Table\n\nDemo: https://trendmicro-frontend.github.io/react-table\n\n## Version 1.x is no longer maintained by 2019/12/06\n[Friendly reminder] Please migrate to 2+ asap.\n\n## Installation\n\n1. Install the latest version of [react](https://github.com/facebook/react) and [react-table](https://github.com/trendmicro-frontend/react-table):\n\n  ```\n  npm install --save react @trendmicro/react-table @trendmicro/react-paginations\n  ```\n\n2. At this point you can import `@trendmicro/react-table` and its styles in your application as follows:\n\n  ```js\n  import TableTemplate, { TableWrapper, TableHeader, TableBody, TableRow, TableCell, TableHeaderCell } from '@trendmicro/react-table';\n  ```\n\n## Usage\n\n### Table Template\n\n```js\n\u003cTableTemplate\n    hoverable\n    useFixedHeader\n    columns={columns}\n    data={data}\n    width={500}\n/\u003e\n```\n\n### Custom render\n\n```js\n\u003cTableWrapper\n    columns={columns}\n    data={data}\n    width={800}\n    height={320}\n\u003e\n    {({ cells, data, loader, emptyBody, tableWidth }) =\u003e {\n        return (\n            \u003cFragment\u003e\n                \u003cTableHeader\u003e\n                    \u003cTableRow\u003e\n                        {\n                            cells.map((cell, index) =\u003e {\n                                const key = `table_header_cell_${index}`;\n                                const {\n                                    title,\n                                    width: cellWidth,\n                                } = cell;\n                                return (\n                                    \u003cTableHeaderCell\n                                        key={key}\n                                        width={cellWidth}\n                                    \u003e\n                                        { title }\n                                    \u003c/TableHeaderCell\u003e\n                                );\n                            })\n                        }\n                    \u003c/TableRow\u003e\n                \u003c/TableHeader\u003e\n                \u003cTableBody\u003e\n                    \u003cScrollbars\n                        style={{\n                            width: tableWidth\n                        }}\n                    \u003e\n                        {\n                            data.map((row, index) =\u003e {\n                                const rowKey = `table_row${index}`;\n                                return (\n                                    \u003cTableRow key={rowKey}\u003e\n                                        {\n                                            cells.map((cell, index) =\u003e {\n                                                const key = `${rowKey}_cell${index}`;\n                                                const cellValue = _get(row, cell.dataKey);\n                                                return (\n                                                    \u003cTableCell\n                                                        key={key}\n                                                        width={cell.width}\n                                                    \u003e\n                                                        { typeof cell.render === 'function' ? cell.render(cellValue, row, index) : cellValue }\n                                                    \u003c/TableCell\u003e\n                                                );\n                                            })\n                                        }\n                                    \u003c/TableRow\u003e\n                                );\n                            })\n                        }\n                    \u003c/Scrollbars\u003e\n                \u003c/TableBody\u003e\n            \u003c/Fragment\u003e\n        );\n    }}\n\u003c/TableWrapper\u003e\n```\n\n## API\n\n### Properties\n\n#### TableWrapper\nName                | Type                              | Default | Description\n:---                | :---                              | :------ | :----------\nminimalist          | Boolean                           | false   | Specify whether the table should not be bordered.\ncolumns             | Object[]                          | []      | The columns config of table, see Column below for details.\ndata                | Object[]                          | []      | Data record array to be rendered.\nemptyRender         | Function                          | () =\u003e { return 'No Data'; } | Empty content render function.\nemptyText           | String                            | 'No Data' | The text when data is null.\nheight              | Number                            |         | The height of the table.\nloading             | Boolean                           | false   | Whether table is loading.\nloaderRender        | Function                          |         | Loading content render function.\nwidth               | Number(required)                  |         | The width of the table.\n\n#### TableHeaderCell\nName                | Type                              | Default | Description\n:---                | :---                              | :------ | :----------\nwidth               | Number(required)                  |         | The width of the table.\n\n#### TableCell\nName                | Type                              | Default | Description\n:---                | :---                              | :------ | :----------\nwidth               | Number(required)                  |         | The width of the table.\n\n\n#### TableTemplate\n\nName                | Type                              | Default | Description\n:---                | :---                              | :------ | :----------\nminimalist          | Boolean                           | false   | Specify whether the table should not be bordered.\ncolumns             | Object[]                          | []      | The columns config of table, see Column below for details.\ndata                | Object[]                          | []      | Data record array to be rendered.\nemptyRender         | Function                          | () =\u003e { return 'No Data'; } | Empty content render function.\nemptyText           | String                            | 'No Data' | The text when data is null.\nheight              | Number                            |         | The height of the table.\nhideHeader          | Boolean                           | false   | Whether table head is hiden.\nhoverable           | Boolean                           | false   | Whether use row hover style.\nloading             | Boolean                           | false   | Whether table is loading.\nloaderRender        | Function                          |         | Loading content render function.\nuseFixedHeader      | Boolean                           | false   | Whether table head is fixed.\nwidth               | Number(required)                  |         | The width of the table.\n\n#### Column\n\nName            | Type    | Default | Description\n:---            | :-----  | :------ | :----------\ntitle           | React Node or Function(): React Node |         | Title of this column.\ndataKey         | String  |         | Display field of the data record.\nwidth           | String or Number  | 150        | Width of the specific proportion calculation according to the width of the columns.\nrender          | 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.\n\n## License\n\nMIT\n","funding_links":[],"categories":["Trend Micro"],"sub_categories":["React Components"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftrendmicro-frontend%2Freact-table","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftrendmicro-frontend%2Freact-table","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftrendmicro-frontend%2Freact-table/lists"}