State persistence in React Pivotview component
30 Jan 20239 minutes to read
State persistence allows user to maintain the current state of the component along with its report bounded in the browser local storage (cookie). Even if the browser is refreshed or if you move to the next page within the browser, components state will be persisted. State persistence stores the Pivot Table object in the local storage when enablePersistence
property is set to true.
import { PivotViewComponent } from '@syncfusion/ej2-react-pivotview';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { pivotData } from './datasource';
function App() {
let dataSourceSettings = {
dataSource: pivotData,
expandAll: false,
enableSorting: true,
drilledMembers: [{ name: 'Country', items: ['France', 'Germany'] }],
columns: [{ name: 'Year' }, { name: 'Order_Source', caption: 'Order Source' }],
rows: [{ name: 'Country' }, { name: 'Products' }],
values: [{ name: 'In_Stock', caption: 'In Stock' },
{ name: 'Sold', caption: 'Units Sold' }],
filters: [{ name: 'Product_Categories', caption: 'Product Categories' }]
};
let pivotObj;
return (<PivotViewComponent ref={d => pivotObj = d} id='PivotView' height={350} enablePersistence={true} dataSourceSettings={dataSourceSettings}></PivotViewComponent>);
}
;
export default App;
ReactDOM.render(<App />, document.getElementById('sample'));
import { IDataOptions, IDataSet, PivotViewComponent } from '@syncfusion/ej2-react-pivotview';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { pivotData } from './datasource';
function App() {
let dataSourceSettings: IDataOptions = {
dataSource: pivotData,
expandAll: false,
enableSorting: true,
drilledMembers: [{ name: 'Country', items: ['France', 'Germany'] }],
columns: [{ name: 'Year' }, { name: 'Order_Source', caption: 'Order Source' }],
rows: [{ name: 'Country' }, { name: 'Products' }],
values: [{ name: 'In_Stock', caption: 'In Stock' },
{ name: 'Sold', caption: 'Units Sold' }],
filters: [{ name: 'Product_Categories', caption: 'Product Categories' }]
}
let pivotObj: PivotViewComponent;
return (<PivotViewComponent ref={d => pivotObj = d} id='PivotView' height={350} enablePersistence={true} dataSourceSettings={dataSourceSettings}></PivotViewComponent>);
};
export default App;
ReactDOM.render(<App />, document.getElementById('sample'));
Save and Load Pivot Layout
30 Jan 20239 minutes to read
You can save the current layout of the pivot table by using getPersistData
in string format. The saved layout can be loaded to pivot table any time by passing the saved data as a parameter to loadPersistData
method.
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { PivotViewComponent } from '@syncfusion/ej2-react-pivotview';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { pivotData } from './datasource';
function App() {
let dataSourceSettings = {
dataSource: pivotData,
expandAll: false,
enableSorting: true,
drilledMembers: [{ name: 'Country', items: ['France', 'Germany'] }],
columns: [{ name: 'Year' }, { name: 'Order_Source', caption: 'Order Source' }],
rows: [{ name: 'Country' }, { name: 'Products' }],
values: [{ name: 'In_Stock', caption: 'In Stock' },
{ name: 'Sold', caption: 'Units Sold' }],
filters: [{ name: 'Product_Categories', caption: 'Product Categories' }]
};
let pivotObj;
let report;
return (<div><div className="col-md-9"> <PivotViewComponent ref={d => pivotObj = d} id='PivotView' height={350} dataSourceSettings={dataSourceSettings}></PivotViewComponent></div><div className='col-lg-3 property-section'><div><ButtonComponent cssClass='e-primary' onClick={save.bind(this)}>Save</ButtonComponent></div><br /><div><ButtonComponent cssClass='e-primary' onClick={load.bind(this)}>Load</ButtonComponent></div></div>
</div>);
function save() {
report = pivotObj.getPersistData();
}
function load() {
pivotObj.loadPersistData(report);
}
}
;
export default App;
ReactDOM.render(<App />, document.getElementById('sample'));
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { IDataOptions, IDataSet, Inject, PivotViewComponent } from '@syncfusion/ej2-react-pivotview';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { pivotData } from './datasource';
function App() {
let dataSourceSettings: IDataOptions = {
dataSource: pivotData,
expandAll: false,
enableSorting: true,
drilledMembers: [{ name: 'Country', items: ['France', 'Germany'] }],
columns: [{ name: 'Year' }, { name: 'Order_Source', caption: 'Order Source' }],
rows: [{ name: 'Country' }, { name: 'Products' }],
values: [{ name: 'In_Stock', caption: 'In Stock' },
{ name: 'Sold', caption: 'Units Sold' }],
filters: [{ name: 'Product_Categories', caption: 'Product Categories' }]
}
let pivotObj: PivotViewComponent;
let report: string;
return (<div><div className="col-md-9"> <PivotViewComponent ref={d => pivotObj = d} id='PivotView' height={350} dataSourceSettings={dataSourceSettings}></PivotViewComponent></div><div className='col-lg-3 property-section'><div><ButtonComponent cssClass='e-primary' onClick={save.bind(this)}>Save</ButtonComponent></div><br/><div><ButtonComponent cssClass='e-primary' onClick={load.bind(this)}>Load</ButtonComponent></div></div>
</div>);
function save(): void {
report = pivotObj.getPersistData();
}
function load(): void {
pivotObj.loadPersistData(report);
}
};
export default App;
ReactDOM.render(<App />, document.getElementById('sample'));