Vue Data GridLoading Component

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

Full Width Loading Row

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

Any valid Vue component can be a Loading Cell Renderer Component.

When a custom Loading Cell Renderer Component is instantiated within the the grid the following will be made available on this.params:

Properties available on the ILoadingCellRendererParams<TData = any, TContext = any> interface.

The row node.
The grid api.
context
TContext
Application context as set on gridOptions.context.

Failed Loading

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

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 {
           // the component to use - registered previously
           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

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

const gridOptions = {
    suppressServerSideFullWidthLoadingRow: true,
};

Custom Loading Cells

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.