Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/coston/react-super-responsive-table
Turn the tables on unresponsive data!
https://github.com/coston/react-super-responsive-table
data-visualization react responsive-design tables
Last synced: 7 days ago
JSON representation
Turn the tables on unresponsive data!
- Host: GitHub
- URL: https://github.com/coston/react-super-responsive-table
- Owner: coston
- License: mit
- Created: 2016-10-31T18:58:05.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2024-07-27T14:25:53.000Z (3 months ago)
- Last Synced: 2024-07-30T09:51:00.097Z (3 months ago)
- Topics: data-visualization, react, responsive-design, tables
- Language: JavaScript
- Homepage: https://react-super-responsive-table.vercel.app
- Size: 10.6 MB
- Stars: 432
- Watchers: 12
- Forks: 50
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# ⌗ react-super-responsive-table
[
](https://www.npmjs.com/package/react-super-responsive-table)
[
](https://github.com/coston/react-super-responsive-table)
react-super-responsive-table converts your table data to a user-friendly list in mobile view.
- [Demo](#demo)
- [Installation](#installation)
- [Usage](#usage)
- [Using Dynamic Headers](#using-dynamic-headers)
- [Contributors](#Contributors)
- [Contributing](#contributing)
- [License](#license)
## Demo
View the live code demo at [https://react-super-responsive-table.coston.io](https://react-super-responsive-table.coston.io).
## Installation
```
npm install react-super-responsive-table --save
```
## Usage
1. `import { Table, Thead, Tbody, Tr, Th, Td } from 'react-super-responsive-table'`
2. Copy or import `react-super-responsive-table/dist/SuperResponsiveTableStyle.css` 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
```
## Using Dynamic Headers
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
```
## Contributors
Super Responsive Tables are made possible by these great community members:
- [coston](https://github.com/coston)
- [jasonphillips](https://github.com/jasonphillips)
- [jorrit](https://github.com/jorrit)
- [Droow](https://github.com/droow)
- [NShahri](https://github.com/NShahri)
- [PicchiKevin](https://github.com/PicchiKevin)
- [alexandra-c](https://github.com/alexandra-c)
- [dragos-rosca](https://github.com/dragos-rosca)
- [galacemiguel](https://github.com/galacemiguel)
- [themichailov](https://github.com/themichailov)
- [luizeboli](https://github.com/luizeboli)
- [thiagotakehana](https://github.com/thiagotakehana)
- [wedvich](https://github.com/wedvich)
- [wafuwafu13](https://github.com/wafuwafu13)
## Contributing
Please help turn the tables on unresponsive data! Submit an issue and/or make a pull request. Check the [projects board](https://github.com/coston/react-super-responsive-table/projects) for tasks to do.
## License
Licensed under the MIT license.