Conditional formatting in Vue Pivotview component

12 Oct 202424 minutes to read

Allows end user to change the appearance of the pivot table value cells with its background color, font color, font family, and font size based on specific conditions.

The conditional formatting can be applied at runtime through the built-in dialog, invoked from the toolbar. To do so, set allowConditionalFormatting and showToolbar properties in pivot table to true. Also, include the item ConditionalFormatting within the toolbar property in pivot table. End user can now see the “Conditional Formatting” icon in toolbar UI automatically, which on clicking will invoke the formatting dialog to perform necessary operations.

To learn about the Conditional Formatting feature in the Vue Pivot Table component, you can watch this video.

<template>
  <div id="app">
    <ejs-pivotview id="pivotview" :height="height" :dataSourceSettings="dataSourceSettings"
      :allowConditionalFormatting="allowConditionalFormatting" :toolbar="toolbar" :showToolbar="showToolbar">
    </ejs-pivotview>
  </div>
</template>
<script setup>
import { provide } from "vue";
import { PivotViewComponent as EjsPivotview, ConditionalFormatting, Toolbar } 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' }]
};
const allowConditionalFormatting = true;
const height = 350;
const showToolbar = true;
const toolbar = [
  "ConditionalFormatting"
];

provide('pivotview', [ConditionalFormatting, Toolbar]);
</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" :toolbar="toolbar" :showToolbar="showToolbar">
    </ejs-pivotview>
  </div>
</template>
<script>
import { PivotViewComponent, ConditionalFormatting, Toolbar } 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' }]
      },
      allowConditionalFormatting: true,
      height: 350,
      showToolbar: true,
      toolbar: [
        "ConditionalFormatting"
      ]
    }
  },
  provide: {
    pivotview: [ConditionalFormatting, Toolbar]
  }
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-pivotview/styles/material.css";
</style>

Conditional formatting can also be included in the pivot table through code-behind using the conditionalFormatSettings. The required properties to apply a new conditional formatting are,

  • applyGrandTotals: This boolean property allows you to restrict conditional formatting for grand totals in the row and column axes. By default, this property is set to true.
  • measure: Specifies the value field name for which style will be applied.
  • conditions: Defines the operator type used for conditional formatting, such as equals, greater than, less than, etc.
  • value1: Specifies the starting value for the conditional formatting.
  • value2: Specifies the ending value for the conditional formatting range. This property is applicable only for conditions like Between and NotBetween.
  • style: Specifies the custom styling applied to the cell.

The available style properties in style, to set in value cells are:

  • backgroundColor: It allows to set the background color to the value cell in the pivot table.
  • color: It allows to set the font color to the value cell in the pivot table.
  • fontFamily: It allows to set the font family to the value cell in the pivot table.
  • fontSize: It allows to set the font size to the value cell in the pivot table.

Meanwhile, user can also view conditional formatting dialog in UI by invoking showConditionalFormattingDialog method on an external button click which is shown in the below code sample.

<template>
  <div id="app">
    <ejs-button id="formatting-btn" :isPrimary="isPrimary" v-on:click="btnClick">APPLY FORMAT</ejs-button>
    <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 { ButtonComponent as EjsButton } from "@syncfusion/ej2-vue-buttons";
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: [
    {
      measure: 'In_Stock',
      value1: 5000,
      conditions: 'LessThan',
      style: {
        backgroundColor: '#80cbc4',
        color: 'black',
        fontFamily: 'Tahoma',
        fontSize: '12px'
      }
    },
    {
      value1: 3400,
      value2: 40000,
      measure: 'Sold',
      conditions: 'Between',
      style: {
        backgroundColor: '#f48fb1',
        color: 'black',
        fontFamily: 'Tahoma',
        fontSize: '12px'
      }
    }
  ]
};
const allowConditionalFormatting = true;
const height = 320;
const isPrimary = true;

const btnClick = () => {
  let pivotGridObj = document.getElementById('pivotview').ej2_instances[0];
  pivotGridObj.conditionalFormattingModule.showConditionalFormattingDialog();
};

