Angular TreeList Styling Columns

The TreeList 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 TreeList, you can customize these parts:

• Headers
• Footers
• Cells

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.

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.

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.

Suggested Links

• ColumnComponent
• API Reference of the TreeListComponent
• API Index of the TreeList
• Creating Custom Styles with ThemeBuilder