Apply custom style to pivot cells in Vue Pivotview component

11 Jun 20247 minutes to read

The queryCellInfo event in gridSettings can be used to apply custom style to row and value cells, and the headerCellInfo event in gridSettings can be used to apply custom styles to column cells.

In the following example, a custom style has been applied to the column header “Sold Amount” under “FY 2016” via the headerCellInfo event and to the row header “Germany” and its aggregated value via the queryCellInfo event by adding the “e-custom” class to the cell element.

<template>
  <div id="app">
    <ejs-pivotview id="pivotview" :dataSourceSettings="dataSourceSettings" :height="height" :gridSettings="gridSettings">
    </ejs-pivotview>
  </div>
</template >
<script setup>
import { PivotViewComponent as EjsPivotview } from "@syncfusion/ej2-vue-pivotview";
import { pivotData } from './pivotData.js';

const dataSourceSettings = {
  dataSource: pivotData,
  expandAll: false,
  rows: [{ name: 'Country' }, { name: 'Products' }],
  columns: [{ name: 'Year', caption: 'Production Year' }, { name: 'Quarter' }],
  values: [{ name: 'Amount', caption: 'Sold Amount' }, { name: 'Sold', caption: 'Units Sold' }],
  formatSettings: [{ name: 'Amount', format: 'C0' }],
};
const height = 350;
const gridSettings = {
  queryCellInfo(args) {
    let colIndex = Number(args.cell.getAttribute('data-colindex'));
    let cells = args.data[colIndex] ? args.data[colIndex] : {};
    // Here by using 'actualText' option, a custom class can be added to the specific row header and its value to apply custom style.
    if (cells.actualText === 'Germany') {
      args.cell.classList.add('e-custom');
    } else if (cells.actualText === 'Amount' &&
      cells.columnHeaders === 'FY 2016' && cells.rowHeaders === 'Germany') {
      args.cell.classList.add('e-custom');
    }
  },
  headerCellInfo(args) {
    let customAttributes = args.cell.column.customAttributes;
    // Here custom class can be added to the specific column header by using unique level name, to apply custom style.
    if (args.node.classList.contains('e-columnsheader') && customAttributes &&
      customAttributes.cell.valueSort.levelName === 'FY 2016.Sold Amount') {
      args.node.classList.add('e-custom');
    }
  }
};

</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-pivotview/styles/material.css";
</style>
<template>
  <div id="app">
    <ejs-pivotview id="pivotview" :dataSourceSettings="dataSourceSettings" :height="height" :gridSettings="gridSettings">
    </ejs-pivotview>
  </div>
</template >
<script>
import { PivotViewComponent } from "@syncfusion/ej2-vue-pivotview";
import { pivotData } from './pivotData.js';

export default {
  name: "App",
  components: {
    "ejs-pivotview": PivotViewComponent
  },
  data() {
    return {
      dataSourceSettings: {
        dataSource: pivotData,
        expandAll: false,
        rows: [{ name: 'Country' }, { name: 'Products' }],
        columns: [{ name: 'Year', caption: 'Production Year' }, { name: 'Quarter' }],
        values: [{ name: 'Amount', caption: 'Sold Amount' }, { name: 'Sold', caption: 'Units Sold' }],
        formatSettings: [{ name: 'Amount', format: 'C0' }],
      },
      height: 350,
      gridSettings: {
        queryCellInfo: function (args) {
          let colIndex = Number(args.cell.getAttribute('data-colindex'));
          let cells = args.data[colIndex] ? args.data[colIndex] : {};
          // Here by using 'actualText' option, a custom class can be added to the specific row header and its value to apply custom style.
          if (cells.actualText === 'Germany') {
            args.cell.classList.add('e-custom');
          } else if (cells.actualText === 'Amount' &&
            cells.columnHeaders === 'FY 2016' && cells.rowHeaders === 'Germany') {
            args.cell.classList.add('e-custom');
          }
        },
        headerCellInfo: function (args) {
          let customAttributes = args.cell.column.customAttributes;
          // Here custom class can be added to the specific column header by using unique level name, to apply custom style.
          if (args.node.classList.contains('e-columnsheader') && customAttributes &&
            customAttributes.cell.valueSort.levelName === 'FY 2016.Sold Amount') {
            args.node.classList.add('e-custom');
          }
        }
      },
    }
  }
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-pivotview/styles/material.css";
</style>

NOTE

The dot(.) character in FY 2016.Sold Amount is used by default to identify the header levels in the pivot table’s row and column. It can be changed by setting the headerDelimiter in the valueSortSettings property to any other delimiter instead of the default separator.