KendoReact Data Grid Styling Overview

The KendoReact Data Grid enables you to style its columns, rows, and cells.

Use React Styling for FreeYou can use the free components from the React Styling package in production—no sign-up or license required. Styling is part of KendoReact, an enterprise-grade UI library with 120+ free and premium components. To test-drive premium components, start a 30-day trial.

Styling the KendoReact Data Grid Columns

To style the columns of the Grid, either:

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.

jsx

    <GridColumn field="ProductName" title="Product Name" className="product-name">

css

product-name {
    color: 'white';
    background-color: '#888888';
}

Styling the KendoReact Data Grid Rows

To style the rows of the Grid, utilize the rows function which allows you to modify the appearance of the rows based on the provided values:

Implement custom rows in KendoReact Grid

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 Page Numbers

The following example demonstrates how to style the appearance of the page numbers in the Grid.

css

    .k-pager-numbers .k-button {
        color: "black";
    }

Applying Conditional Styling

You can use the custom cells.data functionality of the Grid to change the appearance of the cells on condition and based on the provided value.

Change Theme

Theme

Loading ...