Column Header Renderer

Every column may define a unique header renderer to determine the content that should be displayed in the header cell.

A header renderer is a custom React component that LyteNyte Grid uses to create the header element. There are two methods to create a header renderer in LyteNyte Grid. Both methods utilize the headerRenderer property on the column specification:

Providing a function that returns a ReactNode to the headerRenderer property.
Providing a string that represents a key lookup into a set of registered header renderer components.

This guide will cover both approaches and offer guidance on when to choose one over the other.

Header Function Renderers

Creating a function header renderer is as simple as:

Defining a custom React component function that accepts an object of type HeaderCellRendererParams as props.
Setting the value of the headerRenderer property on a column that should use this renderer.

The demo below demonstrates this in action. Every column has a custom headerRenderer which will add an icon based on the column ID.

Function Header Renderers

"use client";

import { Grid, useClientRowDataSource } from "@1771technologies/lytenyte-pro";
import "@1771technologies/lytenyte-pro/grid.css";
import type { Column } from "@1771technologies/lytenyte-pro/types";
import { useId } from "react";
import type { OrderData } from "@1771technologies/grid-sample-data/orders";
import { data } from "@1771technologies/grid-sample-data/orders";
import {
  AvatarCell,
  EmailCell,
  HeaderWithIcon,
  IdCell,
  PaymentMethodCell,
  PriceCell,
  ProductCell,
  PurchaseDateCell,
  tw,
} from "./components";

const columns: Column<OrderData>[] = [
  { id: "id", width: 60, widthMin: 60, cellRenderer: IdCell, name: "ID" },
  { id: "product", cellRenderer: ProductCell, width: 200 },
  { id: "price", type: "number", cellRenderer: PriceCell, width: 100 },
  { id: "customer", cellRenderer: AvatarCell, width: 180 },
  { id: "purchaseDate", cellRenderer: PurchaseDateCell, name: "Purchase Date", width: 140 },
  { id: "paymentMethod", cellRenderer: PaymentMethodCell, name: "Payment Method", width: 150 },
  { id: "email", cellRenderer: EmailCell, width: 220 },
];

export default function ColumnBase() {
  const ds = useClientRowDataSource({ data: data });

  const grid = Grid.useLyteNyte({
    gridId: useId(),
    rowDataSource: ds,
    columns,
    rowHeight: 50,
    columnBase: {
      headerRenderer: HeaderWithIcon,
    },
  });

  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={tw(
                          "flex h-full w-full items-center px-3 text-sm text-nowrap capitalize",
                          c.column.type === "number" && "justify-end",
                        )}
                      />
                    );
                  })}
                </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="flex h-full w-full items-center px-3 text-sm"
                        />
                      );
                    })}
                  </Grid.Row>
                );
              })}
            </Grid.RowsCenter>
          </Grid.RowsContainer>
        </Grid.Viewport>
      </Grid.Root>
    </div>
  );
}

import type {
  CellRendererParams,
  HeaderCellRendererParams,
} from "@1771technologies/lytenyte-pro/types";
import type { ClassValue } from "clsx";
import clsx from "clsx";
import { twMerge } from "tailwind-merge";
import { format } from "date-fns";
import type { JSX, ReactNode } from "react";
import type { OrderData } from "@1771technologies/grid-sample-data/orders";
import {
  AtSignIcon,
  CalendarFoldIcon,
  CreditCardIcon,
  DollarSignIcon,
  HashIcon,
  ShoppingBagIcon,
  SquareUserIcon,
} from "lucide-react";

export function tw(...c: ClassValue[]) {
  return twMerge(clsx(...c));
}

const idToIcon = {
  id: HashIcon,
  product: ShoppingBagIcon,
  price: DollarSignIcon,
  customer: SquareUserIcon,
  purchaseDate: CalendarFoldIcon,
  paymentMethod: CreditCardIcon,
  email: AtSignIcon,
};

export function HeaderWithIcon({ column }: HeaderCellRendererParams<OrderData>) {
  const Icon = idToIcon[column.id as keyof typeof idToIcon];

  return (
    <div
      className={tw(
        "flex h-full w-full items-center gap-1",
        column.type === "number" && "justify-end",
      )}
    >
      <div className="flex items-center justify-center">
        <Icon className="size-3" />
      </div>
      <span>{column.name ?? column.id}</span>
    </div>
  );
}

