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.
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.
Basic Usage
To configure toolbar tools, such as GridToolbarSort and GridToolbarFilter, wrap them with the GridToolbar component and place it inside the Grid.
The following example demonstrates how to use these toolbar tools in the Data Grid:
- Filter - component applying filters to the column
- Sort - component for applying sorting the column
Column 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.