Column Menu

The headerMenuRenderer allows you to display a custom popover menu for a column header. Graphite Grid manages the popover and uses the provided component as its content.

The headerMenuTriggerRenderer lets you customize the appearance of the menu trigger button.

In this example:

MenuComponent is the custom menu renderer for company-name and founded columns.
Trigger is a custom trigger renderer for the founded column.

function MenuComponent<T>(params: HeaderParams<T>) {
  return (
    <div className="flex items-center justify-center gap-2 bg-white text-black border p-2 w-[200px]">
      <div>Your Menu Content Here</div>
    </div>
  );
}
 
function Trigger<T>(params: HeaderParams<T>) {
  return (
    <svg width="24" height="24" fill="currentcolor" viewBox="0 0 256 256">
      <path
        d={`M140,128a12,12,0,1,1-12-12A12,12,0,0,1,140,128Zm56-12a12,12,0,1,0,12,
       12A12,12,0,0,0,196,116ZM60,116a12,12,0,1,0,12,12A12,12,0,0,0,60,116Z`}
      ></path>
    </svg>
  );
}
 
export function ColumnMenu() {
  const grid = useGraphiteGrid({
    initial: {
      columnDefinitions: [
        {
          id: "company-name",
          headerLabel: "Company Name",
          field: 0,
          headerMenuRenderer: MenuComponent,
        },
        {
          id: "founded",
          headerLabel: "Founded",
          field: 1,
          headerMenuRenderer: MenuComponent,
          headerMenuTriggerRenderer: Trigger,
        },
        {
          id: "employee-count",
          field: 2,
        },
      ],
      // other grid properties
    },
  });
 
  return (
    <div style={{ height: 200 }}>
      <GraphiteGridDom state={grid} />
    </div>
  );
}

Customize the MenuComponent and Trigger to fit your application's needs.