diff --git a/.gitignore b/.gitignore index df459c9799..484cfce297 100644 --- a/.gitignore +++ b/.gitignore @@ -14,6 +14,7 @@ es artifacts .rpt2_cache coverage +test-results *.tgz # misc diff --git a/_artifacts/domain_map.yaml b/_artifacts/domain_map.yaml index e19dab5561..f74ebe9c27 100644 --- a/_artifacts/domain_map.yaml +++ b/_artifacts/domain_map.yaml @@ -12,7 +12,7 @@ library: meta: generated_by: '@tanstack/intent scaffold domain discovery' - date: '2026-07-31' + date: '2026-08-01' status: reviewed maintainer_review_pending: false phase_4_date: '2026-07-10' @@ -25,7 +25,7 @@ scope: - 'Teach headless rendering, feature registration, row-model ownership, framework state, and v8-to-v9 changes as foundations.' included: - 'All 18 public workspace packages.' - - 'All 14 stock Table v9 features, custom features, TypeScript helpers, migrations, framework state, composable table hooks, Query, Virtual, Devtools, and fuzzy ranking.' + - 'All 16 stock Table v9 features, custom features, TypeScript helpers, migrations, framework state, composable table hooks, Query, Virtual, Devtools, and fuzzy ranking.' - 'Renderer-owned CSS edge cases for sticky positioning, column widths, resizing, layout, and virtualization.' excluded: - 'Component-library-specific integrations such as shadcn, Material UI, Mantine, and equivalent design systems.' @@ -47,7 +47,7 @@ migration_depth_contract: - 'Framework package and construction entrypoint changes, including framework-version prerequisites.' - 'Logical start/end column-pinning rename and the full old-to-new API mapping.' - 'Prototype-bound row, cell, column, and header methods; object-spread/Object.keys/JSON implications.' - - 'Required tableFeatures registration, stockFeatures audit guidance, all 14 feature imports, and feature-gated state/APIs.' + - 'Required tableFeatures registration, stockFeatures audit guidance, all 16 feature imports, and feature-gated state/APIs.' - 'Core row model removal plus every get*RowModel to create*RowModel feature-slot mapping.' - 'filterFns, sortFns, aggregationFns, and filterMeta registry-slot migration.' - 'Adapter state access, selectors/subscriptions, controlled slices, external atoms, precedence, and onStateChange removal.' @@ -156,7 +156,7 @@ domains: description: 'Headless philosophy, feature registration, client/server ownership, TypeScript inference, API discovery, custom features, and v8 migration.' - slug: feature-plugins name: 'Feature plugins' - description: 'The 14 stock optional features, their prerequisites, state, row-model participation, and UI responsibilities.' + description: 'The 16 stock optional features, their prerequisites, state, row-model participation, and UI responsibilities.' - slug: framework-adapters name: 'Framework adapters' description: 'Per-framework setup, reactive table state, v8 migration, reusable createTableHook patterns, and supported Query/Virtual composition.' @@ -533,7 +533,7 @@ skills: package: '@tanstack/table-core' domain: feature-plugins type: feature - purpose: 'Maintain spreadsheet-style rectangular cell ranges anchored to row and column ids across sorting, filtering, pagination, and column layout changes.' + purpose: 'Maintain spreadsheet-style rectangular selections as ordered include/exclude operations anchored to row and column ids, resolving them into disjoint positive regions across sorting, filtering, pagination, and column layout changes.' sources: [ 'TanStack/table:docs/framework/react/guide/cell-selection.md', @@ -541,7 +541,10 @@ skills: 'TanStack/table:examples/react/cell-selection', ] failure_modes: - - 'Expecting cellSelection to be a per-cell map; it is an array of two-corner rectangles, so a range widens onto new cells when sorting or column order changes what sits between its corners.' + - 'Expecting cellSelection to be a per-cell map or a list of final positive regions; it is an ordered log of two-corner include/exclude operations, and derived bounds may split one stored range into several regions.' + - 'Reordering, deduplicating, or serializing only the corners of controlled cellSelection state and thereby changing or losing subtraction semantics.' + - 'Using additive when the intended operation is explicit subtraction; selectCellRange mode is replace, include, or exclude, while additive is only a deprecated include alias.' + - 'Assuming Ctrl/Cmd always adds a range; a modified interaction excludes when it starts on a selected cell and includes when it starts on an unselected cell.' - 'Binding only the mousedown handler and expecting drag selection, or reimplementing mouseup even though the start handler owns its own document listener.' - 'Drawing the selection outline with borders on a border-collapse table, which changes row heights as cells become selected.' - 'Re-rendering every cell on each drag update instead of subscribing per row to table.atoms.cellSelection.' @@ -1656,7 +1659,7 @@ documentation_read: narrative_docs: 'All 187 narrative Markdown documents were inventoried by title, headings, and admonitions; foundational, feature, state, migration, composable, and virtualization guides were deep-read.' generated_references: 'All 828 generated reference documents were inventoried for exports and API categories; exact API truth is delegated to installed dist declarations (.d.ts) in skills.' examples: 'All 277 example directories were inventoried; basic, state, composable, Query, Virtual, feature, and Devtools-relevant examples were sampled or deep-read by skill.' - source: 'All public package entrypoints, tableFeatures prerequisites, core construction/state precedence, all 14 feature implementations/defaults, createTableHook implementations, Devtools registration, and match-sorter-utils source were inspected.' + source: 'All public package entrypoints, tableFeatures prerequisites, core construction/state precedence, all 16 feature implementations/defaults, createTableHook implementations, Devtools registration, and match-sorter-utils source were inspected.' community: 'Recent v9 issues plus recurring high-signal issues and GitHub discussions were reviewed for failure modes and misconceptions.' open_gaps: diff --git a/_artifacts/skill_spec.md b/_artifacts/skill_spec.md index cb08151978..00de2f975d 100644 --- a/_artifacts/skill_spec.md +++ b/_artifacts/skill_spec.md @@ -9,7 +9,7 @@ This specification is the generation contract for a deliberately smaller, foot-g ## Outcome -Generate 78 short package-local skills across all 18 public packages. A loaded skill should quickly do three things: +Generate 80 short package-local skills across all 18 public packages. A loaded skill should quickly do three things: 1. Correct the user or agent mental model. 2. Show the smallest reliable setup or decision pattern. @@ -183,8 +183,10 @@ Skill versions ship with package versions. After release tooling calculates pack - custom-features — plugin lifecycle after exhausting built-in APIs and meta. - migrate-v8-to-v9 — shared breaking changes and adapter migration routing. -### Stock feature plugins — @tanstack/table-core (14) +### Stock feature plugins — @tanstack/table-core (16) +- aggregation +- cell-selection - column-faceting - column-filtering - grouping @@ -271,7 +273,7 @@ All Devtools skills must emphasize the required non-empty table options.key, lif | Package | Skills | | -------------------------------- | -----: | -| @tanstack/table-core | 21 | +| @tanstack/table-core | 23 | | @tanstack/react-table | 6 | | @tanstack/preact-table | 6 | | @tanstack/octane-table | 3 | @@ -289,7 +291,7 @@ All Devtools skills must emphasize the required non-empty table options.key, lif | @tanstack/vue-table-devtools | 1 | | @tanstack/angular-table-devtools | 1 | | @tanstack/match-sorter-utils | 1 | -| Total | 78 | +| Total | 80 | ## Framework distinctions that must survive generation diff --git a/_artifacts/skill_tree.yaml b/_artifacts/skill_tree.yaml index 790aeddb3f..a5c477aa17 100644 --- a/_artifacts/skill_tree.yaml +++ b/_artifacts/skill_tree.yaml @@ -9,7 +9,7 @@ library: generated_from: domain_map: '_artifacts/domain_map.yaml' skill_spec: '_artifacts/skill_spec.md' -generated_at: '2026-07-31' +generated_at: '2026-08-01' status: reviewed reviewed_at: '2026-07-29' batch_review: true @@ -119,7 +119,7 @@ skills: domain: foundations path: 'packages/table-core/skills/migrate-v8-to-v9/SKILL.md' package: 'packages/table-core' - description: 'Perform a complete TanStack Table v8-to-v9 migration audit: all 14 feature registrations, every row-model and registry slot, state/store changes, prototype methods, full pinning and resizing mappings, sorting and selection semantics, removed internals, helpers, meta typing, and generic changes. useLegacyTable is only a deprecated temporary bridge when already encountered.' + description: 'Perform a complete TanStack Table v8-to-v9 migration audit: all 16 feature registrations, every row-model and registry slot, state/store changes, prototype methods, full pinning and resizing mappings, sorting and selection semantics, removed internals, helpers, meta typing, and generic changes. useLegacyTable is only a deprecated temporary bridge when already encountered.' requires: ['core', 'table-features', 'typescript'] sources: - 'TanStack/table:docs/framework/react/guide/migrating.md' @@ -174,6 +174,21 @@ skills: - 'TanStack/table:packages/table-core/src/features/column-grouping' - 'TanStack/table:examples/react/grouping' + - name: 'Aggregation' + slug: aggregation + type: sub-skill + domain: feature-plugins + path: 'packages/table-core/skills/aggregation/SKILL.md' + package: 'packages/table-core' + description: 'Aggregate columns independently of grouping with rowAggregationFeature, built-in or custom aggregation functions, caller-selected row scopes, keyed results, grouped merges, and manual values.' + requires: ['core', 'table-features'] + sources: + - 'TanStack/table:docs/guide/aggregation.md' + - 'TanStack/table:docs/framework/react/guide/aggregation.md' + - 'TanStack/table:packages/table-core/src/features/row-aggregation' + - 'TanStack/table:examples/react/aggregation' + - 'TanStack/table:examples/react/grouped-aggregation' + - name: 'Column Ordering' slug: column-ordering type: sub-skill @@ -297,7 +312,7 @@ skills: domain: feature-plugins path: 'packages/table-core/skills/cell-selection/SKILL.md' package: 'packages/table-core' - description: 'Select rectangular cell ranges with cellSelectionFeature: two-corner range state, drag and Shift and Ctrl handlers, selection edges, and render-order resolution under pinning. Load when ranges widen unexpectedly after sorting or reordering, or when drag re-renders the whole table.' + description: 'Select, add, and subtract rectangular cell ranges with cellSelectionFeature: ordered include/exclude operations, modifier dragging, final positive bounds, selection edges, and render-order resolution under pinning. Load for spreadsheet-style or “select all except” behavior.' requires: ['core', 'table-features'] sources: - 'TanStack/table:docs/framework/react/guide/cell-selection.md' diff --git a/docs/framework/alpine/guide/cell-selection.md b/docs/framework/alpine/guide/cell-selection.md index 4ec8ccf546..4b4e3d66ac 100644 --- a/docs/framework/alpine/guide/cell-selection.md +++ b/docs/framework/alpine/guide/cell-selection.md @@ -44,7 +44,7 @@ Alpine.data('table', () => { ## Cell Selection (Alpine) Guide -The cell selection feature keeps track of spreadsheet-style rectangular selections. A user can click a cell, drag across a block of cells, Shift-click to extend, and Ctrl/Cmd-click to add a second rectangle. Let's take a look at some common use cases. +The cell selection feature keeps track of spreadsheet-style rectangular selections. A user can click a cell, drag across a block of cells, Shift-click to extend, and Ctrl/Cmd-drag to add or subtract a rectangle based on whether the starting cell is selected. Let's take a look at some common use cases. ### Access Cell Selection State @@ -54,7 +54,7 @@ The table instance already manages the cell selection state for you. You can acc - `getSelectedCellCount()` - returns how many cells are selected - `getSelectedCellIds()` - returns the ids of every selected cell - `getCellSelectionRowIds()` / `getCellSelectionColumnIds()` - returns the rows and columns the selection touches -- `getSelectedCellRangesData()` - returns each selected rectangle's values as a row-major grid +- `getSelectedCellRangesData()` - returns each final positive selection region's values as a row-major grid ```ts console.log(table.atoms.cellSelection.get()) //get the cell selection state @@ -69,7 +69,7 @@ The expansion APIs (`getSelectedCellIds`, `getSelectedCellRangesData`) are memoi ### Cell Selection State Shape -`CellSelectionState` is an array of rectangles, each stored as its two defining corners: +`CellSelectionState` is an ordered array of range operations, each stored as its two defining corners: ```ts type CellSelectionRange = { @@ -77,6 +77,7 @@ type CellSelectionRange = { anchorColumnId: string focusRowId: string focusColumnId: string + operation?: 'include' | 'exclude' } type CellSelectionState = Array @@ -84,7 +85,7 @@ type CellSelectionState = Array The `anchor` corner is where the selection started and stays put. The `focus` corner is the one that moves while dragging or Shift-extending. Storing both corners, rather than a normalized min/max rectangle, is what makes Shift-extend and "collapse back to the active cell" possible. -Because ranges are only two corners, a drag across thousands of cells updates two strings rather than building a map with one entry per selected cell. +Ranges are applied in order. An omitted `operation` is an inclusion for backward compatibility; an `exclude` range subtracts its rectangle from the selection produced so far. This compact operation log means a “select all except these cells” interaction does not build a map with one entry per selected cell. ### Manage Cell Selection State @@ -216,14 +217,18 @@ const table = createTable({ #### Multiple Ranges -Ctrl-clicking or Cmd-clicking pushes an additional rectangle onto the selection instead of replacing it. Set `enableMultiCellRangeSelection: false` to allow only one rectangle at a time, or override `isMultiCellRangeSelectionEvent` to change the modifier. +Ctrl-clicking or Cmd-clicking an unselected cell adds a new inclusive rectangle. Starting the same modified interaction on a selected cell adds an exclusion instead, so clicking removes that cell and dragging subtracts the whole rectangle. Whether the drag includes or excludes is fixed when it starts; shrinking an exclusion drag restores cells that leave its rectangle. Set `enableMultiCellRangeSelection: false` to disable both behaviors, or override `isMultiCellRangeSelectionEvent` to change the modifier. + +#### Programmatic Range Operations + +`table.selectCellRange(range)` replaces the current selection. Pass `{ mode: 'include' }` to append an inclusion or `{ mode: 'exclude' }` to append an exclusion. The older `{ additive: true }` option remains as a deprecated alias for include mode; `mode` wins if both options are supplied. `table.getCellSelectionBounds()` resolves the operation log into deterministic, disjoint positive rectangles. ### Render Cell Selection UI TanStack Table does not dictate how you render selected cells. These cell APIs give you everything you need: - `cell.getIsSelected()` - whether this cell falls inside any range -- `cell.getIsFocused()` - whether this is the active cell +- `cell.getIsFocused()` - whether this is the active cell (an excluded anchor can be focused without being selected) - `cell.getSelectionEdges()` - which sides sit on the selection boundary - `cell.getTabIndex()` - `0` for the focused cell and `-1` otherwise, for roving tabindex @@ -286,7 +291,7 @@ Scope the hotkeys to the grid element rather than the document, or arrow keys an ### Copying a Selection -`getSelectedCellRangesData()` returns raw values indexed as `[rangeIndex][rowIndex][columnIndex]`. Turning that into clipboard text is left to your application, because the delimiter, the representation of `null`, and any quoting rules are decisions only you can make. +`getSelectedCellRangesData()` returns raw values indexed as `[regionIndex][rowIndex][columnIndex]`. A region is one of the final disjoint positive rectangles after all include and exclude operations are applied, so it does not necessarily correspond one-to-one with stored state. Turning that into clipboard text is left to your application, because the delimiter, the representation of `null`, and any quoting rules are decisions only you can make. ```ts function escapeTsvValue(value: unknown) { diff --git a/docs/framework/angular/guide/cell-selection.md b/docs/framework/angular/guide/cell-selection.md index b1d3a808cd..97a11dc914 100644 --- a/docs/framework/angular/guide/cell-selection.md +++ b/docs/framework/angular/guide/cell-selection.md @@ -34,7 +34,7 @@ export class App { ## Cell Selection (Angular) Guide -The cell selection feature keeps track of spreadsheet-style rectangular selections. A user can click a cell, drag across a block of cells, Shift-click to extend, and Ctrl/Cmd-click to add a second rectangle. Let's take a look at some common use cases. +The cell selection feature keeps track of spreadsheet-style rectangular selections. A user can click a cell, drag across a block of cells, Shift-click to extend, and Ctrl/Cmd-drag to add or subtract a rectangle based on whether the starting cell is selected. Let's take a look at some common use cases. ### Access Cell Selection State @@ -44,7 +44,7 @@ The table instance already manages the cell selection state for you. You can acc - `getSelectedCellCount()` - returns how many cells are selected - `getSelectedCellIds()` - returns the ids of every selected cell - `getCellSelectionRowIds()` / `getCellSelectionColumnIds()` - returns the rows and columns the selection touches -- `getSelectedCellRangesData()` - returns each selected rectangle's values as a row-major grid +- `getSelectedCellRangesData()` - returns each final positive selection region's values as a row-major grid ```ts console.log(table.atoms.cellSelection.get()) //get the cell selection state @@ -59,7 +59,7 @@ The expansion APIs (`getSelectedCellIds`, `getSelectedCellRangesData`) are memoi ### Cell Selection State Shape -`CellSelectionState` is an array of rectangles, each stored as its two defining corners: +`CellSelectionState` is an ordered array of range operations, each stored as its two defining corners: ```ts type CellSelectionRange = { @@ -67,6 +67,7 @@ type CellSelectionRange = { anchorColumnId: string focusRowId: string focusColumnId: string + operation?: 'include' | 'exclude' } type CellSelectionState = Array @@ -74,7 +75,7 @@ type CellSelectionState = Array The `anchor` corner is where the selection started and stays put. The `focus` corner is the one that moves while dragging or Shift-extending. Storing both corners, rather than a normalized min/max rectangle, is what makes Shift-extend and "collapse back to the active cell" possible. -Because ranges are only two corners, a drag across thousands of cells updates two strings rather than building a map with one entry per selected cell. +Ranges are applied in order. An omitted `operation` is an inclusion for backward compatibility; an `exclude` range subtracts its rectangle from the selection produced so far. This compact operation log means a “select all except these cells” interaction does not build a map with one entry per selected cell. ### Manage Cell Selection State @@ -200,14 +201,18 @@ readonly table = injectTable(() => ({ #### Multiple Ranges -Ctrl-clicking or Cmd-clicking pushes an additional rectangle onto the selection instead of replacing it. Set `enableMultiCellRangeSelection: false` to allow only one rectangle at a time, or override `isMultiCellRangeSelectionEvent` to change the modifier. +Ctrl-clicking or Cmd-clicking an unselected cell adds a new inclusive rectangle. Starting the same modified interaction on a selected cell adds an exclusion instead, so clicking removes that cell and dragging subtracts the whole rectangle. Whether the drag includes or excludes is fixed when it starts; shrinking an exclusion drag restores cells that leave its rectangle. Set `enableMultiCellRangeSelection: false` to disable both behaviors, or override `isMultiCellRangeSelectionEvent` to change the modifier. + +#### Programmatic Range Operations + +`table.selectCellRange(range)` replaces the current selection. Pass `{ mode: 'include' }` to append an inclusion or `{ mode: 'exclude' }` to append an exclusion. The older `{ additive: true }` option remains as a deprecated alias for include mode; `mode` wins if both options are supplied. `table.getCellSelectionBounds()` resolves the operation log into deterministic, disjoint positive rectangles. ### Render Cell Selection UI TanStack Table does not dictate how you render selected cells. These cell APIs give you everything you need: - `cell.getIsSelected()` - whether this cell falls inside any range -- `cell.getIsFocused()` - whether this is the active cell +- `cell.getIsFocused()` - whether this is the active cell (an excluded anchor can be focused without being selected) - `cell.getSelectionEdges()` - which sides sit on the selection boundary - `cell.getTabIndex()` - `0` for the focused cell and `-1` otherwise, for roving tabindex @@ -287,7 +292,7 @@ Scope the hotkeys to the grid element rather than the document, or arrow keys an ### Copying a Selection -`getSelectedCellRangesData()` returns raw values indexed as `[rangeIndex][rowIndex][columnIndex]`. Turning that into clipboard text is left to your application, because the delimiter, the representation of `null`, and any quoting rules are decisions only you can make. +`getSelectedCellRangesData()` returns raw values indexed as `[regionIndex][rowIndex][columnIndex]`. A region is one of the final disjoint positive rectangles after all include and exclude operations are applied, so it does not necessarily correspond one-to-one with stored state. Turning that into clipboard text is left to your application, because the delimiter, the representation of `null`, and any quoting rules are decisions only you can make. ```ts function escapeTsvValue(value: unknown) { diff --git a/docs/framework/ember/guide/cell-selection.md b/docs/framework/ember/guide/cell-selection.md index e53c2d9802..f7724593ed 100644 --- a/docs/framework/ember/guide/cell-selection.md +++ b/docs/framework/ember/guide/cell-selection.md @@ -34,7 +34,7 @@ export default class MyTable extends Component { ## Cell Selection (Ember) Guide -The cell selection feature keeps track of spreadsheet-style rectangular selections. A user can click a cell, drag across a block of cells, Shift-click to extend, and Ctrl/Cmd-click to add a second rectangle. Let's take a look at some common use cases. +The cell selection feature keeps track of spreadsheet-style rectangular selections. A user can click a cell, drag across a block of cells, Shift-click to extend, and Ctrl/Cmd-drag to add or subtract a rectangle based on whether the starting cell is selected. Let's take a look at some common use cases. ### Access Cell Selection State @@ -44,7 +44,7 @@ The table instance already manages the cell selection state for you. You can acc - `getSelectedCellCount()` - returns how many cells are selected - `getSelectedCellIds()` - returns the ids of every selected cell - `getCellSelectionRowIds()` / `getCellSelectionColumnIds()` - returns the rows and columns the selection touches -- `getSelectedCellRangesData()` - returns each selected rectangle's values as a row-major grid +- `getSelectedCellRangesData()` - returns each final positive selection region's values as a row-major grid ```ts console.log(table.atoms.cellSelection.get()) //get the cell selection state @@ -59,7 +59,7 @@ The expansion APIs (`getSelectedCellIds`, `getSelectedCellRangesData`) are memoi ### Cell Selection State Shape -`CellSelectionState` is an array of rectangles, each stored as its two defining corners: +`CellSelectionState` is an ordered array of range operations, each stored as its two defining corners: ```ts type CellSelectionRange = { @@ -67,6 +67,7 @@ type CellSelectionRange = { anchorColumnId: string focusRowId: string focusColumnId: string + operation?: 'include' | 'exclude' } type CellSelectionState = Array @@ -74,7 +75,7 @@ type CellSelectionState = Array The `anchor` corner is where the selection started and stays put. The `focus` corner is the one that moves while dragging or Shift-extending. Storing both corners, rather than a normalized min/max rectangle, is what makes Shift-extend and "collapse back to the active cell" possible. -Because ranges are only two corners, a drag across thousands of cells updates two strings rather than building a map with one entry per selected cell. +Ranges are applied in order. An omitted `operation` is an inclusion for backward compatibility; an `exclude` range subtracts its rectangle from the selection produced so far. This compact operation log means a “select all except these cells” interaction does not build a map with one entry per selected cell. ### Manage Cell Selection State @@ -196,14 +197,18 @@ table = useTable(() => ({ #### Multiple Ranges -Ctrl-clicking or Cmd-clicking pushes an additional rectangle onto the selection instead of replacing it. Set `enableMultiCellRangeSelection: false` to allow only one rectangle at a time, or override `isMultiCellRangeSelectionEvent` to change the modifier. +Ctrl-clicking or Cmd-clicking an unselected cell adds a new inclusive rectangle. Starting the same modified interaction on a selected cell adds an exclusion instead, so clicking removes that cell and dragging subtracts the whole rectangle. Whether the drag includes or excludes is fixed when it starts; shrinking an exclusion drag restores cells that leave its rectangle. Set `enableMultiCellRangeSelection: false` to disable both behaviors, or override `isMultiCellRangeSelectionEvent` to change the modifier. + +#### Programmatic Range Operations + +`table.selectCellRange(range)` replaces the current selection. Pass `{ mode: 'include' }` to append an inclusion or `{ mode: 'exclude' }` to append an exclusion. The older `{ additive: true }` option remains as a deprecated alias for include mode; `mode` wins if both options are supplied. `table.getCellSelectionBounds()` resolves the operation log into deterministic, disjoint positive rectangles. ### Render Cell Selection UI TanStack Table does not dictate how you render selected cells. These cell APIs give you everything you need: - `cell.getIsSelected()` - whether this cell falls inside any range -- `cell.getIsFocused()` - whether this is the active cell +- `cell.getIsFocused()` - whether this is the active cell (an excluded anchor can be focused without being selected) - `cell.getSelectionEdges()` - which sides sit on the selection boundary - `cell.getTabIndex()` - `0` for the focused cell and `-1` otherwise, for roving tabindex @@ -266,7 +271,7 @@ Scope the hotkeys to the grid element rather than the document, or arrow keys an ### Copying a Selection -`getSelectedCellRangesData()` returns raw values indexed as `[rangeIndex][rowIndex][columnIndex]`. Turning that into clipboard text is left to your application, because the delimiter, the representation of `null`, and any quoting rules are decisions only you can make. +`getSelectedCellRangesData()` returns raw values indexed as `[regionIndex][rowIndex][columnIndex]`. A region is one of the final disjoint positive rectangles after all include and exclude operations are applied, so it does not necessarily correspond one-to-one with stored state. Turning that into clipboard text is left to your application, because the delimiter, the representation of `null`, and any quoting rules are decisions only you can make. ```ts function escapeTsvValue(value: unknown) { diff --git a/docs/framework/lit/guide/cell-selection.md b/docs/framework/lit/guide/cell-selection.md index 16ce895920..7aed3bb8d8 100644 --- a/docs/framework/lit/guide/cell-selection.md +++ b/docs/framework/lit/guide/cell-selection.md @@ -38,7 +38,7 @@ class MyTable extends LitElement { ## Cell Selection (Lit) Guide -The cell selection feature keeps track of spreadsheet-style rectangular selections. A user can click a cell, drag across a block of cells, Shift-click to extend, and Ctrl/Cmd-click to add a second rectangle. Let's take a look at some common use cases. +The cell selection feature keeps track of spreadsheet-style rectangular selections. A user can click a cell, drag across a block of cells, Shift-click to extend, and Ctrl/Cmd-drag to add or subtract a rectangle based on whether the starting cell is selected. Let's take a look at some common use cases. ### Access Cell Selection State @@ -48,7 +48,7 @@ The table instance already manages the cell selection state for you. You can acc - `getSelectedCellCount()` - returns how many cells are selected - `getSelectedCellIds()` - returns the ids of every selected cell - `getCellSelectionRowIds()` / `getCellSelectionColumnIds()` - returns the rows and columns the selection touches -- `getSelectedCellRangesData()` - returns each selected rectangle's values as a row-major grid +- `getSelectedCellRangesData()` - returns each final positive selection region's values as a row-major grid ```ts console.log(table.state.cellSelection) //get the cell selection state @@ -63,7 +63,7 @@ The expansion APIs (`getSelectedCellIds`, `getSelectedCellRangesData`) are memoi ### Cell Selection State Shape -`CellSelectionState` is an array of rectangles, each stored as its two defining corners: +`CellSelectionState` is an ordered array of range operations, each stored as its two defining corners: ```ts type CellSelectionRange = { @@ -71,6 +71,7 @@ type CellSelectionRange = { anchorColumnId: string focusRowId: string focusColumnId: string + operation?: 'include' | 'exclude' } type CellSelectionState = Array @@ -78,7 +79,7 @@ type CellSelectionState = Array The `anchor` corner is where the selection started and stays put. The `focus` corner is the one that moves while dragging or Shift-extending. Storing both corners, rather than a normalized min/max rectangle, is what makes Shift-extend and "collapse back to the active cell" possible. -Because ranges are only two corners, a drag across thousands of cells updates two strings rather than building a map with one entry per selected cell. +Ranges are applied in order. An omitted `operation` is an inclusion for backward compatibility; an `exclude` range subtracts its rectangle from the selection produced so far. This compact operation log means a “select all except these cells” interaction does not build a map with one entry per selected cell. ### Manage Cell Selection State @@ -196,14 +197,18 @@ const table = this.tableController.table({ #### Multiple Ranges -Ctrl-clicking or Cmd-clicking pushes an additional rectangle onto the selection instead of replacing it. Set `enableMultiCellRangeSelection: false` to allow only one rectangle at a time, or override `isMultiCellRangeSelectionEvent` to change the modifier. +Ctrl-clicking or Cmd-clicking an unselected cell adds a new inclusive rectangle. Starting the same modified interaction on a selected cell adds an exclusion instead, so clicking removes that cell and dragging subtracts the whole rectangle. Whether the drag includes or excludes is fixed when it starts; shrinking an exclusion drag restores cells that leave its rectangle. Set `enableMultiCellRangeSelection: false` to disable both behaviors, or override `isMultiCellRangeSelectionEvent` to change the modifier. + +#### Programmatic Range Operations + +`table.selectCellRange(range)` replaces the current selection. Pass `{ mode: 'include' }` to append an inclusion or `{ mode: 'exclude' }` to append an exclusion. The older `{ additive: true }` option remains as a deprecated alias for include mode; `mode` wins if both options are supplied. `table.getCellSelectionBounds()` resolves the operation log into deterministic, disjoint positive rectangles. ### Render Cell Selection UI TanStack Table does not dictate how you render selected cells. These cell APIs give you everything you need: - `cell.getIsSelected()` - whether this cell falls inside any range -- `cell.getIsFocused()` - whether this is the active cell +- `cell.getIsFocused()` - whether this is the active cell (an excluded anchor can be focused without being selected) - `cell.getSelectionEdges()` - which sides sit on the selection boundary - `cell.getTabIndex()` - `0` for the focused cell and `-1` otherwise, for roving tabindex @@ -266,7 +271,7 @@ Scope the hotkeys to the grid element rather than the document, or arrow keys an ### Copying a Selection -`getSelectedCellRangesData()` returns raw values indexed as `[rangeIndex][rowIndex][columnIndex]`. Turning that into clipboard text is left to your application, because the delimiter, the representation of `null`, and any quoting rules are decisions only you can make. +`getSelectedCellRangesData()` returns raw values indexed as `[regionIndex][rowIndex][columnIndex]`. A region is one of the final disjoint positive rectangles after all include and exclude operations are applied, so it does not necessarily correspond one-to-one with stored state. Turning that into clipboard text is left to your application, because the delimiter, the representation of `null`, and any quoting rules are decisions only you can make. ```ts function escapeTsvValue(value: unknown) { diff --git a/docs/framework/lit/quick-start.md b/docs/framework/lit/quick-start.md index e95805bc28..7c033e33a8 100644 --- a/docs/framework/lit/quick-start.md +++ b/docs/framework/lit/quick-start.md @@ -181,15 +181,17 @@ export class PersonTable extends LitElement { : html`
${FlexRender({ header })} ${ - { asc: ' 🔼', desc: ' 🔽' }[ - header.column.getIsSorted() as string - ] ?? null - } + { asc: ' 🔼', desc: ' 🔽' }[ + header.column.getIsSorted() as string + ] ?? null + }
` } diff --git a/docs/framework/preact/guide/cell-selection.md b/docs/framework/preact/guide/cell-selection.md index d283614889..823f429638 100644 --- a/docs/framework/preact/guide/cell-selection.md +++ b/docs/framework/preact/guide/cell-selection.md @@ -30,7 +30,7 @@ const table = useTable({ ## Cell Selection (Preact) Guide -The cell selection feature keeps track of spreadsheet-style rectangular selections. A user can click a cell, drag across a block of cells, Shift-click to extend, and Ctrl/Cmd-click to add a second rectangle. Let's take a look at some common use cases. +The cell selection feature keeps track of spreadsheet-style rectangular selections. A user can click a cell, drag across a block of cells, Shift-click to extend, and Ctrl/Cmd-drag to add or subtract a rectangle based on whether the starting cell is selected. Let's take a look at some common use cases. ### Access Cell Selection State @@ -40,7 +40,7 @@ The table instance already manages the cell selection state for you. You can acc - `getSelectedCellCount()` - returns how many cells are selected - `getSelectedCellIds()` - returns the ids of every selected cell - `getCellSelectionRowIds()` / `getCellSelectionColumnIds()` - returns the rows and columns the selection touches -- `getSelectedCellRangesData()` - returns each selected rectangle's values as a row-major grid +- `getSelectedCellRangesData()` - returns each final positive selection region's values as a row-major grid ```ts console.log(table.state.cellSelection) //get the cell selection state @@ -55,7 +55,7 @@ The expansion APIs (`getSelectedCellIds`, `getSelectedCellRangesData`) are memoi ### Cell Selection State Shape -`CellSelectionState` is an array of rectangles, each stored as its two defining corners: +`CellSelectionState` is an ordered array of range operations, each stored as its two defining corners: ```ts type CellSelectionRange = { @@ -63,6 +63,7 @@ type CellSelectionRange = { anchorColumnId: string focusRowId: string focusColumnId: string + operation?: 'include' | 'exclude' } type CellSelectionState = Array @@ -70,7 +71,7 @@ type CellSelectionState = Array The `anchor` corner is where the selection started and stays put. The `focus` corner is the one that moves while dragging or Shift-extending. Storing both corners, rather than a normalized min/max rectangle, is what makes Shift-extend and "collapse back to the active cell" possible. -Because ranges are only two corners, a drag across thousands of cells updates two strings rather than building a map with one entry per selected cell. +Ranges are applied in order. An omitted `operation` is an inclusion for backward compatibility; an `exclude` range subtracts its rectangle from the selection produced so far. This compact operation log means a “select all except these cells” interaction does not build a map with one entry per selected cell. ### Manage Cell Selection State @@ -188,14 +189,18 @@ const table = useTable({ #### Multiple Ranges -Ctrl-clicking or Cmd-clicking pushes an additional rectangle onto the selection instead of replacing it. Set `enableMultiCellRangeSelection: false` to allow only one rectangle at a time, or override `isMultiCellRangeSelectionEvent` to change the modifier. +Ctrl-clicking or Cmd-clicking an unselected cell adds a new inclusive rectangle. Starting the same modified interaction on a selected cell adds an exclusion instead, so clicking removes that cell and dragging subtracts the whole rectangle. Whether the drag includes or excludes is fixed when it starts; shrinking an exclusion drag restores cells that leave its rectangle. Set `enableMultiCellRangeSelection: false` to disable both behaviors, or override `isMultiCellRangeSelectionEvent` to change the modifier. + +#### Programmatic Range Operations + +`table.selectCellRange(range)` replaces the current selection. Pass `{ mode: 'include' }` to append an inclusion or `{ mode: 'exclude' }` to append an exclusion. The older `{ additive: true }` option remains as a deprecated alias for include mode; `mode` wins if both options are supplied. `table.getCellSelectionBounds()` resolves the operation log into deterministic, disjoint positive rectangles. ### Render Cell Selection UI TanStack Table does not dictate how you render selected cells. These cell APIs give you everything you need: - `cell.getIsSelected()` - whether this cell falls inside any range -- `cell.getIsFocused()` - whether this is the active cell +- `cell.getIsFocused()` - whether this is the active cell (an excluded anchor can be focused without being selected) - `cell.getSelectionEdges()` - which sides sit on the selection boundary - `cell.getTabIndex()` - `0` for the focused cell and `-1` otherwise, for roving tabindex @@ -262,7 +267,7 @@ Scope the hotkeys to the grid element rather than the document, or arrow keys an ### Copying a Selection -`getSelectedCellRangesData()` returns raw values indexed as `[rangeIndex][rowIndex][columnIndex]`. Turning that into clipboard text is left to your application, because the delimiter, the representation of `null`, and any quoting rules are decisions only you can make. +`getSelectedCellRangesData()` returns raw values indexed as `[regionIndex][rowIndex][columnIndex]`. A region is one of the final disjoint positive rectangles after all include and exclude operations are applied, so it does not necessarily correspond one-to-one with stored state. Turning that into clipboard text is left to your application, because the delimiter, the representation of `null`, and any quoting rules are decisions only you can make. ```ts function escapeTsvValue(value: unknown) { diff --git a/docs/framework/react/guide/cell-selection.md b/docs/framework/react/guide/cell-selection.md index 2ba28d2167..5ffa0d0cd8 100644 --- a/docs/framework/react/guide/cell-selection.md +++ b/docs/framework/react/guide/cell-selection.md @@ -30,7 +30,7 @@ const table = useTable({ ## Cell Selection (React) Guide -The cell selection feature keeps track of spreadsheet-style rectangular selections. A user can click a cell, drag across a block of cells, Shift-click to extend, and Ctrl/Cmd-click to add a second rectangle. Let's take a look at some common use cases. +The cell selection feature keeps track of spreadsheet-style rectangular selections. A user can click a cell, drag across a block of cells, Shift-click to extend, and Ctrl/Cmd-drag to add or subtract a rectangle based on whether the starting cell is selected. Let's take a look at some common use cases. ### Access Cell Selection State @@ -40,7 +40,7 @@ The table instance already manages the cell selection state for you. You can acc - `getSelectedCellCount()` - returns how many cells are selected - `getSelectedCellIds()` - returns the ids of every selected cell - `getCellSelectionRowIds()` / `getCellSelectionColumnIds()` - returns the rows and columns the selection touches -- `getSelectedCellRangesData()` - returns each selected rectangle's values as a row-major grid +- `getSelectedCellRangesData()` - returns each final positive selection region's values as a row-major grid ```ts console.log(table.state.cellSelection) //get the cell selection state @@ -55,7 +55,7 @@ The expansion APIs (`getSelectedCellIds`, `getSelectedCellRangesData`) are memoi ### Cell Selection State Shape -`CellSelectionState` is an array of rectangles, each stored as its two defining corners: +`CellSelectionState` is an ordered array of range operations, each stored as its two defining corners: ```ts type CellSelectionRange = { @@ -63,6 +63,7 @@ type CellSelectionRange = { anchorColumnId: string focusRowId: string focusColumnId: string + operation?: 'include' | 'exclude' } type CellSelectionState = Array @@ -70,7 +71,7 @@ type CellSelectionState = Array The `anchor` corner is where the selection started and stays put. The `focus` corner is the one that moves while dragging or Shift-extending. Storing both corners, rather than a normalized min/max rectangle, is what makes Shift-extend and "collapse back to the active cell" possible. -Because ranges are only two corners, a drag across thousands of cells updates two strings rather than building a map with one entry per selected cell. +Ranges are applied in order. An omitted `operation` is an inclusion for backward compatibility; an `exclude` range subtracts its rectangle from the selection produced so far. This compact operation log means a “select all except these cells” interaction does not build a map with one entry per selected cell. ### Manage Cell Selection State @@ -187,14 +188,18 @@ const table = useTable({ #### Multiple Ranges -Ctrl-clicking or Cmd-clicking pushes an additional rectangle onto the selection instead of replacing it. Set `enableMultiCellRangeSelection: false` to allow only one rectangle at a time, or override `isMultiCellRangeSelectionEvent` to change the modifier. +Ctrl-clicking or Cmd-clicking an unselected cell adds a new inclusive rectangle. Starting the same modified interaction on a selected cell adds an exclusion instead, so clicking removes that cell and dragging subtracts the whole rectangle. Whether the drag includes or excludes is fixed when it starts; shrinking an exclusion drag restores cells that leave its rectangle. Set `enableMultiCellRangeSelection: false` to disable both behaviors, or override `isMultiCellRangeSelectionEvent` to change the modifier. + +#### Programmatic Range Operations + +`table.selectCellRange(range)` replaces the current selection. Pass `{ mode: 'include' }` to append an inclusion or `{ mode: 'exclude' }` to append an exclusion. The older `{ additive: true }` option remains as a deprecated alias for include mode; `mode` wins if both options are supplied. `table.getCellSelectionBounds()` resolves the operation log into deterministic, disjoint positive rectangles. ### Render Cell Selection UI TanStack Table does not dictate how you render selected cells. These cell APIs give you everything you need: - `cell.getIsSelected()` - whether this cell falls inside any range -- `cell.getIsFocused()` - whether this is the active cell +- `cell.getIsFocused()` - whether this is the active cell (an excluded anchor can be focused without being selected) - `cell.getSelectionEdges()` - which sides sit on the selection boundary - `cell.getTabIndex()` - `0` for the focused cell and `-1` otherwise, for roving tabindex @@ -263,7 +268,7 @@ Scope the hotkeys to the grid element rather than the document, or arrow keys an ### Copying a Selection -`getSelectedCellRangesData()` returns raw values indexed as `[rangeIndex][rowIndex][columnIndex]`. Turning that into clipboard text is left to your application, because the delimiter, the representation of `null`, and any quoting rules are decisions only you can make. +`getSelectedCellRangesData()` returns raw values indexed as `[regionIndex][rowIndex][columnIndex]`. A region is one of the final disjoint positive rectangles after all include and exclude operations are applied, so it does not necessarily correspond one-to-one with stored state. Turning that into clipboard text is left to your application, because the delimiter, the representation of `null`, and any quoting rules are decisions only you can make. ```ts function escapeTsvValue(value: unknown) { diff --git a/docs/framework/solid/guide/cell-selection.md b/docs/framework/solid/guide/cell-selection.md index ba5dc2664d..dc292f7ffb 100644 --- a/docs/framework/solid/guide/cell-selection.md +++ b/docs/framework/solid/guide/cell-selection.md @@ -32,7 +32,7 @@ const table = createTable({ ## Cell Selection (Solid) Guide -The cell selection feature keeps track of spreadsheet-style rectangular selections. A user can click a cell, drag across a block of cells, Shift-click to extend, and Ctrl/Cmd-click to add a second rectangle. Let's take a look at some common use cases. +The cell selection feature keeps track of spreadsheet-style rectangular selections. A user can click a cell, drag across a block of cells, Shift-click to extend, and Ctrl/Cmd-drag to add or subtract a rectangle based on whether the starting cell is selected. Let's take a look at some common use cases. ### Access Cell Selection State @@ -42,7 +42,7 @@ The table instance already manages the cell selection state for you. You can acc - `getSelectedCellCount()` - returns how many cells are selected - `getSelectedCellIds()` - returns the ids of every selected cell - `getCellSelectionRowIds()` / `getCellSelectionColumnIds()` - returns the rows and columns the selection touches -- `getSelectedCellRangesData()` - returns each selected rectangle's values as a row-major grid +- `getSelectedCellRangesData()` - returns each final positive selection region's values as a row-major grid ```ts console.log(table.atoms.cellSelection.get()) //get the cell selection state @@ -57,7 +57,7 @@ The expansion APIs (`getSelectedCellIds`, `getSelectedCellRangesData`) are memoi ### Cell Selection State Shape -`CellSelectionState` is an array of rectangles, each stored as its two defining corners: +`CellSelectionState` is an ordered array of range operations, each stored as its two defining corners: ```ts type CellSelectionRange = { @@ -65,6 +65,7 @@ type CellSelectionRange = { anchorColumnId: string focusRowId: string focusColumnId: string + operation?: 'include' | 'exclude' } type CellSelectionState = Array @@ -72,7 +73,7 @@ type CellSelectionState = Array The `anchor` corner is where the selection started and stays put. The `focus` corner is the one that moves while dragging or Shift-extending. Storing both corners, rather than a normalized min/max rectangle, is what makes Shift-extend and "collapse back to the active cell" possible. -Because ranges are only two corners, a drag across thousands of cells updates two strings rather than building a map with one entry per selected cell. +Ranges are applied in order. An omitted `operation` is an inclusion for backward compatibility; an `exclude` range subtracts its rectangle from the selection produced so far. This compact operation log means a “select all except these cells” interaction does not build a map with one entry per selected cell. ### Manage Cell Selection State @@ -196,14 +197,18 @@ const table = createTable({ #### Multiple Ranges -Ctrl-clicking or Cmd-clicking pushes an additional rectangle onto the selection instead of replacing it. Set `enableMultiCellRangeSelection: false` to allow only one rectangle at a time, or override `isMultiCellRangeSelectionEvent` to change the modifier. +Ctrl-clicking or Cmd-clicking an unselected cell adds a new inclusive rectangle. Starting the same modified interaction on a selected cell adds an exclusion instead, so clicking removes that cell and dragging subtracts the whole rectangle. Whether the drag includes or excludes is fixed when it starts; shrinking an exclusion drag restores cells that leave its rectangle. Set `enableMultiCellRangeSelection: false` to disable both behaviors, or override `isMultiCellRangeSelectionEvent` to change the modifier. + +#### Programmatic Range Operations + +`table.selectCellRange(range)` replaces the current selection. Pass `{ mode: 'include' }` to append an inclusion or `{ mode: 'exclude' }` to append an exclusion. The older `{ additive: true }` option remains as a deprecated alias for include mode; `mode` wins if both options are supplied. `table.getCellSelectionBounds()` resolves the operation log into deterministic, disjoint positive rectangles. ### Render Cell Selection UI TanStack Table does not dictate how you render selected cells. These cell APIs give you everything you need: - `cell.getIsSelected()` - whether this cell falls inside any range -- `cell.getIsFocused()` - whether this is the active cell +- `cell.getIsFocused()` - whether this is the active cell (an excluded anchor can be focused without being selected) - `cell.getSelectionEdges()` - which sides sit on the selection boundary - `cell.getTabIndex()` - `0` for the focused cell and `-1` otherwise, for roving tabindex @@ -270,7 +275,7 @@ Scope the hotkeys to the grid element rather than the document, or arrow keys an ### Copying a Selection -`getSelectedCellRangesData()` returns raw values indexed as `[rangeIndex][rowIndex][columnIndex]`. Turning that into clipboard text is left to your application, because the delimiter, the representation of `null`, and any quoting rules are decisions only you can make. +`getSelectedCellRangesData()` returns raw values indexed as `[regionIndex][rowIndex][columnIndex]`. A region is one of the final disjoint positive rectangles after all include and exclude operations are applied, so it does not necessarily correspond one-to-one with stored state. Turning that into clipboard text is left to your application, because the delimiter, the representation of `null`, and any quoting rules are decisions only you can make. ```ts function escapeTsvValue(value: unknown) { diff --git a/docs/framework/svelte/guide/cell-selection.md b/docs/framework/svelte/guide/cell-selection.md index 03e47b3681..de2cb3ae7c 100644 --- a/docs/framework/svelte/guide/cell-selection.md +++ b/docs/framework/svelte/guide/cell-selection.md @@ -32,7 +32,7 @@ const table = createTable({ ## Cell Selection (Svelte) Guide -The cell selection feature keeps track of spreadsheet-style rectangular selections. A user can click a cell, drag across a block of cells, Shift-click to extend, and Ctrl/Cmd-click to add a second rectangle. Let's take a look at some common use cases. +The cell selection feature keeps track of spreadsheet-style rectangular selections. A user can click a cell, drag across a block of cells, Shift-click to extend, and Ctrl/Cmd-drag to add or subtract a rectangle based on whether the starting cell is selected. Let's take a look at some common use cases. ### Access Cell Selection State @@ -42,7 +42,7 @@ The table instance already manages the cell selection state for you. You can acc - `getSelectedCellCount()` - returns how many cells are selected - `getSelectedCellIds()` - returns the ids of every selected cell - `getCellSelectionRowIds()` / `getCellSelectionColumnIds()` - returns the rows and columns the selection touches -- `getSelectedCellRangesData()` - returns each selected rectangle's values as a row-major grid +- `getSelectedCellRangesData()` - returns each final positive selection region's values as a row-major grid ```ts console.log(table.atoms.cellSelection.get()) //get the cell selection state @@ -64,7 +64,7 @@ The expansion APIs (`getSelectedCellIds`, `getSelectedCellRangesData`) are memoi ### Cell Selection State Shape -`CellSelectionState` is an array of rectangles, each stored as its two defining corners: +`CellSelectionState` is an ordered array of range operations, each stored as its two defining corners: ```ts type CellSelectionRange = { @@ -72,6 +72,7 @@ type CellSelectionRange = { anchorColumnId: string focusRowId: string focusColumnId: string + operation?: 'include' | 'exclude' } type CellSelectionState = Array @@ -79,7 +80,7 @@ type CellSelectionState = Array The `anchor` corner is where the selection started and stays put. The `focus` corner is the one that moves while dragging or Shift-extending. Storing both corners, rather than a normalized min/max rectangle, is what makes Shift-extend and "collapse back to the active cell" possible. -Because ranges are only two corners, a drag across thousands of cells updates two strings rather than building a map with one entry per selected cell. +Ranges are applied in order. An omitted `operation` is an inclusion for backward compatibility; an `exclude` range subtracts its rectangle from the selection produced so far. This compact operation log means a “select all except these cells” interaction does not build a map with one entry per selected cell. ### Manage Cell Selection State @@ -206,14 +207,18 @@ const table = createTable({ #### Multiple Ranges -Ctrl-clicking or Cmd-clicking pushes an additional rectangle onto the selection instead of replacing it. Set `enableMultiCellRangeSelection: false` to allow only one rectangle at a time, or override `isMultiCellRangeSelectionEvent` to change the modifier. +Ctrl-clicking or Cmd-clicking an unselected cell adds a new inclusive rectangle. Starting the same modified interaction on a selected cell adds an exclusion instead, so clicking removes that cell and dragging subtracts the whole rectangle. Whether the drag includes or excludes is fixed when it starts; shrinking an exclusion drag restores cells that leave its rectangle. Set `enableMultiCellRangeSelection: false` to disable both behaviors, or override `isMultiCellRangeSelectionEvent` to change the modifier. + +#### Programmatic Range Operations + +`table.selectCellRange(range)` replaces the current selection. Pass `{ mode: 'include' }` to append an inclusion or `{ mode: 'exclude' }` to append an exclusion. The older `{ additive: true }` option remains as a deprecated alias for include mode; `mode` wins if both options are supplied. `table.getCellSelectionBounds()` resolves the operation log into deterministic, disjoint positive rectangles. ### Render Cell Selection UI TanStack Table does not dictate how you render selected cells. These cell APIs give you everything you need: - `cell.getIsSelected()` - whether this cell falls inside any range -- `cell.getIsFocused()` - whether this is the active cell +- `cell.getIsFocused()` - whether this is the active cell (an excluded anchor can be focused without being selected) - `cell.getSelectionEdges()` - which sides sit on the selection boundary - `cell.getTabIndex()` - `0` for the focused cell and `-1` otherwise, for roving tabindex @@ -278,7 +283,7 @@ Scope the hotkeys to the grid element rather than the document, or arrow keys an ### Copying a Selection -`getSelectedCellRangesData()` returns raw values indexed as `[rangeIndex][rowIndex][columnIndex]`. Turning that into clipboard text is left to your application, because the delimiter, the representation of `null`, and any quoting rules are decisions only you can make. +`getSelectedCellRangesData()` returns raw values indexed as `[regionIndex][rowIndex][columnIndex]`. A region is one of the final disjoint positive rectangles after all include and exclude operations are applied, so it does not necessarily correspond one-to-one with stored state. Turning that into clipboard text is left to your application, because the delimiter, the representation of `null`, and any quoting rules are decisions only you can make. ```ts function escapeTsvValue(value: unknown) { diff --git a/docs/framework/vue/guide/cell-selection.md b/docs/framework/vue/guide/cell-selection.md index f202ae4d33..8081c76264 100644 --- a/docs/framework/vue/guide/cell-selection.md +++ b/docs/framework/vue/guide/cell-selection.md @@ -30,7 +30,7 @@ const table = useTable({ ## Cell Selection (Vue) Guide -The cell selection feature keeps track of spreadsheet-style rectangular selections. A user can click a cell, drag across a block of cells, Shift-click to extend, and Ctrl/Cmd-click to add a second rectangle. Let's take a look at some common use cases. +The cell selection feature keeps track of spreadsheet-style rectangular selections. A user can click a cell, drag across a block of cells, Shift-click to extend, and Ctrl/Cmd-drag to add or subtract a rectangle based on whether the starting cell is selected. Let's take a look at some common use cases. ### Access Cell Selection State @@ -40,7 +40,7 @@ The table instance already manages the cell selection state for you. You can acc - `getSelectedCellCount()` - returns how many cells are selected - `getSelectedCellIds()` - returns the ids of every selected cell - `getCellSelectionRowIds()` / `getCellSelectionColumnIds()` - returns the rows and columns the selection touches -- `getSelectedCellRangesData()` - returns each selected rectangle's values as a row-major grid +- `getSelectedCellRangesData()` - returns each final positive selection region's values as a row-major grid ```ts console.log(table.atoms.cellSelection.get()) //get the cell selection state @@ -55,7 +55,7 @@ The expansion APIs (`getSelectedCellIds`, `getSelectedCellRangesData`) are memoi ### Cell Selection State Shape -`CellSelectionState` is an array of rectangles, each stored as its two defining corners: +`CellSelectionState` is an ordered array of range operations, each stored as its two defining corners: ```ts type CellSelectionRange = { @@ -63,6 +63,7 @@ type CellSelectionRange = { anchorColumnId: string focusRowId: string focusColumnId: string + operation?: 'include' | 'exclude' } type CellSelectionState = Array @@ -70,7 +71,7 @@ type CellSelectionState = Array The `anchor` corner is where the selection started and stays put. The `focus` corner is the one that moves while dragging or Shift-extending. Storing both corners, rather than a normalized min/max rectangle, is what makes Shift-extend and "collapse back to the active cell" possible. -Because ranges are only two corners, a drag across thousands of cells updates two strings rather than building a map with one entry per selected cell. +Ranges are applied in order. An omitted `operation` is an inclusion for backward compatibility; an `exclude` range subtracts its rectangle from the selection produced so far. This compact operation log means a “select all except these cells” interaction does not build a map with one entry per selected cell. ### Manage Cell Selection State @@ -195,14 +196,18 @@ const table = useTable({ #### Multiple Ranges -Ctrl-clicking or Cmd-clicking pushes an additional rectangle onto the selection instead of replacing it. Set `enableMultiCellRangeSelection: false` to allow only one rectangle at a time, or override `isMultiCellRangeSelectionEvent` to change the modifier. +Ctrl-clicking or Cmd-clicking an unselected cell adds a new inclusive rectangle. Starting the same modified interaction on a selected cell adds an exclusion instead, so clicking removes that cell and dragging subtracts the whole rectangle. Whether the drag includes or excludes is fixed when it starts; shrinking an exclusion drag restores cells that leave its rectangle. Set `enableMultiCellRangeSelection: false` to disable both behaviors, or override `isMultiCellRangeSelectionEvent` to change the modifier. + +#### Programmatic Range Operations + +`table.selectCellRange(range)` replaces the current selection. Pass `{ mode: 'include' }` to append an inclusion or `{ mode: 'exclude' }` to append an exclusion. The older `{ additive: true }` option remains as a deprecated alias for include mode; `mode` wins if both options are supplied. `table.getCellSelectionBounds()` resolves the operation log into deterministic, disjoint positive rectangles. ### Render Cell Selection UI TanStack Table does not dictate how you render selected cells. These cell APIs give you everything you need: - `cell.getIsSelected()` - whether this cell falls inside any range -- `cell.getIsFocused()` - whether this is the active cell +- `cell.getIsFocused()` - whether this is the active cell (an excluded anchor can be focused without being selected) - `cell.getSelectionEdges()` - which sides sit on the selection boundary - `cell.getTabIndex()` - `0` for the focused cell and `-1` otherwise, for roving tabindex @@ -269,7 +274,7 @@ Scope the hotkeys to the grid element rather than the document, or arrow keys an ### Copying a Selection -`getSelectedCellRangesData()` returns raw values indexed as `[rangeIndex][rowIndex][columnIndex]`. Turning that into clipboard text is left to your application, because the delimiter, the representation of `null`, and any quoting rules are decisions only you can make. +`getSelectedCellRangesData()` returns raw values indexed as `[regionIndex][rowIndex][columnIndex]`. A region is one of the final disjoint positive rectangles after all include and exclude operations are applied, so it does not necessarily correspond one-to-one with stored state. Turning that into clipboard text is left to your application, because the delimiter, the representation of `null`, and any quoting rules are decisions only you can make. ```ts function escapeTsvValue(value: unknown) { diff --git a/docs/reference/index/index.md b/docs/reference/index/index.md index bab42cfd74..e048bc3c17 100644 --- a/docs/reference/index/index.md +++ b/docs/reference/index/index.md @@ -224,6 +224,8 @@ title: index - [Cell](type-aliases/Cell.md) - [CellData](type-aliases/CellData.md) - [CellSelectionDirection](type-aliases/CellSelectionDirection.md) +- [CellSelectionRangeMode](type-aliases/CellSelectionRangeMode.md) +- [CellSelectionRangeOperation](type-aliases/CellSelectionRangeOperation.md) - [CellSelectionState](type-aliases/CellSelectionState.md) - [Column](type-aliases/Column.md) - [ColumnAggregationValue](type-aliases/ColumnAggregationValue.md) diff --git a/docs/reference/index/interfaces/CellSelectionRange.md b/docs/reference/index/interfaces/CellSelectionRange.md index 1c3be55a5a..f208f600c7 100644 --- a/docs/reference/index/interfaces/CellSelectionRange.md +++ b/docs/reference/index/interfaces/CellSelectionRange.md @@ -54,3 +54,16 @@ focusRowId: string; ``` Defined in: [features/cell-selection/cellSelectionFeature.types.ts:23](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/cell-selection/cellSelectionFeature.types.ts#L23) + +*** + +### operation? + +```ts +optional operation: CellSelectionRangeOperation; +``` + +Defined in: [features/cell-selection/cellSelectionFeature.types.ts:28](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/cell-selection/cellSelectionFeature.types.ts#L28) + +How this range changes the selection produced by the ranges before it. +Defaults to `include`. diff --git a/docs/reference/index/interfaces/Cell_CellSelection.md b/docs/reference/index/interfaces/Cell_CellSelection.md index 0878637e93..a1628a5666 100644 --- a/docs/reference/index/interfaces/Cell_CellSelection.md +++ b/docs/reference/index/interfaces/Cell_CellSelection.md @@ -5,7 +5,7 @@ title: Cell_CellSelection # Interface: Cell\_CellSelection -Defined in: [features/cell-selection/cellSelectionFeature.types.ts:144](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/cell-selection/cellSelectionFeature.types.ts#L144) +Defined in: [features/cell-selection/cellSelectionFeature.types.ts:159](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/cell-selection/cellSelectionFeature.types.ts#L159) ## Properties @@ -15,7 +15,7 @@ Defined in: [features/cell-selection/cellSelectionFeature.types.ts:144](https:// getCanSelect: () => boolean; ``` -Defined in: [features/cell-selection/cellSelectionFeature.types.ts:148](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/cell-selection/cellSelectionFeature.types.ts#L148) +Defined in: [features/cell-selection/cellSelectionFeature.types.ts:163](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/cell-selection/cellSelectionFeature.types.ts#L163) Checks whether this cell can currently be selected. @@ -31,7 +31,7 @@ Checks whether this cell can currently be selected. getIsFocused: () => boolean; ``` -Defined in: [features/cell-selection/cellSelectionFeature.types.ts:153](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/cell-selection/cellSelectionFeature.types.ts#L153) +Defined in: [features/cell-selection/cellSelectionFeature.types.ts:168](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/cell-selection/cellSelectionFeature.types.ts#L168) Checks whether this cell is the active cell, i.e. the anchor of the most recent range. @@ -48,9 +48,9 @@ recent range. getIsSelected: () => boolean; ``` -Defined in: [features/cell-selection/cellSelectionFeature.types.ts:157](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/cell-selection/cellSelectionFeature.types.ts#L157) +Defined in: [features/cell-selection/cellSelectionFeature.types.ts:172](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/cell-selection/cellSelectionFeature.types.ts#L172) -Checks whether this cell falls inside any selected range. +Checks whether this cell falls inside the final positive selection. #### Returns @@ -64,7 +64,7 @@ Checks whether this cell falls inside any selected range. getSelectionEdges: () => CellSelectionEdges; ``` -Defined in: [features/cell-selection/cellSelectionFeature.types.ts:165](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/cell-selection/cellSelectionFeature.types.ts#L165) +Defined in: [features/cell-selection/cellSelectionFeature.types.ts:180](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/cell-selection/cellSelectionFeature.types.ts#L180) Returns which sides of this cell sit on the outer boundary of the selection, for rendering a spreadsheet-style outline without each cell @@ -84,7 +84,7 @@ All sides are `false` when the cell is not selected. getSelectionExtendHandler: () => (event) => void; ``` -Defined in: [features/cell-selection/cellSelectionFeature.types.ts:173](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/cell-selection/cellSelectionFeature.types.ts#L173) +Defined in: [features/cell-selection/cellSelectionFeature.types.ts:188](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/cell-selection/cellSelectionFeature.types.ts#L188) Creates a handler that extends the active range to this cell while a drag is in progress. Bind it to `mouseenter`. @@ -116,7 +116,7 @@ the active range already focuses this cell. getSelectionStartHandler: (contextDocument?) => (event) => void; ``` -Defined in: [features/cell-selection/cellSelectionFeature.types.ts:184](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/cell-selection/cellSelectionFeature.types.ts#L184) +Defined in: [features/cell-selection/cellSelectionFeature.types.ts:199](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/cell-selection/cellSelectionFeature.types.ts#L199) Creates a handler that begins a selection at this cell. Bind it to `mousedown`. @@ -157,7 +157,7 @@ another document, such as an iframe or popout window. getTabIndex: () => number; ``` -Defined in: [features/cell-selection/cellSelectionFeature.types.ts:190](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/cell-selection/cellSelectionFeature.types.ts#L190) +Defined in: [features/cell-selection/cellSelectionFeature.types.ts:205](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/cell-selection/cellSelectionFeature.types.ts#L205) Returns `0` for the focused cell and `-1` otherwise, for roving tabindex. diff --git a/docs/reference/index/interfaces/SelectCellRangeOptions.md b/docs/reference/index/interfaces/SelectCellRangeOptions.md index 6eac5e51e8..8c23b34251 100644 --- a/docs/reference/index/interfaces/SelectCellRangeOptions.md +++ b/docs/reference/index/interfaces/SelectCellRangeOptions.md @@ -5,17 +5,34 @@ title: SelectCellRangeOptions # Interface: SelectCellRangeOptions -Defined in: [features/cell-selection/cellSelectionFeature.types.ts:65](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/cell-selection/cellSelectionFeature.types.ts#L65) +Defined in: [features/cell-selection/cellSelectionFeature.types.ts:74](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/cell-selection/cellSelectionFeature.types.ts#L74) ## Properties -### additive? +### ~~additive?~~ ```ts optional additive: boolean; ``` -Defined in: [features/cell-selection/cellSelectionFeature.types.ts:70](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/cell-selection/cellSelectionFeature.types.ts#L70) +Defined in: [features/cell-selection/cellSelectionFeature.types.ts:86](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/cell-selection/cellSelectionFeature.types.ts#L86) Whether the range should be added alongside existing ranges rather than replacing them. Defaults to `false`. + +#### Deprecated + +Use `mode: 'include'` instead. + +*** + +### mode? + +```ts +optional mode: CellSelectionRangeMode; +``` + +Defined in: [features/cell-selection/cellSelectionFeature.types.ts:79](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/cell-selection/cellSelectionFeature.types.ts#L79) + +Whether to replace the selection, add the range, or subtract the range. +Defaults to `replace`. diff --git a/docs/reference/index/interfaces/TableOptions_CellSelection.md b/docs/reference/index/interfaces/TableOptions_CellSelection.md index 42aef022f3..58dbdccfba 100644 --- a/docs/reference/index/interfaces/TableOptions_CellSelection.md +++ b/docs/reference/index/interfaces/TableOptions_CellSelection.md @@ -5,7 +5,7 @@ title: TableOptions_CellSelection # Interface: TableOptions\_CellSelection\ -Defined in: [features/cell-selection/cellSelectionFeature.types.ts:73](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/cell-selection/cellSelectionFeature.types.ts#L73) +Defined in: [features/cell-selection/cellSelectionFeature.types.ts:89](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/cell-selection/cellSelectionFeature.types.ts#L89) ## Type Parameters @@ -25,7 +25,7 @@ Defined in: [features/cell-selection/cellSelectionFeature.types.ts:73](https://g optional autoResetCellSelection: boolean; ``` -Defined in: [features/cell-selection/cellSelectionFeature.types.ts:86](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/cell-selection/cellSelectionFeature.types.ts#L86) +Defined in: [features/cell-selection/cellSelectionFeature.types.ts:102](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/cell-selection/cellSelectionFeature.types.ts#L102) Resets cell selection to `initialState.cellSelection` whenever `data` changes. Defaults to `true`. @@ -43,7 +43,7 @@ across data changes, and note `autoResetAll` overrides this. optional enableCellRangeSelection: boolean; ``` -Defined in: [features/cell-selection/cellSelectionFeature.types.ts:91](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/cell-selection/cellSelectionFeature.types.ts#L91) +Defined in: [features/cell-selection/cellSelectionFeature.types.ts:107](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/cell-selection/cellSelectionFeature.types.ts#L107) Enables inclusive cell range selection through shift-click and drag. Defaults to `true`. @@ -56,7 +56,7 @@ Defaults to `true`. optional enableCellSelection: boolean | (cell) => boolean; ``` -Defined in: [features/cell-selection/cellSelectionFeature.types.ts:98](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/cell-selection/cellSelectionFeature.types.ts#L98) +Defined in: [features/cell-selection/cellSelectionFeature.types.ts:114](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/cell-selection/cellSelectionFeature.types.ts#L114) Allows cells to be selected. @@ -71,7 +71,7 @@ its own `enableCellSelection: false`. Defaults to `true`. optional enableCellSelectionDrag: boolean; ``` -Defined in: [features/cell-selection/cellSelectionFeature.types.ts:104](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/cell-selection/cellSelectionFeature.types.ts#L104) +Defined in: [features/cell-selection/cellSelectionFeature.types.ts:120](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/cell-selection/cellSelectionFeature.types.ts#L120) Enables extending a selection by dragging across cells. Defaults to `true`. @@ -83,10 +83,9 @@ Enables extending a selection by dragging across cells. Defaults to `true`. optional enableMultiCellRangeSelection: boolean; ``` -Defined in: [features/cell-selection/cellSelectionFeature.types.ts:109](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/cell-selection/cellSelectionFeature.types.ts#L109) +Defined in: [features/cell-selection/cellSelectionFeature.types.ts:124](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/cell-selection/cellSelectionFeature.types.ts#L124) -Allows multiple disjoint rectangles to be selected at once. Defaults to -`true`. +Allows modifier interactions to add or subtract ranges. Defaults to `true`. *** @@ -96,7 +95,7 @@ Allows multiple disjoint rectangles to be selected at once. Defaults to optional isCellRangeSelectionEvent: (event) => boolean; ``` -Defined in: [features/cell-selection/cellSelectionFeature.types.ts:117](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/cell-selection/cellSelectionFeature.types.ts#L117) +Defined in: [features/cell-selection/cellSelectionFeature.types.ts:132](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/cell-selection/cellSelectionFeature.types.ts#L132) Determines whether a selection-start event should extend the active range instead of replacing the selection. @@ -122,10 +121,10 @@ By default, events with `shiftKey` directly on the event or on optional isMultiCellRangeSelectionEvent: (event) => boolean; ``` -Defined in: [features/cell-selection/cellSelectionFeature.types.ts:125](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/cell-selection/cellSelectionFeature.types.ts#L125) +Defined in: [features/cell-selection/cellSelectionFeature.types.ts:140](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/cell-selection/cellSelectionFeature.types.ts#L140) -Determines whether a selection-start event should add a new rectangle -alongside the existing ones. +Determines whether a selection-start event should add or subtract a new +rectangle. The operation depends on whether the starting cell is selected. By default, events with `ctrlKey` or `metaKey` directly on the event or on `event.nativeEvent` are treated as multi-range events. @@ -148,7 +147,7 @@ By default, events with `ctrlKey` or `metaKey` directly on the event or on optional onCellSelectionChange: OnChangeFn; ``` -Defined in: [features/cell-selection/cellSelectionFeature.types.ts:134](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/cell-selection/cellSelectionFeature.types.ts#L134) +Defined in: [features/cell-selection/cellSelectionFeature.types.ts:149](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/cell-selection/cellSelectionFeature.types.ts#L149) Called with an updater when cell selection state changes. Pair this with `state.cellSelection` when using external state; external atoms can own the diff --git a/docs/reference/index/interfaces/Table_CellSelection.md b/docs/reference/index/interfaces/Table_CellSelection.md index 55ab7736fe..fef5e5a735 100644 --- a/docs/reference/index/interfaces/Table_CellSelection.md +++ b/docs/reference/index/interfaces/Table_CellSelection.md @@ -5,7 +5,7 @@ title: Table_CellSelection # Interface: Table\_CellSelection\ -Defined in: [features/cell-selection/cellSelectionFeature.types.ts:193](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/cell-selection/cellSelectionFeature.types.ts#L193) +Defined in: [features/cell-selection/cellSelectionFeature.types.ts:208](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/cell-selection/cellSelectionFeature.types.ts#L208) ## Type Parameters @@ -25,7 +25,7 @@ Defined in: [features/cell-selection/cellSelectionFeature.types.ts:193](https:// _isSelectingCells: boolean; ``` -Defined in: [features/cell-selection/cellSelectionFeature.types.ts:206](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/cell-selection/cellSelectionFeature.types.ts#L206) +Defined in: [features/cell-selection/cellSelectionFeature.types.ts:221](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/cell-selection/cellSelectionFeature.types.ts#L221) **`Internal`** @@ -43,7 +43,7 @@ selection persisted mid-drag cannot rehydrate into a stuck drag. autoResetCellSelection: () => void; ``` -Defined in: [features/cell-selection/cellSelectionFeature.types.ts:213](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/cell-selection/cellSelectionFeature.types.ts#L213) +Defined in: [features/cell-selection/cellSelectionFeature.types.ts:228](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/cell-selection/cellSelectionFeature.types.ts#L228) Schedules a cell selection reset after `data` changes. @@ -62,7 +62,7 @@ model; you rarely need to invoke it yourself. extendCellSelection: (direction) => void; ``` -Defined in: [features/cell-selection/cellSelectionFeature.types.ts:217](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/cell-selection/cellSelectionFeature.types.ts#L217) +Defined in: [features/cell-selection/cellSelectionFeature.types.ts:232](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/cell-selection/cellSelectionFeature.types.ts#L232) Extends the active range one step in a direction, keeping its anchor fixed. @@ -84,9 +84,10 @@ Extends the active range one step in a direction, keeping its anchor fixed. getCellSelectionBounds: () => CellSelectionBounds[]; ``` -Defined in: [features/cell-selection/cellSelectionFeature.types.ts:224](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/cell-selection/cellSelectionFeature.types.ts#L224) +Defined in: [features/cell-selection/cellSelectionFeature.types.ts:240](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/cell-selection/cellSelectionFeature.types.ts#L240) -Returns the selected ranges resolved into inclusive display-order indexes. +Returns the final positive selection as disjoint, inclusive display-order +index rectangles after all include and exclude operations are applied. This is the memoized cache every per-cell read goes through. Ranges whose corners no longer resolve are omitted. @@ -103,7 +104,7 @@ corners no longer resolve are omitted. getCellSelectionColumnIds: () => string[]; ``` -Defined in: [features/cell-selection/cellSelectionFeature.types.ts:228](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/cell-selection/cellSelectionFeature.types.ts#L228) +Defined in: [features/cell-selection/cellSelectionFeature.types.ts:244](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/cell-selection/cellSelectionFeature.types.ts#L244) Returns the ids of all columns intersected by the selection. @@ -119,7 +120,7 @@ Returns the ids of all columns intersected by the selection. getCellSelectionColumnIndexes: () => Record; ``` -Defined in: [features/cell-selection/cellSelectionFeature.types.ts:237](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/cell-selection/cellSelectionFeature.types.ts#L237) +Defined in: [features/cell-selection/cellSelectionFeature.types.ts:253](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/cell-selection/cellSelectionFeature.types.ts#L253) **`Internal`** @@ -140,7 +141,7 @@ is absent, since its `getColumnIndexes` static rebuilds on every call. getCellSelectionRowIds: () => string[]; ``` -Defined in: [features/cell-selection/cellSelectionFeature.types.ts:241](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/cell-selection/cellSelectionFeature.types.ts#L241) +Defined in: [features/cell-selection/cellSelectionFeature.types.ts:257](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/cell-selection/cellSelectionFeature.types.ts#L257) Returns the ids of all rows intersected by the selection. @@ -158,9 +159,10 @@ getFocusedCell: () => | undefined; ``` -Defined in: [features/cell-selection/cellSelectionFeature.types.ts:245](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/cell-selection/cellSelectionFeature.types.ts#L245) +Defined in: [features/cell-selection/cellSelectionFeature.types.ts:262](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/cell-selection/cellSelectionFeature.types.ts#L262) -Returns the active cell, i.e. the anchor of the most recent range. +Returns the active cell, i.e. the anchor of the most recent operation. +An exclusion's active cell is focused even though it is not selected. #### Returns @@ -175,12 +177,12 @@ Returns the active cell, i.e. the anchor of the most recent range. getSelectedCellCount: () => number; ``` -Defined in: [features/cell-selection/cellSelectionFeature.types.ts:252](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/cell-selection/cellSelectionFeature.types.ts#L252) +Defined in: [features/cell-selection/cellSelectionFeature.types.ts:269](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/cell-selection/cellSelectionFeature.types.ts#L269) Returns the number of selected cells. -Computed as rectangle arithmetic for one range. Falls back to enumerating -cells for overlapping ranges or a per-cell `enableCellSelection` predicate. +Computed with rectangle arithmetic unless a per-cell +`enableCellSelection` predicate requires enumeration. #### Returns @@ -194,7 +196,7 @@ cells for overlapping ranges or a per-cell `enableCellSelection` predicate. getSelectedCellIds: () => string[]; ``` -Defined in: [features/cell-selection/cellSelectionFeature.types.ts:259](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/cell-selection/cellSelectionFeature.types.ts#L259) +Defined in: [features/cell-selection/cellSelectionFeature.types.ts:276](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/cell-selection/cellSelectionFeature.types.ts#L276) Returns the unique ids of all selected cells, in row-major order. @@ -213,11 +215,11 @@ It is memoized and never runs unless called. getSelectedCellRangesData: () => unknown[][][]; ``` -Defined in: [features/cell-selection/cellSelectionFeature.types.ts:267](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/cell-selection/cellSelectionFeature.types.ts#L267) +Defined in: [features/cell-selection/cellSelectionFeature.types.ts:284](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/cell-selection/cellSelectionFeature.types.ts#L284) -Returns each selected range's values as a row-major grid. +Returns each final positive selection region's values as a row-major grid. -Indexed as `[rangeIndex][rowIndex][columnIndex]`. Serializing this to +Indexed as `[regionIndex][rowIndex][columnIndex]`. Serializing this to clipboard text is left to userland, since the delimiter, the null representation, and any quoting rules are application decisions. @@ -233,7 +235,7 @@ representation, and any quoting rules are application decisions. moveCellSelection: (direction) => void; ``` -Defined in: [features/cell-selection/cellSelectionFeature.types.ts:272](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/cell-selection/cellSelectionFeature.types.ts#L272) +Defined in: [features/cell-selection/cellSelectionFeature.types.ts:289](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/cell-selection/cellSelectionFeature.types.ts#L289) Moves the selection one step in a direction, collapsing it to a single cell. Columns that cannot be selected are skipped over. @@ -256,7 +258,7 @@ cell. Columns that cannot be selected are skipped over. resetCellSelection: (defaultState?) => void; ``` -Defined in: [features/cell-selection/cellSelectionFeature.types.ts:278](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/cell-selection/cellSelectionFeature.types.ts#L278) +Defined in: [features/cell-selection/cellSelectionFeature.types.ts:295](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/cell-selection/cellSelectionFeature.types.ts#L295) Resets `cellSelection` to `initialState.cellSelection`. @@ -280,7 +282,7 @@ Pass `true` to ignore initial state and reset to an empty selection. selectAllCells: () => void; ``` -Defined in: [features/cell-selection/cellSelectionFeature.types.ts:282](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/cell-selection/cellSelectionFeature.types.ts#L282) +Defined in: [features/cell-selection/cellSelectionFeature.types.ts:299](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/cell-selection/cellSelectionFeature.types.ts#L299) Selects every selectable cell in the table as one range. @@ -296,9 +298,9 @@ Selects every selectable cell in the table as one range. selectCellRange: (range, opts?) => void; ``` -Defined in: [features/cell-selection/cellSelectionFeature.types.ts:286](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/cell-selection/cellSelectionFeature.types.ts#L286) +Defined in: [features/cell-selection/cellSelectionFeature.types.ts:303](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/cell-selection/cellSelectionFeature.types.ts#L303) -Selects a rectangle, replacing the current selection unless `additive`. +Selects a rectangle using the requested replace/include/exclude mode. #### Parameters @@ -322,7 +324,7 @@ Selects a rectangle, replacing the current selection unless `additive`. setCellSelection: (updater) => void; ``` -Defined in: [features/cell-selection/cellSelectionFeature.types.ts:293](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/cell-selection/cellSelectionFeature.types.ts#L293) +Defined in: [features/cell-selection/cellSelectionFeature.types.ts:310](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/cell-selection/cellSelectionFeature.types.ts#L310) Updates cell selection state with a next value or updater function. @@ -344,7 +346,7 @@ Updates cell selection state with a next value or updater function. setFocusedCell: (rowId, columnId) => void; ``` -Defined in: [features/cell-selection/cellSelectionFeature.types.ts:297](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/cell-selection/cellSelectionFeature.types.ts#L297) +Defined in: [features/cell-selection/cellSelectionFeature.types.ts:314](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/cell-selection/cellSelectionFeature.types.ts#L314) Collapses the selection to a single cell at the given coordinates. diff --git a/docs/reference/index/type-aliases/CellSelectionRangeMode.md b/docs/reference/index/type-aliases/CellSelectionRangeMode.md new file mode 100644 index 0000000000..bc7c3f3395 --- /dev/null +++ b/docs/reference/index/type-aliases/CellSelectionRangeMode.md @@ -0,0 +1,12 @@ +--- +id: CellSelectionRangeMode +title: CellSelectionRangeMode +--- + +# Type Alias: CellSelectionRangeMode + +```ts +type CellSelectionRangeMode = "replace" | "include" | "exclude"; +``` + +Defined in: [features/cell-selection/cellSelectionFeature.types.ts:72](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/cell-selection/cellSelectionFeature.types.ts#L72) diff --git a/docs/reference/index/type-aliases/CellSelectionRangeOperation.md b/docs/reference/index/type-aliases/CellSelectionRangeOperation.md new file mode 100644 index 0000000000..0d6d8949b8 --- /dev/null +++ b/docs/reference/index/type-aliases/CellSelectionRangeOperation.md @@ -0,0 +1,12 @@ +--- +id: CellSelectionRangeOperation +title: CellSelectionRangeOperation +--- + +# Type Alias: CellSelectionRangeOperation + +```ts +type CellSelectionRangeOperation = "include" | "exclude"; +``` + +Defined in: [features/cell-selection/cellSelectionFeature.types.ts:31](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/cell-selection/cellSelectionFeature.types.ts#L31) diff --git a/docs/reference/index/type-aliases/CellSelectionState.md b/docs/reference/index/type-aliases/CellSelectionState.md index e2639ba564..e2d824aa33 100644 --- a/docs/reference/index/type-aliases/CellSelectionState.md +++ b/docs/reference/index/type-aliases/CellSelectionState.md @@ -9,10 +9,10 @@ title: CellSelectionState type CellSelectionState = CellSelectionRange[]; ``` -Defined in: [features/cell-selection/cellSelectionFeature.types.ts:34](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/cell-selection/cellSelectionFeature.types.ts#L34) +Defined in: [features/cell-selection/cellSelectionFeature.types.ts:41](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/cell-selection/cellSelectionFeature.types.ts#L41) -The selected rectangles. The last entry is the active one that shift-extend -and drag operate on. +Ordered range operations that produce the final selection. The last entry is +the active operation that shift-extend and drag operate on. A bare array, matching `SortingState` and `ColumnFiltersState`. Drag session state deliberately lives outside this slice as non-reactive instance data, so diff --git a/docs/reference/static-functions/functions/cell_getIsFocused.md b/docs/reference/static-functions/functions/cell_getIsFocused.md index cf1787c7e3..47f407d0ab 100644 --- a/docs/reference/static-functions/functions/cell_getIsFocused.md +++ b/docs/reference/static-functions/functions/cell_getIsFocused.md @@ -9,7 +9,7 @@ title: cell_getIsFocused function cell_getIsFocused(cell): boolean; ``` -Defined in: [features/cell-selection/cellSelectionFeature.utils.ts:420](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/cell-selection/cellSelectionFeature.utils.ts#L420) +Defined in: [features/cell-selection/cellSelectionFeature.utils.ts:424](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/cell-selection/cellSelectionFeature.utils.ts#L424) Checks whether this cell is the active cell. diff --git a/docs/reference/static-functions/functions/cell_getIsSelected.md b/docs/reference/static-functions/functions/cell_getIsSelected.md index 204ee18839..cd0c242835 100644 --- a/docs/reference/static-functions/functions/cell_getIsSelected.md +++ b/docs/reference/static-functions/functions/cell_getIsSelected.md @@ -9,9 +9,9 @@ title: cell_getIsSelected function cell_getIsSelected(cell): boolean; ``` -Defined in: [features/cell-selection/cellSelectionFeature.utils.ts:396](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/cell-selection/cellSelectionFeature.utils.ts#L396) +Defined in: [features/cell-selection/cellSelectionFeature.utils.ts:400](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/cell-selection/cellSelectionFeature.utils.ts#L400) -Checks whether this cell falls inside any selected range. +Checks whether this cell falls inside the final positive selection. Deliberately not memoized. Registering this through `assignPrototypeAPIs` with `memoDeps` would allocate a memo closure and dependency array per cell, diff --git a/docs/reference/static-functions/functions/table_getCellSelectionBounds.md b/docs/reference/static-functions/functions/table_getCellSelectionBounds.md index 17968a8081..1b6d027855 100644 --- a/docs/reference/static-functions/functions/table_getCellSelectionBounds.md +++ b/docs/reference/static-functions/functions/table_getCellSelectionBounds.md @@ -9,9 +9,10 @@ title: table_getCellSelectionBounds function table_getCellSelectionBounds(table): CellSelectionBounds[]; ``` -Defined in: [features/cell-selection/cellSelectionFeature.utils.ts:243](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/cell-selection/cellSelectionFeature.utils.ts#L243) +Defined in: [features/cell-selection/cellSelectionFeature.utils.ts:246](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/cell-selection/cellSelectionFeature.utils.ts#L246) -Resolves the selected ranges into inclusive display-order index rectangles. +Resolves ordered range operations into disjoint, positive display-order +index rectangles. This is the single cache every per-cell read goes through, so index lookups happen once per invalidation rather than once per cell. A range whose corners diff --git a/docs/reference/static-functions/functions/table_getFocusedCell.md b/docs/reference/static-functions/functions/table_getFocusedCell.md index db647c07c8..807b4bac93 100644 --- a/docs/reference/static-functions/functions/table_getFocusedCell.md +++ b/docs/reference/static-functions/functions/table_getFocusedCell.md @@ -11,9 +11,9 @@ function table_getFocusedCell(table): | undefined; ``` -Defined in: [features/cell-selection/cellSelectionFeature.utils.ts:506](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/cell-selection/cellSelectionFeature.utils.ts#L506) +Defined in: [features/cell-selection/cellSelectionFeature.utils.ts:510](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/cell-selection/cellSelectionFeature.utils.ts#L510) -Returns the active cell, i.e. the anchor of the most recent range. +Returns the active cell, i.e. the anchor of the most recent operation. Focus is derived rather than stored: in spreadsheet semantics, dragging from A1 to C5 leaves the active cell at A1, so the active range's anchor already diff --git a/docs/reference/static-functions/functions/table_getSelectedCellCount.md b/docs/reference/static-functions/functions/table_getSelectedCellCount.md index 55b2e31856..484354f3e9 100644 --- a/docs/reference/static-functions/functions/table_getSelectedCellCount.md +++ b/docs/reference/static-functions/functions/table_getSelectedCellCount.md @@ -9,13 +9,12 @@ title: table_getSelectedCellCount function table_getSelectedCellCount(table): number; ``` -Defined in: [features/cell-selection/cellSelectionFeature.utils.ts:932](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/cell-selection/cellSelectionFeature.utils.ts#L932) +Defined in: [features/cell-selection/cellSelectionFeature.utils.ts:940](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/cell-selection/cellSelectionFeature.utils.ts#L940) Returns the number of selected cells. -Uses rectangle arithmetic for a single range, which needs no expansion. -Multiple ranges are enumerated so overlapping cells are counted once. A -per-cell `enableCellSelection` predicate also requires enumeration. +Uses rectangle arithmetic over the normalized, disjoint positive regions. +A per-cell `enableCellSelection` predicate requires enumeration. ## Type Parameters diff --git a/docs/reference/static-functions/functions/table_getSelectedCellRangesData.md b/docs/reference/static-functions/functions/table_getSelectedCellRangesData.md index 60d667abb6..d9f3204175 100644 --- a/docs/reference/static-functions/functions/table_getSelectedCellRangesData.md +++ b/docs/reference/static-functions/functions/table_getSelectedCellRangesData.md @@ -9,9 +9,9 @@ title: table_getSelectedCellRangesData function table_getSelectedCellRangesData(table): unknown[][][]; ``` -Defined in: [features/cell-selection/cellSelectionFeature.utils.ts:905](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/cell-selection/cellSelectionFeature.utils.ts#L905) +Defined in: [features/cell-selection/cellSelectionFeature.utils.ts:914](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/cell-selection/cellSelectionFeature.utils.ts#L914) -Returns each selected range's values as a row-major grid. +Returns each final positive region's values as a row-major grid. This is the raw material for clipboard export. Serializing it to text is left to userland, since the delimiter, the null representation, and whether values diff --git a/docs/reference/static-functions/functions/table_selectCellRange.md b/docs/reference/static-functions/functions/table_selectCellRange.md index 07b634aa80..d322d88407 100644 --- a/docs/reference/static-functions/functions/table_selectCellRange.md +++ b/docs/reference/static-functions/functions/table_selectCellRange.md @@ -12,9 +12,9 @@ function table_selectCellRange( opts?): void; ``` -Defined in: [features/cell-selection/cellSelectionFeature.utils.ts:554](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/cell-selection/cellSelectionFeature.utils.ts#L554) +Defined in: [features/cell-selection/cellSelectionFeature.utils.ts:558](https://github.com/TanStack/table/blob/main/packages/table-core/src/features/cell-selection/cellSelectionFeature.utils.ts#L558) -Selects a rectangle, replacing the current selection unless `additive`. +Selects a rectangle using replace, include, or exclude semantics. ## Type Parameters @@ -47,5 +47,5 @@ Selects a rectangle, replacing the current selection unless `additive`. ## Example ```ts -table_selectCellRange(table, range, { additive: true }) +table_selectCellRange(table, range, { mode: 'exclude' }) ``` diff --git a/examples/alpine/aggregation/package.json b/examples/alpine/aggregation/package.json index a221271e85..3ba59554c3 100644 --- a/examples/alpine/aggregation/package.json +++ b/examples/alpine/aggregation/package.json @@ -1,6 +1,7 @@ { "name": "tanstack-alpine-table-example-aggregation", "private": true, + "type": "module", "scripts": { "dev": "vite", "build": "vite build", diff --git a/examples/alpine/basic-app-table/package.json b/examples/alpine/basic-app-table/package.json index 234d943888..e67ab6906b 100644 --- a/examples/alpine/basic-app-table/package.json +++ b/examples/alpine/basic-app-table/package.json @@ -1,6 +1,7 @@ { "name": "tanstack-alpine-table-example-basic-app-table", "private": true, + "type": "module", "scripts": { "dev": "vite", "build": "vite build", diff --git a/examples/alpine/basic-create-table/package.json b/examples/alpine/basic-create-table/package.json index 54d9d9f8f6..37f1f88902 100644 --- a/examples/alpine/basic-create-table/package.json +++ b/examples/alpine/basic-create-table/package.json @@ -1,6 +1,7 @@ { "name": "tanstack-alpine-table-example-basic-create-table", "private": true, + "type": "module", "scripts": { "dev": "vite", "build": "vite build", diff --git a/examples/alpine/basic-dynamic-columns/package.json b/examples/alpine/basic-dynamic-columns/package.json index 5f0be179b4..1c16624a85 100644 --- a/examples/alpine/basic-dynamic-columns/package.json +++ b/examples/alpine/basic-dynamic-columns/package.json @@ -1,6 +1,7 @@ { "name": "tanstack-alpine-table-example-basic-dynamic-columns", "private": true, + "type": "module", "scripts": { "dev": "vite", "build": "vite build", diff --git a/examples/alpine/basic-external-atoms/package.json b/examples/alpine/basic-external-atoms/package.json index 8e59ebb13a..818e11320f 100644 --- a/examples/alpine/basic-external-atoms/package.json +++ b/examples/alpine/basic-external-atoms/package.json @@ -1,6 +1,7 @@ { "name": "tanstack-alpine-table-example-basic-external-atoms", "private": true, + "type": "module", "scripts": { "dev": "vite", "build": "vite build", diff --git a/examples/alpine/basic-external-state/package.json b/examples/alpine/basic-external-state/package.json index bce09b2ea0..6e79a3d273 100644 --- a/examples/alpine/basic-external-state/package.json +++ b/examples/alpine/basic-external-state/package.json @@ -1,6 +1,7 @@ { "name": "tanstack-alpine-table-example-basic-external-state", "private": true, + "type": "module", "scripts": { "dev": "vite", "build": "vite build", diff --git a/examples/alpine/cell-selection/package.json b/examples/alpine/cell-selection/package.json index 5409d011ee..0782fb6c33 100644 --- a/examples/alpine/cell-selection/package.json +++ b/examples/alpine/cell-selection/package.json @@ -1,6 +1,7 @@ { "name": "tanstack-alpine-table-example-cell-selection", "private": true, + "type": "module", "scripts": { "dev": "vite", "build": "vite build", diff --git a/examples/alpine/cell-selection/src/main.ts b/examples/alpine/cell-selection/src/main.ts index 02caf63dc4..d55af147fe 100644 --- a/examples/alpine/cell-selection/src/main.ts +++ b/examples/alpine/cell-selection/src/main.ts @@ -80,7 +80,7 @@ function toTsv(ranges: Array>>) { .map((grid) => grid.map((row) => row.map(escapeTsvValue).join('\t')).join('\n'), ) - .join('\n\n') // blank line between disjoint rectangles + .join('\n\n') // blank line between final selected regions } Alpine.data('table', () => { diff --git a/examples/alpine/column-ordering/package.json b/examples/alpine/column-ordering/package.json index 9004cae6e5..7a2625c065 100644 --- a/examples/alpine/column-ordering/package.json +++ b/examples/alpine/column-ordering/package.json @@ -1,6 +1,7 @@ { "name": "tanstack-alpine-table-example-column-ordering", "private": true, + "type": "module", "scripts": { "dev": "vite", "build": "vite build", diff --git a/examples/alpine/column-pinning-split/package.json b/examples/alpine/column-pinning-split/package.json index 6f36a6b504..43b0c94342 100644 --- a/examples/alpine/column-pinning-split/package.json +++ b/examples/alpine/column-pinning-split/package.json @@ -1,6 +1,7 @@ { "name": "tanstack-alpine-table-example-column-pinning-split", "private": true, + "type": "module", "scripts": { "dev": "vite", "build": "vite build", diff --git a/examples/alpine/column-pinning-sticky/package.json b/examples/alpine/column-pinning-sticky/package.json index 3c083b0098..5d695366ff 100644 --- a/examples/alpine/column-pinning-sticky/package.json +++ b/examples/alpine/column-pinning-sticky/package.json @@ -1,6 +1,7 @@ { "name": "tanstack-alpine-table-example-column-pinning-sticky", "private": true, + "type": "module", "scripts": { "dev": "vite", "build": "vite build", diff --git a/examples/alpine/column-pinning/package.json b/examples/alpine/column-pinning/package.json index 6e02161871..8402cbde21 100644 --- a/examples/alpine/column-pinning/package.json +++ b/examples/alpine/column-pinning/package.json @@ -1,6 +1,7 @@ { "name": "tanstack-alpine-table-example-column-pinning", "private": true, + "type": "module", "scripts": { "dev": "vite", "build": "vite build", diff --git a/examples/alpine/column-resizing-performant/package.json b/examples/alpine/column-resizing-performant/package.json index bd245b594f..90f763f71a 100644 --- a/examples/alpine/column-resizing-performant/package.json +++ b/examples/alpine/column-resizing-performant/package.json @@ -1,6 +1,7 @@ { "name": "tanstack-alpine-table-example-column-resizing-performant", "private": true, + "type": "module", "scripts": { "dev": "vite", "build": "vite build", diff --git a/examples/alpine/column-resizing/package.json b/examples/alpine/column-resizing/package.json index cd0ccb466f..990a1484c7 100644 --- a/examples/alpine/column-resizing/package.json +++ b/examples/alpine/column-resizing/package.json @@ -1,6 +1,7 @@ { "name": "tanstack-alpine-table-example-column-resizing", "private": true, + "type": "module", "scripts": { "dev": "vite", "build": "vite build", diff --git a/examples/alpine/column-sizing/package.json b/examples/alpine/column-sizing/package.json index de5d6c9998..452b933086 100644 --- a/examples/alpine/column-sizing/package.json +++ b/examples/alpine/column-sizing/package.json @@ -1,6 +1,7 @@ { "name": "tanstack-alpine-table-example-column-sizing", "private": true, + "type": "module", "scripts": { "dev": "vite", "build": "vite build", diff --git a/examples/alpine/column-visibility/package.json b/examples/alpine/column-visibility/package.json index 2e83ab93f1..a1dde7cfbb 100644 --- a/examples/alpine/column-visibility/package.json +++ b/examples/alpine/column-visibility/package.json @@ -1,6 +1,7 @@ { "name": "tanstack-alpine-table-example-column-visibility", "private": true, + "type": "module", "scripts": { "dev": "vite", "build": "vite build", diff --git a/examples/alpine/custom-plugin/package.json b/examples/alpine/custom-plugin/package.json index 7d0a638f5d..6e1e124059 100644 --- a/examples/alpine/custom-plugin/package.json +++ b/examples/alpine/custom-plugin/package.json @@ -1,6 +1,7 @@ { "name": "tanstack-alpine-table-example-custom-plugin", "private": true, + "type": "module", "scripts": { "dev": "vite", "build": "vite build", diff --git a/examples/alpine/expanding/package.json b/examples/alpine/expanding/package.json index 8290a76a49..e45ea4404a 100644 --- a/examples/alpine/expanding/package.json +++ b/examples/alpine/expanding/package.json @@ -1,6 +1,7 @@ { "name": "tanstack-alpine-table-example-expanding", "private": true, + "type": "module", "scripts": { "dev": "vite", "build": "vite build", diff --git a/examples/alpine/filters-faceted-bucketed/package.json b/examples/alpine/filters-faceted-bucketed/package.json index 23aa262027..cbc1a2bb19 100644 --- a/examples/alpine/filters-faceted-bucketed/package.json +++ b/examples/alpine/filters-faceted-bucketed/package.json @@ -1,6 +1,7 @@ { "name": "tanstack-alpine-table-example-filters-faceted-bucketed", "private": true, + "type": "module", "scripts": { "dev": "vite", "build": "vite build", diff --git a/examples/alpine/filters-faceted/package.json b/examples/alpine/filters-faceted/package.json index e586bd29a8..89ee22cb4e 100644 --- a/examples/alpine/filters-faceted/package.json +++ b/examples/alpine/filters-faceted/package.json @@ -1,6 +1,7 @@ { "name": "tanstack-alpine-table-example-filters-faceted", "private": true, + "type": "module", "scripts": { "dev": "vite", "build": "vite build", diff --git a/examples/alpine/filters/package.json b/examples/alpine/filters/package.json index 90949b1ce5..dac3dc114a 100644 --- a/examples/alpine/filters/package.json +++ b/examples/alpine/filters/package.json @@ -1,6 +1,7 @@ { "name": "tanstack-alpine-table-example-filters", "private": true, + "type": "module", "scripts": { "dev": "vite", "build": "vite build", diff --git a/examples/alpine/grouped-aggregation/package.json b/examples/alpine/grouped-aggregation/package.json index c3ec2144f1..128b01bdd2 100644 --- a/examples/alpine/grouped-aggregation/package.json +++ b/examples/alpine/grouped-aggregation/package.json @@ -1,6 +1,7 @@ { "name": "tanstack-alpine-table-example-grouped-aggregation", "private": true, + "type": "module", "scripts": { "dev": "vite", "build": "vite build", diff --git a/examples/alpine/grouping/package.json b/examples/alpine/grouping/package.json index b456f3c379..821414d2e7 100644 --- a/examples/alpine/grouping/package.json +++ b/examples/alpine/grouping/package.json @@ -1,6 +1,7 @@ { "name": "tanstack-alpine-table-example-grouping", "private": true, + "type": "module", "scripts": { "dev": "vite", "build": "vite build", diff --git a/examples/alpine/header-groups/package.json b/examples/alpine/header-groups/package.json index 8a878aab08..7138ca7f47 100644 --- a/examples/alpine/header-groups/package.json +++ b/examples/alpine/header-groups/package.json @@ -1,6 +1,7 @@ { "name": "tanstack-alpine-table-example-header-groups", "private": true, + "type": "module", "scripts": { "dev": "vite", "build": "vite build", diff --git a/examples/alpine/pagination/package.json b/examples/alpine/pagination/package.json index b2241fffbb..8dbc2803d7 100644 --- a/examples/alpine/pagination/package.json +++ b/examples/alpine/pagination/package.json @@ -1,6 +1,7 @@ { "name": "tanstack-alpine-table-example-pagination", "private": true, + "type": "module", "scripts": { "dev": "vite", "build": "vite build", diff --git a/examples/alpine/row-pinning/package.json b/examples/alpine/row-pinning/package.json index 612819c81c..e60725f5be 100644 --- a/examples/alpine/row-pinning/package.json +++ b/examples/alpine/row-pinning/package.json @@ -1,6 +1,7 @@ { "name": "tanstack-alpine-table-example-row-pinning", "private": true, + "type": "module", "scripts": { "dev": "vite", "build": "vite build", diff --git a/examples/alpine/row-selection/package.json b/examples/alpine/row-selection/package.json index 2811546da0..87e800c12c 100644 --- a/examples/alpine/row-selection/package.json +++ b/examples/alpine/row-selection/package.json @@ -1,6 +1,7 @@ { "name": "tanstack-alpine-table-example-row-selection", "private": true, + "type": "module", "scripts": { "dev": "vite", "build": "vite build", diff --git a/examples/alpine/sorting-dynamic-data/package.json b/examples/alpine/sorting-dynamic-data/package.json index 5071718a2f..ed54cc96dc 100644 --- a/examples/alpine/sorting-dynamic-data/package.json +++ b/examples/alpine/sorting-dynamic-data/package.json @@ -1,6 +1,7 @@ { "name": "tanstack-alpine-table-example-sorting-dynamic-data", "private": true, + "type": "module", "scripts": { "dev": "vite", "build": "vite build", diff --git a/examples/alpine/sorting/package.json b/examples/alpine/sorting/package.json index abf7625478..564b3e2e0c 100644 --- a/examples/alpine/sorting/package.json +++ b/examples/alpine/sorting/package.json @@ -1,6 +1,7 @@ { "name": "tanstack-alpine-table-example-sorting", "private": true, + "type": "module", "scripts": { "dev": "vite", "build": "vite build", diff --git a/examples/alpine/sub-components/package.json b/examples/alpine/sub-components/package.json index 4976c3f3f0..3b61362b12 100644 --- a/examples/alpine/sub-components/package.json +++ b/examples/alpine/sub-components/package.json @@ -1,6 +1,7 @@ { "name": "tanstack-alpine-table-example-sub-components", "private": true, + "type": "module", "scripts": { "dev": "vite", "build": "vite build", diff --git a/examples/angular/cell-selection/src/app/app.html b/examples/angular/cell-selection/src/app/app.html index b9af69373d..a760dcaf4c 100644 --- a/examples/angular/cell-selection/src/app/app.html +++ b/examples/angular/cell-selection/src/app/app.html @@ -8,9 +8,9 @@

