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: "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 below in our Angular UI grid example. The full list of themes as well as the tutorial on how to create your own you can check in the customizing appearance guide.
Apply built-in themes and transform your Angular pivot table just with one extra line of code.
You can choose one of these designs or make 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.