Row Full Width

Create rows that span the entire grid viewport width in LyteNyte Grid, ideal for section headers, summary rows, or special content areas.

LyteNyte Grid lets you create rows that span the grid's entire viewport width. These rows contain a single cell instead of the standard one cell per column.

Create Full Width Rows

Decide which rows should appear full width by setting the rowFullWidthPredicate property in the grid state. Pass a function to this property to determine which rows span the full width.

Because full width rows don't belong to any column, provide a React component through the rowFullWidthRenderer property to render their content.

In the example below, note the use of the Grid.RowFullWidth component to render full width rows. This component is required because full width rows are a special row type.

"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" },
  { id: "job" },
  { id: "balance", type: "number" },
  { id: "education" },
  { 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 RowFullWidth() {
  const ds = useClientRowDataSource({
    data: bankDataSmall,
  });

  const grid = Grid.useLyteNyte({
    gridId: useId(),
    rowDataSource: ds,
    columns,
    rowFullWidthPredicate: (p) =>
      p.grid.api.rowIsLeaf(p.row) ? p.row.data?.marital === "single" : false,
    rowFullWidthRenderer: () => {
      return (
        <div
          className="overflow-hidden text-nowrap bg-gray-500/20 px-10"
          style={{
            width: "100%",
            height: "100%",
            display: "flex",
            alignItems: "center",
          }}
        >
          Person with single marital status. Data is redacted.
        </div>
      );
    },
  });

  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 <Grid.RowFullWidth row={row} key={row.id} />;

                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>
  );
}

Full width rows always span the grid's viewport width and remain visible during horizontal scrolling. Use them for section headers, summary rows, or specialized content areas within your grid.

Row Full WidthCopy Page

Create Full Width Rows

Row Full Width

On this page

Row Full Width