Column Menu

The KendoReact TreeList enables you to show a menu with quick actions for its columns.

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.


Basic Usage

To configure the column menu, use the columnMenu option of the columns and pass the corresponding ColumnMenu component base on the column data type.

Example
View Source
Change Theme:

Customizing the Column Menu

The built-in Column Menu components can be customized using their props, which includes show and hide of the sort buttons, and customizing filtering components.

The following example demonstrates how to customize the column menus:

  • Text ColumnMenu
    • change filter operators
    • disable the logic DropDownList
    • change the initial filter, which changes the default values of the filter components
  • Numeric ColumnMenu
    • setting a single filter in the filterContent prop
    • change the initialFilter, which is required since we use a single filter
  • Date ColumnMenu
    • remove sorting
  • Boolean ColumnMenu
    • implement a custom filter editor
Example
View Source
Change Theme:

Adding Custom Items to the Column Menu

The Column Menu items can be changed using the ColumnMenu itemsRender prop. The following example demonstrates how to remove the filtering item, add Lock Column and Toggle Columns items:

Example
View Source
Change Theme: