Apply custom style to pivot cells in Vue Pivot Table component

The Vue Pivot Table component allows you to alter the appearance of pivot cells using event handlers. This guide demonstrates how to apply custom styling to specific cells in your pivot table.

Overview

You can apply custom styles to different types of cells in the pivot table:

• Use the queryCellInfo event to style row headers and value cells.
• Use the headerCellInfo event to style column headers.

Both events are available through the gridSettings property of the Pivot Table component.

Implementation example

The following example shows how to apply styles to:

• The column header “Sold Amount” under “FY 2016” using the headerCellInfo event.
• The row header “Germany” and its aggregated values using the queryCellInfo event.
• Styles are applied by adding the “e-custom” CSS class to the cell elements.

Composition API (~/src/App.vue)

<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/tailwind3.css";
</style>

Options API (~/src/App.vue)

<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/tailwind3.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.