React Table Library를 사용하여 React에서 테이블을 만드는 방법

React 테이블은 때때로 만들거나 처리하기가 번거로울 수 있는 데이터 그리드가 있는 데이터 테이블을 생성하는 데 사용되는 라이브러리입니다.

후크를 사용하여 가볍고 확장 가능하지만 자체 디자인이 없다는 것을 의미하는 머리가 없는 강력한 테이블을 만들고 우리가 적합하다고 생각하는 방식으로 테이블을 자유롭게 디자인할 수 있습니다.

이것은 라이브러리를 가볍게 유지하기 위해 수행되었습니다.
Sorting, Global Filtering, Paginations, Column Filtering, Grouping 등과 같은 많은 기능을 제공합니다. 공식 사이트에서 모든 기능을 볼 수 있습니다.

우리는 또한 후크의 도움으로 React에서 테이블을 만들 수 있습니다. 또한 가볍고 만들기도 쉽지만 때로는 엄청난 시간을 절약하기 위해 처음부터 무언가를 만드는 것보다 라이브러리를 사용하는 것이 더 좋습니다.

이 블로그에서는 정렬, 필터링 및 페이지 매김을 수행할 수 있는 React Table Library의 도움으로 테이블만 만들 것입니다.

시작하자…

색인

시작하기

React 앱 만들기

React 테이블 라이브러리 설치 및 가져오기

열 생성 및 표시

앱의 UI 부분에서 작업

정렬, 전역 필터링 및 페이지 매김과 같은 대화형 테이블을 만들기 위해 다른 기능 추가

결론

시작하기

이 프로젝트를 위해 키 및 값 쌍이 있는 100개의 개체로 구성된 더미 데이터를 준비했으며 Data.js 파일에서 동적으로 인쇄할 것입니다.

React Table은 Headless 라이브러리이므로 여기에서 자세히 설명하지 않을 것입니다. 그러나 우리는 스타일링을 위해 부트스트랩만 사용했기 때문에 이를 시작점으로 사용할 수 있습니다.

개발 단계로 이동하기 전에 완료 후 테이블이 어떻게 보이는지 봅시다.

이것은 우리가 구축할 테이블과 다른 것을 시도하려는 경우 GitHub 리포지토리에 대한 라이브 링크입니다.

React 앱 만들기

React 앱을 만드는 것은 쉽습니다. IDE에서 작업 디렉토리로 이동하고 터미널에 다음 명령을 입력합니다.

npx create-react-app react-table-library

create-react-app 프로젝트를 올바르게 설정하는 방법을 잘 모르는 경우 여기 create-react-app-dev에서 공식 가이드를 참조할 수 있습니다.‌

설정 후 동일한 터미널에서 npm start를 실행하여 React 앱이 호스팅될 localhost:3000을 시작합니다. 또한 모든 변경 사항을 볼 수 있습니다.

React Table 라이브러리 설치 및 가져오기

다른 모든 npm 및 yarn 패키지와 마찬가지로 설치 또는 추가가 매우 간단합니다.

//For npm
npm install react-table
//For yarn
yarn add react-table

라이브러리가 마지막으로 설치되면 App.js 파일로 가져올 차례입니다.

import React from "react";
import { dummy } from "./Data";
import { useTable } from "react-table";

useTable 후크는 테이블과의 상호 작용을 향상시키는 인스턴스를 생성하므로 이 라이브러리의 주요 후크입니다.

공식 문서에 따르면 “useTable은 React Table을 빌드하는 데 사용되는 기본 후크입니다. React Table이 지원하는 모든 옵션과 모든 플러그인 후크의 시작점 역할을 합니다.”

열 생성 및 표시

useTable Hook에는 테이블과 상호 작용할 수 있는 몇 가지 옵션이 있습니다. 여기서 사용할 가장 중요한 두 가지 옵션은 데이터와 열입니다.

const { instance } = useTable({
column,
data,
});

인스턴스는 우리가 사용하기로 선택한 속성에 따라 다른 속성으로 대체됩니다.

테이블 옵션

열 — 필수 필드이며 useTable 후크에 전달하기 전에 기억해야 합니다.

이것은 모든 테이블 헤더와 내부의 열을 개체 형식으로 보유하므로 UI에서 가장 중요한 부분입니다.

export const tableColumn = [
{
Header: "Id",
accessor: "id",
},
{
Header: "User Name",
accessor: "name",
},
{
Header: "Email",
accessor: "email",
},
{
Header: "Comments",
accessor: "body",
},
];

데이터 — 더미 데이터를 포함하고 기억해야 하는 중요하고 필수 필드이기도 합니다.

Continue Reading .