TanStack Table

TanStack Table은 React에서 **표(table)**를 만들기 위한 헤드리스(Headless) 라이브러리입니다.
즉, HTML 테이블 구조나 스타일을 직접 만들게 하고, 내부 동작(정렬, 필터, 페이지네이션 등)은 라이브러리가 담당합니다.

1. 특징

항목	설명
Headless	UI는 직접 만들고, 로직만 라이브러리가 제공
빠르고 가볍다	DOM 조작 없이 React state 기반으로 동작
고도로 커스터마이징 가능	원하는 스타일이나 구성대로 테이블 구현 가능
기능 분리형 구조	정렬, 필터링, 페이지네이션 등을 필요한 것만 가져다 씀

2. 설치

npm install @tanstack/react-table

 

3. 기본 사용 예제 (React 19 기준)

① 컬럼/데이터 정의

const data = [
  { name: 'Alice', age: 25 },
  { name: 'Bob', age: 32 },
];

const columns = [
  {
    header: '이름',
    accessorKey: 'name',
  },
  {
    header: '나이',
    accessorKey: 'age',
  },
];

② 테이블 훅 사용

import {
  useReactTable,
  getCoreRowModel,
  flexRender,
} from '@tanstack/react-table';

function MyTable() {
  const table = useReactTable({
    data,
    columns,
    getCoreRowModel: getCoreRowModel(),
  });

  return (
    <table>
      <thead>
        {table.getHeaderGroups().map((headerGroup) => (
          <tr key={headerGroup.id}>
            {headerGroup.headers.map((header) => (
              <th key={header.id}>
                {flexRender(header.column.columnDef.header, header.getContext())}
              </th>
            ))}
          </tr>
        ))}
      </thead>

      <tbody>
        {table.getRowModel().rows.map((row) => (
          <tr key={row.id}>
            {row.getVisibleCells().map((cell) => (
              <td key={cell.id}>
                {flexRender(cell.column.columnDef.cell, cell.getContext())}
              </td>
            ))}
          </tr>
        ))}
      </tbody>
    </table>
  );
}

 

4. 주요 기능

기능	설명
useReactTable	테이블 상태 및 동작을 구성하는 메인 훅
getCoreRowModel	기본 행 모델 (기초 렌더링용)
getFilteredRowModel	필터링된 행 모델
getSortedRowModel	정렬된 행 모델
getPaginationRowModel	페이지네이션된 행 모델
flexRender()	JSX로 동적 렌더링 시 유용하게 사용하는 함수

5. 확장 기능 예시

필요한 기능만 선택해서 넣을 수 있음:

useReactTable({
  data,
  columns,
  getCoreRowModel: getCoreRowModel(),
  getSortedRowModel: getSortedRowModel(),
  getFilteredRowModel: getFilteredRowModel(),
  getPaginationRowModel: getPaginationRowModel(),
});