I'm trying to test how Pivot component works, so one of the main feature doesn't work, and also it crashes whole my project. I cannot really recognize what is the problem, but I know showFieldList
does it. Otherwise everything works, except of it.
import React from "react";
import { CalculatedField, FieldList, IDataOptions, IDataSet, Inject, PivotActionCompleteEventArgs, PivotViewComponent } from "@syncfusion/ej2-react-pivotview";
import "./pivor-table.scss";
interface PivotTableProps {
className?: string;
}
export const pivotData: IDataSet[] = [
{ Amount: 2100, Country: "Canada", Date: "FY 2005", Product: "Bike", Quantity: 22, State: "Alberta" },
{ Amount: 1100, Country: "Canada", Date: "FY 2006", Product: "Van", Quantity: 32, State: "Quebec" },
{ Amount: 3100, Country: "Canada", Date: "FY 2007", Product: "Car", Quantity: 22, State: "Alberta" },
{ Amount: 4800, Country: "France", Date: "FY 2005", Product: "Bike", Quantity: 49, State: "Charente-Maritime" },
{ Amount: 9100, Country: "France", Date: "FY 2007", Product: "Car", Quantity: 64, State: "Charente-Maritime" },
{ Amount: 2350, Country: "France", Date: "FY 2008", Product: "Van", Quantity: 46, State: "Gers" },
{ Amount: 3400, Country: "Germany", Date: "FY 2005", Product: "Bike", Quantity: 78, State: "Bayern" },
{ Amount: 8400, Country: "Germany", Date: "FY 2006", Product: "Van", Quantity: 90, State: "Hamburg" },
{ Amount: 7200, Country: "Germany", Date: "FY 2008", Product: "Car", Quantity: 92, State: "Bayern" },
{ Amount: 1040, Country: "United Kingdom", Date: "FY 2005", Product: "Bike", Quantity: 47, State: "England" },
{ Amount: 1500, Country: "United Kingdom", Date: "FY 2006", Product: "Van", Quantity: 24, State: "England" },
{ Amount: 4820, Country: "United Kingdom", Date: "FY 2008", Product: "Car", Quantity: 72, State: "England" },
{ Amount: 1520, Country: "United States", Date: "FY 2006", Product: "Bike", Quantity: 53, State: "North Carolina" },
{ Amount: 3320, Country: "United States", Date: "FY 2007", Product: "Car", Quantity: 49, State: "South Carolina" },
{ Amount: 6300, Country: "United States", Date: "FY 2008", Product: "Van", Quantity: 45, State: "South Carolina" },
];
export const PivotTable: React.FC<PivotTableProps> = (props) => {
const dataSourceSettings : IDataOptions = {
columns: [{ name: "Date", caption: "Date" }, { name: "Product" }],
dataSource: pivotData,
expandAll: true,
filters: [],
drilledMembers: [],
formatSettings: [],
rows: [{ name: "Country" }, { name: "State" }],
values: [{ name: "Amount", caption: "Sold Amount" }, { name: "Quantity", caption: "Quantity" }],
calculatedFieldSettings: [{ name: "Total", formula: '"Sum(Amount)"+"Sum(Quantity)"' }]
};
const actionComplete = React.useCallback((args: PivotActionCompleteEventArgs) => {
console.log(dataSourceSettings);
if (args.actionName === "Drill down" || args.actionName === "Drill up") {
}
}, [dataSourceSettings]);
return (<PivotViewComponent id='PivotView'
allowCalculatedField
showFieldList
height={1000}
dataSourceSettings={dataSourceSettings}
actionComplete={actionComplete}
enableFieldSearching
showValuesButton
>
<Inject services={[CalculatedField, FieldList]}/>
</PivotViewComponent>);
};
