Выбор строк и виртуализированные таблицы

Добавьте столбец выбора в массив ColumnDef, используя идентификатор 'select'. Ячейка отображает флажок, связанный с row.getToggleSelectedHandler(). Заголовок отображает флажок выбора всех строк, используя table.getToggleAllRowsSelectedHandler().

Также передайте в useReactTable состояние rowSelection и обработчик onRowSelectionChange.

row.getIsSelected() возвращает true, когда строка выбрана, поэтому его удобно использовать для применения выделенного фона к выбранным строкам.

row.getIsSomeSelected() обрабатывает неопределённое состояние флажка, когда выбраны только некоторые строки в группе; это полезно для сгруппированных таблиц.

table.getSelectedRowModel().rows возвращает массив всех выбранных в данный момент объектов строк. У каждой строки есть свойство row.original, содержащее исходный объект данных.

Так создаются кнопки массовых действий, работающие с выбранным набором, например «Удалить выбранные» или «Экспортировать выбранные».

Отображайте кнопки действий условно, проверяя table.getSelectedRowModel().rows.length > 0. Если строки не выбраны, скройте или отключите панель массовых действий, чтобы не создавать запутанные взаимодействия с пустым состоянием.

Показывайте в интерфейсе количество выбранных строк: «Выбрано строк: {count}» — это помогает пользователям понимать текущее состояние выбора.

Отрисовка 10 000 строк в виде узлов DOM выполняется крайне медленно. Браузеру приходится размещать, отрисовывать и поддерживать тысячи элементов. Пользователи сталкиваются с рывками при прокрутке и медленной первоначальной отрисовкой.

Виртуализация отрисовывает только строки, которые в данный момент видны в области просмотра, значительно уменьшая размер DOM и повышая производительность.

Установите @tanstack/react-virtual вместе с @tanstack/react-table. Это отдельные библиотеки, разработанные для совместной работы. TanStack Table управляет логикой данных, а TanStack Virtual — тем, какие элементы отрисовываются в DOM.

Точкой интеграции служит массив строк из table.getRowModel().rows.

Вызовите useVirtualizer({ count: table.getRowModel().rows.length, getScrollElement: () => tableContainerRef.current, estimateSize: () => 35 }). Параметр count определяет количество виртуальных элементов и соответствует текущему количеству строк таблицы после применения всех фильтров.

estimateSize предоставляет начальную оценку высоты строки; фактические высоты измеряются по мере отрисовки строк.

Вызовите virtualizer.getVirtualItems(), чтобы получить только строки, которые должны находиться в DOM в данный момент. Выполните обход этого массива, получите настоящую строку через table.getRowModel().rows[virtualRow.index] и отрисуйте только эти элементы tr.

У каждого виртуального элемента есть свойство start для абсолютного позиционирования внутри контейнера прокрутки.

Чтобы сохранять правильную позицию прокрутки, добавьте верхний пустой div с высотой, равной start первого виртуального элемента, и нижний пустой div с высотой, равной общему размеру за вычетом конца последнего элемента.

Эти невидимые div-элементы заполняют пространство, которое занимали бы неотрисованные строки, благодаря чему пропорции полосы прокрутки остаются правильными.

Передайте в useVirtualizer measureElement: el => el.getBoundingClientRect().height, чтобы точно измерять динамическую высоту строк. Ссылка на каждую строку прикрепляется к элементу tr, поэтому виртуализатор измеряет её фактическую отрисованную высоту.

Это позволяет обрабатывать строки с содержимым разной высоты — многострочным текстом или развёрнутыми строками — без смещений макета.

TanStack Table с сортировкой, фильтрацией, постраничной разбивкой, выбором строк и TanStack Virtual легко сочетается в единой конфигурации. Количество строк, передаваемое в useVirtualizer, должно браться из table.getRowModel().rows после обработки данных всеми активными моделями строк.

При включённой постраничной разбивке сначала разбейте данные на страницы, а затем виртуализируйте строки текущей страницы, чтобы обеспечить плавную прокрутку большой страницы.

Какой метод возвращает исходные объекты данных для всех выбранных в данный момент строк?

Для выбора строк используется столбец с флажками, обработчик getToggleSelectedHandler, состояние rowSelection и table.getSelectedRowModel().rows для доступа к выбранным данным. Виртуализация с useVirtualizer отрисовывает только видимые строки, используя getVirtualItems, пустые div-элементы и необязательный measureElement для динамической высоты.

Все возможности TanStack Table — сортировка, фильтрация, постраничная разбивка и выбор — легко сочетаются с виртуальной отрисовкой.