Customize the icons for pivot grid in Vue Pivotview component

16 Mar 20233 minutes to read

You can customize the pivot button icons in the pivot table by overriding the class .pivot-button with a custom property content as mentioned below.


#PivotView_PivotFieldList .e-icons.e-toggle-field-list::before {
    content: '\e337';
}

In the below sample, pivot table is rendered with a customized pivot button icons.

<template>
    <div id="app">
        <ejs-pivotview id="pivotview" :dataSourceSettings="dataSourceSettings" :height="height" :showFieldList="showFieldList"> </ejs-pivotview>
    </div>
</template>

<script>
import Vue from "vue";
import { PivotViewPlugin, FieldList } from "@syncfusion/ej2-vue-pivotview";
import { pivotData } from './pivotData.js';

Vue.use(PivotViewPlugin);

export default {
  data () {
    return {
      dataSourceSettings: {
        dataSource: pivotData,
        expandAll: false,
        drilledMembers: [{ name: 'Country', items: ['France'] }],
        columns: [{ name: 'Year', caption: 'Production Year' }, { name: 'Quarter' }],
        values: [{ name: 'Sold', caption: 'Units Sold' }, { name: 'Amount', caption: 'Sold Amount' }],
        rows: [{ name: 'Country' }, { name: 'Products' }],
        formatSettings: [{ name: 'Amount', format: 'C0' }],
        filters: [],
        calculatedFieldSettings: [{ name: 'Total', formula: '"Sum(Amount)"+"Sum(Sold)"' }]
      },
      showFieldList: true,
      height: 350
    }
  },
  provide: {
    pivotview: [FieldList]
  }
}
</script>
<style>
@import "@syncfusion/ej2-vue-pivotview/styles/material.css";

/* csslint ignore:start */
#PivotView_PivotFieldList_Wrapper .e-pivot-button .e-icons.e-dropdown-icon::before,
#PivotView .e-pivot-button .e-icons.e-dropdown-icon::before {
    content: "\e941";
}

#PivotView_PivotFieldList_Wrapper .e-pivot-button .e-icons.e-pv-filtered::before,
#PivotView .e-pivot-button .e-icons.e-pv-filtered::before {
    content: "\e974";
}

#PivotView_PivotFieldList_Wrapper .e-pivot-button .e-icons.e-pv-filter::before,
#PivotView .e-pivot-button .e-icons.e-pv-filter::before {
    content: '\e202';
}

#PivotView_PivotFieldList .e-icons.e-toggle-field-list::before {
    content: '\e337';
}

#PivotView_PivotFieldList_Wrapper .e-pivot-button .e-icons.e-sort::before,
#PivotView .e-pivot-button .e-icons.e-sort::before {
    content: '\e306';
}

#PivotView_PivotFieldList_Wrapper .e-pivot-button .e-icons.e-remove::before,
#PivotView .e-pivot-button .e-icons.e-remove::before {
    content: '\e201';
}

/* csslint ignore:end */
</style>