LyteNyte Grid logo for light mode. Links back to the documentation home page.
Github repository for this project. 1771 Technologies home page
Rows

Row Spanning

Cells can span multiple rows in LyteNyte Grid. When a cell spans, it occupies the rows beneath it, and the grid does not render the cells it covers.

The rowSpan property on a column definition controls how many rows a cell spans. It accepts either a number or a function.

  • Provide a number to apply the same span to every row.
  • Provide a function that returns a number to vary the span per row.

Cells always span downward toward the bottom of the viewport. A spanning cell covers cells in subsequent rows, never previous rows.

Uniform Row Spans

When rowSpan is a number, every cell in the column spans the same number of rows. The grid skips rendering any cells covered by the span. The demo below shows the Symbol column spanning two rows. The first row in each span represents the current value, while the second row represents the previous value.

The meaning of a span depends on your use case, but fixed numeric spans are relatively uncommon and should be used with caution.

Uniform Row Spans

Fork code on stack blitzFork code on code sandbox

Define a two-row span directly within the column definition:

const columns = [
  // other columns
  { id: "symbol", rowSpan: 2 },
];

Function Row Spans

Set rowSpan to a function to compute spans dynamically per row. This allows spans based on row data. The demo below groups cryptocurrencies by exchange, with the Exchange column spanning all rows that share the same exchange value.

Function Row Spans

Fork code on stack blitzFork code on code sandbox

The span for each exchange is computed ahead of time. The column then uses a span function to return the correct value, as shown below:

{
  id: "symbol",
  cellRenderer: SymbolCell,
  width: 250,
  name: "Symbol",
  rowSpan: (r) => {
    const exchange = r.row.data?.exchange as string;
    return exchangeCounts[exchange] ?? 1;
  },
}

Row Scan Distance

For performance, LyteNyte Grid does not precompute spans for all rows ahead of time. Instead, it scans backward from the first visible row to determine which cells should span. The grid scans a specific number of rows before the first visible row based on the rowScanDistance property. You can change rowScanDistance to tune span calculation performance. The default scan distance is 50, which is usually sufficient for most use cases.

// Change scan lookback to 100.
<Grid rowScanDistance={100} />

The rowScanDistance value sets the maximum row span that a cell is allowed to have. The value returned by the rowSpan property on the column must not exceed rowScanDistance. If rowSpan exceeds rowScanDistance, LyteNyte Grid cannot guarantee that it will hide the cells covered by the span.

Info

LyteNyte Grid uses a scan-based approach to optimize correctness and performance. Unlike grids that precompute spans, which limit scalability, or render spans inaccurately when scrolling, LyteNyte Grid requires setting a maximum span to maintain accuracy and performance.

Next Steps

  • Row Height: Change row height, support variable-height rows, and configure fill-height rows.
  • Row Pinning: Freeze rows at the top or bottom of the viewport.
  • Row Selection: Select single or multiple rows.