Specific backgroudn color for sub total lignes

[Aurélien]

Hello,

For better UX, how can I change the color of background for subtotal lines (in red below) ?

Thanks in advance :-)
Aurélien

[AngelinFaithSheeba PaulvannanRajadurai]

Hi Aurelian,

Using queryCellInfo event, you can apply custom styles to the row sub-totals in the pivot table based on your needs. Please refer the below code example.

Code Example:

index.html:

    <style>

        .e-customclass {

            background-color: pink !important;

        }

    </style>

 

Index.js:

queryCellInfo: function(args){

      var colIndex = Number(args.cell.getAttribute('data-colindex'));

         if(pivotObj.dataSourceSettings.rows.length > 1){

            if (args.data[colIndex] && args.data[0].level !== (pivotObj.dataSourceSettings.rows.length - 1) && args.data[colIndex].rowHeaders !== "" && args.data[colIndex].actualText!=="Grand Total") {

              args.cell.classList.add('e-customclass');

            }

        }

  } 

Meanwhile, we have prepared a sample for your reference.

Sample: https://stackblitz.com/edit/qoepau-zmm9ay?file=index.js,index.html

Output screenshot:

To know more details about “queryCellInfo” event, refer the following documentation.

Document: https://ej2.syncfusion.com/javascript/documentation/pivotview/row-and-column/#querycellinfo

Please let us know if you have any concerns.

Regards,

Angelin Faith Sheeba.