Angular Data Grid Styling Columns

Updated on Feb 5, 2026

The Angular Grid enables you to customize the appearance of the different column parts and change their default layout.

To apply custom styling to the columns of the Grid, you can customize these parts:

Headers

Apply custom CSS classes and styles to column headers using headerClass and headerStyle properties.

Footers

Customize column footer appearance with footerClass and footerStyle properties.

Cells

Style individual column cells using class and style properties for custom visual presentation.

Filter Row Cells

Customize filter row cell appearance with filterClass and filterStyle properties.

Customizing Column Header

You can add a custom CSS class or style to a column header by using the following ColumnComponent options:

• headerClass—Specifies the class to be added to the header cell.
• headerStyle—Specifies the styles to be added to the header cell.

Loading ...

Version 5.0.0 of the Grid introduced some breaking changes in the column header rendering of the sortable Grid. The main changes are:

• The whole cell content is wrapped inside a <span> element with a k-cell-inner class;
• The title text is wrapped inside a <span> element with a k-column-title class;
• The whole cell content relies on CSS flexbox for positioning.

Due to these breaking changes, some scenarios require slightly different CSS rules for sortable and non-sortable Grid. For example, right align of header text:

css

    /* Sortable Grid */
    .k-cell-inner > .k-link {
        justify-content: flex-end;
    }

    /* Non-Sortable Grid */
    .k-grid th {
        justify-content: right;
    }

Customizing Column Footer

You can set custom styles or add CSS classes to a column footer by using the following ColumnComponent options:

• footerClass—Specifies the class to be added to the footer cell.
• footerStyle—Specifies the styles to be added to the footer cell.

The following example demonstrates how to customize the footer appearance by using the footerClass and footerStyle properties.

Loading ...

Customizing Column Cells

You can add a custom CSS class or style to column cells by using the following ColumnComponent options:

• class—Specifies the class to be added to the cell.
• style—Specifies the styles to be added to the cell.

Setting the class and style properties of the ColumnGroupComponent will not have any effect. Instead, set the class and style properties of the respective ColumnComponent nested inside the ColumnGroupComponent.

The following example demonstrates how to customize the column cells by using the class and style properties.

Loading ...

Customizing Filter Row Cells

You can add a custom CSS class or style to filter row cells by using the following ColumnComponent options:

• filterClass—Specifies the class to be added to the filter row cell.
• filterStyle—Specifies the styles to be added to the filter row cell.

The following example demonstrates how to customize the column cells by using the filterClass and filterStyle properties.

Loading ...

Suggested Links

• ColumnComponent
• API Reference of the GridComponent
• API Index of the Grid
• Creating Custom Styles with ThemeBuilder