export function ProductCell({ grid: { api }, row }: CellRendererParams<OrderData>) {
  if (!api.rowIsLeaf(row) || !row.data) return;

  const url = row.data?.productThumbnail;
  const title = row.data.product;
  const desc = row.data.productDescription;

  return (
    <div className="flex h-full w-full items-center gap-2">
      <img className="border-ln-gray-50 h-7 w-7 rounded-lg border" src={url} alt={title + desc} />
      <div className="text-ln-gray-90 flex flex-col gap-0.5">
        <div className="font-semibold">{title}</div>
        <div className="text-ln-gray-70 text-xs">{desc}</div>
      </div>
    </div>
  );
}

export function AvatarCell({ grid: { api }, row }: CellRendererParams<OrderData>) {
  if (!api.rowIsLeaf(row) || !row.data) return;

  const url = row.data?.customerAvatar;

  const name = row.data.customer;

  return (
    <div className="flex h-full w-full items-center gap-2">
      <img className="border-ln-gray-50 h-7 w-7 rounded-full border" src={url} alt={name} />
      <div className="text-ln-gray-90 flex flex-col gap-0.5">
        <div>{name}</div>
      </div>
    </div>
  );
}

const formatter = new Intl.NumberFormat("en-Us", {
  minimumFractionDigits: 2,
  maximumFractionDigits: 2,
});
export function PriceCell({ grid: { api }, row }: CellRendererParams<OrderData>) {
  if (!api.rowIsLeaf(row) || !row.data) return;

  const price = formatter.format(row.data.price);
  const [dollars, cents] = price.split(".");

  return (
    <div className="flex h-full w-full items-center justify-end">
      <div className="flex items-baseline tabular-nums">
        <span className="text-ln-gray-80 font-semibold">${dollars}</span>.
        <span className="relative text-xs">{cents}</span>
      </div>
    </div>
  );
}

export function PurchaseDateCell({ grid: { api }, row }: CellRendererParams<OrderData>) {
  if (!api.rowIsLeaf(row) || !row.data) return;

  const formattedDate = format(row.data.purchaseDate, "dd MMM, yyyy");

  return <div className="flex h-full w-full items-center">{formattedDate}</div>;
}
export function IdCell({ grid: { api }, row }: CellRendererParams<OrderData>) {
  if (!api.rowIsLeaf(row) || !row.data) return;

  return <div className="text-xs tabular-nums">{row.data.id}</div>;
}

export function PaymentMethodCell({ grid: { api }, row }: CellRendererParams<OrderData>) {
  if (!api.rowIsLeaf(row) || !row.data) return;

  const cardNumber = row.data.cardNumber;
  const provider = row.data.paymentMethod;

  let Logo: ReactNode = null;
  if (provider === "Visa") Logo = <VisaLogo className="w-6" />;
  if (provider === "Mastercard") Logo = <MastercardLogo className="w-6" />;

  return (
    <div className="flex h-full w-full items-center gap-2">
      <div className="flex w-7 items-center justify-center">{Logo}</div>
      <div className="flex items-center">
        <div className="bg-ln-gray-40 size-2 rounded-full"></div>
        <div className="bg-ln-gray-40 size-2 rounded-full"></div>
        <div className="bg-ln-gray-40 size-2 rounded-full"></div>
        <div className="bg-ln-gray-40 size-2 rounded-full"></div>
      </div>
      <div className="tabular-nums">{cardNumber}</div>
    </div>
  );
}

export function EmailCell({ grid: { api }, row }: CellRendererParams<OrderData>) {
  if (!api.rowIsLeaf(row) || !row.data) return;

  return <div className="text-ln-primary-50 flex h-full w-full items-center">{row.data.email}</div>;
}

const VisaLogo = (props: JSX.IntrinsicElements["svg"]) => (
  <svg
    xmlns="http://www.w3.org/2000/svg"
    width={2500}
    height={812}
    viewBox="0.5 0.5 999 323.684"
    {...props}
  >
    <path
      fill="#1434cb"
      d="M651.185.5c-70.933 0-134.322 36.766-134.322 104.694 0 77.9 112.423 83.28 112.423 122.415 0 16.478-18.884 31.229-51.137 31.229-45.773 0-79.984-20.611-79.984-20.611l-14.638 68.547s39.41 17.41 91.734 17.41c77.552 0 138.576-38.572 138.576-107.66 0-82.316-112.89-87.537-112.89-123.86 0-12.91 15.501-27.053 47.662-27.053 36.286 0 65.892 14.99 65.892 14.99l14.326-66.204S696.614.5 651.185.5zM2.218 5.497.5 15.49s29.842 5.461 56.719 16.356c34.606 12.492 37.072 19.765 42.9 42.353l63.51 244.832h85.138L379.927 5.497h-84.942L210.707 218.67l-34.39-180.696c-3.154-20.68-19.13-32.477-38.685-32.477H2.218zm411.865 0L347.449 319.03h80.999l66.4-313.534h-80.765zm451.759 0c-19.532 0-29.88 10.457-37.474 28.73L709.699 319.03h84.942l16.434-47.468h103.483l9.994 47.468H999.5L934.115 5.497h-68.273zm11.047 84.707 25.178 117.653h-67.454z"
    />
  </svg>
);

