cell-selection

Implements rectangular cell range selection with include and exclude operations in TanStack Table.

28.4k|3.6k|Updated Oct 20, 2016
One-click install
npx skills add https://github.com/TanStack/table --skill cell-selection
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: cell-selection
Source: https://github.com/TanStack/table/tree/main/packages/table-core/skills/cell-selection
Command: npx skills add https://github.com/TanStack/table --skill cell-selection

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @tanstack/table-core.

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.

Frequently Asked Questions about cell-selection

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add cell range selection to TanStack Table?

Register cellSelectionFeature with tableFeatures, provide a getRowId option, then bind cell.getSelectionStartHandler() to onMouseDown and cell.getSelectionExtendHandler() to onMouseEnter on each cell. Both handlers are required for drag selection to work.

How do I select or deselect a cell range programmatically in TanStack Table?

Call table.selectCellRange(range) to replace the selection, or pass { mode: 'include' } or { mode: 'exclude' } to add or subtract a rectangle. Ranges are defined by anchor and focus corners identified by row and column ids.

Why does my cell selection change after sorting or reordering columns?

Ranges are anchored to corner row and column ids, not fixed positions, so sorting or reordering recomputes what sits between the corners and can widen the selection. Call table.resetCellSelection(true) after such changes if stricter behavior is needed.

Why does drag selection only select the first cell?

This happens when only the mousedown handler is bound. You must also bind cell.getSelectionExtendHandler() to onMouseEnter; without it a drag selects only the origin cell. Do not add a mouseup binding since the start handler manages its own.

How do I copy selected cells to the clipboard as TSV?

Call table.getSelectedCellRangesData() to get raw values as a [range][row][column] structure, then serialize to TSV in your own code before calling navigator.clipboard.writeText. The table returns raw values only; delimiter and quoting rules are application decisions.

Does cell selection reset when table data changes?

Yes, selection resets to initialState.cellSelection whenever data changes, because new data can invalidate the row ids a range references. Set autoResetCellSelection: false to opt out, though autoResetAll overrides this option.