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: custom cells

Style up your Vue pivot grid with the customizeCell API to add more visual content to your report.


    <template>
      <Pivot
        componentFolder="https://cdn.flexmonster.com/"
        height="600"
        toolbar
        v-bind:report="report"
        v-bind:customizeCell="customizeCellFunction"
        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";
    
    export default {
      name: "PivotComponent",
      components: {
        Pivot,
      },
      data() {
        return {
          report: {
            dataSource: {
              type: "csv",
              filename: "data/data.csv",
            },
            slice: {
              rows: [
                {
                  uniqueName: "Country",
                },
                {
                  uniqueName: "Business Type",
                },
              ],
              columns: [
                {
                  uniqueName: "Color",
                },
                {
                  uniqueName: "[Measures]",
                },
              ],
              measures: [
                {
                  uniqueName: "Quantity",
                  aggregation: "percentofcolumn",
                },
              ],
              expands: {
                expandAll: true,
              },
            },
            formats: [
              {
                decimalPlaces: 2,
              },
            ],
          },
        };
      },
      methods: {
        customizeCellFunction(cell, data) {
          if (data?.type === "value" && !data?.isDrillThrough) {
            if (data.value < 5) {
              cell.text = `<img src="https://cdn.flexmonster.com/i/empty_pie.svg" class="centered">`;
            } else if (data.value >= 5 && data.value < 10) {
              cell.text = `<img src="https://cdn.flexmonster.com/i/quarter_pie.svg" class="centered">`;
            } else if (data.value >= 10 && data.value < 25) {
              cell.text = `<img src="https://cdn.flexmonster.com/i/half_pie.svg" class="centered">`;
            } else if (data.value >= 25 && data.value < 50) {
              cell.text = `<img src="https://cdn.flexmonster.com/i/three_quarters_pie.svg" class="centered">`;
            } else if (data.value >= 50) {
              cell.text = `<img src="https://cdn.flexmonster.com/i/full_pie.svg" class="centered">`;
            }
          }
        },
        customizeToolbar(toolbar) {
          toolbar.showShareReportTab = true;
          const tabs = toolbar.getTabs();
          toolbar.getTabs = () => {
            const exportTab = tabs.find(tab => tab.id == "fm-tab-export");
            if (!exportTab) return tabs;
            const exportToTabs = exportTab.menu?.filter(
              tab => tab.id == "fm-tab-export-html" || 
              tab.id == "fm-tab-export-csv" || 
              tab.id == "fm-tab-export-excel" || 
              tab.id == "fm-tab-export-pdf");
            if (!exportToTabs) return tabs;
            exportToTabs.map(exportToTab => exportToTab.handler = () => {
              const exportType = exportToTab.id.substring(14);
              this.$refs.pivot.flexmonster.exportTo(exportType, {
                useCustomizeCellForData: false
              });
            });
            return tabs;
          };
        },
      },
    };
    </script>
    
    img.centered {
      display: block !important;
      margin: auto !important;
      color: transparent !important;
    }
    
    #fm-pivot-view .fm-grid-row {
      min-height: 47px;
    }
    

    Flexmonster Pivot Table & Charts notably differs from other tools on the market in its flexibility. You can fully customize the pivot component according to the appearance and logic your Vue application requires.

    Define values with the icon (as KPI’s are shown in the demo example), add hyperlinks, style totals, grand totals, and much more.