Event Listeners

Graphite Grid has a rich event system that allows your code to respond to different grid events, such as column resizing or row pivot changes.

Adding an Event Listener

Adding an event listener is best done via a useEffect hook. The pattern is always the same: within the body of the useEffect, call api.addEventListener and provide a callback for the event:

export function AddEventListener() {
  const state = useGraphiteGrid({
    initial: {
      // grid props
    },
  });
 
  const [scrollX, setScrollX] = useState(0);
  const [scrollY, setScrollY] = useState(0);
 
  useEffect(() => {
    const remove = state.api.addEventListener("onScroll", ({ scrollX, scrollY }) => {
      setScrollX(scrollX);
      setScrollY(scrollY);
    });
 
    return () => remove();
  }, [state.api]);
 
  return <>{/* Grid component with state */}</>;
}CopyCopied!

Event Listeners Directly on the Grid Component

The natural way to add event listeners in React is to add a callback as a prop to a component. Graphite Grid supports this approach as well. Internally, the grid will manage the event lifecycle and ensure events are cleaned up when the grid unmounts.

export function OnAddEventListener() {
  const state = useGraphiteGrid({
    initial: {
      // grid props
    },
  });
 
  const [scrollX, setScrollX] = useState(0);
  const [scrollY, setScrollY] = useState(0);
 
  // Container not included for brevity
  return (
    <GraphiteGridDom
      state={state}
      onScroll={({ scrollX, scrollY }) => {
        setScrollX(scrollX);
        setScrollY(scrollY);
      }}
    />
  );
}CopyCopied!

To learn which events are available in Graphite Grid and what their parameters are, please consult the event API reference.