Columns

Column Header Name

Use the headerName property to provide a user-friendly display name for any column. The grid's default header renderer displays this value in the column header.

Other LyteNyte Grid components also use the headerName property when displaying column-related information. For example, the Pill Manager uses headerName values as display labels on each pill.

Header Name Usage

"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[] = [
  { headerName: "Years Alive", id: "age", type: "number" },
  { headerName: "Employment", id: "job" },
  { headerName: "Money In Bank", id: "balance", type: "number" },
  { headerName: "Smartness Level", id: "education" },
  { headerName: "Single Or Not?", id: "marital" },
];
 
export function ColumnHeaderName() {
  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>
  );
}

Updating the Header Name

You can update a column's header name using the grid API method columnUpdate. This method allows you to modify any column property, including the header name.

Header Name Update

"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[] = [
  { headerName: "Years Alive", id: "age", type: "number" },
  { headerName: "Employment", id: "job" },
  { headerName: "Money In Bank", id: "balance", type: "number" },
  { headerName: "Smartness Level", id: "education" },
  { headerName: "Single Or Not?", id: "marital" },
];
 
export function ColumnHeaderNameUpdate() {
  const ds = useClientDataSource({ data: bankDataSmall });
 
  const grid = useLyteNytePro({
    gridId: useId(),
    rowDataSource: ds,
    columns,
 
    columnBase: {
      widthFlex: 1,
    },
  });
 
  const c = grid.state.columns.use();
 
  return (
    <div style={{ height: 500, display: "flex", flexDirection: "column" }}>
      <div>
        <input
          aria-label="update-age"
          style={{ width: 150, boxSizing: "border-box" }}
          value={c[0].headerName ?? ""}
          onChange={(e) => {
            grid.api.columnUpdate(c[0], { headerName: e.target.value ?? "" });
          }}
        />
        <input
          aria-label="update-job"
          style={{ width: 150, boxSizing: "border-box" }}
          value={c[1].headerName ?? ""}
          onChange={(e) => {
            grid.api.columnUpdate(c[1], { headerName: e.target.value ?? "" });
          }}
        />
        <input
          aria-label="update-balance"
          style={{ width: 150, boxSizing: "border-box" }}
          value={c[2].headerName ?? ""}
          onChange={(e) => {
            grid.api.columnUpdate(c[2], { headerName: e.target.value ?? "" });
          }}
        />
        <input
          aria-label="update-education"
          style={{ width: 150, boxSizing: "border-box" }}
          value={c[3].headerName ?? ""}
          onChange={(e) => {
            grid.api.columnUpdate(c[3], { headerName: e.target.value ?? "" });
          }}
        />
        <input
          aria-label="update-marital"
          style={{ width: 150, boxSizing: "border-box" }}
          value={c[4].headerName ?? ""}
          onChange={(e) => {
            grid.api.columnUpdate(c[4], { headerName: e.target.value ?? "" });
          }}
        />
      </div>
 
      <div style={{ flex: "1" }}>
        <LyteNyteGrid grid={grid} />
      </div>
    </div>
  );
}

To update multiple columns at once, use the columnUpdateMany method. For more details on these and other API methods, see the LyteNyte Grid API Reference.

PreviousIntroduction

Next Column Header Renderer