Column Header Events

In addition to the normal events fired by Graphite Grid, the column definitions support adding various event callbacks for header interactions. Below are the possible header events:

Name
onHeaderClick
Description
Called when a header cell is clicked.
Name
onHeaderPointerDown
Description
Called when a pointer device is pressed down on the header cell (either a "touch down" or "mouse down" event).
Name
onHeaderPointerUp
Description
Called when a pointer device is released (either a "touch up" or "mouse up" event).
Name
onHeaderPointerMove
Description
Called when a pointer device moves within the header cell.
Name
onHeaderPointerCancel
Description
Called when a pointer action is canceled.
Name
onHeaderKeyDown
Description
Called when a key-down event is fired.
Name
onHeaderKeyUp
Description
Called when a key-up event is fired.

Basic Usage

In the example below, an onHeaderClick callback is set on the company-name column. The count is incremented every time the company-name column is clicked.

Company Name has been clicked 0 times

export function ColumnHeaderEvents() {
  const [count, setCount] = useState(0);
 
  const grid = useGraphiteGrid({
    initial: {
      columnDefinitions: [
        {
          id: "company-name",
          headerLabel: "Company Name",
          field: 0,
          onHeaderClick: () => setCount((prev) => prev + 1),
        },
        { id: "founded", headerLabel: "Founded", field: 1 },
        { id: "employee-count", field: 2 },
      ],
      // other grid properties
    },
  });
 
  return (
    <div>
      <div>Company Name has been clicked {count} times</div>
      <div style={{ height: 200 }}>
        <GraphiteGridDom state={grid} />
      </div>
    </div>
  );
}

By utilizing header event callbacks, you can add interactivity and custom behaviors to column headers in your Graphite Grid. These callbacks can be used to trigger actions, update state, or perform any other desired functionality when users interact with the column headers.