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.
Choose the theme of your Vue pivot table using predefined CSS skins or create your own theme.
<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: "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, }, ], }, }; }, methods: { customizeToolbar(toolbar) { toolbar.showShareReportTab = true; }, }, }; </script>
You can use already prepared layouts with the most popular color schemes for your Vue project.
Take a look at the complete list of CSS skins and follow the guide to switch your Vue pivot grid theme to the needed one with only one code line.
You can also create a custom theme using your corporate branding colors that you use for your Vue project.
With the help of the Changing themes guide and a theme builder app, you can easily create a custom theme from scratch.