How to change the field drop axis in Angular Pivot Table?

This article explains how to change the field drop axis in Angular Pivot Table

Changing field drop axis in pivot table

When you use the checkbox selection to select a field in the field list, it will be automatically added to the value axis if the field has number type; otherwise, it will be added to the row axis. However, you can change the drop axis using the fieldDrop event. This event is triggered whenever a field is dropped into an axis. It allows you to programmatically modify the field drop axis.

Here is a code example that shows how to modify the drop axis for a specific field when it is selected in the field list.

[app.component.html]

    <ejs-pivotview #pivotview="" id="PivotView" (fielddrop)="fieldDrop($event)">
    </ejs-pivotview>

[app.component.ts]

  fieldDrop(args) {
    if (args.draggedAxis === 'fieldlist' && args.fieldName === 'Year') {
      args.dropAxis = 'columns';
    }
  }

In the given example, when the Year field is chosen from the field list, the fieldDrop event modifies its drop axis to column. This means that the field will be placed on the column axis of the pivot table instead of the row axis.

The following GIF image, which portrays the results of the code snippet mentioned above,

GIF

For a practical demonstration, refer to the sample of stackblitz.

Conclusion
I hope you enjoyed learning how to change the field drop axis in Angular Pivot Table.

You can refer to our Angular Pivot Table feature tour feature tour page to learn about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our Angular Pivot Table example example to understand how to create and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, support portal, or feedback portal. We are always happy to assist you!