Reducing Data Grid Column Header Height in KendoReact

Updated on Oct 31, 2025

Environment

Product Version	12.2.0
Product	Progress® KendoReact Grid

Description

I want to reduce the height of column headers in the KendoReact Data Grid to better fit my design requirements.

This knowledge base article also answers the following questions:

• How to change KendoReact Data Grid header height?
• How to apply custom styling to KendoReact Data Grid headers?
• How to reduce padding in KendoReact Data Grid headers?

Solution

To reduce the column header height in KendoReact Data Grid, apply custom CSS targeting the relevant header elements. The header uses the .k-grid-header and .k-header classes, which can be styled directly.

Follow these steps:

1. Create a CSS file or add styles to your existing stylesheet.
2. Target the grid header elements with the .k-grid-header th.k-header selector.
3. Adjust the height, padding-top, padding-bottom, and line-height properties to match your design needs.

Change Theme

Theme

Loading ...

See Also

• Grid Styling
• Grid Overview