☝️Small business or a startup? See if you qualify for our special offer.
+
List of all demos

Angular Pivot Table: flat view

If you need to display data in an Excel-like data grid view with your Angular reporting library, use Flexmonster’s flat table form.

Domain mismatchFlexmonster is used on the domain prod-flexmonster-container-service.tbvgv2m9krico.us-east-1.cs.amazonlightsail.com, which does not match the domain your license key was issued for (flexmonster.com)

Contact our team to request a key for the domain prod-flexmonster-container-service.tbvgv2m9krico.us-east-1.cs.amazonlightsail.com

You are using the following key:
Z707-XCI209-0Q203E-3I5M00-28254L-0B2Z2S-0L0T3F-1H3W3A-421F46

Current version: 2.9.107 (build 07/06/2025)

  • .ts
  • .html
import { Component, OnInit } from "@angular/core";
import { FlexmonsterPivot } from "ng-flexmonster";

@Component({
  selector: "pivotComponent",
  templateUrl: "./pivot.component.html",
  styleUrls: ["./pivot.component.css"],
})
export class PivotComponent implements OnInit {
  public report: Object = {
    dataSource: {
      type: "csv",
      filename: "https://cdn.flexmonster.com/data/data.csv",
    },
    options: {
      grid: {
        type: "flat",
      },
    },
    slice: {
      measures: [
        {
          uniqueName: "Country",
        },
        {
          uniqueName: "Category",
        },
        {
          uniqueName: "Color",
        },
        {
          uniqueName: "Price",
        },
        {
          uniqueName: "Discount",
        },
      ],
    },
   formats: [{
      name: "",
      thousandsSeparator: ",",
      decimalSeparator: ".",
      decimalPlaces: 2,
      currencySymbol: "$",
    }],
  };

  constructor() {}

  ngOnInit(): void {}
}
<fm-pivot
  [componentFolder]="'https://cdn.flexmonster.com/'"
  [height]="370"
  [report]="report">
</fm-pivot>

A flat table view is a minimalistic way to show data in Angular in a row-by-row manner, so the end-user sees their data the same way as the records come from the data source, in non-aggregated form.

The core features of the Angular flat grid are the same as for the classic (tabular) and compact layouts: filter, sort, and reset the configurations of the data via drag-and-drop or the Field List. Also, it has such a unique feature as multi-column sorting: use Ctrl + click (Command + click on macOS) to sort the records by multiple fields.

To quickly change the view angle of your report, you can switch to the classic (tabular) or compact forms and gain even more insights — still using the same Angular data visualization solution.