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

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

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

이는 라이브러리의 무게를 가볍게 유지하기 위해 수행되었습니다.
정렬, 전역 필터링, 페이지 매김, 열 필터링, 그룹화 등과 같은 많은 기능을 제공합니다. 공식 사이트에서 모든 기능을 살펴볼 수 있습니다.

우리는 또한 후크의 도움으로 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 Library 설치 및 가져오기

다른 모든 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 .