Using Pivot table as functional component results in getting ref object as undefined.

[dreamers paradise]

I am facing issue with column headers showing "Total of". So for removing this I used headercellinfo in gridsettings. The issue is the ref object using in headercellinfo function is undefined every time. I am using functional component not class component. Is there any solution available to fix this.

[Sridhar Karunakaran]

Hi Dreamers,

We have checked the reported issue but were unable to replicate it on our end. Furthermore, we want to inform you that the “headerCellInfo” event was initially triggered twice when rendering an empty grid (which contains two columns, thus causing it to trigger twice). The pivot table instance was created only after rendering the empty grid. Therefore, use the pivot table instance only after the empty grid has been rendered by setting a condition to ensure that the pivot table instance is defined. Here’s a code example that demonstrates how to accomplish this.

Code example:

function headerCellInfo(args) {

    if (pivotObj) {

        console.log(pivotObj);

        // customize the column header text here.

        args.node.querySelector('.e-headertext').innerText = args.cell.column.headerText;

    }

}

 

Output Screenshot:

Meanwhile, we have prepared a sample for your reference. You can find the sample at the following link.
Sample: https://stackblitz.com/edit/react-ycufyq-hx5ky9?file=index.js

However, if the problem persists, please replicate it in the provided samples and get back to us or share a code snippet that replicates the issue. This will allow us to investigate the reported problem on our end and provide a solution as soon as possible.

Regards,

Sridhar Karunakaran.