Reducing Data Grid Column Header Height in Kendo UI for Vue

Environment

Product Version	7.0.0
Product	Progress® Kendo UI for Vue Data Grid

Description

I want to reduce the height of column headers in the Kendo UI for Vue Data Grid to match specific design requirements.

This knowledge base article also answers the following questions:

• How to change Kendo UI for Vue Data Grid header height?
• How to apply custom styling to Kendo UI for Vue Data Grid headers?
• How to reduce padding in Kendo UI for Vue Data Grid headers?

Solution

To reduce the column header height in Kendo UI for Vue Data Grid, apply custom CSS targeting the relevant header elements. The header uses the .k-table-th and .k-table-thead 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-table-thead th.k-table-th selector.
3. Adjust the height, padding-top, padding-bottom, and line-height properties to match your design needs.

The described approach can be seen in action here:

Change Theme

Theme

Loading ...