React Pivot Table: Classic (tabular) view

import { useRef } from "react";
import * as FlexmonsterReact from "react-flexmonster";
import "flexmonster/flexmonster.css";

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;