Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Igx tree grid & grid column header modifications

Hi team,

Our project has requirements due to which there is a need to modify column headers in IGX tree grid and flat grid. Which are:-

1. Height decrease: We need the height of the header of columns decreased, currently its taking a lot of space. We need a solution which is universal as we have multiple grids in our application and some has tree grid with and without  column groups/parent child columns and different column schemas.

2. Conditional Styling: We need to style the column headers (background colour, font colour) conditionally, currently there is a way to change theses styles by applying our own theme but its globally applied on all column headers and we need to add conditions based on which some styles will be applied and some not on the headers.

Please let us know with the solutions for these queries.

Thank you.

  • 1260
    Offline posted


    I have been looking into your questions and prepared a small sample that demonstrates how your requirements could be achieved.

    Regarding the first question, I believe that the best suggestion is to set the grid displayDensity to 'compact'. More about dispalayDensity could be found here.
    However, if you require to change only the headers' height, you could access them via their classes. In this case, you should also change some of the headers labels attributes in order to be displayed properly, depending on your requirement.
    In the attached sample both scenarios are added as comments - the first suggestion is demonstrated in the ngOnInit method and the second in the component scss file, so you could test them.

    Regarding your second question, in order to conditionally set styles to the column headers, my suggestion is to use the exposed headerStyles property on column level.

    The approach is exactly the same for both tree and flat grids.

    Here could be found my sample for your reference. Please test it on your side and let me know if I may be of any further assistance.

    Teodosia Hristodorova
    Software Developer

  • 15
    Offline posted in reply to Teodosia Hristodorova

    Hi Teodosia,

    Thank you for the solution you've provided.
    In analysing, I found out that :

    1.Conditional Styling: There is a version mismatch of the solution and the version of our Infragistics.
    We currently are using version 10.0.0 and in that, the property (
    headerStyles) is not present.

    2.Height Decrease: The classes for overriding didn't work. 

    Could you provide us with a solution which is for the version we are using ?

    Infragistics: 10.0.0
    Angular: 10.0.0


  • 1260
    Offline posted in reply to Saurabh Suman


    After an investigation, I have determined that as it is mentioned in the release notes
    here, headerStyles property was introduced in version 12.2.0.

    In addition, please keep in mind that according to our policy we provide support for the latest version and two major versions back of the igniteui-angular product. This means that version 10 is considered retired and it is no longer eligible for Developer Support Services.

    Having this in mind, my suggestion is to update to the latest version.

    However, having in mind that the headerStyles property is setting a style to the igx-grid-header element, a possible approach which could be used in earlier versions is to access these elements and modify their properties based on some condition:

     public ngAfterViewInit(): void {
      const headers = document.querySelectorAll('igx-grid-header');
      headers.forEach(header => {
        if((header as any).innerText === 'Name' || (header as any).innerText === 'Age') {
          header.setAttribute('style', 'background: red');

    Let me know if I may be of any further assistance.

    Teodosia Hristodorova
    Software Developer

Reply Children