How to programmatically save and load a React Pivot Table report using external buttons?

Introduction

Saving and loading the React Pivot Table report allows you to preserve the current state of the component and reload it into the pivot table as required. By default, this functionality is accessible through the built-in toolbar options. For more details, please refer to the user guide documentation. However, In some cases, you may want to programmatically save and load a report using external buttons. This article demonstrates how to implement this customization seamlessly.

Save and load the report using external buttons

To achieve the desired customization, you must add two external buttons. One button is used to save the current layout of the pivot table to local storage, while the other button is used to load the saved layout back into the pivot table. Below is an example of a code snippet that demonstrates how to accomplish this using the Syncfusion Button component:

[index.js]

import { PivotViewComponent } from '@syncfusion/ej2-react-pivotview';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';

// Here, we define a variable to access the instance of the pivot table
let pivotObj;
let obj;
function Default() {
    function StoreData() {
        // Create a unique identifier
        obj = 'PivotTable' + pivotObj.element.id;
        // Store current pivot table state to local storage
        localStorage[obj] = pivotObj.getPersistData();
    }
    function load() {
        // Check if there's saved data in local storage for this pivot table
        if (localStorage[obj]) {
            // Load the modified data from the local storage in the pivot table here.
            pivotObj.loadPersistData(localStorage[obj]);
        }
    }
    return ( <div id="btn-control" style={{ marginBottom: '5px' }}>
                <ButtonComponent id="save-btn" className='e-info' style={{ marginRight: '5px' }} 
                    onClick={StoreData}>Save</ButtonComponent>
                <ButtonComponent id="load-btn" className='e-info' onClick={load}>Load</ButtonComponent>
            </div>
                <PivotViewComponent id='PivotView' ref={d => pivotObj = d} >
                </PivotViewComponent>
        );
}
export default Default;

Explanation of the code snippet:

1. When the “Save” button is clicked, the StoreData event method is triggered. Within the event method, we generate a unique identifier by concatenating ‘PivotTable’ with the component’s ID (i.e., pivotObj.element.id). This identifier ensures that the saved state remains unique in local storage.
2. Afterwards, we extract the current state of the pivot table using the pivotObj.getPersistData() method and store it in the local storage under the generated key.
3. Similarly, when the “Load” button is clicked, the load event method is triggered. Within the event method, we check if there is any saved data in the local storage for the specific pivot table using the unique key.
4. If the data exists, we utilize the pivotObj.loadPersistData() method to reload it back onto the pivot table. This action effectively restores the saved state of the pivot table.

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

GIF

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

Additional resources

1. To save and load a report as a JSON file, please refer to the UG documentation.

2. To save and load reports to a SQL database, please refer to the UG documentation.

Conclusion

By following the steps outlined in this article and using the provided code examples, you can easily save and load the React Pivot Table report using external buttons.

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 questions 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!