react-super-responsive-table converts your table data to a user-friendly list in mobile view.
npm install react-super-responsive-table!GitHub last commit
react-super-responsive-table converts your table data to a user-friendly list in mobile view.
- Demo
- Installation
- Usage
- Using Dynamic Headers
- Contributors
- Contributing
- License
View the live code demo at https://react-super-responsive-table.coston.io.
``
npm install react-super-responsive-table --save
1. import { Table, Thead, Tbody, Tr, Th, Td } from 'react-super-responsive-table'
2. Copy or import into your project. Customize breakpoint in the css as needed.
3. Write your html table with the imported components.
4. Resize your browser window width to pivot this super responsive table!
`jsx`
Event
Date
Location
Organizer
Theme
Agent
Tablescon
9 April 2019
East Annex
Super Friends
Data Tables
Coston Perkins
Capstone Data
19 May 2019
205 Gorgas
Data Underground
Data Scence
Jason Phillips
Tuscaloosa D3
29 June 2019
Github
The Contributors Consortium
Data Viz
Coston Perkins
Headers are statefully stored on first render of the table, since the library doesn't use props for them and just checks the children of the thead to build its internal list of headers upon construction. To use dynamic headers, use a key prop to ensure the components are all internally updated when you're making this kind of change.
`jsx``
{headers[0]}
{headers[1]}
item 1
item 2
Super Responsive Tables are made possible by these great community members:
- coston
- jasonphillips
- jorrit
- Droow
- NShahri
- PicchiKevin
- alexandra-c
- dragos-rosca
- galacemiguel
- themichailov
- luizeboli
- thiagotakehana
- wedvich
- wafuwafu13
Please help turn the tables on unresponsive data! Submit an issue and/or make a pull request. Check the projects board for tasks to do.
Licensed under the MIT license.