Static columns in pivot table.

[M Rehman]

Hello,

We have a situation where we need to arrange certain text-based data columns at the beginning of the pivot table, while placing other numeric columns at the end. I have reviewed all the examples you provided, and noticed that when there is a header separation, such as with the fiscal year 'FY-2021' having two columns 'Units Sold' and 'Amount', the subsequent fiscal year 'FY-2022' also has the same two columns.

However, in my particular scenario, I have multiple separations. For instance, under the 'Information' category, there are text-based columns like 'Status', 'Sub Status', and 'FPFV Date'. Then, there are other separations with different columns than the ones in the 'Information' category.

I would greatly appreciate your guidance on how to proceed.

[AngelinFaithSheeba PaulvannanRajadurai]

Hi Rehman,

Pivot table will always display based on the fields that we bind in rows, columns, and values properties. In our demo sample, we have bound two value fields (“Units Sold”, “Sold Amount”), thus these values are displayed as columns under each parent column (i.e., FY 2021, FY 2022.,) in the pivot table. However, based on your requirement you can bind multiple columns with single value field in the pivot table.  If so, please refer the below code example.

Code Example:

this.dataSourceSettings = {

            // Bind the fields to the “columns” property here.

            columns: [{ name: 'Year' }, { name: 'Quarter' }],

            // Bind the fields to the “values” property here.

            values: [{ name: 'Sold', caption: 'Units Sold' }],

            dataSource: this.getPivotData(),

            // Bind the fields to the “row” property here.

            rows: [{ name: 'Country' }, { name: 'Products' }],

     };

Meanwhile, we have prepared a sample for your reference.

Sample: https://stackblitz.com/edit/angular-uvtzqk-c1r2vu?file=src%2Fapp.component.ts

Output screenshot:

Also, please refer the below UG document to know more about the Pivot table.

Document: https://ej2.syncfusion.com/angular/documentation/pivotview/getting-started

If the given information differs from your requirements, please share the details, preferably with screenshot/video references. It will allow us to investigate further and provide the details as soon as possible.

Regards,

Angelin Faith Sheeba.

[M Rehman]

Hello Angelin,

I have reviewed the example you provided, but I have different scenarios for my PIVOT table. What I need to do is have two columns: "Information" and "Month." Here's what I want to achieve:

In the "Information" column, I want to display the following five values: "Status," "Sub Status," "FPFV," "Internal Randomization," and "Projected Randomization."

In the "Month" column, I want to display two values: "Randomization" and "Visits." However, I want to hide the previous values that are shown in the "Information" column. Similarly, I want to hide all the values in the "Month" column that are shown in the "Information" column.

I have attached my work link on StackBlitz for reference: [Insert link: https://stackblitz.com/edit/angular-uvtzqk-3rwxch?file=src%2Fapp.component.ts,src%2Fapp.component.html]

Please review it and provide your assistance. Your help would be greatly appreciated.

Thank you and regards,
Muhammad Rehman

[AngelinFaithSheeba PaulvannanRajadurai]

Hi Rehman,

Thanks for the sample, we believe that your requirement is to hide specific columns in the pivot table. If so, using columnRender event, you can hide the specific columns by disabling the “visible” property. Please refer the below code example.

Code Example

columnRender: this.observable.subscribe((args: any) => {

        // Here you can customize the specific columns.

        for (var i = 0; i < (args as any).stackedColumns.length; i++) {

            if((args as any).stackedColumns[i].headerText == "Information" && args.stackedColumns[i].columns){

              for(var j=0; j <args.stackedColumns[i].columns.length; j++){

               // Display all values other than “Randomization” and “Visits” under “information” column.

                if(args.stackedColumns[i].columns[j].headerText == "Randomization" || args.stackedColumns[i].columns[j].headerText == "Visits"){

                  args.stackedColumns[i].columns[j].visible = false;

                }

              }

            } else if((this.months as any).includes((args as any).stackedColumns[i].headerText) && args.stackedColumns[i].columns){

              for(var k=0; k <args.stackedColumns[i].columns.length; k++){

                // Display only “Randomization” and “Visits” under “months” column.

                if(args.stackedColumns[i].columns[k].headerText !== "Randomization" && args.stackedColumns[i].columns[k].headerText !== "Visits"){ 

                  args.stackedColumns[i].columns[k].visible = false;

                }

              }

            }

        }

Output screenshot:

Meanwhile, we have prepared a sample for your reference.

Sample: https://stackblitz.com/edit/angular-uvtzqk-bpvr4r?file=src%2Fapp.component.ts,src%2Fapp.component.html

We hope that the above information would fulfil your needs. Please let us know if you have any other queries.

Regards,

Angelin Faith Sheeba.