const MastercardLogo = (props: JSX.IntrinsicElements["svg"]) => (
  <svg
    xmlns="http://www.w3.org/2000/svg"
    width={2500}
    height={1524}
    viewBox="55.2 38.3 464.5 287.8"
    {...props}
  >
    <path
      fill="#f79f1a"
      d="M519.7 182.2c0 79.5-64.3 143.9-143.6 143.9s-143.6-64.4-143.6-143.9S296.7 38.3 376 38.3s143.7 64.4 143.7 143.9z"
    />
    <path
      fill="#ea001b"
      d="M342.4 182.2c0 79.5-64.3 143.9-143.6 143.9S55.2 261.7 55.2 182.2 119.5 38.3 198.8 38.3s143.6 64.4 143.6 143.9z"
    />
    <path
      fill="#ff5f01"
      d="M287.4 68.9c-33.5 26.3-55 67.3-55 113.3s21.5 87 55 113.3c33.5-26.3 55-67.3 55-113.3s-21.5-86.9-55-113.3z"
    />
  </svg>
);

The header renderer in the demo is a normal React component. It gets rendered within the same React tree as the rest of your React application. This means the renderer can access React context and use any React hooks within the header renderer.

Registered Header Renderers

LyteNyte Grid has a header renderer registry for each grid instance. The headerCellRenderers property in the grid state is used to register a specific render for a given key. Columns in the grid can then reference the render registered with that key. While using registered header renderers involves a bit more boilerplate, this approach offers two main advantages:

The column specifications remain serializable. Since the column specification does not have a function, it may be serialized to JSON safely.
Renderers can be registered in advance and the switched without creating new functions for different renderers.

In the demo below, each column will use a registered header renderer with the key header-with-icon. The result is the same as the function renderers but the approach is different.

Registered Header Renderers

"use client";

import { Grid, useClientRowDataSource } from "@1771technologies/lytenyte-pro";
import "@1771technologies/lytenyte-pro/grid.css";
import type { Column } from "@1771technologies/lytenyte-pro/types";
import { useId } from "react";
import type { OrderData } from "@1771technologies/grid-sample-data/orders";
import { data } from "@1771technologies/grid-sample-data/orders";
import {
  AvatarCell,
  EmailCell,
  HeaderWithIcon,
  IdCell,
  PaymentMethodCell,
  PriceCell,
  ProductCell,
  PurchaseDateCell,
  tw,
} from "./components";

const columns: Column<OrderData>[] = [
  { id: "id", width: 60, widthMin: 60, cellRenderer: IdCell, name: "ID" },
  { id: "product", cellRenderer: ProductCell, width: 200 },
  { id: "price", type: "number", cellRenderer: PriceCell, width: 100 },
  { id: "customer", cellRenderer: AvatarCell, width: 180 },
  { id: "purchaseDate", cellRenderer: PurchaseDateCell, name: "Purchase Date", width: 140 },
  { id: "paymentMethod", cellRenderer: PaymentMethodCell, name: "Payment Method", width: 150 },
  { id: "email", cellRenderer: EmailCell, width: 220 },
];

export default function ColumnBase() {
  const ds = useClientRowDataSource({ data: data });

  const grid = Grid.useLyteNyte({
    gridId: useId(),
    rowDataSource: ds,
    columns,
    rowHeight: 50,
    headerCellRenderers: {
      "header-with-icon": HeaderWithIcon,
    },
    columnBase: {
      headerRenderer: "header-with-icon",
    },
  });

  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={tw(
                          "flex h-full w-full items-center px-3 text-sm text-nowrap capitalize",
                          c.column.type === "number" && "justify-end",
                        )}
                      />
                    );
                  })}
                </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="flex h-full w-full items-center px-3 text-sm"
                        />
                      );
                    })}
                  </Grid.Row>
                );
              })}
            </Grid.RowsCenter>
          </Grid.RowsContainer>
        </Grid.Viewport>
      </Grid.Root>
    </div>
  );
}

