Angular Pivot Table: Classic (tabular) view

import { Component, ViewChild } from "@angular/core";
import { FlexmonsterPivotModule, FlexmonsterPivot } from "ngx-flexmonster";

@Component({
  selector: "pivotComponent",
  standalone: true,
  imports: [FlexmonsterPivotModule],
  templateUrl: "./pivot.component.html",
  styleUrls: ["./pivot.component.css"]
})
export class PivotComponent {
  @ViewChild("pivot") pivotRef!: FlexmonsterPivot;

  public report: Object = {
    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: "$"
      }
    ]
  };

  changeLayout(layoutType: string) {
    this.pivotRef.flexmonster.setOptions({
      grid: {
        type: layoutType
      }
    });
    this.pivotRef.flexmonster.refresh();
  }

  setRepeatLabels(enabled: boolean) {
    this.pivotRef.flexmonster.setOptions({
      grid: {
        repeatAllLabels: enabled
      }
    });
    this.pivotRef.flexmonster.refresh();
  }
}

<button (click)="changeLayout('compact')">Use compact form</button>
<button (click)="changeLayout('classic')">Use classic form</button>
<button (click)="setRepeatLabels(true)">Repeat labels on</button>
<button (click)="setRepeatLabels(false)">Repeat labels off</button>

<fm-pivot
  #pivot
  [height]="450"
  [report]="report">
</fm-pivot>