How to update the Pivot Table based on data filtered using DataManager in React?

Introduction

This article demonstrates how to dynamically update the React Pivot Table based on filtered data through the DataManager. Specifically, we will demonstrate how to filter data based on user input, such as searching for specific data (i.e., Country).

Code Snippet

The following is a code example that demonstrates how to dynamically filter pivot table data using a query in DataManager based on user input from a MaskedTextBox.

import { DataManager, Query, JsonAdaptor } from '@syncfusion/ej2-data';
import { MaskedTextBoxComponent } from '@syncfusion/ej2-react-inputs';
import { PivotViewComponent } from '@syncfusion/ej2-react-pivotview';

let pivotObj;
function onChange(args) {
    // Filter the data based on the search. 
    if(args.value){
      new DataManager({ json: pivotData, adaptor: new JsonAdaptor() })
      // You can change the query condition to 'equals' if you don't want to filter based on 'startswith'.
      .executeQuery(new Query().where('Country', 'startswith', args.value))
      .then((e) => {
        pivotObj.dataSourceSettings = dataSourceSettings;
        // Here we update the pivot table with filtered data
        pivotObj.dataSourceSettings.dataSource = e.result;
      });
    }
    else{ 
      // Assign the whole data to the pivot table while the filter is cleared.
      pivotObj.dataSourceSettings.dataSource = pivotData;
    }
}
return (
    <div className="control-pane">
        <div className="control-section component-section">
            <MaskedTextBoxComponent placeholder="Search country" change={onChange} />
        </div>
        <div className="content-wrapper">
            <PivotViewComponent
                id="PivotView"
                ref={(pivotview) => {
                    pivotObj = pivotview;
                }}>
           </PivotViewComponent>
        </div>
    </div>
    </div >
);

Here’s a breakdown of how the code works:

1. Creating the onChange event method:
   The onChange event method is triggered whenever the value in the search box changes. Based on the value entered in the search input, the data displayed in the pivot table will be filtered accordingly.

2. Executing the query within DataManager to filter the data:
   When the search field has a value, we create a new DataManager instance with the original dataset (i.e., pivotData) and the JsonAdaptor. Then we specify the query filter condition using the where method from the Query class. This is done to filter the data according to the input value (i.e., “args.value”). In this case, we have filtered the data based on the “Country” field by using the startswith operator. You can modify the query based on your specific requirements.

3. Updating the pivot table with filtered data:
   Upon successfully executing the query, the filtered result is retrieved in the then callback function as e.result. The datasource property within the dataSourceSettings of the pivot table (i.e., pivotData) is then updated with the filtered result, thus update the pivot table to display only the filtered data based on the search value.

4. Handling empty search value:
   When the search box is cleared (i.e., the search input is empty), the original dataset (i.e., pivotData) is reassigned to the pivot table data source, effectively removing any filters and displaying the full dataset.

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

GIF

For a practical example of this code in action, you can refer to the following Sample in Stackblitz.

Conclusion

I hope you enjoyed learning how to dynamically update the React Pivot Table based on data filtered using DataManager.

You can refer to our React 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 React 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!