We have updated Flexmonster Software License Agreement, effective as of September 30, 2024. Learn more about what’s changed.
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: "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.