Column Header Label

The headerLabel property in the Column Definition allows you to specify the text displayed in a column's header. This property can be a static string or a dynamic function that computes the label.

export function HeaderLabelGrid() {
  const grid = useGraphiteGrid({
    initial: {
      columnDefinitions: [
        { id: "company-name", headerLabel: "Company Name", field: 0 },
        { id: "founded", headerLabel: "Founded", field: 1 },
        {
          id: "employee-count",
          headerLabel: ({ column }) => {
            return column.id
              .split("-")
              .map((c) => c[0].toUpperCase() + c.slice(1))
              .join(" ");
          },
          field: 2,
        },
      ],
      // other props
    },
  });
}CopyCopied!

When the headerLabel is a function, it is evaluated each time the column header is rendered, allowing for dynamic updates based on the current state or other parameters. This feature is particularly useful for creating responsive and interactive grid headers.

By leveraging the headerLabel property, you can easily customize the text displayed in column headers. A static string provides a simple way to set the header label, while a function enables dynamic and responsive header labels that can adapt to changes in the grid's state or other factors.