☝️Small business or a startup? See if you qualify for our special offer.
+
List of all demos

Vue Pivot Table themes


    <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.