Flexmonster Software License Agreement (“Agreement”) has been revised and is effective as of January 8, 2025.
The following modifications were made:
The modified version of Agreement is available here.
Downloading, installing, and/or continuing to use Flexmonster Software after January 8, 2025, constitutes Licensee’s acceptance of the terms and conditions of the modified version of Agreement. If Licensee does not agree to any of these terms and conditions, they must cease using Flexmonster Software and must not download, install, use, access, or continue to access Flexmonster Software. By continuing to use Flexmonster Software or renewing the license or maintenance after the effective date of these modifications to Agreement, Licensee accepts and agrees to be bound by the terms and conditions of the modified Agreement.
Match the look & feel of your pivot table to the design of your Angular reporting tool.
import { Component, OnInit } from "@angular/core"; @Component({ selector: "pivotComponent", templateUrl: "./pivot.component.html", styleUrls: ["./pivot.component.css"], }) export class PivotComponent implements OnInit { public report: Flexmonster.Report = { dataSource: { type: "csv", filename: "https://cdn.flexmonster.com/data/sales.csv", }, slice: { rows: [ { uniqueName: "Salesperson", }, { uniqueName: "Payment Method", }, ], columns: [ { uniqueName: "Month", filter: { members: [ "month.[june]", "month.[july]", "month.[august]" ], }, }, { uniqueName: "[Measures]", }, ], measures: [ { uniqueName: "Revenue", aggregation: "sum", }, ], sorting: { column: { type: "desc", tuple: [], measure: { uniqueName: "Revenue", aggregation: "sum", }, }, }, expands: { rows: [ { tuple: ["salesperson.[laszlo horvath]"], }, ], }, }, formats: [ { name: "", thousandsSeparator: ",", decimalSeparator: ".", decimalPlaces: 2, currencySymbol: "$", positiveCurrencyFormat: "$1", nullValue: "", textAlign: "right", isPercent: false, }, ], }; constructor() {} ngOnInit(): void {} customizeToolbar(toolbar: Flexmonster.Toolbar) { toolbar.showShareReportTab = true; } }
<fm-pivot [componentFolder]="'https://cdn.flexmonster.com/'" [height]="600" [toolbar]="true" [report]="report" [shareReportConnection]="{url: 'https://olap.flexmonster.com:9500'}" (beforetoolbarcreated)="customizeToolbar($event)"> </fm-pivot>
@import "flexmonster/theme/stripedblue/flexmonster.min.css"; /* More themes: */ /* @import "flexmonster/theme/stripedteal/flexmonster.min.css"; */ /* @import "flexmonster/theme/purple/flexmonster.min.css"; */ /* @import "flexmonster/theme/blackorange/flexmonster.min.css"; */ /* @import "flexmonster/theme/brightorange/flexmonster.min.css"; */ /* @import "flexmonster/theme/yellow/flexmonster.min.css"; */ /* @import "flexmonster/theme/green/flexmonster.min.css"; */ /* @import "flexmonster/theme/midnight/flexmonster.min.css"; */ /* @import "flexmonster/theme/macos/flexmonster.min.css"; */ /* @import "flexmonster/theme/softdefault/flexmonster.min.css"; */ /* @import "flexmonster/theme/lightblue/flexmonster.min.css"; */ /* @import "flexmonster/theme/dark/flexmonster.min.css"; */ /* @import "flexmonster/theme/teal/flexmonster.min.css"; */ /* @import "flexmonster/theme/orange/flexmonster.min.css"; */ /* @import "flexmonster/theme/old/flexmonster.min.css"; */
Pick one of the ready-to-use CSS pivot skins that come with Flexmonster Pivot Table & Charts. Ten of them you can see above in our Angular UI grid example. The full list of themes, as well as the tutorial on how to create your own theme, can be found in the Changing themes guide.
Apply built-in themes and transform your Angular pivot table with just one extra line of code.
You can choose one of these designs or create a custom theme from scratch that can fit your Angular data visualization tool. To speed up the process, we created a custom theme builder app that will help you build new themes in no time.