Columns

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 render header cell content. Use the headerRenderer property on the column specification to set the component.

Header Renderers

Creating a header renderer involves the following steps:

Define a custom React component function that accepts an object of type Grid.T.HeaderParams as its props.
Set the value of the headerRenderer property for each column that should use this renderer.

The demo below shows this in action. Each column has a custom headerRenderer that adds an icon based on the column ID.


18 collapsed lines
1
import "@1771technologies/lytenyte-pro/light-dark.css";
2
import { Grid, useClientDataSource } from "@1771technologies/lytenyte-pro";
3
import type { OrderData } from "@1771technologies/grid-sample-data/orders";
4
import { data } from "@1771technologies/grid-sample-data/orders";
5
import {
6
  AvatarCell,
7
  EmailCell,
8
  HeaderWithIcon,
9
  IdCell,
10
  PaymentMethodCell,
11
  PriceCell,
12
  ProductCell,
13
  PurchaseDateCell,
14
} from "./components.js";
15

16
export interface GridSpec {
17
  readonly data: OrderData;
18
}
19

20
const columns: Grid.Column<GridSpec>[] = [
21
  { id: "id", width: 60, widthMin: 60, cellRenderer: IdCell, name: "ID" },
22
  { id: "product", name: "Product", cellRenderer: ProductCell, width: 200 },
23
  { id: "price", name: "Price", type: "number", cellRenderer: PriceCell, width: 100 },
24
  { id: "customer", name: "Customer", cellRenderer: AvatarCell, width: 180 },
25
  { id: "purchaseDate", cellRenderer: PurchaseDateCell, name: "Purchase Date", width: 140 },
26
  { id: "paymentMethod", cellRenderer: PaymentMethodCell, name: "Payment Method", width: 150 },
27
  { id: "email", name: "Email", cellRenderer: EmailCell, width: 220 },
28
];
29

30
const base: Grid.ColumnBase<GridSpec> = {
31
  headerRenderer: HeaderWithIcon,
32
};
33

34
export default function ColumnDemo() {
35
  const ds = useClientDataSource({ data: data });
36

37
  return (
38
    <div className="ln-grid" style={{ height: 500 }}>
39
      <Grid rowSource={ds} columns={columns} rowHeight={50} columnBase={base} />
40
    </div>
41
  );
42
}

1
import type { ClassValue } from "clsx";
2
import clsx from "clsx";
3
import { twMerge } from "tailwind-merge";
4
import { format } from "date-fns";
5
import type { JSX, ReactNode } from "react";
6
import {
7
  AtSignIcon,
8
  CalendarFoldIcon,
9
  CreditCardIcon,
10
  DollarSignIcon,
11
  HashIcon,
12
  ShoppingBagIcon,
13
  SquareUserIcon,
14
} from "lucide-react";
15
import type { Grid } from "@1771technologies/lytenyte-pro";
16
import type { GridSpec } from "./demo.jsx";
17

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

22
const idToIcon = {
23
  id: HashIcon,
24
  product: ShoppingBagIcon,
25
  price: DollarSignIcon,
26
  customer: SquareUserIcon,
27
  purchaseDate: CalendarFoldIcon,
28
  paymentMethod: CreditCardIcon,
29
  email: AtSignIcon,
30
};
31

32
export function HeaderWithIcon({ column }: Grid.T.HeaderParams<GridSpec>) {
33
  const Icon = idToIcon[column.id as keyof typeof idToIcon];
34

35
  return (
36
    <div className={tw("flex h-full w-full items-center gap-1", column.type === "number" && "justify-end")}>
37
      <div className="flex items-center justify-center">
38
        <Icon className="size-3" />
39
      </div>
40
      <span>{column.name ?? column.id}</span>
41
    </div>
42
  );
43
}
44

45
export function ProductCell({ api, row }: Grid.T.CellRendererParams<GridSpec>) {
46
  if (!api.rowIsLeaf(row) || !row.data) return;
47

48
  const url = row.data?.productThumbnail;
49
  const title = row.data.product;
50
  const desc = row.data.productDescription;
51

52
  return (
53
    <div className="flex h-full w-full items-center gap-2">
54
      <img className="border-ln-border-strong h-7 w-7 rounded-lg border" src={url} alt={title + desc} />
55
      <div className="text-ln-text-dark flex flex-col gap-0.5">
56
        <div className="font-semibold">{title}</div>
57
        <div className="text-ln-text-light text-xs">{desc}</div>
58
      </div>
59
    </div>
60
  );
61
}
62

