LyteNyte Grid logo for light mode. Links back to the documentation home page.
GuidesAPI ReferenceChangelog
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

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

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:

const columns: Column<DEXPerformanceData>[] = [

  // Other columns

  {

    id: "exchange",

    cellRenderer: ExchangeCell,

    name: "Exchange",

    rowSpan: (r) => {

      const exchange = r.row.data?.exchange as string;

      // Lookup the precomputed span

      return exchangeCounts[exchange] ?? 1;

    },

  },

];

Row Scan Distance

For performance, LyteNyte Grid does not precompute spans for all rows. Instead, it scans backward from the first visible row based on the current scroll position. Control this lookback using the rowScanDistance property:

LyteNyte Grid optimizes performance by not precomputing spans for all rows. Instead, it scans backward from the first visible row according to the current scroll position. Control this lookback using the rowScanDistance property:

const grid = Grid.useLyteNyte({

  rowScanDistance: 100,

});

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

LyteNyte Grid uses a scan-based approach to optimize correctness and performance. Unlike many grids that precompute spans (limiting scalability) or render spans inaccurately when scrolling, it requires you to set a maximum span, ensuring both accuracy and performance are maintained.

In most cases, a scan distance of 100 is sufficient, as spans rarely reach this size.

Next Steps

  • Row Height: Change row height, including variable-height and fill-height rows.
  • Row Pinning: Freeze rows at the top or bottom of the viewport.
  • Row Sorting: Learn how to sort and order rows.
  • Row Selection: Select single or multiple rows.

Row Full Width

Create full width rows in LyteNyte Grid that render a single cell spanning the entire viewport.

Row Dragging

Drag and drop rows within the same LyteNyte Grid, across multiple grids, or into external drop zones.

On this page

Uniform Row SpansFunction Row SpansRow Scan DistanceNext Steps