react-super-responsive-table converts your table data to a user-friendly list in mobile view.
View the live code demo at https://react-super-responsive-table.coston.io.
npm install react-super-responsive-table --save
import { Table, Thead, Tbody, Tr, Th, Td } from 'react-super-responsive-table'
react-super-responsive-table/dist/SuperResponsiveTableStyle.css
into your project. Customize breakpoint in the css as needed.<Table> <Thead> <Tr> <Th>Event</Th> <Th>Date</Th> <Th>Location</Th> <Th>Organizer</Th> <Th>Theme</Th> <Th>Agent</Th> </Tr> </Thead> <Tbody> <Tr> <Td>Tablescon</Td> <Td>9 April 2019</Td> <Td>East Annex</Td> <Td>Super Friends</Td> <Td>Data Tables</Td> <Td>Coston Perkins</Td> </Tr> <Tr> <Td>Capstone Data</Td> <Td>19 May 2019</Td> <Td>205 Gorgas</Td> <Td>Data Underground</Td> <Td>Data Scence</Td> <Td>Jason Phillips</Td> </Tr> <Tr> <Td>Tuscaloosa D3</Td> <Td>29 June 2019</Td> <Td>Github</Td> <Td>The Contributors Consortium</Td> <Td>Data Viz</Td> <Td>Coston Perkins</Td> </Tr> </Tbody> </Table>
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.
<Table key={i}> <Thead> <Tr> <Th>{headers[0]}</Th> <Th>{headers[1]}</Th> </Tr> </Thead> <Tbody> <Tr> <Td>item 1</Td> <Td>item 2</Td> </Tr> </Tbody> </Table>
Super Responsive Tables are made possible by these great community members:
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.