63
export function AvatarCell({ api, row }: Grid.T.CellRendererParams<GridSpec>) {
64
  if (!api.rowIsLeaf(row) || !row.data) return;
65

66
  const url = row.data?.customerAvatar;
67

68
  const name = row.data.customer;
69

70
  return (
71
    <div className="flex h-full w-full items-center gap-2">
72
      <img className="border-ln-border-strong h-7 w-7 rounded-full border" src={url} alt={name} />
73
      <div className="text-ln-text-dark flex flex-col gap-0.5">
74
        <div>{name}</div>
75
      </div>
76
    </div>
77
  );
78
}
79

80
const formatter = new Intl.NumberFormat("en-Us", {
81
  minimumFractionDigits: 2,
82
  maximumFractionDigits: 2,
83
});
84
export function PriceCell({ api, row }: Grid.T.CellRendererParams<GridSpec>) {
85
  if (!api.rowIsLeaf(row) || !row.data) return;
86

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

90
  return (
91
    <div className="flex h-full w-full items-center justify-end">
92
      <div className="flex items-baseline tabular-nums">
93
        <span className="text-ln-text font-semibold">${dollars}</span>.
94
        <span className="relative text-xs">{cents}</span>
95
      </div>
96
    </div>
97
  );
98
}
99

100
export function PurchaseDateCell({ api, row }: Grid.T.CellRendererParams<GridSpec>) {
101
  if (!api.rowIsLeaf(row) || !row.data) return;
102

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

105
  return <div className="flex h-full w-full items-center">{formattedDate}</div>;
106
}
107
export function IdCell({ api, row }: Grid.T.CellRendererParams<GridSpec>) {
108
  if (!api.rowIsLeaf(row) || !row.data) return;
109

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

113
export function PaymentMethodCell({ api, row }: Grid.T.CellRendererParams<GridSpec>) {
114
  if (!api.rowIsLeaf(row) || !row.data) return;
115

116
  const cardNumber = row.data.cardNumber;
117
  const provider = row.data.paymentMethod;
118

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

123
  return (
124
    <div className="flex h-full w-full items-center gap-2">
125
      <div className="flex w-7 items-center justify-center">{Logo}</div>
126
      <div className="flex items-center gap-px">
127
        <div className="bg-ln-gray-40 size-2 rounded-full"></div>
128
        <div className="bg-ln-gray-40 size-2 rounded-full"></div>
129
        <div className="bg-ln-gray-40 size-2 rounded-full"></div>
130
        <div className="bg-ln-gray-40 size-2 rounded-full"></div>
131
      </div>
132
      <div className="tabular-nums">{cardNumber}</div>
133
    </div>
134
  );
135
}
136

137
export function EmailCell({ api, row }: Grid.T.CellRendererParams<GridSpec>) {
138
  if (!api.rowIsLeaf(row) || !row.data) return;
139

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

143
const VisaLogo = (props: JSX.IntrinsicElements["svg"]) => (
144
  <svg xmlns="http://www.w3.org/2000/svg" width={2500} height={812} viewBox="0.5 0.5 999 323.684" {...props}>
145
    <path
146
      fill="#1434cb"
147
      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"
148
    />
149
  </svg>
150
);
151

152
const MastercardLogo = (props: JSX.IntrinsicElements["svg"]) => (
153
  <svg
154
    xmlns="http://www.w3.org/2000/svg"
155
    width={2500}
156
    height={1524}
157
    viewBox="55.2 38.3 464.5 287.8"
158
    {...props}
159
  >
160
    <path
161
      fill="#f79f1a"
162
      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"
163
    />
164
    <path
165
      fill="#ea001b"
166
      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"
167
    />
168
    <path
169
      fill="#ff5f01"
170
      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"
171
    />
172
  </svg>
173
);

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

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 Renderer

Header Renderers

Header Renderers

Next Steps

On this page