Color Header

Question

How do i make different color header in below pivot table What will be my css. It seems whatever i applied it applies to all the 3 rows in header and also as you can see fonts are selectively White.

Manikandan Murugesan · Accepted Answer

Hi Parth Rawal, 
 
Using the "headerCellInfo" event, you can apply a different background color to column headers based on their level. Please see the code below for an example. 
Code Example: 




  headerCellInfo(args) { 
    (this.pivotObj.renderModule as any).columnCellBoundEvent(args); 
    //triggers every time for header cell while rendering 
    if (args.cell && args.cell.column && args.cell.column.customAttributes) { 
      args.node.classList.add( 
        'level' + args.cell.column.customAttributes.cell.rowIndex 
      ); 
    } 
  } 
 
  enginePopulated(args) { 
    this.pivotObj.grid.headerCellInfo = this.headerCellInfo.bind(this); 
  } 
 
Meanwhile, we have prepared a sample for your reference. Please find it from below link. 

Sample: https://stackblitz.com/edit/angular-h6eof4?file=app.component.ts 
 
For more details about the “headerCellInfo” event, please refer the document link below. 
Document: https://ej2.syncfusion.com/angular/documentation/pivotview/row-and-column/#headercellinfo 
 
Please let us know if you have any concerns. 
 
Regards, 
Manikandan

PDev · Answer

HiIs there a way to change the font color, because in example above i could not change the font color.  and also when collapsing and expand. it changes font color from white to black again

Manikandan Murugesan · Answer

Hi Parth Rawal, Please use the CSS below to change the font color for column header cells based on the header level. Code Example: Meanwhile, we have prepared a sample for your reference. Please find it from below link. Sample: https://stackblitz.com/edit/angular-h6eof4-fbwdf1?file=index.html Please let us know if you have any concerns. Regards, Manikandan