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.

The TreeList Package is part of KendoReact, a professional UI components library designed and built from the ground up for React to make developers more productive. To try it out, sign up for a free 30-day trial.

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
Edit In Stackblitz  
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
Edit In Stackblitz  
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
Edit In Stackblitz  
Change Theme: