Top
DataGrid - Context menu integration
DataGrid
The <DataGrid /> supports action menus in column headers. The menu can be used to show/hide columns, to sort ascending/descending, to clear the current column filter, etc. By default, column header menus are enabled, via the showColumnMenuTool.
Here's the full list of functionality that the column menu provides:
  • sort asc/desc
  • show/hide column
  • group/ungroup by column
  • lock/unlock column
  • disable/enable filtering
In addition to the column header menu, if the grid is filterable, every filterable column displays a "settings" icon which shows a filter-related menu, which can be used to change the filtering operator, clear the current column filter or clear of the filters, and enable/disable filtering for the current column.
For using the row context menu, you have to specify renderRowContextMenu. This function prop is called with menuProps as a first param. Either modify those props and set the desired items on the menuProps (and return undefined), or return a <Menu /> component you want to render.
If undefined is returned from the renderRowContextMenu function prop, the default Menu is rendered (beware, it has no items by default).
The second param passed to the renderRowContextMenu function prop is an object with { rowProps, props, grid }, where rowProps are the props of the clicked row, props are the computed props of the <DataGrid /> and grid is a reference to the <DataGrid /> instance.