The classic (tabular) form is a React pivot table view that displays data in an Excel-like layout. With the classic pivot table view, you can show sublevels in separate rows or columns next to one another.
Play with the demo on a larger screen: save this link for later or watch the video review now.
import { useRef } from "react";
import * as FlexmonsterReact from "react-flexmonster";
function PivotTableDemo() {
const pivotRef = useRef(null);
const report = {
dataSource: {
type: "csv",
filename: "https://cdn.flexmonster.com/data/data.csv"
},
options: {
grid: {
type: "classic"
}
},
slice: {
rows: [
{
uniqueName: "Country"
},
{
uniqueName: "Business Type"
}
],
columns: [
{
uniqueName: "Color"
},
{
uniqueName: "[Measures]"
}
],
measures: [
{
uniqueName: "Price",
format: "currency"
}
],
expandAll: true
},
formats: [
{
name: "",
thousandsSeparator: ",",
decimalSeparator: ".",
decimalPlaces: 2
},
{
name: "currency",
currencySymbol: "$"
}
]
};
const changeLayout = (layoutType) => {
pivotRef.current.flexmonster.setOptions({
grid: {
type: layoutType
}
});
pivotRef.current.flexmonster.refresh();
};
const setRepeatLabels = (enabled) => {
pivotRef.current.flexmonster.setOptions({
grid: {
repeatAllLabels: enabled
}
});
pivotRef.current.flexmonster.refresh();
};
return (
<>
<button onClick={() => changeLayout("compact")}>Use compact form</button>
<button onClick={() => changeLayout("classic")}>Use classic form</button>
<button onClick={() => setRepeatLabels(true)}>Repeat labels on</button>
<button onClick={() => setRepeatLabels(false)}>Repeat labels off</button>
<FlexmonsterReact.Pivot
ref={pivotRef}
report={report}
/>
</>
);
}
export default PivotTableDemo;
By default, grand totals are displayed at the end of each row, and subtotals are placed at the bottom in a separate row.
All the React pivot table functionality works similarly to what you're used to in Excel. You can drag and drop, expand, collapse, drill down and up the hierarchies, sort and drill through values, and more.
In case multilevel hierarchies from your report include a lot of sublevels, it is better to switch to the compact form, which shows them more neatly and saves space on the page.