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

Vue Pivot Table: custom cells

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


    <template>
      <Pivot
        componentFolder="https://cdn.flexmonster.com/"
        height="600"
        v-bind:report="report"
        v-bind:customizeCell="customizeCellFunction"
      />
    </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: "https://cdn.flexmonster.com/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">`;
            }
          }
        },
      },
    };
    </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.

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