Cell spanning

Prop enableCellSpanning — engine behaviour, default false.

Guide

When to use it

Merge cells that share a value — a spanning header down a category column, or a wide cell across columns — like merged cells in a spreadsheet.

How it works

Supports both colSpan and rowSpan. Drive it with getCellSpan, or set meta.rowSpan: 'group' to span contiguous equal values in a column. Covered cells are skipped in render.

Gotchas

• Row virtualization yields to spanning (rowSpan needs contiguous real rows), so spanned grids render un-windowed.
• rowSpan groups collapse automatically when a sort / filter breaks the contiguity.

Live example

Example source

import React from 'react'
import { BstTableMui } from '@bloomskill/table-mui'
import type { BstTableColumn } from '@bloomskill/table-engine'
import '@bloomskill/table-engine/styles.css'
type Row = { id: string; region: string; rep: string; quarter: string; deals: number }
const data: Row[] = [
  { id: 'a', region: 'North', rep: 'Ada', quarter: 'Q1', deals: 12 },
  { id: 'b', region: 'North', rep: 'Ada', quarter: 'Q2', deals: 9 },
  { id: 'c', region: 'North', rep: 'Bo',  quarter: 'Q1', deals: 7 },
  { id: 'd', region: 'South', rep: 'Cy',  quarter: 'Q1', deals: 15 },
  { id: 'e', region: 'South', rep: 'Cy',  quarter: 'Q2', deals: 4 },
]
const columns: BstTableColumn<Row>[] = [
  { id: 'region', accessorKey: 'region', header: 'Region', meta: { type: 'text', rowSpan: 'group' } },
  { id: 'rep', accessorKey: 'rep', header: 'Rep', meta: { type: 'text', rowSpan: 'group' } },
  { id: 'quarter', accessorKey: 'quarter', header: 'Quarter', meta: { type: 'text' } },
  { id: 'deals', accessorKey: 'deals', header: 'Deals', meta: { type: 'number' } },
]
export default function App() {
  return (
    <BstTableMui data={data} columns={columns} getRowId={(r) => r.id}
      enableCellSpanning showToolbar={false} pagination={false} />
  )
}

Loading live example…

Overview

Layer	enable* (engine, resolved in useBstTable)
Type	boolean
Default	false
Maps to	custom render feature — colSpan and rowSpan; covered cells skipped (Plan.md §2.7a). v9 does ship cellSpanningFeature (9.1.2, in stockFeatures) — we deliberately keep ours: it is fused with the virtualization bypass (virtualizationBypassReason) and the meta.rowSpan:'group' contiguity rules. Do not re-plan this from "v9 lacks it"
Status	✅ done
Since	v0.12.0
Settings sheet	Display

Cell spanning — merge body cells across columns and/or rows. Opt-in. Default false. Declare spans via meta.rowSpan: 'group' (auto-merge equal values in a column) and/or the getCellSpan callback below.

Enable it

<BstTableMui
  data={rows}
  columns={columns}
  enableCellSpanning
/>

Swap BstTableMui for BstTableShadcn (and the CSS import) for the shadcn skin — same props.

Options

Option	Notes
getCellSpan	Related prop for this feature.
getCellSpan or meta.rowSpan	spanning is opt-in per cell; without either nothing merges

Spec coverage

Spec codes (A1, C2, X8, …) are Bst-Table's internal requirement IDs from the capability matrix; P0–P2 mark the delivery phase. They are traceability tags, not part of the public API.

• A5 · Inline charts / cell spanning — ✅ built. v0.12.0 spanning (enableCellSpanning, col+row) · charts = M1