Search results

Customizing loading indicator in Vue Pivot Table component

05 Oct 2022 / 1 minute to read

You can customize the appearance of the loading indicator in the pivot table by using the spinnerTemplate property. This property accepts an HTML string which can be used for appearance customization.

You can also disable the loading indicator by setting spinnerTemplate to empty string.

Copied to clipboard
    <div id="app">
        <ejs-pivotview id="pivotview" :dataSourceSettings="dataSourceSettings" :spinnerTemplate="spinnerTemplate" :height="height"> </ejs-pivotview>

import Vue from "vue";
import { PivotViewPlugin, IDataSet } from "@syncfusion/ej2-vue-pivotview";
import { DataManager, WebApiAdaptor, Query, ReturnOption } from '@syncfusion/ej2-data';


let remoteData: IDataSet[];
new DataManager({
  url: "",
  adaptor: new WebApiAdaptor(),
  crossDomain: true
}).executeQuery(new Query().take(8)).then((e: ReturnOption) => {
    let pivotGridObj = document.getElementById('pivotview').ej2_instances[0];
    pivotGridObj.dataSourceSettings.dataSource = e.result as IDataSet[];

export default {
  data () {
    return {
      dataSourceSettings: {
        dataSource: [],
        expandAll: true,
        filters: [],
        columns: [{ name: 'ProductName', caption: 'Product Name' }],
        rows: [{ name: 'ShipCountry', caption: 'Ship Country' }, { name: 'ShipCity', caption: 'Ship City' }],
        formatSettings: [{ name: 'UnitPrice', format: 'C0' }],
        values: [{ name: 'Quantity' }, { name: 'UnitPrice', caption: 'Unit Price' }]
      spinnerTemplate: '<i class="fa fa-cog fa-spin fa-3x fa-fw"></i>',
      height: 350
@import "@syncfusion/ej2-vue-pivotview/styles/material.css";

{% endraw %}