Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/trendmicro-frontend/react-table
React Table component
https://github.com/trendmicro-frontend/react-table
Last synced: 26 days ago
JSON representation
React Table component
- Host: GitHub
- URL: https://github.com/trendmicro-frontend/react-table
- Owner: trendmicro-frontend
- License: mit
- Created: 2017-03-02T15:53:41.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2023-09-22T14:11:10.000Z (over 1 year ago)
- Last Synced: 2024-12-08T11:09:43.229Z (about 2 months ago)
- Language: JavaScript
- Homepage: https://trendmicro-frontend.github.io/react-table
- Size: 7.29 MB
- Stars: 24
- Watchers: 20
- Forks: 8
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome - react-table - React Table component ([demo](https://trendmicro-frontend.github.io/react-table/)). (Trend Micro / React Components)
- awesome_frontend_development_resources - react-table - React Table component ([demo](https://trendmicro-frontend.github.io/react-table/)). (Trend Micro / React Components)
- awesome_frontend_development_resources - react-table - React Table component ([demo](https://trendmicro-frontend.github.io/react-table/)). (Trend Micro / React Components)
README
# react-table [](https://travis-ci.org/trendmicro-frontend/react-table) [](https://coveralls.io/github/trendmicro-frontend/react-table?branch=master)
[](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