JavaScript Data GridLoading Component

The Loading Component is displayed for a row to show data is loading.

Full Width Loading Row Copy Link

The example below demonstrates replacing the Provided Loading Component with a Custom Loading Component.

• Custom Loading Component is supplied by name via gridOptions.loadingCellRenderer.
• Custom Loading Component Parameters are supplied using gridOptions.loadingCellRendererParams.
• Example simulates a long delay to display the spinner clearly.
• Scrolling the grid will request more rows and again display the loading cell renderer.

Custom Loading Row Copy Link

interface ILoadingCellRendererComp { // The init(params) method is called on the loading cell renderer once. See below for details on the parameters. init(params: ILoadingCellRendererParams): void; // Returns the DOM element for this loading cell renderer getGui(): HTMLElement; } 

Failed Loading Copy Link

When using a Custom Loading Component, you can add handling for loading failures in the component directly.

In the example below, note that:

• Custom Loading Component is supplied by name via gridOptions.loadingCellRenderer.
• Custom Loading Component Parameters are supplied using gridOptions.loadingCellRendererParams.
• The example simulates a long delay to display the spinner clearly and simulates a loading failure.

Dynamic Loading Row Selection Copy Link

It's possible to determine what Loading Cell Renderer to use dynamically - i.e. at runtime. This requires providing a loadingCellRendererSelector.

loadingCellRendererSelector: (params) => { const useCustomRenderer = ...some condition/check... if (useCustomRenderer) { return { component: CustomLoadingCellRenderer, params: { // parameters to supply to the custom loading cell renderer loadingMessage: '--- CUSTOM LOADING MESSAGE ---', }, }; } else { // no loading cell renderer  return undefined; } } } 

Skeleton Loading Copy Link

The grid can be configured to instead display loading indicators in cells, by enabling suppressServerSideFullWidthLoadingRow.

const gridOptions = { suppressServerSideFullWidthLoadingRow: true, }; 

Custom Loading Cells Copy Link

The default grid behaviour can be overridden in order to provide renderers on a per-column basis.

const gridOptions = { suppressServerSideFullWidthLoadingRow: true, columnDefs: [ { field: 'athlete', loadingCellRenderer: CustomLoadingCellRenderer }, // More columns, with no load renderer... ], defaultColDef: { loadingCellRenderer: () => '', }, }; 

The above example demonstrates the following:

• suppressServerSideFullWidthLoadingRow is enabled, preventing the grid from defaulting to full width loading.
• loadingCellRenderer is configured on the Athlete column, allowing a loading spinner to be displayed for just this column.
• loadingCellRenderer is configured on the defaultColDef providing an empty cell renderer in order to prevent the default grid loading renderer from displaying on other columns.