Cell Events

Understanding the various event callbacks for cell interactions in Graphite Grid is crucial for developers. These can be added to the column definitions, and they play a significant role in enhancing web development skills. The available cell events are:

Name
onCellClick
Description
Called when a cell is clicked.
Name
onCellPointerDown
Description
Called when a pointer device is pressed down on the cell (either a "touch down" or "mouse down" event).
Name
onCellPointerUp
Description
Called when a pointer device is released (either a "touch up" or "mouse up" event).
Name
onCellKeyDown
Description
Called when a key-down event is fired.
Name
onCellKeyUp
Description
Called when a key-up event is fired.

Basic Usage

An onCellClick callback is set on the company-name column in the example below. The count is incremented every time a cell in the company-name column is clicked.

Company Name Cell 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,
          onCellClick: () => setCount((prev) => prev + 1),
        },
        { id: "founded", headerLabel: "Founded", field: 1 },
        { id: "employee-count", field: 2 },
      ],
      // other grid properties
    },
  });
 
  return (
    <div>
      <div>Company Name cell has been clicked {count} times</div>
      <div style={{ height: 200 }}>
        <GraphiteGridDom state={grid} />
      </div>
    </div>
  );
}

By applying cell event callbacks, you can bring interactivity and custom behaviors to specific cells in your Graphite Grid. These callbacks have practical applications, such as triggering actions, updating state, or implementing any other desired functionality when users interact with the cells.