Row Selection and Virtualized Tables

Add a selection column to your ColumnDef array using the id 'select'. The cell renders a checkbox wired to row.getToggleSelectedHandler(). The header renders a select-all checkbox using table.getToggleAllRowsSelectedHandler().

Also pass rowSelection state and onRowSelectionChange to useReactTable.

row.getIsSelected() returns true when a row is currently selected, perfect for applying a highlighted background style to selected rows.

row.getIsSomeSelected() handles the indeterminate checkbox state when only some rows in a group are selected (useful for grouped tables).

table.getSelectedRowModel().rows returns an array of all currently selected row objects. Each row has a row.original property containing the original data object.

This is how you build bulk action buttons that operate on the selected set, like "Delete selected" or "Export selected".

Conditionally render action buttons based on table.getSelectedRowModel().rows.length > 0. When no rows are selected, hide or disable the bulk action toolbar to avoid confusing empty-state interactions.

Display the selected count in the UI: "{count} rows selected" keeps users informed of their selection.

Rendering 10,000 rows as DOM nodes is extremely slow. The browser must layout, paint, and maintain thousands of elements. Users experience janky scrolling and slow initial renders.

Virtualization renders only the rows currently visible in the viewport, dramatically reducing DOM size and improving performance.

Install @tanstack/react-virtual alongside @tanstack/react-table. The two libraries are separate but designed to complement each other. TanStack Table manages your data logic; TanStack Virtual manages which items are rendered in the DOM.

The integration point is the row array from table.getRowModel().rows.

Call useVirtualizer({ count: table.getRowModel().rows.length, getScrollElement: () => tableContainerRef.current, estimateSize: () => 35 }). The count drives how many virtual items exist, matching the table's current row count after all filters.

estimateSize provides an initial row height estimate; actual heights are measured as rows render.

Call virtualizer.getVirtualItems() to get only the rows that should currently be in the DOM. Map over this array, access the real row via table.getRowModel().rows[virtualRow.index], and render only those tr elements.

Each virtual item has a start property for absolute positioning within the scroll container.

To maintain correct scroll position, add a top spacer div with height equal to the first virtual item's start, and a bottom spacer div with height equal to the total size minus the last item's end.

These invisible divs fill the space that un-rendered rows would occupy, keeping the scrollbar proportionally correct.

Pass measureElement: el => el.getBoundingClientRect().height to useVirtualizer for accurate dynamic row heights. Each row ref is attached to the tr element so the virtualizer measures its actual rendered height.

This handles rows with varying content (multi-line text, expanded rows) without layout shifts.

TanStack Table with sorting, filtering, pagination, row selection, and TanStack Virtual all compose together. The row count passed to useVirtualizer should come from table.getRowModel().rows after all active row models have processed the data.

With pagination enabled, you paginate first, then virtualize the current page's rows for smooth scrolling within a large page.

Which method returns the original data objects for all currently selected rows?

Row selection uses a checkbox column with getToggleSelectedHandler, rowSelection state, and table.getSelectedRowModel().rows to access selected data. Virtualization with useVirtualizer renders only visible rows using getVirtualItems, spacer divs, and optional measureElement for dynamic heights.

All TanStack Table features (sort, filter, pagination, selection) compose cleanly with virtual rendering.