Merge adjacent table body cells with rowSpan and colSpan in TanStack Table.
npx skills add https://github.com/TanStack/table --skill cell-spanning
Please help me install this Agent Skill. Skill: cell-spanning Source: https://github.com/TanStack/table/tree/main/packages/table-core/skills/cell-spanning Command: npx skills add https://github.com/TanStack/table --skill cell-spanning
Building data grids with merged cells is error-prone: spans break after sorting or pagination, ragged rows appear when spans are precomputed from source data, and rendering rowSpan={0} accidentally merges a cell down the entire tbody. This Skill implements correct, stateless cell merging with TanStack Table's cellSpanningFeature.
spanRows: true or a custom anchored predicate (e.g., merge rows in the same month).spanColumns per row for full-width summary rows, clamped to pinned regions so spans never cross pinning boundaries.getRowSpan() or getColSpan() returns 0, and rely on spans that automatically follow sorting, filtering, pagination, and row pinning.Use the cell-spanning skill to add rowSpan merging on the region column and a full-width summary row to my TanStack Table grid.
High-intent search queries and answers about installing and using this skill.
Register cellSpanningFeature in tableFeatures and set spanRows: true on the column definition to merge adjacent rows with equal values. In the render loop, skip cells where cell.getRowSpan() or cell.getColSpan() returns 0 and pass the span values to the td element.
Set spanColumns on a column definition to return Infinity for summary rows, which spans the rest of the pinned region. Cells only join vertical runs when column spans match, so the summary row never merges into the data run above it.
Spans precomputed from source data go stale because cell spanning derives from the final rendered row model. Use cell.getRowSpan() at render time instead; spans are rebuilt from actually rendered rows and follow sorting, filtering, and pagination automatically.
Rendering rowSpan={0} on a td causes this because HTML rowspan="0" means span to the end of the row group. Return null for covered cells using cell.getIsCovered() instead of rendering the td with a zero span.
Value-based spanning only merges adjacent equal values and does not reorder rows, so sort by the spanned column or emit pre-sorted data. The spanRows option is ignored on grouped columns, and grouped rows never join merge runs.
TanStackBuilds a typed TanStack Table in LitElement using TanStack Lit Table v9's TableController and FlexRender.
TanStackCompose TanStack Table v9 editable cell grids with TanStack Form fields.
Alex1980AlexDecompile 1C Template.xml spreadsheet layouts into an editable JSON DSL.
TanStackGroup TanStack Table rows by column values with aggregation functions.