Customizing loading indicator in Vue Pivotview component

11 Jun 20243 minutes 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.

<template>
  <div id="app">
    <ejs-pivotview id="pivotview" :dataSourceSettings="dataSourceSettings" :spinnerTemplate="spinnerTemplate"
      :height="height"> </ejs-pivotview>
  </div>
</template> 
<script setup>
import { PivotViewComponent as EjsPivotview } from "@syncfusion/ej2-vue-pivotview";
import { DataManager, WebApiAdaptor } from '@syncfusion/ej2-data';

let remoteData = new DataManager({
  url: "https://bi.syncfusion.com/northwindservice/api/orders",
  adaptor: new WebApiAdaptor(),
  crossDomain: true
});

const dataSourceSettings = {
  dataSource: remoteData,
  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' }]
};
const spinnerTemplate = '<i class="fa fa-cog fa-spin fa-3x fa-fw"></i>';
const height = 350;

</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-pivotview/styles/material.css";
</style>
<template>
  <div id="app">
    <ejs-pivotview id="pivotview" :dataSourceSettings="dataSourceSettings" :spinnerTemplate="spinnerTemplate"
      :height="height"> </ejs-pivotview>
  </div>
</template> 

<script>

import { PivotViewComponent } from "@syncfusion/ej2-vue-pivotview";
import { DataManager, WebApiAdaptor } from '@syncfusion/ej2-data';

let remoteData = new DataManager({
  url: "https://bi.syncfusion.com/northwindservice/api/orders",
  adaptor: new WebApiAdaptor(),
  crossDomain: true
});
export default {
  name: "App",
  components: {
    "ejs-pivotview": PivotViewComponent
  },
  data() {
    return {
      dataSourceSettings: {
        dataSource: remoteData,
        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
    }
  }
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-pivotview/styles/material.css";
</style>