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.