import type {
  CellRendererParams,
  HeaderCellRendererParams,
} from "@1771technologies/lytenyte-pro/types";
import type { ClassValue } from "clsx";
import clsx from "clsx";
import { twMerge } from "tailwind-merge";
import { format } from "date-fns";
import type { JSX, ReactNode } from "react";
import type { OrderData } from "@1771technologies/grid-sample-data/orders";
import {
  AtSignIcon,
  CalendarFoldIcon,
  CreditCardIcon,
  DollarSignIcon,
  HashIcon,
  ShoppingBagIcon,
  SquareUserIcon,
} from "lucide-react";

export function tw(...c: ClassValue[]) {
  return twMerge(clsx(...c));
}

const idToIcon = {
  id: HashIcon,
  product: ShoppingBagIcon,
  price: DollarSignIcon,
  customer: SquareUserIcon,
  purchaseDate: CalendarFoldIcon,
  paymentMethod: CreditCardIcon,
  email: AtSignIcon,
};

export function HeaderWithIcon({ column }: HeaderCellRendererParams<OrderData>) {
  const Icon = idToIcon[column.id as keyof typeof idToIcon];

  return (
    <div
      className={tw(
        "flex h-full w-full items-center gap-1",
        column.type === "number" && "justify-end",
      )}
    >
      <div className="flex items-center justify-center">
        <Icon className="size-3" />
      </div>
      <span>{column.name ?? column.id}</span>
    </div>
  );
}

export function ProductCell({ grid: { api }, row }: CellRendererParams<OrderData>) {
  if (!api.rowIsLeaf(row) || !row.data) return;

  const url = row.data?.productThumbnail;
  const title = row.data.product;
  const desc = row.data.productDescription;

  return (
    <div className="flex h-full w-full items-center gap-2">
      <img className="border-ln-gray-50 h-7 w-7 rounded-lg border" src={url} alt={title + desc} />
      <div className="text-ln-gray-90 flex flex-col gap-0.5">
        <div className="font-semibold">{title}</div>
        <div className="text-ln-gray-70 text-xs">{desc}</div>
      </div>
    </div>
  );
}

export function AvatarCell({ grid: { api }, row }: CellRendererParams<OrderData>) {
  if (!api.rowIsLeaf(row) || !row.data) return;

  const url = row.data?.customerAvatar;

  const name = row.data.customer;

  return (
    <div className="flex h-full w-full items-center gap-2">
      <img className="border-ln-gray-50 h-7 w-7 rounded-full border" src={url} alt={name} />
      <div className="text-ln-gray-90 flex flex-col gap-0.5">
        <div>{name}</div>
      </div>
    </div>
  );
}

const formatter = new Intl.NumberFormat("en-Us", {
  minimumFractionDigits: 2,
  maximumFractionDigits: 2,
});
export function PriceCell({ grid: { api }, row }: CellRendererParams<OrderData>) {
  if (!api.rowIsLeaf(row) || !row.data) return;

  const price = formatter.format(row.data.price);
  const [dollars, cents] = price.split(".");

  return (
    <div className="flex h-full w-full items-center justify-end">
      <div className="flex items-baseline tabular-nums">
        <span className="text-ln-gray-80 font-semibold">${dollars}</span>.
        <span className="relative text-xs">{cents}</span>
      </div>
    </div>
  );
}

export function PurchaseDateCell({ grid: { api }, row }: CellRendererParams<OrderData>) {
  if (!api.rowIsLeaf(row) || !row.data) return;

  const formattedDate = format(row.data.purchaseDate, "dd MMM, yyyy");

  return <div className="flex h-full w-full items-center">{formattedDate}</div>;
}
export function IdCell({ grid: { api }, row }: CellRendererParams<OrderData>) {
  if (!api.rowIsLeaf(row) || !row.data) return;

  return <div className="text-xs tabular-nums">{row.data.id}</div>;
}

export function PaymentMethodCell({ grid: { api }, row }: CellRendererParams<OrderData>) {
  if (!api.rowIsLeaf(row) || !row.data) return;

  const cardNumber = row.data.cardNumber;
  const provider = row.data.paymentMethod;

  let Logo: ReactNode = null;
  if (provider === "Visa") Logo = <VisaLogo className="w-6" />;
  if (provider === "Mastercard") Logo = <MastercardLogo className="w-6" />;

  return (
    <div className="flex h-full w-full items-center gap-2">
      <div className="flex w-7 items-center justify-center">{Logo}</div>
      <div className="flex items-center">
        <div className="bg-ln-gray-40 size-2 rounded-full"></div>
        <div className="bg-ln-gray-40 size-2 rounded-full"></div>
        <div className="bg-ln-gray-40 size-2 rounded-full"></div>
        <div className="bg-ln-gray-40 size-2 rounded-full"></div>
      </div>
      <div className="tabular-nums">{cardNumber}</div>
    </div>
  );
}

