Angular Pivot Table: flat view

If you need to display initial data in an Excel-like data grid view with your Angular reporting library use the flat table form of Flexmonster Pivot Table.

Edit in JSfiddle Get Free Trial

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: "data/data.csv",
    },
    options: {
      grid: {
        type: "flat",
      },
    },
    slice: {
      columns: [
        {
          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>

Flat table view is a minimalistic way to show CSV or JSON data in Angular in a row-by-row manner, so the end-user sees his data the same way as the records come from the data source in nonaggregated form.

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

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

Angular Pivot Table: flat view

See our live examples