0.2.4 • Published 6 years ago
react-view-table v0.2.4
react-view-table
Small, simple and fast react table component.
###Demos
Installation
Run the following command:
npm i --save react-view-table
Using
const data = [
{
name: 'John',
age: 26,
email: 'john@test.test',
},
{
name: 'Amanda',
age: 24,
email: 'amanda@test.test',
},
]
const columns = [
{
label: 'Name',
accessor: 'name',
width: 150,
},
{
label: 'Age',
accessor: 'age',
width: 70,
},
{
label: 'Email',
accessor: 'email',
width: 200,
},
]
<ReactViewTable
data={data}
columns={columns}
/>
Documentation
Component Props
| Prop Name | Type | Required? | Description |
|---|---|---|---|
| data | array | ✓ | Data of table |
| columns | array | ✓ | Columns definition. See column params |
| maxHeight | number | Max table height | |
| noResultRenderer | function | No result renderer | |
| tableClassName | string | Table className. Value is default ReactViewTable-table | |
| headerClassName | string | Table header className. Value is default ReactViewTable-header | |
| headerContentClassName | string | Table header content className. Value is default ReactViewTable-headerContent | |
| headerCellClassName | string | Table header cell className. Value is default ReactViewTable-headerCell | |
| bodyClassName | string | Table body className. Value is default ReactViewTable-body | |
| rowClassName | string | Table row className. Value is default ReactViewTable-row | |
| cellClassName | string | Table cell className. Value is default ReactViewTable-cell |
Column params
| Name | Type | Required? | Description |
|---|---|---|---|
| label | string | ✓ | Header cell label |
| accessor | string | ✓ | Key of data |
| width | number | Cell width. Value is default 100 | |
| headerCellRenderer | function | Custom header cell renderer | |
| cellRenderer | function | Custom cell renderer |
Header Cell Renderer
const headerCellRenderer = ({ style, key, label }) => (
<div className='headerCell' style={style} key={key}>
{label}
</div>
)Body Cell Renderer
const bodyCellRenderer = ({ style, key, accessor, row }) => (
<div className='cell' style={style} key={key}>
{row[accessor]}
</div>
)NoResult Renderer
const noResult = ({ width, height }) => (
<div className='ReactViewTable-noResult' style={{ width, height }}>
No Result
</div>
)