Choose the theme of your Vue pivot table using predefined CSS skins, or create your own one.
<template>
<Pivot
componentFolder="https://cdn.flexmonster.com/"
height="600"
toolbar
v-bind:report="report"
v-bind:shareReportConnection="{
url: 'https://olap.flexmonster.com:9500',
}"
v-bind:beforetoolbarcreated="customizeToolbar"
/>
</template>
<script>
import Pivot from "vue-flexmonster/vue3";
import "flexmonster/theme/stripedblue/flexmonster.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";
export default {
name: "PivotComponent",
components: {
Pivot,
},
data() {
return {
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,
},
],
},
};
},
methods: {
customizeToolbar(toolbar) {
toolbar.showShareReportTab = true;
},
},
};
</script>
There are 17 already prepared layouts with the most popular color schemes that you can use for your Vue project.
Take a look at the complete list of CSS skins and guide how simply switch your Vue pivot grid theme to the needed one with only one code line.
You can also create a custom report theme using your corporate branding colors that you use for your Vue project.
With the help of customizing appearance guide and a theme builder app, you can easily create a custom theme from scratch.