@tanstack/table-core 9.0.0-beta.69 → 9.0.0-beta.70
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/core/cells/constructCell.d.ts +1 -1
- package/dist/core/cells/coreCellsFeature.types.d.ts +1 -1
- package/dist/core/cells/coreCellsFeature.utils.d.ts +1 -1
- package/dist/core/columns/constructColumn.d.ts +1 -1
- package/dist/core/columns/coreColumnsFeature.types.d.ts +1 -1
- package/dist/core/columns/coreColumnsFeature.utils.d.ts +1 -1
- package/dist/core/headers/buildHeaderGroups.d.ts +1 -1
- package/dist/core/headers/constructHeader.d.ts +1 -1
- package/dist/core/headers/coreHeadersFeature.types.d.ts +1 -1
- package/dist/core/headers/coreHeadersFeature.utils.d.ts +1 -1
- package/dist/core/row-models/coreRowModelsFeature.types.d.ts +4 -4
- package/dist/core/row-models/coreRowModelsFeature.utils.d.ts +1 -1
- package/dist/core/row-models/createCoreRowModel.d.ts +1 -1
- package/dist/core/rows/constructRow.d.ts +1 -1
- package/dist/core/rows/coreRowsFeature.types.d.ts +1 -1
- package/dist/core/rows/coreRowsFeature.utils.d.ts +1 -1
- package/dist/features/cell-selection/cellSelectionFeature.js +13 -2
- package/dist/features/cell-selection/cellSelectionFeature.types.d.ts +9 -0
- package/dist/features/cell-selection/cellSelectionFeature.utils.d.ts +20 -1
- package/dist/features/cell-selection/cellSelectionFeature.utils.js +139 -11
- package/dist/features/cell-selection/cellSelectionGeometry.js +32 -1
- package/dist/features/cell-spanning/cellSpanningFeature.d.ts +13 -0
- package/dist/features/cell-spanning/cellSpanningFeature.js +47 -0
- package/dist/features/cell-spanning/cellSpanningFeature.types.d.ts +150 -0
- package/dist/features/cell-spanning/cellSpanningFeature.utils.d.ts +74 -0
- package/dist/features/cell-spanning/cellSpanningFeature.utils.js +262 -0
- package/dist/features/column-faceting/columnFacetingFeature.utils.d.ts +1 -1
- package/dist/features/column-faceting/createFacetedRowModel.d.ts +1 -1
- package/dist/features/column-filtering/columnFilteringFeature.utils.d.ts +1 -1
- package/dist/features/column-filtering/createFilteredRowModel.d.ts +1 -1
- package/dist/features/column-grouping/columnGroupingFeature.utils.d.ts +2 -2
- package/dist/features/column-grouping/createGroupedRowModel.d.ts +1 -1
- package/dist/features/column-ordering/columnOrderingFeature.utils.d.ts +1 -1
- package/dist/features/column-pinning/columnPinningFeature.utils.d.ts +2 -2
- package/dist/features/column-resizing/columnResizingFeature.utils.d.ts +1 -1
- package/dist/features/column-sizing/columnSizingFeature.utils.d.ts +2 -2
- package/dist/features/column-visibility/columnVisibilityFeature.utils.d.ts +1 -1
- package/dist/features/global-filtering/globalFilteringFeature.utils.d.ts +1 -1
- package/dist/features/row-aggregation/rowAggregationFeature.types.d.ts +1 -1
- package/dist/features/row-expanding/createExpandedRowModel.d.ts +1 -1
- package/dist/features/row-expanding/rowExpandingFeature.utils.d.ts +1 -1
- package/dist/features/row-pagination/createPaginatedRowModel.d.ts +1 -1
- package/dist/features/row-pinning/rowPinningFeature.utils.d.ts +1 -1
- package/dist/features/row-selection/rowSelectionFeature.utils.d.ts +1 -1
- package/dist/features/row-sorting/createSortedRowModel.d.ts +1 -1
- package/dist/features/row-sorting/rowSortingFeature.utils.d.ts +1 -1
- package/dist/features/stockFeatures.d.ts +2 -0
- package/dist/features/stockFeatures.js +2 -0
- package/dist/index.d.ts +24 -22
- package/dist/index.js +2 -1
- package/dist/static-functions.d.ts +3 -2
- package/dist/static-functions.js +3 -2
- package/dist/types/Cell.d.ts +3 -1
- package/dist/types/Column.d.ts +7 -7
- package/dist/types/ColumnDef.d.ts +8 -6
- package/dist/types/Header.d.ts +1 -1
- package/dist/types/Row.d.ts +4 -4
- package/dist/types/RowModel.d.ts +4 -4
- package/dist/types/Table.d.ts +15 -13
- package/dist/types/TableFeatures.d.ts +4 -4
- package/dist/types/TableOptions.d.ts +16 -14
- package/dist/types/TableState.d.ts +8 -8
- package/dist/worker/createWorkerRowModel.d.ts +1 -1
- package/dist/worker/rebuildRowModel.d.ts +1 -1
- package/package.json +1 -1
- package/skills/aggregation/SKILL.md +1 -1
- package/skills/api-not-found/SKILL.md +1 -1
- package/skills/cell-selection/SKILL.md +1 -1
- package/skills/cell-spanning/SKILL.md +162 -0
- package/skills/client-vs-server/SKILL.md +1 -1
- package/skills/column-faceting/SKILL.md +1 -1
- package/skills/column-filtering/SKILL.md +1 -1
- package/skills/column-ordering/SKILL.md +1 -1
- package/skills/column-pinning/SKILL.md +1 -1
- package/skills/column-resizing/SKILL.md +1 -1
- package/skills/column-sizing/SKILL.md +1 -1
- package/skills/column-visibility/SKILL.md +1 -1
- package/skills/core/SKILL.md +1 -1
- package/skills/custom-features/SKILL.md +1 -1
- package/skills/expanding/SKILL.md +1 -1
- package/skills/global-filtering/SKILL.md +1 -1
- package/skills/grouping/SKILL.md +1 -1
- package/skills/migrate-v8-to-v9/SKILL.md +1 -1
- package/skills/pagination/SKILL.md +1 -1
- package/skills/row-pinning/SKILL.md +1 -1
- package/skills/row-selection/SKILL.md +1 -1
- package/skills/sorting/SKILL.md +1 -1
- package/skills/table-features/SKILL.md +1 -1
- package/skills/typescript/SKILL.md +1 -1
|
@@ -1,24 +1,25 @@
|
|
|
1
1
|
import { RowData, UnionToIntersection } from "./type-utils.js";
|
|
2
2
|
import { CoreFeatures } from "../core/coreFeatures.js";
|
|
3
3
|
import { TableOptions_CellSelection } from "../features/cell-selection/cellSelectionFeature.types.js";
|
|
4
|
-
import { TableOptions_ColumnResizing } from "../features/column-resizing/columnResizingFeature.types.js";
|
|
5
|
-
import { TableOptions_ColumnSizing } from "../features/column-sizing/columnSizingFeature.types.js";
|
|
6
|
-
import { TableOptions_ColumnPinning } from "../features/column-pinning/columnPinningFeature.types.js";
|
|
7
|
-
import { TableOptions_ColumnOrdering } from "../features/column-ordering/columnOrderingFeature.types.js";
|
|
8
|
-
import { TableOptions_RowPinning } from "../features/row-pinning/rowPinningFeature.types.js";
|
|
9
|
-
import { TableOptions_GlobalFiltering } from "../features/global-filtering/globalFilteringFeature.types.js";
|
|
10
|
-
import { TableOptions_RowExpanding } from "../features/row-expanding/rowExpandingFeature.types.js";
|
|
11
|
-
import { TableOptions_RowPagination } from "../features/row-pagination/rowPaginationFeature.types.js";
|
|
12
|
-
import { TableOptions_RowSelection } from "../features/row-selection/rowSelectionFeature.types.js";
|
|
13
4
|
import { TableOptions_RowSorting } from "../features/row-sorting/rowSortingFeature.types.js";
|
|
14
5
|
import { TableOptions_Cell } from "../core/cells/coreCellsFeature.types.js";
|
|
6
|
+
import { TableOptions_ColumnPinning } from "../features/column-pinning/columnPinningFeature.types.js";
|
|
7
|
+
import { TableOptions_ColumnSizing } from "../features/column-sizing/columnSizingFeature.types.js";
|
|
8
|
+
import { TableOptions_ColumnResizing } from "../features/column-resizing/columnResizingFeature.types.js";
|
|
9
|
+
import { TableOptions_ColumnGrouping } from "../features/column-grouping/columnGroupingFeature.types.js";
|
|
10
|
+
import { TableOptions_GlobalFiltering } from "../features/global-filtering/globalFilteringFeature.types.js";
|
|
15
11
|
import { TableOptions_RowAggregation } from "../features/row-aggregation/rowAggregationFeature.types.js";
|
|
12
|
+
import { TableOptions_ColumnOrdering } from "../features/column-ordering/columnOrderingFeature.types.js";
|
|
16
13
|
import { TableOptions_Columns } from "../core/columns/coreColumnsFeature.types.js";
|
|
17
|
-
import { TableOptions_Rows } from "../core/rows/coreRowsFeature.types.js";
|
|
18
|
-
import { TableOptions_Table } from "../core/table/coreTablesFeature.types.js";
|
|
19
14
|
import { TableOptions_ColumnVisibility } from "../features/column-visibility/columnVisibilityFeature.types.js";
|
|
15
|
+
import { TableOptions_RowExpanding } from "../features/row-expanding/rowExpandingFeature.types.js";
|
|
16
|
+
import { TableOptions_RowPinning } from "../features/row-pinning/rowPinningFeature.types.js";
|
|
17
|
+
import { TableOptions_RowSelection } from "../features/row-selection/rowSelectionFeature.types.js";
|
|
18
|
+
import { TableOptions_Rows } from "../core/rows/coreRowsFeature.types.js";
|
|
20
19
|
import { TableOptions_ColumnFiltering } from "../features/column-filtering/columnFilteringFeature.types.js";
|
|
21
|
-
import {
|
|
20
|
+
import { TableOptions_RowPagination } from "../features/row-pagination/rowPaginationFeature.types.js";
|
|
21
|
+
import { TableOptions_Table } from "../core/table/coreTablesFeature.types.js";
|
|
22
|
+
import { TableOptions_CellSpanning } from "../features/cell-spanning/cellSpanningFeature.types.js";
|
|
22
23
|
import { ExtractFeatureMapTypes, NonFeatureKeys, TableFeatures } from "./TableFeatures.js";
|
|
23
24
|
//#region src/types/TableOptions.d.ts
|
|
24
25
|
/**
|
|
@@ -38,6 +39,7 @@ type DebugOptions<TFeatures extends TableFeatures> = {
|
|
|
38
39
|
} & DebugKeysFor<CoreFeatures & TFeatures>;
|
|
39
40
|
interface TableOptions_FeatureMap<in out TFeatures extends TableFeatures, in out TData extends RowData> {
|
|
40
41
|
cellSelectionFeature: TableOptions_CellSelection<TFeatures, TData>;
|
|
42
|
+
cellSpanningFeature: TableOptions_CellSpanning;
|
|
41
43
|
columnFilteringFeature: TableOptions_ColumnFiltering<TFeatures, TData>;
|
|
42
44
|
columnGroupingFeature: TableOptions_ColumnGrouping;
|
|
43
45
|
columnOrderingFeature: TableOptions_ColumnOrdering;
|
|
@@ -53,7 +55,7 @@ interface TableOptions_FeatureMap<in out TFeatures extends TableFeatures, in out
|
|
|
53
55
|
rowSelectionFeature: TableOptions_RowSelection<TFeatures, TData>;
|
|
54
56
|
rowSortingFeature: TableOptions_RowSorting;
|
|
55
57
|
}
|
|
56
|
-
type TableOptions_StockFeatureKeys = 'cellSelectionFeature' | 'columnFilteringFeature' | 'columnGroupingFeature' | 'columnOrderingFeature' | 'columnPinningFeature' | 'columnResizingFeature' | 'columnSizingFeature' | 'columnVisibilityFeature' | 'globalFilteringFeature' | 'rowAggregationFeature' | 'rowExpandingFeature' | 'rowPaginationFeature' | 'rowPinningFeature' | 'rowSelectionFeature' | 'rowSortingFeature';
|
|
58
|
+
type TableOptions_StockFeatureKeys = 'cellSelectionFeature' | 'cellSpanningFeature' | 'columnFilteringFeature' | 'columnGroupingFeature' | 'columnOrderingFeature' | 'columnPinningFeature' | 'columnResizingFeature' | 'columnSizingFeature' | 'columnVisibilityFeature' | 'globalFilteringFeature' | 'rowAggregationFeature' | 'rowExpandingFeature' | 'rowPaginationFeature' | 'rowPinningFeature' | 'rowSelectionFeature' | 'rowSortingFeature';
|
|
57
59
|
/**
|
|
58
60
|
* Plugin entries declaration-merged into `TableOptions_FeatureMap`, i.e. keys
|
|
59
61
|
* beyond the stock set. Resolves to `unknown` (an intersection no-op) when no
|
|
@@ -72,6 +74,6 @@ type TableOptions<TFeatures extends TableFeatures, TData extends RowData> = Tabl
|
|
|
72
74
|
* Internal broad option shape used where feature code may need to read options
|
|
73
75
|
* from features that are not present in the current generic feature set.
|
|
74
76
|
*/
|
|
75
|
-
type TableOptions_All<TFeatures extends TableFeatures, TData extends RowData> = TableOptions_Core<TFeatures, TData> & Partial<TableOptions_RowAggregation & TableOptions_CellSelection<TFeatures, TData> & TableOptions_ColumnFiltering<TFeatures, TData> & TableOptions_ColumnGrouping & TableOptions_ColumnOrdering & TableOptions_ColumnPinning & TableOptions_ColumnResizing & TableOptions_ColumnSizing & TableOptions_ColumnVisibility & TableOptions_GlobalFiltering<TFeatures, TData> & TableOptions_RowExpanding<TFeatures, TData> & TableOptions_RowPagination & TableOptions_RowPinning<TFeatures, TData> & TableOptions_RowSelection<TFeatures, TData> & TableOptions_RowSorting & TableOptions_PluginFeatureMapTypes<TFeatures, TData>>;
|
|
77
|
+
type TableOptions_All<TFeatures extends TableFeatures, TData extends RowData> = TableOptions_Core<TFeatures, TData> & Partial<TableOptions_RowAggregation & TableOptions_CellSelection<TFeatures, TData> & TableOptions_CellSpanning & TableOptions_ColumnFiltering<TFeatures, TData> & TableOptions_ColumnGrouping & TableOptions_ColumnOrdering & TableOptions_ColumnPinning & TableOptions_ColumnResizing & TableOptions_ColumnSizing & TableOptions_ColumnVisibility & TableOptions_GlobalFiltering<TFeatures, TData> & TableOptions_RowExpanding<TFeatures, TData> & TableOptions_RowPagination & TableOptions_RowPinning<TFeatures, TData> & TableOptions_RowSelection<TFeatures, TData> & TableOptions_RowSorting & TableOptions_PluginFeatureMapTypes<TFeatures, TData>>;
|
|
76
78
|
//#endregion
|
|
77
79
|
export { DebugOptions, TableOptions, TableOptions_All, TableOptions_Core, TableOptions_FeatureMap };
|
|
@@ -1,17 +1,17 @@
|
|
|
1
1
|
import { TableState_CellSelection } from "../features/cell-selection/cellSelectionFeature.types.js";
|
|
2
|
-
import {
|
|
3
|
-
import { TableState_ColumnSizing } from "../features/column-sizing/columnSizingFeature.types.js";
|
|
2
|
+
import { TableState_RowSorting } from "../features/row-sorting/rowSortingFeature.types.js";
|
|
4
3
|
import { TableState_ColumnPinning } from "../features/column-pinning/columnPinningFeature.types.js";
|
|
5
|
-
import {
|
|
6
|
-
import {
|
|
4
|
+
import { TableState_ColumnSizing } from "../features/column-sizing/columnSizingFeature.types.js";
|
|
5
|
+
import { TableState_ColumnResizing } from "../features/column-resizing/columnResizingFeature.types.js";
|
|
6
|
+
import { TableState_ColumnGrouping } from "../features/column-grouping/columnGroupingFeature.types.js";
|
|
7
7
|
import { TableState_GlobalFiltering } from "../features/global-filtering/globalFilteringFeature.types.js";
|
|
8
|
+
import { TableState_ColumnOrdering } from "../features/column-ordering/columnOrderingFeature.types.js";
|
|
9
|
+
import { TableState_ColumnVisibility } from "../features/column-visibility/columnVisibilityFeature.types.js";
|
|
8
10
|
import { TableState_RowExpanding } from "../features/row-expanding/rowExpandingFeature.types.js";
|
|
9
|
-
import {
|
|
11
|
+
import { TableState_RowPinning } from "../features/row-pinning/rowPinningFeature.types.js";
|
|
10
12
|
import { TableState_RowSelection } from "../features/row-selection/rowSelectionFeature.types.js";
|
|
11
|
-
import { TableState_RowSorting } from "../features/row-sorting/rowSortingFeature.types.js";
|
|
12
|
-
import { TableState_ColumnVisibility } from "../features/column-visibility/columnVisibilityFeature.types.js";
|
|
13
13
|
import { TableState_ColumnFiltering } from "../features/column-filtering/columnFilteringFeature.types.js";
|
|
14
|
-
import {
|
|
14
|
+
import { TableState_RowPagination } from "../features/row-pagination/rowPaginationFeature.types.js";
|
|
15
15
|
import { ExtractFeatureMapTypes, TableFeatures } from "./TableFeatures.js";
|
|
16
16
|
//#region src/types/TableState.d.ts
|
|
17
17
|
interface TableState_FeatureMap {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { RowData } from "../types/type-utils.js";
|
|
2
2
|
import { TableWorkerStage } from "./tableWorkerProtocol.js";
|
|
3
|
-
import { Table } from "../types/Table.js";
|
|
4
3
|
import { RowModel } from "../core/row-models/coreRowModelsFeature.types.js";
|
|
4
|
+
import { Table } from "../types/Table.js";
|
|
5
5
|
import { TableFeatures } from "../types/TableFeatures.js";
|
|
6
6
|
import { TableWorker } from "./createTableWorker.js";
|
|
7
7
|
//#region src/worker/createWorkerRowModel.d.ts
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { TableWorkerStagePayload } from "./tableWorkerProtocol.js";
|
|
2
|
-
import "../types/Table.js";
|
|
3
2
|
import "../core/row-models/coreRowModelsFeature.types.js";
|
|
3
|
+
import "../types/Table.js";
|
|
4
4
|
import "../types/TableFeatures.js";
|
|
5
5
|
//#region src/worker/rebuildRowModel.d.ts
|
|
6
6
|
/** Payloads that carry data; `unchanged` never reaches the rebuilder. */
|
package/package.json
CHANGED
|
@@ -0,0 +1,162 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: cell-spanning
|
|
3
|
+
description: >
|
|
4
|
+
Merge adjacent body cells with cellSpanningFeature: value-based rowSpan opt-in per column via spanRows, per-row colSpan via spanColumns, and the covered-cell convention where a span of 0 means skip the cell. Load for merged data grids, spans that disappear after sorting or paginating, ragged table rows, or a cell that unexpectedly merges down the whole tbody.
|
|
5
|
+
metadata:
|
|
6
|
+
{
|
|
7
|
+
type: sub-skill,
|
|
8
|
+
library: '@tanstack/table-core',
|
|
9
|
+
library_version: '9.0.0-beta.70',
|
|
10
|
+
}
|
|
11
|
+
requires: ['core', 'table-features']
|
|
12
|
+
sources:
|
|
13
|
+
- 'TanStack/table:docs/framework/react/guide/cell-spanning.md'
|
|
14
|
+
- 'TanStack/table:packages/table-core/src/features/cell-spanning'
|
|
15
|
+
- 'TanStack/table:examples/react/cell-spanning'
|
|
16
|
+
---
|
|
17
|
+
|
|
18
|
+
This skill builds on `core` and `table-features`. Cell spanning is stateless and fully derived: a memoized table-level span index is rebuilt from the rows that are actually rendered, and per-cell reads are O(1) lookups against it. Sorting, filtering, pagination, and row pinning only change adjacency; spans follow automatically and never persist.
|
|
19
|
+
|
|
20
|
+
## Setup
|
|
21
|
+
|
|
22
|
+
<!-- skill-snippet:check -->
|
|
23
|
+
|
|
24
|
+
```ts
|
|
25
|
+
import { cellSpanningFeature, tableFeatures } from '@tanstack/table-core'
|
|
26
|
+
|
|
27
|
+
export const features = tableFeatures({ cellSpanningFeature })
|
|
28
|
+
```
|
|
29
|
+
|
|
30
|
+
## Core Patterns
|
|
31
|
+
|
|
32
|
+
### Opt columns into value-based row spanning
|
|
33
|
+
|
|
34
|
+
```ts
|
|
35
|
+
const columns = [
|
|
36
|
+
{ accessorKey: 'region', spanRows: true },
|
|
37
|
+
{
|
|
38
|
+
accessorKey: 'createdAt',
|
|
39
|
+
spanRows: ({
|
|
40
|
+
anchorValue,
|
|
41
|
+
value,
|
|
42
|
+
}: {
|
|
43
|
+
anchorValue: unknown
|
|
44
|
+
value: unknown
|
|
45
|
+
}) => sameMonth(anchorValue as Date, value as Date),
|
|
46
|
+
},
|
|
47
|
+
]
|
|
48
|
+
```
|
|
49
|
+
|
|
50
|
+
`spanRows: true` merges adjacent rendered rows whose values match under `Object.is`. Nullish values never merge under the default comparison; a predicate can opt in. Predicates are anchored: every candidate row is tested against the run's first row (`anchorRow`/`anchorValue`), which keeps runs transitive.
|
|
51
|
+
|
|
52
|
+
### Declare column spans per row
|
|
53
|
+
|
|
54
|
+
```ts
|
|
55
|
+
const columns = [
|
|
56
|
+
{
|
|
57
|
+
accessorKey: 'label',
|
|
58
|
+
spanColumns: ({ row }: { row: { original: { isSummary?: boolean } } }) =>
|
|
59
|
+
row.original.isSummary ? Infinity : 1,
|
|
60
|
+
},
|
|
61
|
+
]
|
|
62
|
+
```
|
|
63
|
+
|
|
64
|
+
`spanColumns` counts visible columns in render order and clamps to the end of the cell's pinned region, so `Infinity` means "the rest of my region" and a span never crosses a start/center/end pinning boundary. Cells only join a vertical run when their column spans match, so a full-width summary row never merges into the data run above it.
|
|
65
|
+
|
|
66
|
+
### Render with the skip-covered-cells loop
|
|
67
|
+
|
|
68
|
+
```tsx
|
|
69
|
+
{
|
|
70
|
+
row.getVisibleCells().map((cell) => {
|
|
71
|
+
const rowSpan = cell.getRowSpan()
|
|
72
|
+
const colSpan = cell.getColSpan()
|
|
73
|
+
if (rowSpan === 0 || colSpan === 0) return null
|
|
74
|
+
return (
|
|
75
|
+
<td key={cell.id} rowSpan={rowSpan} colSpan={colSpan}>
|
|
76
|
+
{flexRender(cell.column.columnDef.cell, cell.getContext())}
|
|
77
|
+
</td>
|
|
78
|
+
)
|
|
79
|
+
})
|
|
80
|
+
}
|
|
81
|
+
```
|
|
82
|
+
|
|
83
|
+
A span of `0` means the cell is covered; `cell.getIsCovered()` is the same check as one call. This mirrors the `header.rowSpan` convention for uneven header trees.
|
|
84
|
+
|
|
85
|
+
### Disable
|
|
86
|
+
|
|
87
|
+
`enableCellSpanning: false` as a table option disables everything; the same flag on a column def opts a single column out and wins over the table option.
|
|
88
|
+
|
|
89
|
+
## Common Mistakes
|
|
90
|
+
|
|
91
|
+
### [CRITICAL] Rendering rowSpan={0} instead of skipping the cell
|
|
92
|
+
|
|
93
|
+
Wrong:
|
|
94
|
+
|
|
95
|
+
```tsx
|
|
96
|
+
<td rowSpan={cell.getRowSpan()} colSpan={cell.getColSpan()}>
|
|
97
|
+
```
|
|
98
|
+
|
|
99
|
+
Correct:
|
|
100
|
+
|
|
101
|
+
```tsx
|
|
102
|
+
cell.getIsCovered() ? null : (
|
|
103
|
+
<td rowSpan={cell.getRowSpan()} colSpan={cell.getColSpan()}>
|
|
104
|
+
)
|
|
105
|
+
```
|
|
106
|
+
|
|
107
|
+
In HTML, `rowspan="0"` is valid and means "span to the end of the row group", so the wrong version does not render an empty cell. It merges the covered cell down the entire tbody and shifts every later cell out of its column.
|
|
108
|
+
|
|
109
|
+
### [HIGH] Expecting spanning to sort or group the rows
|
|
110
|
+
|
|
111
|
+
Wrong:
|
|
112
|
+
|
|
113
|
+
```ts
|
|
114
|
+
const features = tableFeatures({ cellSpanningFeature })
|
|
115
|
+
// data arrives unsorted; the table renders zero merged cells
|
|
116
|
+
```
|
|
117
|
+
|
|
118
|
+
Correct:
|
|
119
|
+
|
|
120
|
+
```ts
|
|
121
|
+
const features = tableFeatures({
|
|
122
|
+
cellSpanningFeature,
|
|
123
|
+
rowSortingFeature,
|
|
124
|
+
sortedRowModel: createSortedRowModel(),
|
|
125
|
+
sortFns: { alphanumeric: sortFn_alphanumeric },
|
|
126
|
+
})
|
|
127
|
+
// sort by the spanned column, or emit data with equal values adjacent
|
|
128
|
+
```
|
|
129
|
+
|
|
130
|
+
Value-based spanning merges adjacent equal values only. It does not reorder rows, and it is not grouping; register `columnGroupingFeature` when collapsible group rows are what is wanted.
|
|
131
|
+
|
|
132
|
+
### [HIGH] Precomputing spans from the source data
|
|
133
|
+
|
|
134
|
+
Wrong:
|
|
135
|
+
|
|
136
|
+
```ts
|
|
137
|
+
const spans = useMemo(() => computeSpans(data), [data])
|
|
138
|
+
```
|
|
139
|
+
|
|
140
|
+
Correct:
|
|
141
|
+
|
|
142
|
+
```ts
|
|
143
|
+
const rowSpan = cell.getRowSpan()
|
|
144
|
+
```
|
|
145
|
+
|
|
146
|
+
Spans derive from the final row model. A span precomputed from `data` survives sorting, filtering, and page changes, producing ragged rows the moment any of them changes.
|
|
147
|
+
|
|
148
|
+
### [MEDIUM] Assuming a run continues across a page boundary
|
|
149
|
+
|
|
150
|
+
A run is clipped by the paginated row model. The next page opens a fresh cell for the continuing value; nothing carries over, and nothing needs to.
|
|
151
|
+
|
|
152
|
+
### [MEDIUM] Reimplementing merge-aware selection on top of cellSelectionFeature
|
|
153
|
+
|
|
154
|
+
When both features are registered, selection is already merge-aware: ranges expand at derivation time to fully enclose any merge they touch (includes and excludes alike), navigation crosses a merge in one step, and `getSelectedCellCount()` counts a merge once. Do not pre-expand stored selection corners yourself; stored corners stay stable while sorting or paging changes the merges, and pre-expanded corners go stale.
|
|
155
|
+
|
|
156
|
+
### [MEDIUM] Spanning a grouped column
|
|
157
|
+
|
|
158
|
+
`spanRows` is ignored while its column is grouped, and grouped rows never join runs in any column. Grouping already collapses repeated values into group rows; spanning them again would merge twice.
|
|
159
|
+
|
|
160
|
+
## API Discovery
|
|
161
|
+
|
|
162
|
+
Inspect `node_modules/@tanstack/table-core/dist/features/cell-spanning/` for the full API: `cell.getRowSpan()`, `cell.getColSpan()`, `cell.getIsCovered()`, `table.getCellSpanIndex()`, and the `spanRows`/`spanColumns`/`enableCellSpanning` column and table options.
|
package/skills/core/SKILL.md
CHANGED
|
@@ -5,7 +5,7 @@ description: >
|
|
|
5
5
|
metadata:
|
|
6
6
|
type: sub-skill
|
|
7
7
|
library: '@tanstack/table-core'
|
|
8
|
-
library_version: '9.0.0-beta.
|
|
8
|
+
library_version: '9.0.0-beta.70'
|
|
9
9
|
requires: ['core', 'table-features', 'typescript']
|
|
10
10
|
sources:
|
|
11
11
|
- 'TanStack/table:docs/framework/react/guide/custom-features.md'
|
package/skills/grouping/SKILL.md
CHANGED
|
@@ -5,7 +5,7 @@ description: >
|
|
|
5
5
|
metadata:
|
|
6
6
|
type: lifecycle
|
|
7
7
|
library: '@tanstack/table-core'
|
|
8
|
-
library_version: '9.0.0-beta.
|
|
8
|
+
library_version: '9.0.0-beta.70'
|
|
9
9
|
requires: ['core', 'table-features', 'typescript']
|
|
10
10
|
sources:
|
|
11
11
|
- 'TanStack/table:docs/framework/react/guide/migrating.md'
|
package/skills/sorting/SKILL.md
CHANGED