행 선택과 가상화 테이블

'select'라는 id를 사용하여 ColumnDef 배열에 선택 열을 추가합니다. 셀은 row.getToggleSelectedHandler()에 연결된 체크박스를 렌더링합니다. 머리글은 table.getToggleAllRowsSelectedHandler()를 사용하여 전체 선택 체크박스를 렌더링합니다.

또한 rowSelection 상태와 onRowSelectionChange를 useReactTable에 전달합니다.

row.getIsSelected()는 행이 현재 선택된 경우 true를 반환하므로, 선택된 행에 강조된 배경 스타일을 적용하기에 적합합니다.

row.getIsSomeSelected()는 그룹의 일부 행만 선택된 경우 불확정 체크박스 상태를 처리합니다. 그룹화된 테이블에서 유용합니다.

table.getSelectedRowModel().rows는 현재 선택된 모든 행 객체의 배열을 반환합니다. 각 행에는 원본 데이터 객체가 들어 있는 row.original 속성이 있습니다.

이를 통해 "선택 항목 삭제" 또는 "선택 항목 내보내기"와 같이 선택된 집합에 대해 작업하는 일괄 작업 버튼을 만들 수 있습니다.

table.getSelectedRowModel().rows.length > 0을 기준으로 작업 버튼을 조건부 렌더링합니다. 선택된 행이 없을 때는 빈 상태에서의 혼란스러운 상호작용을 방지하기 위해 일괄 작업 도구 모음을 숨기거나 비활성화합니다.

UI에 선택된 개수를 표시하십시오. "{count}개 행 선택됨"과 같이 표시하면 사용자가 자신의 선택 상태를 확인할 수 있습니다.

10,000개의 행을 DOM 노드로 렌더링하면 매우 느립니다. 브라우저는 수천 개 요소의 레이아웃을 계산하고, 그려 내며, 유지해야 합니다. 사용자는 끊기는 스크롤과 느린 초기 렌더링을 경험하게 됩니다.

가상화는 현재 뷰포트에 표시되는 행만 렌더링하여 DOM 크기를 크게 줄이고 성능을 향상합니다.

@tanstack/react-table과 함께 @tanstack/react-virtual을 설치합니다. 두 라이브러리는 서로 분리되어 있지만 함께 사용하도록 설계되었습니다. TanStack Table은 데이터 로직을 관리하고, TanStack Virtual은 어떤 항목을 DOM에 렌더링할지 관리합니다.

통합 지점은 table.getRowModel().rows에서 가져오는 행 배열입니다.

useVirtualizer({ count: table.getRowModel().rows.length, getScrollElement: () => tableContainerRef.current, estimateSize: () => 35 })를 호출합니다. count는 가상 항목의 개수를 결정하며, 모든 필터가 적용된 후 테이블의 현재 행 수와 일치합니다.

estimateSize는 초기 행 높이 추정값을 제공하고, 실제 높이는 행이 렌더링될 때 측정됩니다.

현재 DOM에 있어야 하는 행만 가져오려면 virtualizer.getVirtualItems()를 호출합니다. 이 배열을 순회하고 table.getRowModel().rows[virtualRow.index]를 통해 실제 행에 접근한 다음 해당 tr 요소만 렌더링합니다.

각 가상 항목에는 스크롤 컨테이너 안에서 절대 위치를 지정하기 위한 start 속성이 있습니다.

스크롤 위치를 올바르게 유지하려면 첫 번째 가상 항목의 start와 같은 높이의 상단 스페이서 div를 추가하고, 전체 크기에서 마지막 항목의 end를 뺀 높이의 하단 스페이서 div를 추가합니다.

이 보이지 않는 div들은 렌더링되지 않은 행이 차지했을 공간을 채워 스크롤 막대의 비율을 올바르게 유지합니다.

정확한 동적 행 높이를 얻으려면 measureElement: el => el.getBoundingClientRect().height를 useVirtualizer에 전달합니다. 각 행의 ref를 tr 요소에 연결하면 가상화 도구가 실제 렌더링된 높이를 측정합니다.

이 방식은 콘텐츠의 길이가 서로 다른 행(여러 줄 텍스트, 확장된 행)을 레이아웃 이동 없이 처리합니다.

정렬, 필터링, 페이지 매김, 행 선택, TanStack Virtual을 사용하는 TanStack Table은 모두 함께 결합할 수 있습니다. useVirtualizer에 전달하는 행 수는 모든 활성 행 모델이 데이터를 처리한 후의 table.getRowModel().rows에서 가져와야 합니다.

페이지 매김을 활성화하면 먼저 페이지 매김을 수행한 다음 현재 페이지의 행을 가상화하여 큰 페이지 안에서도 부드럽게 스크롤할 수 있습니다.

현재 선택된 모든 행의 원본 데이터 객체를 반환하는 메서드는 무엇입니까?

행 선택은 getToggleSelectedHandler가 연결된 체크박스 열과 rowSelection 상태를 사용하며, 선택된 데이터에 접근할 때 table.getSelectedRowModel().rows를 사용합니다. useVirtualizer를 사용한 가상화는 getVirtualItems, 스페이서 div, 선택적 measureElement를 활용하여 표시되는 행만 렌더링합니다.

TanStack Table의 모든 기능(정렬, 필터링, 페이지 매김, 선택)은 가상 렌더링과 깔끔하게 결합됩니다.