Columns

Header Height

LyteNyte Grid provides flexible header height customization. The header can consist of three possible components:

Column group rows
Column header row
Floating header row

Column group rows appear only when columns are organized into groups. The floating header row displays only when the floatingRowEnabled property is set to true on LyteNyte Grid.

Column Header Height

You can set the column header height using the columnHeaderHeight property. This property accepts a number value representing the height in pixels.

Column Header Height

Change Header Height:

"use client";
 
import {
  LyteNyteGrid,
  useLyteNytePro,
  useClientDataSource,
} from "@1771technologies/lytenyte-pro";
import "@1771technologies/lytenyte-pro/grid.css";
import { ColumnProReact } from "@1771technologies/lytenyte-pro/types";
import { bankDataSmall } from "@1771technologies/sample-data/bank-data-smaller";
import { useId } from "react";
 
const columns: ColumnProReact[] = [
  { id: "age", type: "number" },
  { id: "job" },
  { id: "balance", type: "number" },
  { id: "education" },
  { id: "marital" },
];
 
export function ColumnHeaderHeight() {
  const ds = useClientDataSource({ data: bankDataSmall });
 
  const grid = useLyteNytePro({
    gridId: useId(),
    rowDataSource: ds,
    columns,
 
    columnHeaderHeight: 60,
 
    columnBase: {
      widthFlex: 1,
    },
  });
 
  return (
    <div style={{ height: 500, display: "flex", flexDirection: "column" }}>
      <div style={{ display: "flex", gap: 8, alignItems: "center" }}>
        <div>Change Header Height: </div>
 
        <button onClick={() => grid.state.columnHeaderHeight.set(30)}>
          Small
        </button>
        <button onClick={() => grid.state.columnHeaderHeight.set(50)}>
          Medium
        </button>
        <button onClick={() => grid.state.columnHeaderHeight.set(80)}>
          Large
        </button>
      </div>
      <div style={{ flex: "1" }}>
        <LyteNyteGrid grid={grid} />
      </div>
    </div>
  );
}

The column header height can be adjusted dynamically after initial setup:

// Set the header height to 24px
grid.state.columnHeaderHeight.set(24);

Column Headers Span Column Group Rows

When using column groups, some columns may not belong to any group or may belong to groups with fewer levels than the deepest group. In these cases, the column header will span multiple column group rows, increasing the cell height proportionally to the number of rows spanned.

Column Header Group Span

"use client";
 
import {
  LyteNyteGrid,
  useLyteNytePro,
  useClientDataSource,
} from "@1771technologies/lytenyte-pro";
import "@1771technologies/lytenyte-pro/grid.css";
import { ColumnProReact } from "@1771technologies/lytenyte-pro/types";
import { bankDataSmall } from "@1771technologies/sample-data/bank-data-smaller";
import { useId } from "react";
 
const columns: ColumnProReact[] = [
  { id: "age", type: "number", groupPath: ["One Group"] },
  { id: "job", groupPath: ["One Group", "Second Level"] },
  { id: "balance", type: "number" },
  { id: "education" },
  { id: "marital" },
];
 
export function ColumnHeaderHeightSpans() {
  const ds = useClientDataSource({ data: bankDataSmall });
 
  const grid = useLyteNytePro({
    gridId: useId(),
    rowDataSource: ds,
    columns,
    columnBase: {
      widthFlex: 1,
    },
  });
 
  return (
    <div style={{ height: 500, display: "flex", flexDirection: "column" }}>
      <div style={{ flex: "1" }}>
        <LyteNyteGrid grid={grid} />
      </div>
    </div>
  );
}

Column Group Header Height

The columnGroupHeaderHeight property determines the height of each column group header row. Column groups can form a hierarchical structure with multiple rows.

Column Group Header Height

Change Header Group Height:

"use client";
 
import {
  LyteNyteGrid,
  useLyteNytePro,
  useClientDataSource,
} from "@1771technologies/lytenyte-pro";
import "@1771technologies/lytenyte-pro/grid.css";
import { ColumnProReact } from "@1771technologies/lytenyte-pro/types";
import { bankDataSmall } from "@1771technologies/sample-data/bank-data-smaller";
import { useId } from "react";
 
const columns: ColumnProReact[] = [
  { id: "age", type: "number", groupPath: ["One Group"] },
  { id: "job", groupPath: ["One Group", "Second Level"] },
  { id: "balance", type: "number" },
  { id: "education" },
  { id: "marital" },
];
 
export function ColumnHeaderGroupHeight() {
  const ds = useClientDataSource({ data: bankDataSmall });
 
  const grid = useLyteNytePro({
    gridId: useId(),
    rowDataSource: ds,
    columns,
    columnGroupHeaderHeight: 20,
    columnBase: {
      widthFlex: 1,
    },
  });
 
  return (
    <div style={{ height: 500, display: "flex", flexDirection: "column" }}>
      <div style={{ display: "flex", gap: 8, alignItems: "center" }}>
        <div>Change Header Group Height: </div>
 
        <button onClick={() => grid.state.columnGroupHeaderHeight.set(20)}>
          Small
        </button>
        <button onClick={() => grid.state.columnGroupHeaderHeight.set(50)}>
          Medium
        </button>
        <button onClick={() => grid.state.columnGroupHeaderHeight.set(80)}>
          Large
        </button>
      </div>
      <div style={{ flex: "1" }}>
        <LyteNyteGrid grid={grid} />
      </div>
    </div>
  );
}

You can modify the column group header height by updating the columnGroupHeaderHeight state:

// Set the column group header height to 30px
grid.state.columnGroupHeaderHeight.set(30);

Floating Row Height

The floating row appears as an additional header row below the column header. It's useful for displaying supplementary information or interactive components such as floating filters. Use the floatingRowHeight property to set its height.

Floating Row Height

Change Floating Row Height:

"use client";
 
import {
  LyteNyteGrid,
  useLyteNytePro,
  useClientDataSource,
} from "@1771technologies/lytenyte-pro";
import "@1771technologies/lytenyte-pro/grid.css";
import { ColumnProReact } from "@1771technologies/lytenyte-pro/types";
import { bankDataSmall } from "@1771technologies/sample-data/bank-data-smaller";
import { useId } from "react";
 
const columns: ColumnProReact[] = [
  { id: "age", type: "number" },
  { id: "job" },
  { id: "balance", type: "number" },
  { id: "education" },
  { id: "marital" },
];
 
export function ColumnHeaderFloatingRowHeight() {
  const ds = useClientDataSource({ data: bankDataSmall });
 
  const grid = useLyteNytePro({
    gridId: useId(),
    rowDataSource: ds,
    columns,
    floatingRowEnabled: true,
    floatingRowHeight: 20,
 
    columnBase: {
      widthFlex: 1,
    },
  });
 
  return (
    <div style={{ height: 500, display: "flex", flexDirection: "column" }}>
      <div style={{ display: "flex", gap: 8, alignItems: "center" }}>
        <div>Change Floating Row Height: </div>
 
        <button onClick={() => grid.state.floatingRowHeight.set(20)}>
          Small
        </button>
        <button onClick={() => grid.state.floatingRowHeight.set(50)}>
          Medium
        </button>
        <button onClick={() => grid.state.floatingRowHeight.set(80)}>
          Large
        </button>
      </div>
      <div style={{ flex: "1" }}>
        <LyteNyteGrid grid={grid} />
      </div>
    </div>
  );
}

The floating row height can be adjusted dynamically:

// Set the floating row height to 24px
grid.state.floatingRowHeight.set(24);

PreviousColumn Groups

Next Column Autosizing