react-super-responsive-table - GitLite

KO | EN

gitlite — search

#python #react #ai #llm #golang #android #machine-learning #rust #docker #macos #nodejs #ios #mcp #openai

react-super-responsive-table

(★ 442)

Turn the tables on unresponsive data!

File Explorer

Download Latest Version (.zip)

- - bug_report.md
  - feature_request.md
- - nodejs-ci.yml
  - release.yml
- PULL_REQUEST_TEMPLATE.md
- stale.yml
- - Table.tsx
  - Tbody.tsx
  - Td.tsx
  - TdInner.tsx
  - Th.tsx
  - Thead.tsx
  - Tr.tsx
  - TrInner.tsx
- - index.ts
- - allowed.ts
  - tableContext.tsx
- index.ts
- SuperResponsiveTableStyle.css
- index.test.tsx
.eslintrc.json
.gitignore
.prettierrc
jest.config.ts
jest.setup.ts
LICENSE
package-lock.json
package.json
rapid.config.js
README.md
renovate.json
tsconfig.json
tsconfig.test.json

# Installation Guide

1. Get the code

git clone https://github.com/coston/react-super-responsive-table

Downloads the entire project code from GitHub to your computer.

cd react-super-responsive-table

Moves into the project folder you just downloaded.

2. Node.js

Easy Recommended

Prerequisites

Git Needed to download the project code from GitHub.
Node.js Node.js must be installed to use npm. The LTS version is recommended.

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

Downloads and installs the libraries listed in package.json.

✅ After running the command, open the address shown in the terminal (usually something like http://localhost:3000) in your browser.

Pulled directly from this repo's README.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# ⌗ react-super-responsive-table

![GitHub last commit](https://img.shields.io/github/last-commit/Coston/react-super-responsive-table)
[![NPM Downloads](https://img.shields.io/npm/dm/react-super-responsive-table?style=flat-square&logo=npm)
](https://www.npmjs.com/package/react-super-responsive-table)
[![GitHub Repo stars](https://img.shields.io/github/stars/coston/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

![Demo Gif md-only](https://user-images.githubusercontent.com/7424180/55982530-baab9900-5c5e-11e9-97c0-0336c5889504.gif)

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

## 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
<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:

- [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.