A react component for building really responsive table
npm install react-responsive-tablesh
npm i react-responsive-table --save
`
$3
You will need also react (of course) and react-style-proptype (used to validate the style properties).
`sh
npm i react, react-style-proptype, react-responsive-table --save
`
Usage
Once installed, just require and use the components:
`jsx
import React from react;
import { Table, Row, Cell } from 'react-responsive-table';
React.render(
Head-1-1 |
Head-1-2 |
Col-1-1 |
Long text for Col-1-2 |
Col-2-1 |
Col-2-2 |
Long text for Col-3-1 |
Col-3-2 |
, document.querySelector('#main'));
`
$3
#### Table
| Props | Options | Default | Description |
| ------------- |-------------| -----| -------- |
| material | Boolean | false | if true, it apply material-ui styles to the table|
#### Row
| Props | Options | Default | Description |
| ------------- |-------------| -----| -------- |
| striped | Boolean | false | if true, it strip the color of the row acording to the pair/impair index|
| index | Number | null | The row index (used by the striped fonctionality). It is supposed to be set automatically by the Table parent but, with redux-connect or other middle component you may have to set it manually. |
| material | Boolean | false | if true, it apply material-ui styles to the table. It is supposed to be set automatically by the Table parent but, with redux-connect or other middle component you may have to set it manually. |
#### Cell
| Props | Options | Default | Description |
| ------------- |-------------| -----| -------- |
| header | Boolean | false | if true, it apply a table header style to this cell|
| minWidthPx | Number | null | The minimum with in px of the Cell|
| material | Boolean | false | if true, it apply material-ui styles to the table. It is supposed to be set automatically by the Table parent but, with redux-connect or other middle component you may have to set it manually. |
Material design
This lib is designed to integrate with material-ui.
It uses natively the selected theme for every supported functionalities.
Build
`sh
npm run build
`
Tests
`sh
npm test
`
Development (
src, lib and the build process)
NOTE: The source code for the component is in src. A transpiled CommonJS version (generated with Babel) is available in lib for use with node.js, browserify and webpack. A UMD bundle is also built to dist, which can be included without the need for any build system.
To build, watch and serve the examples (which will also watch the component source), run npm start`.