(3/23/28) React Typescript의 USETABLE , TABULATOR 이해

TypeScript로 React(백엔드 Laravel)로 개발한 새로 참여한 프로젝트의 프로젝트 매니저가 개발자로서 React 내부의 코드를 살펴봤습니다.

페이지에서 가장 중요한 데이터를 나타내는 데이터 영역은 USETABLE과 TABULATOR로 구성된 데이터 테이블이었다.

페이지 자체에서도 날짜 자체를 수정할 수 있고, 아직 손을 대지 않은 TypeScript로 작성했기 때문에 이해하려고 블로그에 적어봅니다.
지금.

망설임 없이 이어갈 수 있지만 이해하고 넘어가야 할 글이다.

쓸 수 있는

---

USETABLE은 페이지 매김, 정렬 및 필터링 기능으로 테이블 렌더링 프로세스를 단순화하는 사용자 정의 ReactHook 유형입니다.
상태 관리를 처리하고 이러한 기능을 구현하는 데 필요한 기능을 제공합니다.

간단한 적용 예

import { useTable } from 'usetable';

const data = (
  { name: 'Alice', age: 25, city: 'New York' },
  { name: 'Bob', age: 30, city: 'London' },
  { name: 'Charlie', age: 35, city: 'Paris' },
  { name: 'Dave', age: 40, city: 'Sydney' },
  { name: 'Eve', age: 45, city: 'San Francisco' },
);

const columns = (
  { label: 'Name', key: 'name' },
  { label: 'Age', key: 'age' },
  { label: 'City', key: 'city' },
);

function Table() {
  const {
    page,
    setPage,
    rowsPerPage,
    setRowsPerPage,
    sortOrder,
    setSortOrder,
    filter,
    setFilter,
    filteredData,
    tableData,
  } = useTable(data, columns);

  return (
    <div>
      <table>
       //column과 tableData를 map으로 내용 출력
      </table>
      <div>
        //상태 변수를 이용한 간단한 페이징 처리
        <button disabled={page === 0} onClick={() => setPage(page - 1)}>
          Previous
        </button>
        <button
          disabled={(page + 1) * rowsPerPage >= filteredData.length}
          onClick={() => setPage(page + 1)}
        >
          Next
        </button>
        <select value={rowsPerPage} onChange={(event) => setRowsPerPage(event.target.value)}>
          <option value="5">5</option>
          <option value="10">10</option>
          <option value="25">25</option>
        </select>
      </div>
    </div>
  );
}

탭

---

Tabulator는 웹 애플리케이션에서 대화형 테이블을 만들기 위한 강력하고 유연한 도구를 제공하는 JavaScript 라이브러리입니다.
정렬, 필터링, 페이지 매김 등을 포함한 다양한 기능을 사용할 수 있습니다.

흠?? 둘은 비슷한 기능을 가지고 있는 것처럼 보이지만 이것은 간단한 사용 예입니다.

import React, { useEffect, useRef } from "react";
import "tabulator-tables/dist/css/tabulator.min.css";
import "tabulator-tables/dist/js/tabulator.min.js";

const TabulatorExample = ({ data }) => {
  const tableRef = useRef(null);

  useEffect(() => {
    if (tableRef.current) {
      const table = new Tabulator(tableRef.current, {
        data,
        columns: (
          { title: "Name", field: "name" },
          { title: "Age", field: "age", sorter: "number" },
          { title: "Gender", field: "gender" },
        ),
      });
    }
  }, (data));

  return <div ref={tableRef}></div>;
};

export default TabulatorExample;

잠깐… useRef의 정확한 사용법을 모르겠습니다…

useRef의 개념은 다시…다른 게시물에 요약되어 있습니다.