provide('pivotview', [ConditionalFormatting]);

</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-pivotview/styles/material.css";
</style>
<template>
  <div id="app">
    <ejs-button id="formatting-btn" :isPrimary="isPrimary" v-on:click="btnClick">APPLY FORMAT</ejs-button>
    <ejs-pivotview id="pivotview" :height="height" :dataSourceSettings="dataSourceSettings"
      :allowConditionalFormatting="allowConditionalFormatting"> </ejs-pivotview>
  </div>
</template>
<script>
import { PivotViewComponent, ConditionalFormatting } from "@syncfusion/ej2-vue-pivotview";
import { ButtonComponent } from "@syncfusion/ej2-vue-buttons";
import { Pivot_Data } from './Pivot_Data.js';

export default {
  name: "App",
  components: {
    "ejs-button": ButtonComponent,
    "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: [
          {
            measure: 'In_Stock',
            value1: 5000,
            conditions: 'LessThan',
            style: {
              backgroundColor: '#80cbc4',
              color: 'black',
              fontFamily: 'Tahoma',
              fontSize: '12px'
            }
          },
          {
            value1: 3400,
            value2: 40000,
            measure: 'Sold',
            conditions: 'Between',
            style: {
              backgroundColor: '#f48fb1',
              color: 'black',
              fontFamily: 'Tahoma',
              fontSize: '12px'
            }
          }
        ]
      },
      allowConditionalFormatting: true,
      height: 320,
      isPrimary: true
    }
  },
  methods: {
    btnClick: function () {
      let pivotGridObj = document.getElementById('pivotview').ej2_instances[0];
      pivotGridObj.conditionalFormattingModule.showConditionalFormattingDialog();
    }
  },
  provide: {
    pivotview: [ConditionalFormatting]
  }
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-pivotview/styles/material.css";
</style>

Conditional formatting for all fields

Allows end user to apply conditional formatting commonly for all value fields just by ignoring the measure property and setting rest of the properties in conditionalFormatSettings.

<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: [
            {
                value1: 500,
                conditions: 'GreaterThan',
                style: {
                    backgroundColor: '#80cbc4',
                    color: 'black',
                    fontFamily: 'Tahoma',
                    fontSize: '12px'
                }
            },
        ]
    };
    const allowConditionalFormatting= true;
    const height= 320;
    
  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: [
                    {
                        value1: 500,
                        conditions: 'GreaterThan',
                        style: {
                            backgroundColor: '#80cbc4',
                            color: 'black',
                            fontFamily: 'Tahoma',
                            fontSize: '12px'
                        }
                    },
                ]
            },
            allowConditionalFormatting: true,
            height: 320,
        }
    },
    provide: {
        pivotview: [ConditionalFormatting]
    }
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-pivotview/styles/material.css";
</style>

Conditional formatting for specific value field

Allows end user to apply conditional formatting to a specific value field by setting the Measure property with specific value field name in PivotViewConditionalFormatSetting class.

<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: [
    {
      measure: 'In_Stock',
      value1: 5000,
      conditions: 'LessThan',
      style: {
        backgroundColor: '#80cbc4',
        color: 'black',
        fontFamily: 'Tahoma',
        fontSize: '12px'
      }
    },
  ]
};
const allowConditionalFormatting = true;
const height = 320;

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: [
                    {
                        measure: 'In_Stock',
                        value1: 5000,
                        conditions: 'LessThan',
                        style: {
                            backgroundColor: '#80cbc4',
                            color: 'black',
                            fontFamily: 'Tahoma',
                            fontSize: '12px'
                        }
                    },
                ]
            },
            allowConditionalFormatting: true,
            height: 320,
        }
    },
    provide: {
        pivotview: [ConditionalFormatting]
    }
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-pivotview/styles/material.css";
</style>

Editing and removing existing conditional format

Editing and removing existing conditional format can be done through the UI at runtime. To do so, open the conditional formatting dialog and edit the “Value”, “Condition” and “Format” options based on user requirement and click “OK”. To remove a conditional format, click the “Delete” icon besides the respective condition.

