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.

Edit in JSfiddle Get Free Trial

.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.

Classic view With amCharts

Changes to Flexmonster Software License Agreement

Angular Pivot Table: flat view

See our live examples