Click and drag to select a range of cells. Hold Shift while clicking to extend the selection, or - Ctrl/Cmd to add a second rectangle. Arrow keys move the selection, Shift+Arrow extends it, Mod+A - selects all, Mod+C copies, and Escape clears. Uncomment `enableCellSelection: false` on a column - def to opt that column out of selection. + Ctrl/Cmd to add or subtract a rectangle. Arrow keys move the selection, Shift+Arrow extends it, + Mod+A selects all, Mod+C copies, and Escape clears. Uncomment `enableCellSelection: false` on a + column def to opt that column out of selection.

Hiding, reordering, and pinning columns all keep a live selection anchored to the same cell ids. diff --git a/examples/angular/cell-selection/src/app/app.ts b/examples/angular/cell-selection/src/app/app.ts index d8ca73e2b1..87ffcdc599 100644 --- a/examples/angular/cell-selection/src/app/app.ts +++ b/examples/angular/cell-selection/src/app/app.ts @@ -44,7 +44,7 @@ function toTsv(ranges: Array>>) { .map((grid) => grid.map((row) => row.map(escapeTsvValue).join('\t')).join('\n'), ) - .join('\n\n') // blank line between disjoint rectangles + .join('\n\n') // blank line between final selected regions } @Component({ diff --git a/examples/lit/aggregation/package.json b/examples/lit/aggregation/package.json index 5428c15311..a80f99e422 100644 --- a/examples/lit/aggregation/package.json +++ b/examples/lit/aggregation/package.json @@ -1,6 +1,7 @@ { "name": "tanstack-lit-table-example-aggregation", "private": true, + "type": "module", "scripts": { "dev": "vite", "build": "vite build", diff --git a/examples/lit/basic-app-table/package.json b/examples/lit/basic-app-table/package.json index 0c661100e3..2c7c0910fa 100644 --- a/examples/lit/basic-app-table/package.json +++ b/examples/lit/basic-app-table/package.json @@ -1,6 +1,7 @@ { "name": "tanstack-lit-table-example-basic-app-table", "private": true, + "type": "module", "scripts": { "dev": "vite", "build": "vite build", diff --git a/examples/lit/basic-app-table/src/main.ts b/examples/lit/basic-app-table/src/main.ts index eb271df06b..87d7b5b03f 100644 --- a/examples/lit/basic-app-table/src/main.ts +++ b/examples/lit/basic-app-table/src/main.ts @@ -131,28 +131,28 @@ class LitTableExample extends LitElement { ? null : html`

${h.FlexRender()} ${ - { asc: ' \u{1F53C}', desc: ' \u{1F53D}' }[ - h.column.getIsSorted() as string - ] ?? null - } + { asc: ' \u{1F53C}', desc: ' \u{1F53D}' }[ + h.column.getIsSorted() as string + ] ?? null + }
` } diff --git a/examples/lit/basic-dynamic-columns/package.json b/examples/lit/basic-dynamic-columns/package.json index 386adb045e..e96f59341c 100644 --- a/examples/lit/basic-dynamic-columns/package.json +++ b/examples/lit/basic-dynamic-columns/package.json @@ -1,6 +1,7 @@ { "name": "tanstack-lit-table-example-basic-dynamic-columns", "private": true, + "type": "module", "scripts": { "dev": "vite", "build": "vite build", diff --git a/examples/lit/basic-dynamic-columns/src/main.ts b/examples/lit/basic-dynamic-columns/src/main.ts index 492c7344ed..a29999047c 100644 --- a/examples/lit/basic-dynamic-columns/src/main.ts +++ b/examples/lit/basic-dynamic-columns/src/main.ts @@ -419,33 +419,34 @@ class LitTableExample extends LitElement { : html`
${FlexRender({ header })}${ - { - asc: ' 🔼', - desc: ' 🔽', - }[header.column.getIsSorted() as string] ?? - '' - } + { + asc: ' 🔼', + desc: ' 🔽', + }[ + header.column.getIsSorted() as string + ] ?? '' + }
${ - header.column.getCanFilter() - ? html`` - : null - } + header.column.getCanFilter() + ? html`` + : null + } ` } diff --git a/examples/lit/basic-external-atoms/package.json b/examples/lit/basic-external-atoms/package.json index 323a901b16..4ad5a024cc 100644 --- a/examples/lit/basic-external-atoms/package.json +++ b/examples/lit/basic-external-atoms/package.json @@ -1,6 +1,7 @@ { "name": "tanstack-lit-table-example-basic-external-atoms", "private": true, + "type": "module", "scripts": { "dev": "vite", "build": "vite build", diff --git a/examples/lit/basic-external-atoms/src/main.ts b/examples/lit/basic-external-atoms/src/main.ts index 094ec862b2..f975d6eb8e 100644 --- a/examples/lit/basic-external-atoms/src/main.ts +++ b/examples/lit/basic-external-atoms/src/main.ts @@ -136,19 +136,20 @@ class LitTableExample extends LitElement { ? null : html`
${FlexRender({ header })} ${ - { - asc: ' 🔼', - desc: ' 🔽', - }[header.column.getIsSorted() as string] ?? null - } + { + asc: ' 🔼', + desc: ' 🔽', + }[header.column.getIsSorted() as string] ?? + null + }
` } diff --git a/examples/lit/basic-external-state/package.json b/examples/lit/basic-external-state/package.json index d225096fea..01d14c0985 100644 --- a/examples/lit/basic-external-state/package.json +++ b/examples/lit/basic-external-state/package.json @@ -1,6 +1,7 @@ { "name": "tanstack-lit-table-example-basic-external-state", "private": true, + "type": "module", "scripts": { "dev": "vite", "build": "vite build", diff --git a/examples/lit/basic-external-state/src/main.ts b/examples/lit/basic-external-state/src/main.ts index cc27a35d7d..552e05cbac 100644 --- a/examples/lit/basic-external-state/src/main.ts +++ b/examples/lit/basic-external-state/src/main.ts @@ -133,19 +133,20 @@ class LitTableExample extends LitElement { ? null : html`
${FlexRender({ header })} ${ - { - asc: ' 🔼', - desc: ' 🔽', - }[header.column.getIsSorted() as string] ?? null - } + { + asc: ' 🔼', + desc: ' 🔽', + }[header.column.getIsSorted() as string] ?? + null + }
` } diff --git a/examples/lit/basic-subscribe/package.json b/examples/lit/basic-subscribe/package.json index c4a2247eae..fa56161766 100644 --- a/examples/lit/basic-subscribe/package.json +++ b/examples/lit/basic-subscribe/package.json @@ -1,6 +1,7 @@ { "name": "tanstack-lit-table-example-basic-subscribe", "private": true, + "type": "module", "scripts": { "dev": "vite", "build": "vite build", diff --git a/examples/lit/basic-subscribe/src/main.ts b/examples/lit/basic-subscribe/src/main.ts index d2875e6a26..6c20871fab 100644 --- a/examples/lit/basic-subscribe/src/main.ts +++ b/examples/lit/basic-subscribe/src/main.ts @@ -271,10 +271,12 @@ class LitTableExample extends LitElement { : html`
${FlexRender({ header })}
${ - header.column.getCanFilter() - ? this.renderColumnFilter(header.getContext()) - : null - } + header.column.getCanFilter() + ? this.renderColumnFilter( + header.getContext(), + ) + : null + } ` } diff --git a/examples/lit/basic-table-controller/package.json b/examples/lit/basic-table-controller/package.json index 00c5906e36..d00e49d471 100644 --- a/examples/lit/basic-table-controller/package.json +++ b/examples/lit/basic-table-controller/package.json @@ -1,6 +1,7 @@ { "name": "tanstack-lit-table-example-basic-table-controller", "private": true, + "type": "module", "scripts": { "dev": "vite", "build": "vite build", diff --git a/examples/lit/cell-selection/package.json b/examples/lit/cell-selection/package.json index 52ae7f1824..cd40d6d545 100644 --- a/examples/lit/cell-selection/package.json +++ b/examples/lit/cell-selection/package.json @@ -1,6 +1,7 @@ { "name": "tanstack-lit-table-example-cell-selection", "private": true, + "type": "module", "scripts": { "dev": "vite", "build": "vite build", diff --git a/examples/lit/cell-selection/src/main.ts b/examples/lit/cell-selection/src/main.ts index 8b24af673b..2fb34d8319 100644 --- a/examples/lit/cell-selection/src/main.ts +++ b/examples/lit/cell-selection/src/main.ts @@ -58,7 +58,7 @@ function toTsv(ranges: Array>>) { .map((grid) => grid.map((row) => row.map(escapeTsvValue).join('\t')).join('\n'), ) - .join('\n\n') // blank line between disjoint rectangles + .join('\n\n') // blank line between final selected regions } function getCellClassName(cell: Cell) { @@ -321,9 +321,9 @@ export class LitCellSelectionExample extends LitElement {

Click and drag to select a range of cells. Hold Shift while clicking to - extend the selection, or Ctrl/Cmd to add a second rectangle. Arrow keys - move the selection, Shift+Arrow extends it, Mod+A selects all, Mod+C - copies, and Escape clears. Uncomment + extend the selection, or Ctrl/Cmd to add or subtract a rectangle. Arrow + keys move the selection, Shift+Arrow extends it, Mod+A selects all, + Mod+C copies, and Escape clears. Uncomment enableCellSelection: false on a column def to opt that column out of selection.

@@ -419,61 +419,63 @@ export class LitCellSelectionExample extends LitElement { ${ - header.column.getCanPin() - ? html` -
- ${ - header.column.getIsPinned() !== 'start' - ? html`` - : null - } - ${ - header.column.getIsPinned() - ? html`` - : null - } - ${ - header.column.getIsPinned() !== 'end' - ? html`` - : null - } -
- ` - : null - } + header.column.getCanPin() + ? html` +
+ ${ + header.column.getIsPinned() !== + 'start' + ? html`` + : null + } + ${ + header.column.getIsPinned() + ? html`` + : null + } + ${ + header.column.getIsPinned() !== + 'end' + ? html`` + : null + } +
+ ` + : null + } ` } diff --git a/examples/lit/column-ordering/package.json b/examples/lit/column-ordering/package.json index fc80c5eba9..0427eecde1 100644 --- a/examples/lit/column-ordering/package.json +++ b/examples/lit/column-ordering/package.json @@ -1,6 +1,7 @@ { "name": "tanstack-lit-table-example-column-ordering", "private": true, + "type": "module", "scripts": { "dev": "vite", "build": "vite build", diff --git a/examples/lit/column-pinning-split/package.json b/examples/lit/column-pinning-split/package.json index 4795020923..7b87918a6d 100644 --- a/examples/lit/column-pinning-split/package.json +++ b/examples/lit/column-pinning-split/package.json @@ -1,6 +1,7 @@ { "name": "tanstack-lit-table-example-column-pinning-split", "private": true, + "type": "module", "scripts": { "dev": "vite", "build": "vite build", diff --git a/examples/lit/column-pinning-sticky/package.json b/examples/lit/column-pinning-sticky/package.json index 336d600478..b71114ffa3 100644 --- a/examples/lit/column-pinning-sticky/package.json +++ b/examples/lit/column-pinning-sticky/package.json @@ -1,6 +1,7 @@ { "name": "tanstack-lit-table-example-column-pinning-sticky", "private": true, + "type": "module", "scripts": { "dev": "vite", "build": "vite build", diff --git a/examples/lit/column-pinning-sticky/src/main.ts b/examples/lit/column-pinning-sticky/src/main.ts index 76e6545429..2f43811b9e 100644 --- a/examples/lit/column-pinning-sticky/src/main.ts +++ b/examples/lit/column-pinning-sticky/src/main.ts @@ -261,44 +261,44 @@ class LitTableExample extends LitElement { ? html`
${ - header.column.getIsPinned() !== 'start' - ? html` - - ` - : null - } + header.column.getIsPinned() !== 'start' + ? html` + + ` + : null + } ${ - header.column.getIsPinned() - ? html` - - ` - : null - } + header.column.getIsPinned() + ? html` + + ` + : null + } ${ - header.column.getIsPinned() !== 'end' - ? html` - - ` - : null - } + header.column.getIsPinned() !== 'end' + ? html` + + ` + : null + }
` : null diff --git a/examples/lit/column-pinning/package.json b/examples/lit/column-pinning/package.json index 07e6b627e6..9a91b512b4 100644 --- a/examples/lit/column-pinning/package.json +++ b/examples/lit/column-pinning/package.json @@ -1,6 +1,7 @@ { "name": "tanstack-lit-table-example-column-pinning", "private": true, + "type": "module", "scripts": { "dev": "vite", "build": "vite build", diff --git a/examples/lit/column-pinning/src/main.ts b/examples/lit/column-pinning/src/main.ts index 2cda19eaaa..d7a05d67eb 100644 --- a/examples/lit/column-pinning/src/main.ts +++ b/examples/lit/column-pinning/src/main.ts @@ -228,44 +228,44 @@ class LitTableExample extends LitElement { ? html`
${ - header.column.getIsPinned() !== 'start' - ? html` - - ` - : null - } + header.column.getIsPinned() !== 'start' + ? html` + + ` + : null + } ${ - header.column.getIsPinned() - ? html` - - ` - : null - } + header.column.getIsPinned() + ? html` + + ` + : null + } ${ - header.column.getIsPinned() !== 'end' - ? html` - - ` - : null - } + header.column.getIsPinned() !== 'end' + ? html` + + ` + : null + }
` : null diff --git a/examples/lit/column-resizing-performant/package.json b/examples/lit/column-resizing-performant/package.json index 633cea443a..6c4c5596b1 100644 --- a/examples/lit/column-resizing-performant/package.json +++ b/examples/lit/column-resizing-performant/package.json @@ -1,6 +1,7 @@ { "name": "tanstack-lit-table-example-column-resizing-performant", "private": true, + "type": "module", "scripts": { "dev": "vite", "build": "vite build", diff --git a/examples/lit/column-resizing/package.json b/examples/lit/column-resizing/package.json index 951fa0ab58..166618bd56 100644 --- a/examples/lit/column-resizing/package.json +++ b/examples/lit/column-resizing/package.json @@ -1,6 +1,7 @@ { "name": "tanstack-lit-table-example-column-resizing", "private": true, + "type": "module", "scripts": { "dev": "vite", "build": "vite build", diff --git a/examples/lit/column-sizing/src/main.ts b/examples/lit/column-sizing/src/main.ts index 919f1dbafa..0479eb7e83 100644 --- a/examples/lit/column-sizing/src/main.ts +++ b/examples/lit/column-sizing/src/main.ts @@ -118,10 +118,12 @@ class LitTableExample extends LitElement { ? null : html`
1 && - sorting.findIndex( - (s) => s.id === header.column.id, - ) > -1 - ? html`${ - sorting.findIndex( - (s) => s.id === header.column.id, - ) + 1 - }` - : nothing - } + sorting.length > 1 && + sorting.findIndex( + (s) => s.id === header.column.id, + ) > -1 + ? html`${ + sorting.findIndex( + (s) => + s.id === header.column.id, + ) + 1 + }` + : nothing + } ` } @@ -188,26 +189,28 @@ export class ProductsTable extends LitElement { ? html` ${footer.FooterSum()} ${ - hasFilter - ? html` - (filtered)` - : nothing - } - ` - : columnId === 'select' - ? nothing - : html` - ${footer.FooterColumnId()} - ${ hasFilter ? html` - ✓` : nothing } + ` + : columnId === 'select' + ? nothing + : html` + ${footer.FooterColumnId()} + ${ + hasFilter + ? html` + ✓` + : nothing + } ` } diff --git a/examples/lit/composable-tables/src/components/users-table.ts b/examples/lit/composable-tables/src/components/users-table.ts index 0ee295dc47..253a18488c 100644 --- a/examples/lit/composable-tables/src/components/users-table.ts +++ b/examples/lit/composable-tables/src/components/users-table.ts @@ -142,19 +142,20 @@ export class UsersTable extends LitElement { ${header.SortIndicator()} ${header.ColumnFilter()} ${ - sorting.length > 1 && - sorting.findIndex( - (s) => s.id === header.column.id, - ) > -1 - ? html`${ - sorting.findIndex( - (s) => s.id === header.column.id, - ) + 1 - }` - : nothing - } + sorting.length > 1 && + sorting.findIndex( + (s) => s.id === header.column.id, + ) > -1 + ? html`${ + sorting.findIndex( + (s) => + s.id === header.column.id, + ) + 1 + }` + : nothing + } ` } @@ -202,27 +203,29 @@ export class UsersTable extends LitElement { ? html` ${footer.FooterSum()} ${ - hasFilter - ? html` - (filtered)` - : nothing - } - ` - : columnId === 'actions' || - columnId === 'select' - ? nothing - : html` - ${footer.FooterColumnId()} - ${ hasFilter ? html` - ✓` : nothing } + ` + : columnId === 'actions' || + columnId === 'select' + ? nothing + : html` + ${footer.FooterColumnId()} + ${ + hasFilter + ? html` + ✓` + : nothing + } ` } diff --git a/examples/lit/expanding/package.json b/examples/lit/expanding/package.json index d333c18f88..3d8dcbebec 100644 --- a/examples/lit/expanding/package.json +++ b/examples/lit/expanding/package.json @@ -1,6 +1,7 @@ { "name": "tanstack-lit-table-example-expanding", "private": true, + "type": "module", "scripts": { "dev": "vite", "build": "vite build", diff --git a/examples/lit/expanding/src/main.ts b/examples/lit/expanding/src/main.ts index e2a27879b0..f245f9024d 100644 --- a/examples/lit/expanding/src/main.ts +++ b/examples/lit/expanding/src/main.ts @@ -262,12 +262,12 @@ class LitTableExample extends LitElement {
${FlexRender({ header })} ${ - header.column.getCanFilter() - ? html`
- ${renderFilter(header.column, table)} -
` - : null - } + header.column.getCanFilter() + ? html`
+ ${renderFilter(header.column, table)} +
` + : null + }
` } diff --git a/examples/lit/filters-faceted-bucketed/package.json b/examples/lit/filters-faceted-bucketed/package.json index 99ac4ce2aa..cbe9cd1f35 100644 --- a/examples/lit/filters-faceted-bucketed/package.json +++ b/examples/lit/filters-faceted-bucketed/package.json @@ -1,6 +1,7 @@ { "name": "tanstack-lit-table-example-filters-faceted-bucketed", "private": true, + "type": "module", "scripts": { "dev": "vite", "build": "vite build", diff --git a/examples/lit/filters-faceted-bucketed/src/main.ts b/examples/lit/filters-faceted-bucketed/src/main.ts index c75567c41a..8effb0c8e6 100644 --- a/examples/lit/filters-faceted-bucketed/src/main.ts +++ b/examples/lit/filters-faceted-bucketed/src/main.ts @@ -196,15 +196,15 @@ class LitTableExample extends LitElement { : html` ${FlexRender({ header })} ${ - header.column.getCanFilter() - ? html`
- -
` - : null - } + header.column.getCanFilter() + ? html`
+ +
` + : null + } ` } diff --git a/examples/lit/filters-faceted/package.json b/examples/lit/filters-faceted/package.json index 316f4f55a3..ec52956251 100644 --- a/examples/lit/filters-faceted/package.json +++ b/examples/lit/filters-faceted/package.json @@ -1,6 +1,7 @@ { "name": "tanstack-lit-table-example-filters-faceted", "private": true, + "type": "module", "scripts": { "dev": "vite", "build": "vite build", diff --git a/examples/lit/filters-faceted/src/main.ts b/examples/lit/filters-faceted/src/main.ts index a6ce047ab2..5102b1d0dc 100644 --- a/examples/lit/filters-faceted/src/main.ts +++ b/examples/lit/filters-faceted/src/main.ts @@ -274,15 +274,15 @@ class LitTableExample extends LitElement { : html` ${FlexRender({ header })} ${ - header.column.getCanFilter() - ? html`
- -
` - : null - } + header.column.getCanFilter() + ? html`
+ +
` + : null + } ` } diff --git a/examples/lit/filters-fuzzy/package.json b/examples/lit/filters-fuzzy/package.json index dee8cc5470..7648332396 100644 --- a/examples/lit/filters-fuzzy/package.json +++ b/examples/lit/filters-fuzzy/package.json @@ -1,6 +1,7 @@ { "name": "tanstack-lit-table-example-filters-fuzzy", "private": true, + "type": "module", "scripts": { "dev": "vite", "build": "vite build", diff --git a/examples/lit/filters-fuzzy/src/main.ts b/examples/lit/filters-fuzzy/src/main.ts index 5b6d009c40..aa0d654e4c 100644 --- a/examples/lit/filters-fuzzy/src/main.ts +++ b/examples/lit/filters-fuzzy/src/main.ts @@ -256,27 +256,27 @@ class LitTableExample extends LitElement {
${FlexRender({ header })} ${ - { asc: ' 🔼', desc: ' 🔽' }[ - header.column.getIsSorted() as string - ] ?? null - } + { asc: ' 🔼', desc: ' 🔽' }[ + header.column.getIsSorted() as string + ] ?? null + }
${ - header.column.getCanFilter() - ? html`
- -
` - : null - } + header.column.getCanFilter() + ? html`
+ +
` + : null + } ` } diff --git a/examples/lit/filters/package.json b/examples/lit/filters/package.json index c72cabcbb8..0b49aa5a75 100644 --- a/examples/lit/filters/package.json +++ b/examples/lit/filters/package.json @@ -1,6 +1,7 @@ { "name": "tanstack-lit-table-example-filters", "private": true, + "type": "module", "scripts": { "dev": "vite", "build": "vite build", diff --git a/examples/lit/filters/src/main.ts b/examples/lit/filters/src/main.ts index b088959630..eb31aaf749 100644 --- a/examples/lit/filters/src/main.ts +++ b/examples/lit/filters/src/main.ts @@ -217,14 +217,14 @@ class LitTableExample extends LitElement { ? null : html`
${FlexRender({ header })}
${ - header.column.getCanFilter() - ? html`
- -
` - : null - } ` + header.column.getCanFilter() + ? html`
+ +
` + : null + } ` } `, diff --git a/examples/lit/grouped-aggregation/package.json b/examples/lit/grouped-aggregation/package.json index 690c3be4b0..3ff515a80e 100644 --- a/examples/lit/grouped-aggregation/package.json +++ b/examples/lit/grouped-aggregation/package.json @@ -1,6 +1,7 @@ { "name": "tanstack-lit-table-example-grouped-aggregation", "private": true, + "type": "module", "scripts": { "dev": "vite", "build": "vite build", diff --git a/examples/lit/grouped-aggregation/src/main.ts b/examples/lit/grouped-aggregation/src/main.ts index 457b83afb0..9d77397d30 100644 --- a/examples/lit/grouped-aggregation/src/main.ts +++ b/examples/lit/grouped-aggregation/src/main.ts @@ -168,19 +168,19 @@ class LitTableExample extends LitElement { ? null : html`
${ - header.column.getCanGroup() - ? html`` - : null - } + header.column.getCanGroup() + ? html`` + : null + } ${FlexRender({ header })}
` } @@ -215,8 +215,8 @@ class LitTableExample extends LitElement { ? html`` - : null - } + header.column.getCanGroup() + ? html`` + : null + } ${FlexRender({ header })}
` } @@ -184,8 +184,8 @@ class LitTableExample extends LitElement { ? html`` - : null - } + column.getIsPinned() !== 'start' + ? html`` + : null + } ${ - column.getIsPinned() - ? html`` - : null - } + column.getIsPinned() + ? html`` + : null + } ${ - column.getIsPinned() !== 'end' - ? html`` - : null - } + column.getIsPinned() !== 'end' + ? html`` + : null + } ` : null @@ -482,10 +482,10 @@ class LitTableExample extends LitElement { @click=${column.getToggleGroupingHandler()} > ${ - column.getIsGrouped() - ? `Stop (${column.getGroupedIndex()})` - : 'Group' - } + column.getIsGrouped() + ? `Stop (${column.getGroupedIndex()})` + : 'Group' + } ` : null } @@ -505,12 +505,12 @@ class LitTableExample extends LitElement { > ${FlexRender({ header })} ${ - column.getIsSorted() === 'asc' - ? ' ▲' - : column.getIsSorted() === 'desc' - ? ' ▼' - : '' - } + column.getIsSorted() === 'asc' + ? ' ▲' + : column.getIsSorted() === 'desc' + ? ' ▼' + : '' + } ` : FlexRender({ header }) } @@ -653,9 +653,9 @@ class LitTableExample extends LitElement { @@ -663,23 +663,23 @@ class LitTableExample extends LitElement { : cell.column.id === 'firstName' ? html`
${ - cell.row.getCanExpand() - ? html`` - : html`-` - } + cell.row.getCanExpand() + ? html`` + : html`-` + } ${FlexRender({ cell })}
` : cell.getIsGrouped() ? html`