Toolbar ToolsPremium
The KendoReact Data Grid provides toolbar tools to enhance user interactions and streamline workflows. These tools allow you to perform actions like sorting, filtering, and managing columns directly from the toolbar.
Start Free Trial
Overview
To configure toolbar tools, wrap them with the GridToolbar component and place it inside the Grid. You can use both custom and built-in tools in the GridToolbar. The following is a list of the KendoReact Grid Toolbar Tools that are available built-in:
GridToolbarSort- component for applying sorting to the Grid.GridToolbarFilter- component for applying filters to the Grid.GridToolbarColumnsChooser- component for controlling the visibility of the columns inside the Grid.GridToolbarCheckboxFilter- component for filtering the Grid records using Checkboxes.
The Grid Toolbar Tools supports adaptive rendering, use the screen resolution configurator or resize the browser to explore how the Toolbar Tools adapts to different resolutions.
Sort
The GridToolbarSort components provides option for both single and multiple sorting. In order the tool to be rendered, you should set sortable to true.
By default, the sorting mode is set to single. The following example demonstrates how you can enable multilpe sorting.
Filter
The GridToolbarFilter component allows you to apply filtering to the Grid. It provides a user-friendly interface for defining filter criteria, enabling users to refine the displayed data based on their needs.
Columns Chooser
The GridToolbarColumnsChooser component provides an easy way to control the visibility of the columns through the toolbar.
Checkbox Filter
The GridToolbarCheckboxFilter component provides a checkbox list to filter the column data directly from the toolbar.
Styling the Toolbar Tools Icon
The toolbar tools expose the icon and svgIcon properties, allowing you to customize the icons displayed in the toolbar tools.
The following example demonstrates how to use these properties to style the toolbar tools.
Custom Toolbar Tools
You can integrate custom components in the toolbar and pass additional properties to them.
The following example demonstrates how to render custom editing tool inside the toolbar.