Pivot Table In ReactJs
This section explain steps to create a Pivot Table with JSON data source in React environment. To get start quickly with ReactJS Pivot Table, you can check on this video on YouTube in Hindi Language:
Packages
For Pivot Table you will have to install a package, To install pivot table package, use the following command.
npm install @syncfusion/ej2-react-pivotview --save
The —save will instruct NPM to include the pivot table package inside the dependencies section of the package.json file you will find this file in your root directory in your project.
Adding CSS
Add pivot table and it’s dependent components styles as given below in src/App.css file.
@import url('https://cdn.syncfusion.com/ej2/bootstrap5.css');
Adding pivot table
Now next you have to open app.js file which will be found inside /src/app.js directory.
Then you can initialize pivot table component using <PivotViewComponent/> in render() method.
import { IDataOptions, PivotViewComponent } from '@syncfusion/ej2-react-pivotview';
import './App.css';
export default class App extends React.Component{
public render() {
return <PivotViewComponent/>
};
};
After initialization, add the the following code in src/App.js file to populate pivot table with a relational data source.
import { PivotViewComponent,FieldList,Inject } from "@syncfusion/ej2-react-pivotview";
import React from "react";
import './App.css';
let pivot_data = [
{ 'Sold': 313, 'Amount': 32232, 'Country': 'Canada', 'Products': 'Xiaomi Redmi 9 Power', 'Year': 'FY 2015', 'Quarter': 'Q1' },
{ 'Sold': 451, 'Amount': 232423, 'Country': 'Japan', 'Products': 'Xiaomi Redmi Note 10 Pro', 'Year': 'FY 2015', 'Quarter': 'Q2' },
{ 'Sold': 100, 'Amount': 24143534, 'Country': 'Germany', 'Products': 'Realme Narzo 30A', 'Year': 'FY 2015', 'Quarter': 'Q3' },
{ 'Sold': 671, 'Amount': 24435, 'Country': 'Switzerland', 'Products': 'Samsung Galaxy A52', 'Year': 'FY 2015', 'Quarter': 'Q4' },
{ 'Sold': 227, 'Amount': 434352, 'Country': 'Australia', 'Products': 'Samsung Galaxy F62', 'Year': 'FY 2016', 'Quarter': 'Q1' }
];
export default class App extends React.Component{
render(){
return <PivotViewComponent
dataSourceSettings={{
dataSource:pivot_data ,
values:[
{name:"Sold",caption:"Sold Unit"},
{name:"Amount",caption:"Sold Amount"},
],
rows:[
{name:"Country"},
{name:"Products"}
],
columns:[
{name:"Year"},
{name:"Quarter"}
],
filters:[
{name:"Quarter"}
]
}}
showFieldList={true}
height={'500'}
width={'100%'}
><Inject services={[FieldList]}></Inject></PivotViewComponent>
}
}
If you want to gate data from any other file So you have to create a json file, you can name it whatever you want. with .json like data.js and put inside data structure like this :
exports.pivotData= [
{ 'Sold': 89, 'Amount': 141999.5, 'Country': 'France', 'Products': 'Touring Bikes', 'Year': 'FY 2015', 'Quarter': 'Q1' },
{ 'Sold': 91, 'Amount': 145190.5, 'Country': 'France', 'Products': 'Touring Bikes', 'Year': 'FY 2015', 'Quarter': 'Q2' },
{ 'Sold': 24, 'Amount': 38292, 'Country': 'France', 'Products': 'Touring Bikes', 'Year': 'FY 2015', 'Quarter': 'Q3' },
{ 'Sold': 75, 'Amount': 119662.5, 'Country': 'France', 'Products': 'Touring Bikes', 'Year': 'FY 2015', 'Quarter': 'Q4' },
{ 'Sold': 100, 'Amount': 159550, 'Country': 'France', 'Products': 'Touring Bikes', 'Year': 'FY 2016', 'Quarter': 'Q1' },
{ 'Sold': 30, 'Amount': 47865, 'Country': 'France', 'Products': 'Touring Bikes', 'Year': 'FY 2016', 'Quarter': 'Q2' },
{ 'Sold': 69, 'Amount': 110089.5, 'Country': 'France', 'Products': 'Touring Bikes', 'Year': 'FY 2016', 'Quarter': 'Q3' },
{ 'Sold': 25, 'Amount': 39887.5, 'Country': 'France', 'Products': 'Touring Bikes', 'Year': 'FY 2016', 'Quarter': 'Q4' },
{ 'Sold': 42, 'Amount': 67011, 'Country': 'France', 'Products': 'Touring Bikes', 'Year': 'FY 2017', 'Quarter': 'Q1' },
{ 'Sold': 94, 'Amount': 149977, 'Country': 'France', 'Products': 'Touring Bikes', 'Year': 'FY 2017', 'Quarter': 'Q2' },
{ 'Sold': 76, 'Amount': 121258, 'Country': 'France', 'Products': 'Touring Bikes', 'Year': 'FY 2017', 'Quarter': 'Q3' },
{ 'Sold': 52, 'Amount': 82966, 'Country': 'France', 'Products': 'Touring Bikes', 'Year': 'FY 2017', 'Quarter': 'Q4' },
{ 'Sold': 33, 'Amount': 52651.5, 'Country': 'France', 'Products': 'Touring Bikes', 'Year': 'FY 2018', 'Quarter': 'Q1' },
{ 'Sold': 16, 'Amount': 23989, 'Country': 'Germany', 'Products': 'Road Bikes', 'Year': 'FY 2015', 'Quarter': 'Q1' },
{ 'Sold': 21, 'Amount': 33505.5, 'Country': 'Germany', 'Products': 'Touring Bikes', 'Year': 'FY 2015', 'Quarter': 'Q1' },
{ 'Sold': 74, 'Amount': 126096, 'Country': 'Germany', 'Products': 'Mountain Bikes', 'Year': 'FY 2015', 'Quarter': 'Q1' },
{ 'Sold': 99, 'Amount': 148406, 'Country': 'Germany', 'Products': 'Road Bikes', 'Year': 'FY 2016', 'Quarter': 'Q1' },
{ 'Sold': 31, 'Amount': 49460.5, 'Country': 'Germany', 'Products': 'Touring Bikes', 'Year': 'FY 2016', 'Quarter': 'Q1' },
{ 'Sold': 57, 'Amount': 97128, 'Country': 'Germany', 'Products': 'Mountain Bikes', 'Year': 'FY 2016', 'Quarter': 'Q1' },
{ 'Sold': 41, 'Amount': 61464, 'Country': 'Germany', 'Products': 'Road Bikes', 'Year': 'FY 2017', 'Quarter': 'Q1' },
{ 'Sold': 64, 'Amount': 102112, 'Country': 'Germany', 'Products': 'Touring Bikes', 'Year': 'FY 2017', 'Quarter': 'Q1' },
{ 'Sold': 85, 'Amount': 144840, 'Country': 'Germany', 'Products': 'Mountain Bikes', 'Year': 'FY 2017', 'Quarter': 'Q1' },
{ 'Sold': 76, 'Amount': 129504, 'Country': 'Germany', 'Products': 'Mountain Bikes', 'Year': 'FY 2018', 'Quarter': 'Q1' },
{ 'Sold': 33, 'Amount': 56232, 'Country': 'Germany', 'Products': 'Mountain Bikes', 'Year': 'FY 2015', 'Quarter': 'Q2' },
{ 'Sold': 71, 'Amount': 120984, 'Country': 'Germany', 'Products': 'Mountain Bikes', 'Year': 'FY 2016', 'Quarter': 'Q2' },
{ 'Sold': 81, 'Amount': 138024, 'Country': 'Germany', 'Products': 'Mountain Bikes', 'Year': 'FY 2017', 'Quarter': 'Q2' },
{ 'Sold': 65, 'Amount': 110760, 'Country': 'Germany', 'Products': 'Mountain Bikes', 'Year': 'FY 2015', 'Quarter': 'Q3' },
{ 'Sold': 39, 'Amount': 66456, 'Country': 'Germany', 'Products': 'Mountain Bikes', 'Year': 'FY 2016', 'Quarter': 'Q3' },
{ 'Sold': 91, 'Amount': 155064, 'Country': 'Germany', 'Products': 'Mountain Bikes', 'Year': 'FY 2017', 'Quarter': 'Q3' },
{ 'Sold': 16, 'Amount': 27264, 'Country': 'Germany', 'Products': 'Mountain Bikes', 'Year': 'FY 2015', 'Quarter': 'Q4' },
{ 'Sold': 59, 'Amount': 100536, 'Country': 'Germany', 'Products': 'Mountain Bikes', 'Year': 'FY 2016', 'Quarter': 'Q4' },
{ 'Sold': 36, 'Amount': 61344, 'Country': 'Germany', 'Products': 'Mountain Bikes', 'Year': 'FY 2017', 'Quarter': 'Q4' },
{ 'Sold': 39, 'Amount': 58466, 'Country': 'Germany', 'Products': 'Road Bikes', 'Year': 'FY 2018', 'Quarter': 'Q1' },
{ 'Sold': 47, 'Amount': 70458, 'Country': 'Germany', 'Products': 'Road Bikes', 'Year': 'FY 2015', 'Quarter': 'Q2' },
{ 'Sold': 19, 'Amount': 28486, 'Country': 'Germany', 'Products': 'Road Bikes', 'Year': 'FY 2016', 'Quarter': 'Q2' },
{ 'Sold': 34, 'Amount': 50971, 'Country': 'Germany', 'Products': 'Road Bikes', 'Year': 'FY 2017', 'Quarter': 'Q2' },
{ 'Sold': 34, 'Amount': 50971, 'Country': 'Germany', 'Products': 'Road Bikes', 'Year': 'FY 2015', 'Quarter': 'Q3' },
{ 'Sold': 26, 'Amount': 38979, 'Country': 'Germany', 'Products': 'Road Bikes', 'Year': 'FY 2016', 'Quarter': 'Q3' },
{ 'Sold': 15, 'Amount': 22490, 'Country': 'Germany', 'Products': 'Road Bikes', 'Year': 'FY 2017', 'Quarter': 'Q3' },
{ 'Sold': 83, 'Amount': 124422, 'Country': 'Germany', 'Products': 'Road Bikes', 'Year': 'FY 2015', 'Quarter': 'Q4' },
{ 'Sold': 79, 'Amount': 118426, 'Country': 'Germany', 'Products': 'Road Bikes', 'Year': 'FY 2016', 'Quarter': 'Q4' },
{ 'Sold': 14, 'Amount': 20991, 'Country': 'Germany', 'Products': 'Road Bikes', 'Year': 'FY 2017', 'Quarter': 'Q4' }
]
In this illustration, “Year” and “Quarter” are added in column, “Country” and “Products” in row, and “Sold” and “Amount” in value section respectively.
import { PivotViewComponent,FieldList,Inject } from "@syncfusion/ej2-react-pivotview";
import React from "react";
import { pivotData } from "./data";
import './App.css';
export default class App extends React.Component{
render(){
return <PivotViewComponent
dataSourceSettings={{
dataSource:pivotData,
values:[
{name:"Sold",caption:"Sold Unit"},
{name:"Amount",caption:"Sold Amount"},
],
rows:[
{name:"Country"},
{name:"Products"}
],
columns:[
{name:"Year"},
{name:"Quarter"}
],
filters:[
{name:"Quarter"}
]
}}
showFieldList={true}
height={'500'}
width={'100%'}
><Inject services={[FieldList]}></Inject></PivotViewComponent>
}
}