output

Event

ConditionalFormatting

The event conditionalFormatting is triggered initially while clicking the “ADD CONDITION” button inside the conditional formatting dialog in-order to fill user specific condition instead of default condition at runtime. To use this event, allowConditionalFormatting property in PivotView must be set to true. It has following parameters -

  • applyGrandTotals - Allows to apply conditional formatting to the grand totals of row and column axis in the pivot table.
  • conditions - Allows you to choose the operator type such as equals, greater than, less than, etc. for conditional formatting.
  • label - Allows to set the header text of a specific row/column field to apply conditional formatting.
  • measure - Allows to set the value field name to apply conditional formatting.
  • style - Allows to set the custom styles for the formatting applied values in the pivot table.
  • value1 - Allows you to set the start value for applying conditional formatting.
  • value2 - Allows you to set the end value for applying conditional formatting. This property is applicable only for conditions like Between and NotBetween.
<template>
  <div id="app">
    <ejs-button id="formatting-btn" :isPrimary="isPrimary" v-on:click="btnClick">APPLY FORMAT</ejs-button>
    <ejs-pivotview id="pivotview" :height="height" :dataSourceSettings="dataSourceSettings"
      :allowConditionalFormatting="allowConditionalFormatting" :conditionalFormatting="conditionalFormatting">
    </ejs-pivotview>
  </div>
</template>
<script setup>
import { provide } from "vue";
import { PivotViewComponent as EjsPivotview, ConditionalFormatting } from "@syncfusion/ej2-vue-pivotview";
import { ButtonComponent as EjsButton } from "@syncfusion/ej2-vue-buttons";
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: [
    {
      measure: 'In_Stock',
      value1: 5000,
      conditions: 'LessThan',
      style: {
        backgroundColor: '#80cbc4',
        color: 'black',
        fontFamily: 'Tahoma',
        fontSize: '12px'
      }
    }
  ]
};
const allowConditionalFormatting = true;
const height = 320;
const isPrimary = true;

const btnClick = () => {
  let pivotGridObj = document.getElementById('pivotview').ej2_instances[0];
  pivotGridObj.conditionalFormattingModule.showConditionalFormattingDialog();
}
const conditionalFormatting = (args) => {
  args.style.backgroundColor = "Blue";
  args.value1 = 23459;
}

provide('pivotview', [ConditionalFormatting]);
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-pivotview/styles/material.css";
</style>
<template>
    <div id="app">
        <ejs-button id="formatting-btn" :isPrimary="isPrimary" v-on:click="btnClick">APPLY FORMAT</ejs-button>
        <ejs-pivotview id="pivotview" :height="height" :dataSourceSettings="dataSourceSettings" :allowConditionalFormatting="allowConditionalFormatting" :conditionalFormatting="conditionalFormatting"> </ejs-pivotview>
    </div>
</template>
<script>
import { PivotViewComponent, ConditionalFormatting } from "@syncfusion/ej2-vue-pivotview";
import { ButtonComponent} from "@syncfusion/ej2-vue-buttons";
import { Pivot_Data } from './Pivot_Data.js';

export default {
name: "App",
components: {
"ejs-button":ButtonComponent,
"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: [
            {
                measure: 'In_Stock',
                value1: 5000,
                conditions: 'LessThan',
                style: {
                    backgroundColor: '#80cbc4',
                    color: 'black',
                    fontFamily: 'Tahoma',
                    fontSize: '12px'
                }
            }
        ]
    },
    allowConditionalFormatting: true,
    height: 320,
    isPrimary: true
    }
  },
  methods: {
    btnClick: function() {
      let pivotGridObj = document.getElementById('pivotview').ej2_instances[0];
      pivotGridObj.conditionalFormattingModule.showConditionalFormattingDialog();
    },
    conditionalFormatting: function(args) {
      args.style.backgroundColor = "Blue";
      args.value1 = 23459;
    }
  },
  provide: {
        pivotview: [ConditionalFormatting]
    }
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-pivotview/styles/material.css";
</style>

See Also