Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

react-super-responsive-table

Package Overview
Dependencies
Maintainers
0
Versions
74
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-super-responsive-table

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

  • 6.0.0
  • latest
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
36K
increased by130.6%
Maintainers
0
Weekly downloads
 
Created
Source

react-super-responsive-table

Coverage Status npm downloads code style: prettier

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

Demo

Demo Gif

Live demo: 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 to customize 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 (
    <Table>
      <Thead>
        <Tr>
          <Th>Event</Th>
          <Th>Date</Th>
          <Th>Location</Th>
        </Tr>
      </Thead>
      <Tbody>
        <Tr>
          <Td>Tablescon</Td>
          <Td>9 April 2019</Td>
          <Td>East Annex</Td>
        </Tr>
        <Tr>
          <Td>Capstone Data</Td>
          <Td>19 May 2019</Td>
          <Td>205 Gorgas</Td>
        </Tr>
        <Tr>
          <Td>Tuscaloosa D3</Td>
          <Td>29 June 2019</Td>
          <Td>Github</Td>
        </Tr>
      </Tbody>
    </Table>
  );
}

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}>
  <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>

Contributors

Super Responsive Tables are made possible by these great community members:

Contributing

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.

License

Licensed under the MIT license.

Keywords

FAQs

Package last updated on 14 Aug 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc