How to synchronize two identical JavaScript Pivot Tables with a single field list?

Introduction

Synchronizing two pivot tables with a single field list can significantly enhance the user experience by maintaining consistent data across both pivot tables. This approach ensures that any action, such as adding, removing, sorting, and filtering fields in the field list of the first pivot table, is automatically reflected in the second pivot table. This article will guide you on how to synchronize field list actions between two identical JavaScript Pivot Tables.

Synchronizing two identical pivot tables with a single field list

To achieve synchronization, you must use the enginePopulating event. This event is triggered after the pivot engine has been populated, and it allows you to synchronize the dataSourceSettings of both pivot tables. As a result, any changes made in the first pivot table will be instantly reflected in the second pivot table. Below is a JavaScript code snippet that demonstrates this approach:

[index.ts]

var pivotObj1 = new ej.pivotview.PivotView({
    enginePopulating: function(args) {
        // Synchronize dataSourceSettings with the second Pivot Table
        pivotObj2.dataSourceSettings = pivotObj1.dataSourceSettings;
        // Refresh the second Pivot Table to reflect the changes
        pivotObj2.refreshData();
    },
});

In the code example above, within the enginePopulating event, we update the dataSourceSettings of the second pivot table (i.e., pivotObj2) to match the current dataSourceSettings of the first pivot table (i.e., pivotObj1). After updating the settings, we invoke the refreshData() method on pivotObj2 to programmatically refresh the second pivot table, thereby displaying the pivot table according to the updated dataSourceSettings.

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

GIF

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

Conclusion

By following the steps outlined in this article and using the provided code example, you can easily synchronize two identical JavaScript Pivot Tables with a single field list.

You can also refer to our JavaScript Pivot Table 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 Pivot Table example to understand how to create and manipulate data.

For current customers, you can check out our components on 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!