Customizing the loading indicator in the React Pivot Table component

15 Sep 20254 minutes to read

The Pivot Table displays a loading indicator during data processing operations such as filtering, sorting, and aggregation calculations. The default loading spinner can be customized to match application design requirements using the spinnerTemplate property.

The spinnerTemplate property accepts an HTML string that defines the custom loading indicator appearance. This enables control over the visual presentation, including custom styling and animations.

import { PivotViewComponent } from '@syncfusion/ej2-react-pivotview';
import { DataManager, WebApiAdaptor, Query } from '@syncfusion/ej2-data';
import * as React from 'react';

function App() {
    let dataSourceSettings;
    let pivotObj;
    let dataSource = new DataManager({
        url: 'https://bi.syncfusion.com/northwindservice/api/orders',
        adaptor: new WebApiAdaptor,
        crossDomain: true
    }).executeQuery(new Query().take(8)).then((e) => {
        pivotObj.dataSourceSettings = {
            dataSource: e.result,
            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' }]
        };
    });
    return (<PivotViewComponent ref={d => pivotObj = d} id='PivotView' height={350} spinnerTemplate={'<i class="fa fa-cog fa-spin fa-3x fa-fw"></i>'} dataSourceSettings={dataSourceSettings}></PivotViewComponent>);
};
export default App;
import { IDataSet, PivotViewComponent } from '@syncfusion/ej2-react-pivotview';
import { DataSourceSettingsModel } from '@syncfusion/ej2-pivotview/src/model/datasourcesettings-model';
import { DataManager, WebApiAdaptor, Query, ReturnOption } from '@syncfusion/ej2-data';
import * as React from 'react';

function App() {
  let dataSourceSettings: DataSourceSettingsModel;
  let pivotObj: PivotViewComponent;
  let dataSource: Promise<void> = new DataManager({
    url: 'https://bi.syncfusion.com/northwindservice/api/orders',
    adaptor: new WebApiAdaptor,
    crossDomain: true
  }).executeQuery(new Query().take(8)).then((e: ReturnOption) => {
    pivotObj.dataSourceSettings = {
      dataSource: e.result as IDataSet[],
      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' }]
    }
  });

  return (<PivotViewComponent  ref={ (d: PivotViewComponent) => pivotObj = d } id='PivotView' height={350} spinnerTemplate={'<i class="fa fa-cog fa-spin fa-3x fa-fw"></i>'} dataSourceSettings={dataSourceSettings}></PivotViewComponent>);
};

export default App;

Disabling the loading indicator

The loading indicator can be completely disabled by setting the spinnerTemplate property to an empty string.

function App() {
    return (<PivotViewComponent id='PivotView' height={350} spinnerTemplate={''}></PivotViewComponent>);
};
export default App;