열 정의와 행 렌더링

TanStack Table의 모든 열은 ColumnDef 객체로 설명합니다. 가장 중요한 두 필드는 accessorKey(데이터 객체의 속성 이름)와 머리글(열 레이블 문자열 또는 렌더링 함수)입니다.

accessorKey 방식은 평면 데이터에 적합하고, 복잡하거나 계산된 값에는 accessorFn이 필요합니다.

데이터에 이름이나 이메일처럼 직접 연결되는 속성이 있으면 accessorKey를 사용합니다. firstName과 lastName을 결합하는 등 값을 계산해야 할 때는 accessorFn을 사용합니다.

행 데이터 제네릭을 ColumnDef에 지정하면 두 방식 모두 완전한 형식 검사를 받을 수 있습니다.

ColumnDef의 셀 필드는 셀 컨텍스트를 받아 JSX를 반환하는 함수를 지정합니다. 이를 사용하면 셀 안에 배지, 버튼, 이미지 또는 원하는 사용자 인터페이스를 렌더링할 수 있습니다.

일반 텍스트 값에는 cell.renderValue()로 충분합니다. 더 풍부한 콘텐츠가 필요하면 cell.getContext()에서 정보를 구조 분해 할당합니다.

렌더링할 때마다 열을 다시 만들지 않도록 컴포넌트 외부에서 열을 정의합니다. 데이터 및 getCoreRowModel과 함께 이 배열을 useReactTable에 전달합니다.

열의 형식에 맞게 ColumnDef에 데이터 형식을 지정하면 TypeScript가 열 형식을 추론하므로 accessorKey 값에 대한 자동 완성 기능을 사용할 수 있습니다.

getCoreRowModel은 @tanstack/react-table에서 가져오는 팩토리 함수입니다. 반환값을 useReactTable에 전달하면 표 인스턴스가 데이터 배열에서 기본 행 목록을 만드는 방법을 알려줄 수 있습니다.

추가 행 모델인 정렬, 필터링, 페이지 매김 모델은 별도의 모델 생성 함수를 전달해 그 위에 계층적으로 추가합니다.

table.getHeaderGroups()를 호출하고 결과를 반복 처리하여 표 머리글을 렌더링합니다. 각 머리글 그룹에는 headers 배열이 있고, 각 머리글에는 열 정의와 식별자가 있습니다.

flexRender(header.column.columnDef.header, header.getContext())를 사용하면 문자열이든 JSX를 반환하는 함수든 머리글 콘텐츠를 렌더링할 수 있습니다.

table.getRowModel().rows를 호출하고 각 행을 행 요소로 변환합니다. 그 안에서 row.getVisibleCells()를 호출하고 각 셀을 데이터 셀 요소로 변환합니다.

flexRender(cell.column.columnDef.cell, cell.getContext())를 사용하면 열에 정의된 사용자 지정 셀 렌더러를 적용하여 셀 콘텐츠를 렌더링할 수 있습니다.

flexRender는 리액트 컴포넌트, JSX를 반환하는 함수, 단순한 값 중 하나를 받아 일관된 방식으로 렌더링하는 보조 함수입니다. 열 정의에서 머리글과 셀에 단순한 문자열이나 완전한 렌더링 함수를 사용할 수 있게 해줍니다.

이 통합 인터페이스 덕분에 렌더링하기 전에 정의의 형식을 확인할 필요가 없습니다.

cell.renderValue()는 accessor로 가져온 원시 값을 문자열로 형식화하여 반환합니다. 더 세밀하게 제어하려면 cell.getContext()에서 행, 열, 표 인스턴스, 원시 값을 포함한 전체 렌더링 컨텍스트를 가져올 수 있습니다.

사용자 지정 셀 렌더러는 이 컨텍스트를 사용해 하나의 accessor 값 너머에 있는 관련 행 데이터에 접근합니다.

각 ColumnDef에는 메타데이터 필드가 있어 isSticky: true나 오른쪽 정렬과 같은 임의의 메타데이터를 연결할 수 있습니다. 렌더러에서는 column.columnDef.meta를 통해 이 값에 접근합니다.

열을 왼쪽이나 오른쪽에 고정할 때 TanStack Table은 열 객체에 열 고정 상태와 보조 메서드를 제공합니다.

accessorKey, 머리글, 선택적인 셀 렌더러를 사용해 ColumnDef 배열을 정의합니다. 데이터, 열, getCoreRowModel을 사용해 useReactTable을 호출합니다. 표 머리글에는 getHeaderGroups를, 표 본문에는 getRowModel()이 반환하는 행을 반복 처리하고, flexRender를 사용해 각 머리글과 셀을 렌더링합니다.

이 최소한의 설정만으로도 완전히 작동하며 스타일을 자유롭게 지정할 수 있는 표를 만들 수 있습니다.

TanStack Table의 열 정의에서 accessorKey 대신 accessorFn을 사용해야 하는 경우는 언제인가요?

직접 필드에는 accessorKey를, 계산된 값에는 accessorFn을 사용하는 ColumnDef로 열을 정의합니다. 열과 getCoreRowModel을 useReactTable에 전달한 다음, 헤더에는 getHeaderGroups를 사용하고 본문 행에는 getRowModel().rows를 사용해 렌더링합니다.

flexRender 유틸리티는 문자열 기반 정의와 함수 기반 머리글 및 셀 정의를 모두 동일한 방식으로 처리합니다.