React Super Responsive Table

Turn the tables on unresponsive data!
Alternatives To React Super Responsive Table
Project NameStarsDownloadsRepos Using ThisPackages Using ThisMost Recent CommitTotal ReleasesLatest ReleaseOpen IssuesLicenseLanguage
Dash Table4162a year ago31September 22, 2021230mitPython
A First-Class Interactive DataTable for Dash
React Super Responsive Table39732105 days ago64June 06, 20223mitJavaScript
Turn the tables on unresponsive data!
3 years ago25bsd-3-clauseJavaScript
An interface to ECharts
Regular Table291
4 days ago16apache-2.0JavaScript
A regular <table> library, for async and virtual data models.
4 months ago12lgpl-3.0JavaScript
Data reporting and visualization for your app
5 years ago5mitJavaScript
A simple, easy to use data modeling framework for JavaScript
3 months ago4March 16, 202219otherR
Streamlined Table Styling and Formatting for Reactable
React Smart Data Table80818 days ago52June 20, 20225mitTypeScript
A smart data table component for React meant to be configuration free
8 days ago11apache-2.0JavaScript
High performance, editable, stylable datagrids in jupyter and jupyterlab
Pivot Chart64
2 months ago9mitTypeScript
light and fast implementation of web pivot table / pivot chart components.
Alternatives To React Super Responsive Table
Select To Compare

Alternative Project Comparisons


Coverage Status npm downloads code style: prettier

react-super-responsive-table converts your table data to a user-friendly list in mobile view.


Demo Gif

Live demo:


npm install react-super-responsive-table --save


  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.
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 (
          <Td>9 April 2019</Td>
          <Td>East Annex</Td>
          <Td>Capstone Data</Td>
          <Td>19 May 2019</Td>
          <Td>205 Gorgas</Td>
          <Td>Tuscaloosa D3</Td>
          <Td>29 June 2019</Td>

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.

<Table key={i}>
      <Td>item 1</Td>
      <Td>item 2</Td>


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.

Popular Table Projects
Popular Data Visualization Projects
Popular User Interface Components Categories
Related Searches

Get A Weekly Email With Trending Projects For These Categories
No Spam. Unsubscribe easily at any time.
Data Visualization
Responsive Design