표는 정보를 행과 열로 정리한 배열입니다. 데이터를 구조화된 형식으로 저장하고 표시하는 데 사용됩니다.

반응 테이블은 React용으로 구축된 가볍고 빠르며 완전히 사용자 정의 가능하고(JSX, 템플릿, 상태, 스타일, 콜백) 확장 가능한 Datagrid입니다. 선택적 소품과 콜백을 통해 완전히 제어할 수 있습니다.

특징

1. 11kb로 가볍습니다(스타일에는 2kb만 더 필요합니다).
2. 완전히 사용자 정의할 수 있습니다(JSX, 템플릿, 상태, 스타일, 콜백).
3. 선택적 소품과 콜백을 통해 완전히 제어할 수 있습니다.
4. 클라이언트 측 및 서버 측 페이지 매김이 있습니다.
5. 필터가 있습니다.
6. 피벗팅 및 집계
7. 최소한의 디자인 및 쉽게 테마 적용 가능

설치

우리가 리액트 앱 다음 명령을 사용합니다.

 $ npx create-react-app myreactapp  

다음으로 설치해야 할 것은 반응 테이블 . 아래와 같이 npm 명령을 통해 반응 테이블을 설치할 수 있습니다.

 $ npm install react-table  

반응 테이블을 설치한 후에는 다음을 수행해야 합니다. 수입 반응 테이블을 반응 구성 요소로 변환합니다. 이렇게 하려면 src/App.js 파일을 만들고 다음 스니펫을 추가하세요.

 import ReactTable from 'react-table';  

반응 테이블을 사용하여 렌더링해야 하는 데이터가 있다고 가정해 보겠습니다.

 const data = [{ name: 'Ayaan', age: 26 },{ name: 'Ahana', age: 22 },{ name: 'Peter', age: 40 },{ name: 'Virat', age: 30 },{ name: 'Rohit', age: 32 },{ name: 'Dhoni', age: 37 }]  

데이터와 함께 다음 사항도 지정해야 합니다. 열 정보 ~와 함께 열 속성 .

 const columns = [{ Header: 'Name', accessor: 'name' },{ Header: 'Age', accessor: 'age' }]  

render 메서드 내에서 이 데이터를 반응 테이블과 바인딩한 다음 반응 테이블을 반환해야 합니다.

 return ( )  

이제 우리의 src/App.js 파일은 아래와 같습니다.

 import React, { Component } from 'react'; import ReactTable from 'react-table'; import 'react-table/react-table.css'; class App extends Component { render() { const data = [{ name: 'Ayaan', age: 26 },{ name: 'Ahana', age: 22 },{ name: 'Peter', age: 40 },{ name: 'Virat', age: 30 },{ name: 'Rohit', age: 32 },{ name: 'Dhoni', age: 37 }] const columns = [{ Header: 'Name', accessor: 'name' },{ Header: 'Age', accessor: 'age' }] return ( ) } } export default App;  

산출

React 앱을 실행하면 아래와 같은 출력을 얻게 됩니다.

이제 행 드롭다운 메뉴를 변경하면 아래와 같은 출력이 표시됩니다.