How to customize color by condition
Hi team.
In this case, I want to customize the color of the header by date range like the image below.
How can I set the color? Here is my code: https://stackblitz.com/edit/react-hnkvvv?file=App.js
Hi Ngoc Hoang,
We believe that your requirement is to apply a different styles to the column headers based on the date ranges. If so, you can accomplish this by using the headerCellInfo event. In the example below, we check the current column header text and add a custom CSS class to apply different styles to the header.
Code example:
[index.html]
|
<style> .red { color: red !important; } .pink { color: pink !important; } </style> |
[App.js]
|
let gridSettings = { headerCellInfo: headerCellInfo.bind(this) }; function headerCellInfo(args) { if (args.cell.column.customAttributes && (args.cell.column.customAttributes.cell.actualText === '2024/01' || args.cell.column.customAttributes.cell.actualText === '2024/02' || args.cell.column.customAttributes.cell.actualText === '2024/03')) { // Add the custom class to the column header to apply custom styles. args.node.querySelectorAll('.e-headertext')[1].classList.add('red'); } else if (args.cell.column.customAttributes && (args.cell.column.customAttributes.cell.actualText === '2024/04' || args.cell.column.customAttributes.cell.actualText === '2024/05' || args.cell.column.customAttributes.cell.actualText === '2024/06')) { // Add the custom class to the column header to apply custom styles. args.node.querySelectorAll('.e-headertext')[1].classList.add('pink'); } }
return ( <PivotViewComponent gridSettings={gridSettings} ></PivotViewComponent> ); |
Meanwhile, We have modified the provided sample for your reference. You can
find the sample at the following link.
Sample: https://stackblitz.com/edit/react-hnkvvv-wgild2?file=App.js,index.css,index.html
Additionally, if you have proper date values for the "date" field, you can evaluate the month ranges directly instead of using the column header text to apply custom styles. Please refer to the example code below.
Code example:
[index.html]
|
<style> .red { color: red !important; } .pink { color: pink !important; } </style> |
[App.js]
|
let gridSettings = { headerCellInfo: headerCellInfo.bind(this) }; function headerCellInfo(args) { if (args.cell.column.customAttributes) { // Here you can get the actual date value of the column header. var columnHeaderDate = new Date(args.cell.column.customAttributes.cell.actualText); // Get the month from the actual value of the date here. var monthOfColumnHeader = columnHeaderDate.getMonth(); if(monthOfColumnHeader == 0 || monthOfColumnHeader == 1 || monthOfColumnHeader == 2) { // Add the custom class to the column header to apply custom styles. args.node.querySelectorAll('.e-headertext')[1].classList.add('red'); } else if(monthOfColumnHeader == 3 || monthOfColumnHeader == 4 || monthOfColumnHeader == 5) { // Add the custom class to the column header to apply custom styles. args.node.querySelectorAll('.e-headertext')[1].classList.add('pink'); } } }
return ( <PivotViewComponent gridSettings={gridSettings} ></PivotViewComponent> ); |
Meanwhile, We have modified the provided sample for your reference. You can
find the sample at the following link.
Sample: https://stackblitz.com/edit/react-hnkvvv-wnqpwg?file=App.js,index.css,datasource.ts
Output screenshot:
Furthermore, you can refer to the user guide documentation for more information about the headerCellInfo event.
Document: https://ej2.syncfusion.com/react/documentation/pivotview/row-and-column#headercellinfo
Please let us know if you have any concerns.
Regards,
Angelin Faith Sheeba.
