Column Spanning

Use the colSpan property to make cells span multiple columns in LyteNyte Grid. For example, setting colSpan to 2 makes a cell extend across two columns. The grid skips rendering cells covered by the span.

The colSpan property can be a number or a function that returns the number of columns a cell should span.

"use client";

import { Grid, useClientRowDataSource } from "@1771technologies/lytenyte-pro";
import "@1771technologies/lytenyte-pro/grid.css";
import type { Column } from "@1771technologies/lytenyte-pro/types";
import { bankDataSmall } from "@1771technologies/sample-data/bank-data-smaller";
import { useId } from "react";

type BankData = (typeof bankDataSmall)[number];

const columns: Column<BankData>[] = [
  { id: "age", type: "number", colSpan: 2 },
  { id: "job" },
  { id: "balance", type: "number" },
  { id: "education", colSpan: (r) => (r.rowIndex === 4 ? 4 : 1) },
  { id: "marital" },
  { id: "default" },
  { id: "housing" },
  { id: "loan" },
  { id: "contact" },
  { id: "day", type: "number" },
  { id: "month" },
  { id: "duration" },
  { id: "campaign" },
  { id: "pdays" },
  { id: "previous" },
  { id: "poutcome" },
  { id: "y" },
];

export default function ColumnSpanning() {
  const ds = useClientRowDataSource({ data: bankDataSmall });

  const grid = Grid.useLyteNyte({
    gridId: useId(),
    rowDataSource: ds,
    columns,
  });

  const view = grid.view.useValue();

  return (
    <div className="lng-grid" style={{ height: 500 }}>
      <Grid.Root grid={grid}>
        <Grid.Viewport>
          <Grid.Header>
            {view.header.layout.map((row, i) => {
              return (
                <Grid.HeaderRow key={i} headerRowIndex={i}>
                  {row.map((c) => {
                    if (c.kind === "group") return null;

                    return (
                      <Grid.HeaderCell
                        key={c.id}
                        cell={c}
                        className="flex h-full w-full items-center px-2 capitalize"
                      />
                    );
                  })}
                </Grid.HeaderRow>
              );
            })}
          </Grid.Header>
          <Grid.RowsContainer>
            <Grid.RowsCenter>
              {view.rows.center.map((row) => {
                if (row.kind === "full-width") return null;

                return (
                  <Grid.Row row={row} key={row.id}>
                    {row.cells.map((c) => {
                      return (
                        <Grid.Cell
                          key={c.id}
                          cell={c}
                          className="flex h-full w-full items-center px-2 text-sm"
                        />
                      );
                    })}
                  </Grid.Row>
                );
              })}
            </Grid.RowsCenter>
          </Grid.RowsContainer>
        </Grid.Viewport>
      </Grid.Root>
    </div>
  );
}

Column Span Scan Distance

For performance, LyteNyte Grid does not calculate all spans in advance. Instead, it scans back from the first visible column, based on the scroll position. Control this lookback with the colScanDistance property.

colScanDistance must be at least the maximum possible span in your grid. Make sure no span exceeds this value to ensure proper rendering.

LyteNyte Grid uses a scan distance for correctness and performance. Other grids may pre-calculate spans (hurting scalability) or render incorrectly based on scroll position. This approach requires you to specify a max span, but it preserves both performance and accuracy.

In most real-world cases, a scan distance of 100 is more than enough, since it's rare for a column to span more than 100 columns.

Column SpanningCopy Page

Column Spanning

Column Span Scan Distance

On this page

Column Spanning