<!-- https://svgrid.com/docs/help/rows/row-spanning/ - SvGrid documentation as markdown. Index of every page: https://svgrid.com/llms.txt -->

# Row spanning

"Row spanning" lets one cell's content cover **multiple rows**, the way a
merged cell does in a spreadsheet.

## Status

Row spanning is **not yet built in**. The grid renders a strict 1-cell-per-
row-column grid; there is no `rowSpan` field on `ColumnDef` or
`CellContext`.

## Workarounds

### 1. Group-by

If the spanning intent is "show 'Engineering' once for every engineer", use
grouping ([Row data](https://svgrid.com/docs/help/rows/row-data/), [demos/07](https://svgrid.com/demos/07-grouping-aggregation/)) - the grid renders a single group row
in place of repeated values.

### 2. Cell renderer that suppresses repeats

If you simply want the *display* of repeated values to be blanked, render
the value only when it differs from the row above:

```ts
const columns: GridColumns<Person> = [
  {
    field: 'department',
    header: 'Department',
    cell: (ctx) => {
      const data = ctx.table.getRowModel().rows
      const prev = data[ctx.row.index - 1]?.getCellValueByColumnId('department')
      return prev === ctx.getValue() ? '' : ctx.getValue() as string
    },
  },
]
```

This *looks* like a span but does not actually merge cells - keyboard
navigation still moves through every row.

## Tracked at

[Missing features](https://svgrid.com/docs/help/missing-features/) → "row spanning / merged cells".

## See also

- [Column spanning](https://svgrid.com/docs/help/columns/column-spanning/)
- [Grouping](https://svgrid.com/docs/help/rows/row-data/)

---

SvGrid is the Svelte 5 data grid (`npm install @svgrid/grid`, MIT). This page: https://svgrid.com/docs/help/rows/row-spanning/ . All docs: https://svgrid.com/llms.txt