Toolbar Customization in React Grid Component

18 Nov 20181 minute to read

The appearance of the toolbar in the React Data Grid component can be customized using CSS. Here are examples for customizing the toolbar root element and toolbar button element.

Customizing the toolbar root element

The .e-toolbar-items class is used to style the toolbar root element.

.e-grid .e-toolbar-items {
    background-color: #deecf9;
}

Grid toolbar root element

Customizing the toolbar button element

The .e-toolbar .e-btn selector is used to style the toolbar button elements.

.e-grid .e-toolbar .e-btn {
    background-color: #deecf9;
}

Grid toolbar button element