Apply conditional formatting for specific row or column in Vue Pivotview component

11 Jun 20247 minutes to read

You can apply conditional formatting for specific row or column using label option in the pivot table. It can be configured using the conditionalFormatSettings option through code behind, during initial rendering. The required settings are:

  • label: Specifies the header name to apply conditions for row or column.
  • conditions: Specifies the operator type such as equals, greater than, less than, etc.
  • value1: Specifies the start value.
  • value2: Specifies the end value.
  • style: Specifies the style for the cell.

To use the conditional formatting feature, You need to inject the ConditionalFormatting module in pivot table.

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

const dataSourceSettings = {
  dataSource: Pivot_Data,
  expandAll: false,
  enableSorting: true,
  drilledMembers: [{ name: 'Country', items: ['France', 'Germany'] }],
  columns: [{ name: 'Year' }, { name: 'Order_Source', caption: 'Order Source' }],
  rows: [{ name: 'Country' }, { name: 'Products' }],
  values: [{ name: 'In_Stock', caption: 'In Stock' },
  { name: 'Sold', caption: 'Units Sold' }],
  filters: [{ name: 'Product_Categories', caption: 'Product Categories' }],
  conditionalFormatSettings: [
    {
      label: 'Germany',
      conditions: 'Between',
      value1: 500,
      value2: 50000,
      style: {
        backgroundColor: '#f48fb1',
        color: 'black',
        fontFamily: 'Tahoma',
        fontSize: '12px'
      }
    }
  ]
};
const allowConditionalFormatting = true;
const height = 350;

provide('pivotview', [ConditionalFormatting]);
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-pivotview/styles/material.css";
</style>
<template>
    <div id="app">
        <ejs-pivotview id="pivotview" :height="height" :dataSourceSettings="dataSourceSettings"
            :allowConditionalFormatting="allowConditionalFormatting"> </ejs-pivotview>
    </div>
</template>
<script>
import { PivotViewComponent, ConditionalFormatting } from "@syncfusion/ej2-vue-pivotview";
import { Pivot_Data } from './Pivot_Data.js';

export default {
    name: "App",
    components: {
        "ejs-pivotview": PivotViewComponent
    },
    data() {
        return {
            dataSourceSettings: {
                dataSource: Pivot_Data,
                expandAll: false,
                enableSorting: true,
                drilledMembers: [{ name: 'Country', items: ['France', 'Germany'] }],
                columns: [{ name: 'Year' }, { name: 'Order_Source', caption: 'Order Source' }],
                rows: [{ name: 'Country' }, { name: 'Products' }],
                values: [{ name: 'In_Stock', caption: 'In Stock' },
                { name: 'Sold', caption: 'Units Sold' }],
                filters: [{ name: 'Product_Categories', caption: 'Product Categories' }],
                conditionalFormatSettings: [
                    {
                        label: 'Germany',
                        conditions: 'Between',
                        value1: 500,
                        value2: 50000,
                        style: {
                            backgroundColor: '#f48fb1',
                            color: 'black',
                            fontFamily: 'Tahoma',
                            fontSize: '12px'
                        }
                    }
                ]
            },
            allowConditionalFormatting: true,
            height: 350
        }
    },
    provide: {
        pivotview: [ConditionalFormatting]
    }
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-pivotview/styles/material.css";
</style>