Reducing Grid Column Header Height in KendoReact

Updated on Aug 14, 2026

Environment

Product Version	12.2.0
Product	Progress® KendoReact Grid

Description

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

This knowledge base article also answers the following questions:

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

Solution

To reduce the column header height in KendoReact 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.

Loading ...

See Also

• Grid Styling
• Grid Overview