The classic (tabular) form is a React pivot table’s view, which you can switch to, to see an Excel-like layout of hierarchies. With the classic pivot table view, you can show sublevels in separate rows or columns next to one another.
import React from "react";
import * as FlexmonsterReact from "react-flexmonster";
class PivotTableDemo extends React.Component {
constructor(props) {
super(props);
this.pivot = React.createRef();
}
render() {
return (
<>
<button onClick={() => this.changeLayout("compact")}>Use compact form</button>
<button onClick={() => this.changeLayout("classic")}>Use classic form</button>
<FlexmonsterReact.Pivot
ref={this.pivot}
componentFolder="https://cdn.flexmonster.com/"
height={450}
report={{
dataSource: {
type: "csv",
filename: "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: "$",
},
],
}}
/>
</>
);
}
changeLayout = (layoutType) => {
this.pivot.current.flexmonster.setOptions({
grid: {
type: layoutType,
},
});
this.pivot.current.flexmonster.refresh();
};
}
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 familiar — in the way you got used to it in Excel. You can drag and drop, expand, collapse, drill down and up the hierarchies, sort and drill through values, and more.
In case multi-level hierarchies from your report include a lot of sublevels, it is better to switch to the compact form, which shows them more neatly and will save space on the page.