DataGrid - Context menu integration

Menu integration

The <ReactDataGrid /> 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.
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.

Row context menu

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, cellProps, computedProps, computedPropsRef }, where rowProps are the props of the clicked row, cellProps are the props of the clicked cell, computedProps are the computed props of the <ReactDataGrid /> and computedPropsRef is a ref to the latest computedProps object.

Menu can updates its position

The menu can update its position to the nearest menu tool when removing or adding columns. There is a prop, updateMenuPositionOnColumnsChange that enables or disables this functionality.
Top