Rows

Row Full Width

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.

Row Full Width

"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 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="bg-gray-500/20 px-10 text-nowrap overflow-hidden"
          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 w-full h-full capitalize px-2 items-center"
                      />
                    );
                  })}
                </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="text-sm flex items-center px-2 h-full w-full"
                        />
                      );
                    })}
                  </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.

PreviousRow Pagination

Next Row Dragging