Customize column styles in Angular TreeGrid component

26 Aug 20253 minutes to read

You can customize the appearance of the header and content of a specific column in the TreeGrid component by using the customAttributes property.

To customize a TreeGrid column, follow these steps:

Step 1:

Define a CSS class with the desired custom styles to override the default styles for row cells and header cells.

.e-treegrid .e-rowcell.customcss{
    background-color: #ecedee;
    font-family: 'Bell MT';
    color: 'red';
    font-size: '20px';
}

.e-treegrid .e-headercell.customcss{
    background-color: #2382c3;
    color: white;
    font-family: 'Bell MT';
    font-size: '20px';
}

Step 2:

Apply the custom CSS class to a specific column using the customAttributes property.

<e-column field='TaskName' headerText='Task Name' width='170' [customAttributes]='customAttributes'></e-column>

app.component.ts

import { NgModule,ViewChild } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { TreeGridModule } from '@syncfusion/ej2-angular-treegrid'
import { PageService, SortService, FilterService } from '@syncfusion/ej2-angular-treegrid'
import {ButtonModule} from '@syncfusion/ej2-angular-buttons'



import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import { projectData } from './datasource';
import { TreeGridComponent } from '@syncfusion/ej2-angular-treegrid';

@Component({
imports: [
        
        TreeGridModule,
        ButtonModule
    ],

providers: [PageService,
                SortService,
                FilterService],
standalone: true,
    selector: 'app-container',
    styleUrls: ['./app.component.css'],
    encapsulation: ViewEncapsulation.None,
    template: `<ejs-treegrid [dataSource]='data' idMapping='TaskID' parentIdMapping='parentID' [treeColumnIndex]='1' [height]='317'>
        <e-columns>
            <e-column field='TaskID' headerText='Task ID' width='70' textAlign='Right'></e-column>
            <e-column field='TaskName' headerText='Task Name' width='100' [customAttributes]='customAttributes'></e-column>
            <e-column field='StartDate' headerText='Start Date' width='90' format="yMd" textAlign='Right'></e-column>
            <e-column field='EndDate' headerText='End Date' width='90' format="yMd" textAlign='Right'></e-column>
            <e-column field='Duration' headerText='Duration' width='90' textAlign='Right'></e-column>
        </e-columns>
    </ejs-treegrid>`,
})
export class AppComponent implements OnInit {

    public data: Object[] = [];
    public customAttributes?: Object;

    ngOnInit(): void {
        this.data = projectData;
        this.customAttributes = {class: 'customcss'};
    }
}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

For additional details, refer to the Angular TreeGrid feature tour page. You can also explore the Angular TreeGrid example to learn more about presenting and manipulating data.