KendoReact Data Grid Styling Overview
The KendoReact Data Grid enables you to style its columns, rows, and cells.
Start Free Trial
Styling the KendoReact Data Grid Columns
To style the columns of the Grid, either:
Setting Custom Cells
Setting a custom cell for the Grid columns allows you to change the appearance of that cell based on the provided value. By using the custom-cell approach, you can include icons, buttons, links, or any other HTML elements in the cell.
Setting Custom Header Cells
Setting a custom headerCell for the column header of the Grid allows you to change the appearance and to include icons, buttons, links, or any other HTML elements in that header.
Setting Class Names
The className property applies additional class to the td element and can be used for styling the background, text color, text alignment, and other styling options of the Grid.
<GridColumn field="ProductName" title="Product Name" className="product-name">product-name {
color: 'white';
background-color: '#888888';
}Styling the KendoReact Data Grid Rows
To style the rows of the Grid, utilize the rowRender function. rowRender allows you to modify the appearance of the rows based on the provided values.
Styling the KendoReact Data Grid Individual Elements
You can individually style the elements of the Grid by using CSS.
The Grid provides multiple elements that can be individually styled. Before you apply the styling options to the desired elements, inspect the element and use selectors of higher priority.
Styling the KendoReact Data Grid Filter Icons
The following example demonstrates how to style the appearance of the filter icon in the Grid.
.k-filtercell-operator > .k-dropdownlist .k-i-filter {
color:"white"
}Styling the KendoReact Data Grid Sort Icons
The following example demonstrates how to style the appearance of the sort ascending-order icon in the Grid.
.k-header .k-sort-icon > .k-i-sort-asc-small {
color:"red"
}Styling the KendoReact Data Grid Page Numbers
The following example demonstrates how to style the appearance of the page numbers in the Grid.
.k-pager-numbers .k-button {
color: "black";
}Applying Conditional Styling
You can use the custom-cell approach of the Grid to change the appearance of the cells on condition and based on the provided value.