Row Selection and Virtualized Tables
Add checkbox row selection and combine TanStack Table with TanStack Virtual for large dataset rendering.
Enabling Row Selection
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.
Checking Selection State
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).
All lessons in this course
- TanStack Table Philosophy and Headless Design
- Defining Columns and Rendering Rows
- Sorting, Filtering, and Pagination
- Row Selection and Virtualized Tables