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: about 2 months 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 (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2024-07-27T14:25:53.000Z (2 months ago)
- Last Synced: 2024-07-30T09:51:00.097Z (about 2 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://coveralls.io/github/coston/react-super-responsive-table?branch=master)
[](https://www.npmjs.com/package/react-super-responsive-table)
[](https://prettier.io)
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
Live demo: [https://react-super-responsive-table.vercel.app/](https://react-super-responsive-table.vercel.app/)
## 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
3. Write your html table with the imported components.
```jsx
import React from 'react';
import { Table, Thead, Tbody, Tr, Th, Td } from 'react-super-responsive-table';
import 'react-super-responsive-table/dist/SuperResponsiveTableStyle.css';
export default function TableExample(props) {
return (
Event
Date
Location
Tablescon
9 April 2019
East Annex
Capstone Data
19 May 2019
205 Gorgas
Tuscaloosa D3
29 June 2019
Github
);
}
```
## 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.