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 localization

Use the language of your Vue app for the integrated pivot table to provide your users with the best experience.


    <template>
      <button v-on:click="setLocalization('en')">EN</button>
      <button v-on:click="setLocalization('fr')">FR</button>
      <button v-on:click="setLocalization('it')">IT</button>
      <button v-on:click="setLocalization('es')">ES</button>
      <button v-on:click="setLocalization('pt')">PT</button>
      <button v-on:click="setLocalization('zh')">ZH</button>
      <button v-on:click="setLocalization('uk')">UK</button>
      <Pivot
        ref="pivot"
        componentFolder="https://cdn.flexmonster.com/"
        height="430"
        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/flexmonster.css";
    
    const pdfFonts = {
      en: "https://cdn.flexmonster.com/fonts/NotoSans-Regular.ttf",
      fr: "https://cdn.flexmonster.com/fonts/NotoSans-Regular.ttf",
      it: "https://cdn.flexmonster.com/fonts/NotoSans-Regular.ttf",
      es: "https://cdn.flexmonster.com/fonts/NotoSans-Regular.ttf",
      pt: "https://cdn.flexmonster.com/fonts/NotoSans-Regular.ttf",
      zh: "https://cdn.flexmonster.com/fonts/NotoSansCJKsc-Regular.ttf",
      uk: "https://cdn.flexmonster.com/fonts/NotoSans-Regular.ttf",
    };
    
    export default {
      name: "PivotComponent",
      components: {
        Pivot,
      },
      data() {
        return {
          report: {
            dataSource: {
              type: "csv",
              filename: "data/data-en.csv",
            },
            slice: {
              rows: [
                {
                  uniqueName: "Category",
                },
              ],
              columns: [
                {
                  uniqueName: "[Measures]",
                },
              ],
              measures: [
                {
                  uniqueName: "Price",
                  aggregation: "sum",
                  format: "currency",
                },
              ],
            },
            formats: [
              {
                name: "",
                thousandsSeparator: ",",
                decimalSeparator: ".",
                decimalPlaces: 2,
              },
              {
                name: "currency",
                currencySymbol: "$",
              },
            ],
          },
          currentLang: "en",
        };
      },
      methods: {
        setLocalization(lang) {
          this.currentLang = lang;
          this.$refs.pivot.flexmonster.setReport({
            dataSource: {
              type: "csv",
              filename: "data/data-" + lang + ".csv",
            },
            localization: "loc/" + lang + ".json",
            formats: [{
              name: "",
              thousandsSeparator: ",",
              decimalSeparator: ".",
              decimalPlaces: 2,
              currencySymbol: "$",
            }]
          });
        },
        customizeToolbar(toolbar) {
          toolbar.exportHandler = (type) => {
            if (type == "pdf") {
              this.$refs.pivot.flexmonster.exportTo(type, {
                fontUrl: pdfFonts[this.currentLang],
              });
            } else {
              this.$refs.pivot.flexmonster.exportTo(type);
            }
          };
          toolbar.showShareReportTab = true;
        },
      },
    };
    </script>
    

    We prepared 12 localization files that can be downloaded from the website or our CDN. The JSON file contains key-value pairs, where a key is the component’s element, and value is the translation of its text into the corresponding language.

    After you download the file, just specify its path for your Vue app. You can also create your custom localization file in case you need to use a different language. The best way to do it - use our default English localization file as a template.

    For more details on localizing the vue pivot table, check out our Localizing component guide.