react-super-responsive-table - GitLite

KO | EN

gitlite — search

#hacktoberfest #react #typescript #golang #machine-learning #deep-learning #linux #docker #macos #cli #vue #awesome-list #security #mcp

react-super-responsive-table

(★ 442)

Turn the tables on unresponsive data!

파일 탐색기

최종 버전 다운로드 (.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

# 설치 가이드

1. 코드 내려받기

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

깃허브에서 프로젝트 코드 전체를 내 컴퓨터로 내려받습니다.

cd react-super-responsive-table

방금 내려받은 프로젝트 폴더 안으로 이동합니다.

2. Node.js

쉬움 추천

사전 준비물

Git GitHub에서 프로젝트 코드를 내려받으려면 필요합니다.
Node.js npm 명령어를 쓰려면 Node.js가 설치되어 있어야 합니다. LTS(장기지원) 버전을 추천합니다.

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

package.json에 명시된 라이브러리들을 내려받아 설치합니다.

✅ 명령어 실행 후 터미널에 나타나는 주소(보통 http://localhost:3000 형태)를 브라우저에서 열어보세요.

이 레포의 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.