export function EmailCell({ grid: { api }, row }: CellRendererParams<OrderData>) {
  if (!api.rowIsLeaf(row) || !row.data) return;

  return <div className="text-ln-primary-50 flex h-full w-full items-center">{row.data.email}</div>;
}

const VisaLogo = (props: JSX.IntrinsicElements["svg"]) => (
  <svg
    xmlns="http://www.w3.org/2000/svg"
    width={2500}
    height={812}
    viewBox="0.5 0.5 999 323.684"
    {...props}
  >
    <path
      fill="#1434cb"
      d="M651.185.5c-70.933 0-134.322 36.766-134.322 104.694 0 77.9 112.423 83.28 112.423 122.415 0 16.478-18.884 31.229-51.137 31.229-45.773 0-79.984-20.611-79.984-20.611l-14.638 68.547s39.41 17.41 91.734 17.41c77.552 0 138.576-38.572 138.576-107.66 0-82.316-112.89-87.537-112.89-123.86 0-12.91 15.501-27.053 47.662-27.053 36.286 0 65.892 14.99 65.892 14.99l14.326-66.204S696.614.5 651.185.5zM2.218 5.497.5 15.49s29.842 5.461 56.719 16.356c34.606 12.492 37.072 19.765 42.9 42.353l63.51 244.832h85.138L379.927 5.497h-84.942L210.707 218.67l-34.39-180.696c-3.154-20.68-19.13-32.477-38.685-32.477H2.218zm411.865 0L347.449 319.03h80.999l66.4-313.534h-80.765zm451.759 0c-19.532 0-29.88 10.457-37.474 28.73L709.699 319.03h84.942l16.434-47.468h103.483l9.994 47.468H999.5L934.115 5.497h-68.273zm11.047 84.707 25.178 117.653h-67.454z"
    />
  </svg>
);

const MastercardLogo = (props: JSX.IntrinsicElements["svg"]) => (
  <svg
    xmlns="http://www.w3.org/2000/svg"
    width={2500}
    height={1524}
    viewBox="55.2 38.3 464.5 287.8"
    {...props}
  >
    <path
      fill="#f79f1a"
      d="M519.7 182.2c0 79.5-64.3 143.9-143.6 143.9s-143.6-64.4-143.6-143.9S296.7 38.3 376 38.3s143.7 64.4 143.7 143.9z"
    />
    <path
      fill="#ea001b"
      d="M342.4 182.2c0 79.5-64.3 143.9-143.6 143.9S55.2 261.7 55.2 182.2 119.5 38.3 198.8 38.3s143.6 64.4 143.6 143.9z"
    />
    <path
      fill="#ff5f01"
      d="M287.4 68.9c-33.5 26.3-55 67.3-55 113.3s21.5 87 55 113.3c33.5-26.3 55-67.3 55-113.3s-21.5-86.9-55-113.3z"
    />
  </svg>
);

Using registered renders is straightforward. Define your header component, register it in the headerCellRenderers property, and then reference the renderer by the registered key. The demo code that demonstrates this is shown below.

const grid = Grid.useLyteNyte({
  // Other props
  headerCellRenderers: {
    "header-with-icon": HeaderWithIcon,
  },
  columnBase: {
    headerRenderer: "header-with-icon",
  },
});

Registered Or Function Header Renderers

Providing a direct header renderer function or registering the function then referencing it by key are both able to achieve the same result. The question then becomes which approach to choose. Either will work for any use case, but it is recommended to use the function approach when:

The use case is simple and does not require updates to columns.
Header renderers are created and set on columns dynamically, i.e. at runtime.

For other cases, it's better to register a header renderer in advance. This is especially true when:

Columns are defined on the server and fetched before displaying the grid.
There are a lot of columns in the grid that share similar renderers.
The columns provided to LyteNyte Grid need to be serializable.

Next Steps

Column Resizing: Change column widths programmatically or via user interaction.
Column ID & Name: Define user-friendly column names and ensure unique IDs.
Column Moving: Reorder columns programmatically or through drag-and-drop.
Column Field: Control how a column retrieves its value for each cell.

Column Header RendererCopy Page

Header Function Renderers

Function Header Renderers

Registered Header Renderers

Registered Header Renderers

Registered Or Function Header Renderers

Next Steps

On this page