정렬, 필터링, 페이지 매김

정렬을 추가하려면 getSortedRowModel을 가져와 useReactTable 설정에 추가해야 합니다. 또한 {id, desc} 객체의 배열인 정렬 상태와 React 상태에 연결된 onSortingChange 핸들러가 필요합니다.

정렬된 행 모델은 핵심 행 모델을 감싸며 현재 정렬 상태에 따라 행 순서를 다시 정합니다.

각 열 머리글은 column.getToggleSortingHandler()를 제공하며, 이를 th 요소의 onClick에 연결합니다. 클릭할 때마다 오름차순, 내림차순, 정렬 안 함 상태가 차례로 전환됩니다.

column.getIsSorted()는 'asc', 'desc' 또는 false를 반환하므로 적절한 정렬 표시 화살표를 렌더링할 수 있습니다.

TanStack Table은 여러 열을 동시에 기준으로 정렬할 수 있습니다. 사용자가 두 번째 열 머리글을 클릭할 때 Shift 키를 누르고 있으면 첫 번째 열을 제거하지 않고 정렬 배열에 두 번째 열을 추가합니다.

sortingState 배열에는 우선순위 순서대로 현재 활성화된 모든 정렬 열이 포함되며, 정렬된 행 모델은 이를 순차적으로 적용합니다.

getFilteredRowModel을 가져오고 globalFilter 상태와 onGlobalFilterChange 핸들러를 추가하여 전체 필터링을 활성화합니다. 입력 요소를 상태에 연결하면 모든 열을 한 번에 필터링할 수 있습니다.

전체 필터는 기본적으로 퍼지 일치 또는 includes 전략을 사용하며, filterFns를 통해 구성할 수 있습니다.

개별 열은 column.getFilterValue()와 column.setFilterValue()를 통해 자체 필터를 제공할 수 있습니다. 각 열 머리글 아래에 필터 입력을 추가하고 이 메서드에 연결합니다.

열 필터와 전체 필터는 함께 적용되므로, 행이 필터링된 행 모델에 표시되려면 활성화된 모든 필터를 통과해야 합니다.

getPaginationRowModel을 가져와 pageIndex와 pageSize를 포함하는 페이지 매김 상태 객체 및 onPaginationChange 핸들러와 함께 useReactTable 설정에 추가합니다.

페이지 매김 행 모델은 필터링되고 정렬된 행에서 현재 페이지에 해당하는 부분만 추출합니다.

테이블 인스턴스는 탐색을 위해 table.nextPage(), table.previousPage(), table.firstPage(), table.lastPage()를 제공합니다. 경계에 도달했을 때 버튼을 비활성화하려면 table.getCanNextPage()와 table.getCanPreviousPage()를 사용합니다.

table.setPageIndex(n)는 특정 페이지로 바로 이동하고, table.setPageSize(n)는 페이지당 표시되는 행 수를 변경합니다.

table.getPageCount()는 필터링된 행 수를 pageSize로 나눈 값을 기준으로 전체 페이지 수를 반환합니다. table.getState().pagination.pageIndex는 현재 페이지의 0부터 시작하는 인덱스를 제공합니다.

이 값을 사용하여 페이지 매김 UI에 "3/12페이지"와 같은 페이지 카운터를 만들 수 있습니다.

행 모델은 서로 결합됩니다. getCoreRowModel이 기반을 제공하고, getFilteredRowModel이 이를 감싸 필터를 적용하며, getSortedRowModel이 필터링된 데이터에 정렬을 적용하고, getPaginationRowModel이 현재 페이지에 맞게 결과를 추출합니다.

순서가 중요합니다. 필터링 후에 정렬이 수행되고, 마지막에 페이지 매김이 수행됩니다.

TanStack Table은 내부적으로 행 모델 계산 결과를 메모이제이션합니다. 변경된 행 모델만 다시 계산하므로 대규모 데이터 집합도 효율적으로 정렬하고 필터링할 수 있습니다.

매우 큰 데이터 집합(100,000개 이상의 행)에서는 페이지 매김을 react-virtual을 사용한 가상화와 함께 적용하여 모든 페이지의 행을 한 번에 렌더링하지 않도록 하십시오.

getSortedRowModel을 정렬 상태에 연결하고, getFilteredRowModel을 globalFilter 및 열 필터 상태에 연결하며, getPaginationRowModel을 페이지 매김 상태에 연결합니다. 각 기능은 선택적으로 활성화할 수 있으며 서로 깔끔하게 결합됩니다.

열 머리글은 getToggleSortingHandler를 통해 정렬을 제어하고, 입력은 setFilterValue와 onGlobalFilterChange를 통해 필터를 제어하며, 버튼은 nextPage, previousPage, setPageIndex를 통해 페이지 매김을 제어합니다.

TanStack Table의 페이지 매김 상태에서 현재 페이지 인덱스와 페이지 크기를 보유하는 객체는 무엇입니까?

정렬에는 getSortedRowModel, 정렬 상태, 열 머리글 클릭 핸들러가 필요합니다. 필터링에는 전역 및 열별 필터 상태와 함께 getFilteredRowModel을 사용합니다. 페이지 매김에는 pageIndex와 pageSize 상태와 함께 getPaginationRowModel을 사용합니다.

세 행 모델은 자동으로 결합됩니다. 먼저 필터링하고, 두 번째로 정렬하며, 마지막으로 페이지 매김을 수행합니다.