What problem does it solve?
Building spreadsheet-style cell selection in a data grid requires handling drag interactions, modifier keys, disjoint selection regions, and state that survives sorting, filtering, and column pinning. This Skill provides the operational knowledge to implement and debug rectangular cell range selection using the cellSelectionFeature in @tanstack/table-core.
Core Features & Use Cases
- Ordered Range Operations: Manage selection as an ordered log of include/exclude rectangles anchored to row and column ids, resolved into disjoint positive regions.
- Drag and Modifier Handling: Bind mouse handlers for drag selection with Shift-extend and Ctrl/Cmd include-or-exclude behavior, plus programmatic range application via selectCellRange.
- Selection Reads and Rendering: Read resolved bounds, cell counts, and range data, and draw continuous outlines using per-cell selection edges that respect column pinning render order.
- Use Case: Build a spreadsheet-like grid where users drag to select cells, Ctrl-click to subtract regions, copy the selection to the clipboard as TSV, and keep selection consistent after sorting or column reordering.
Quick Start
Use the cell-selection skill to add drag-based rectangular cell selection with include and exclude operations to my TanStack Table grid.