1771 Technologies Logo

Components (BETA)

Context Menu

Graphite Grid empowers developers to display a context menu with the contextMenuRenderer property on the grid state. This property readily accepts a React component, allowing developers to fully customize the context menu. It dynamically receives the context target, the element of the Grid that was clicked, enhancing the user experience.

The context menu in Graphite Grid can display any content, but users generally expect an actual context menu with interactive elements. Graphite Grid provides three completely unstyled components to use for creating context menus:

  • CmRoot: the root component of a context menu.
  • CmItem: an individual context menu item.
  • CmParent: a component that can be used to group CmItem into another expansion menu.

The example below shows a context menu in action using these components.

function ContextMenuComponent<T>(params: ContextMenuRendererParams<T>) {
  return (
    <CmRoot containerClass="..." parentClass="..." itemClass="...">
      <CmItem label="Alert the user" onClick={() => alert("You clicked me")} />
      <CmItem label="Toggle marker column" onClick={() => params.api.toggleMarkerColumn()}></CmItem>
      <CmParent label="Autosize">
        <CmItem
          label="With Header"
          onClick={() => params.api.autosizeColumns({ includeHeader: true })}
        />
        <CmItem label="Without Header" onClick={() => params.api.autosizeColumns()} />
      </CmParent>
    </CmRoot>
  );
}
 
export function ContextMenuDemo() {
  const grid = useGraphiteGrid({
    initial: {
      contextMenuRenderer: ContextMenuComponent,
      // other props
    },
  });
 
  return (
    <div style={{ height: 400 }}>
      <GraphiteGridDom state={grid} />
    </div>
  );
}

Each of the individual context menu components provided by Graphite Grid has additional properties that can be used to customize their look and feel. See the individual API references for more information:

Next
AutoComplete