Column MenuPremium
The KendoReact Data Grid enables you to show a menu with quick actions for its columns.
Start Free Trial
The column menu provides flexible options for high-level customization. For example, the regular sorting and filtering features are represented by individual components which allows you to implement complex scenarios and meet the specific requirements of your project.
The Grid Column Menu supports adaptive rendering. Use the screen resolution configurator or resize the browser to explore how the Column Menu adapts to different resolutions.
Basic Usage
To configure the Column Menu, use the columnMenu property of the Column sub-component.
The following example demonstrates how to use the following built-in components to customize the column menu:
- GridColumnMenuFilter - component for applying filtering to the column
- GridColumnMenuSort - component for applying sorting to the column
- GridColumnMenuGroup - component for applying grouping to the column
Tabbed Column Menu
The KendoReact Data Grid allows you to render a column menu with a tabbed interface.
The below example achieves this implementation by creating a tabbed column menu and wrapping the Grid component with it. In main.jsx, the Grid is wrapped with a ColumnMenuContext.Provider where its value property accepts the following four arguments:
onColumnsChange- handles which columns are displayedonAutoSize- automatically sizes a columncolumnState- accepts a state variable that is initially set to the column array of objectscolumns- the initial array of objects of the column values
Column Chooser
The ColumnMenu provides the GridColumnMenuColumnsChooser component, which provides an easy way to control the visibility of the columns through the column menu.
Checkbox Filter
The GridColumnMenuCheckboxFilter can be set as a sub-component of the ColumnMenu component; this provides an interface for users to filter the column data via a checkbox list. The following example demonstrates setup for this option:
Custom Components
You can integrate custom components in the column menu and pass additional properties to them.
The following example demonstrates how to:
- Render the columns inside the column menu based on an array of the column names and on the column
showproperty. - Hide columns from the column menu and enable the Grid to update the column menu accordingly.
To access all demo files, refer to the tree pane of the file.
Customizing the Filter Component
The filter component of the column menu enables you to customize its user interface (UI) by passing a custom component to the filterUI property.
The following example demonstrates how to customize the UI of the Column Menu filter component. To access all demo files, refer to the tree pane of the file.
Styling the Column Menu Icon
Both the GridColumnMenuFilter and GridColumnMenuSort components expose the active static method which checks if filtering and sorting are applied to a specific field. You can use these methods for applying custom CSS classes to the column menu and mark it as active.
The following example demonstrates how to style the Column Menu icon when sorting and filtering are applied.