Rows

Row Height

LyteNyte Grid lets you control row heights to create compact or spacious layouts. Use the rowHeight property to set row height in pixels. You can assign a fixed value or a function that calculates height for each row.

Fixed Row Height

Set rowHeight to a number to give all rows a uniform height.

Row Height Fixed

Change Row Height:

"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 RowHeightFixed() {
  const ds = useClientRowDataSource({ data: bankDataSmall });
 
  const grid = Grid.useLyteNyte({
    gridId: useId(),
    rowDataSource: ds,
    columns,
    rowHeight: 30,
  });
 
  const view = grid.view.useValue();
 
  return (
    <div style={{ display: "flex", flexDirection: "column" }}>
      <div
        style={{ display: "flex", gap: 8, alignItems: "center" }}
        className="py-2"
      >
        <div>Change Row Height: </div>
 
        <button
          className="bg-gray-900 text-white border border-gray-600 rounded px-2"
          onClick={() => grid.state.rowHeight.set(30)}
        >
          Small
        </button>
        <button
          className="bg-gray-900 text-white border border-gray-600 rounded px-2"
          onClick={() => grid.state.rowHeight.set(50)}
        >
          Medium
        </button>
        <button
          className="bg-gray-900 text-white border border-gray-600 rounded px-2"
          onClick={() => grid.state.rowHeight.set(80)}
        >
          Large
        </button>
      </div>
      <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 null;
 
                  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>
    </div>
  );
}

Update row height dynamically after initialization by changing the rowHeight state property:

grid.state.rowHeight.set(40); // Set all rows to 40px

Variable Row Height

Pass a function to rowHeight to define different heights per row. LyteNyte Grid calls this function for each row to determine its height, then calculates the total scrollable height for the grid.

Row Height Variable

"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 RowHeightVariable() {
  const ds = useClientRowDataSource({ data: bankDataSmall });
 
  const grid = Grid.useLyteNyte({
    gridId: useId(),
    rowDataSource: ds,
    columns,
    rowHeight: (i) => [30, 50, 80, 120][i % 4],
  });
 
  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 null;
 
                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>
  );
}

When updating a variable row height after initialization, set rowHeight to a function that returns your height function. This avoids overwriting the setter with your function directly.

const myRowHeightFunction = (i: number) => {
  /* implementation */
};
 
// ✅ Correct
grid.state.rowHeight.set(() => myRowHeightFunction);
 
// ❌ Incorrect
grid.state.rowHeight.set(myRowHeightFunction);

Fill Row Height

Use the fill row height syntax "fill:<n>" to make rows expand and fill available space, where n is the minimum row height in pixels. LyteNyte Grid assigns each row its minimum height, calculates remaining space, and distributes it evenly among all rows. This is useful for grids with few visible rows or in paginated views.

Row Height Fill

Change Row Height:

"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 RowHeightFill() {
  const ds = useClientRowDataSource({ data: bankDataSmall.slice(0, 10) });
 
  const grid = Grid.useLyteNyte({
    gridId: useId(),
    rowDataSource: ds,
    columns,
    rowHeight: "fill:30",
  });
 
  const view = grid.view.useValue();
 
  return (
    <div style={{ height: 500, display: "flex", flexDirection: "column" }}>
      <div
        style={{ display: "flex", gap: 8, alignItems: "center" }}
        className="py-2"
      >
        <div>Change Row Height: </div>
 
        <button
          className="bg-gray-900 text-white border border-gray-600 rounded px-2"
          onClick={() => grid.state.rowHeight.set(30)}
        >
          Small
        </button>
 
        <button
          className="bg-gray-900 text-white border border-gray-600 rounded px-2"
          onClick={() => grid.state.rowHeight.set(50)}
        >
          Medium
        </button>
        <button
          className="bg-gray-900 text-white border border-gray-600 rounded px-2"
          onClick={() => grid.state.rowHeight.set(80)}
        >
          Large
        </button>
      </div>
      <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 null;
 
                  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>
    </div>
  );
}

PreviousTree Row Data Source

Next Row Pinning