Search results

Loading Animation in React Grid component

02 Dec 2022 / 1 minute to read

The grid has an option to show a loading indicator in-between the time of fetching the data and binding it to the grid during initial rendering or refreshing or after performing any grid action like sorting, filtering, grouping, and more. The grid supports two indicator types, which is achieved by setting the loadingIndicator.indicatorType property to Spinner or Shimmer. The default value of the indicator type is “Spinner.”

In the following sample, the Shimmer indicator is displayed while the grid is loading and refreshing when using the remote data.

Source
Preview
App.jsx
App.tsx
Copied to clipboard
import { DataManager } from '@syncfusion/ej2-data';
import { ColumnDirective, ColumnsDirective, GridComponent, Inject, Page, Sort, Filter } from '@syncfusion/ej2-react-grids';
import * as React from 'react';
export default class App extends React.Component {
    constructor() {
        super(...arguments);
        this.data = new DataManager({
            url: 'https://js.syncfusion.com/demos/ejServices/Wcf/Northwind.svc/Orders/'
        });
    }
    render() {
        return <GridComponent dataSource={this.data} allowPaging={true} pageSettings={{ pageCount: 3 }} height={315} allowFiltering={true} allowSorting={true} loadingIndicator={{ indicatorType: 'Shimmer' }}>
                <ColumnsDirective>
                    <ColumnDirective field='OrderID' headerText='Order ID' width='120' textAlign="Right"/>
                    <ColumnDirective field='CustomerID' headerText='Customer ID' width='150'/>
                    <ColumnDirective field='ShipCity' headerText='Ship City' width='150'/>
                    <ColumnDirective field='ShipName' headerText='Ship Name' width='150'/>
                </ColumnsDirective>
                <Inject services={[Page, Sort, Filter]}/>
               </GridComponent>;
    }
}
Copied to clipboard
import { DataManager } from '@syncfusion/ej2-data';
import { ColumnDirective, ColumnsDirective, GridComponent, Inject, Page, Sort, Filter  } from '@syncfusion/ej2-react-grids';
import * as React from 'react';
export default class App extends React.Component<{}, {}>{
    public data = new DataManager({
                      url: 'https://js.syncfusion.com/demos/ejServices/Wcf/Northwind.svc/Orders/'
                    });
    public render() {
        return <GridComponent dataSource={this.data} allowPaging={true} pageSettings={{ pageCount: 3 }} height={315} allowFiltering={true} allowSorting={true} loadingIndicator= {{ indicatorType: 'Shimmer' }}>
                <ColumnsDirective>
                    <ColumnDirective field='OrderID' headerText='Order ID' width='120' textAlign="Right"/>
                    <ColumnDirective field='CustomerID' headerText='Customer ID' width='150'/>
                    <ColumnDirective field='ShipCity' headerText='Ship City' width='150'/>
                    <ColumnDirective field='ShipName' headerText='Ship Name' width='150'/>
                </ColumnsDirective>
                <Inject services={[Page, Sort, Filter]}/>
               </GridComponent>
    }
}