Skip to content

Latest commit

 

History

History
109 lines (82 loc) · 4.48 KB

README.md

File metadata and controls

109 lines (82 loc) · 4.48 KB
Raw

react-responsive-table

npm version Build Status codecov Code Climate Dependency Status

A react component for building really responsive table. The built tables can be used for form (hell yeah!) and can wrap to multiples lines on small devices.

Inspiration : https://hashnode.com/post/really-responsive-tables-using-css3-flexbox-cijzbxd8n00pwvm53sl4l42cx

Installation

With webpack

npm i react-responsive-table --save

With UMD

You will need also react (of course) and react-style-proptype (used to validate the style properties).

npm i react, react-style-proptype, react-responsive-table --save

Usage

Once installed, just require and use the components:

import React from `react`;
import { Table, Row, Cell } from 'react-responsive-table';

React.render(<Table>
  <Row>
     <Cell thead minWidthPx={100}>Head-1-1</Cell>
     <Cell thead minWidthPx={100}>Head-1-2</Cell>
  </Row>
  <Row>
     <Cell minWidthPx={100}>Col-1-1</Cell>
     <Cell minWidthPx={100}>Long text for Col-1-2</Cell>
  </Row>
  <Row>
     <Cell minWidthPx={100}>Col-2-1</Cell>
     <Cell minWidthPx={100}>Col-2-2</Cell>
  </Row>
  <Row>
     <Cell minWidthPx={100}>Long text for Col-3-1</Cell>
     <Cell minWidthPx={100}>Col-3-2</Cell>
  </Row>
</Table>, document.querySelector('#main'));

Properties

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

npm run build

Tests

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.

Examples

Examples are available here : https://jtassin.github.io/react-responsive-table/

Contributors

Julien TASSIN
Julien TASSIN

License

MIT, see LICENSE for details.