Getting Started

Setup

Tutorials

Compatibility & Security

AI Features

Layout & Styling

Theming

Design System Grid Layout

Charting

Sparklines

Integrated Charts

Standalone Charts

Core Features

Columns

Rows

Cells

Filtering

Selection

Editing

Updating Data

Interactivity

Advanced Features

Row Grouping

Aggregation

Pivoting

Tree Data

Master Detail

Accessories

Server-Side Data

Import & Export

State & Lifecycle

Performance

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.

Angular Example - Component Loading Cell Renderer - Custom Loading Cell Renderer

Example Error: Error: Failed to fetch Instantiating https://www.ag-grid.com/examples/component-loading-cell-renderer/custom-loading-cell-renderer/angular/main.ts Loading /examples/component-loading-cell-renderer/custom-loading-cell-renderer/angular/main.ts

Hide filesViewing: app.component.ts

• custom-loading-cell-renderer.component.ts
• main.ts
• app.component.ts
• interfaces.ts

Console

Clear

Console logs from the example shown here...

Custom Loading Row Copy Link

The interface for the loading cell renderer component is as follows:

interface ILoadingCellRendererAngularComp {

// Mandatory - The agInit(params) method is called on the loading cell renderer once.
    agInit(params: ILoadingCellRendererParams): void;
}

The agInit(params) method takes a params object with the items listed below:

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

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.

Angular Example - Component Loading Cell Renderer - Custom Loading Cell Renderer Failed

Example Error: Error: Failed to fetch Instantiating https://www.ag-grid.com/examples/component-loading-cell-renderer/custom-loading-cell-renderer-failed/angular/main.ts Loading /examples/component-loading-cell-renderer/custom-loading-cell-renderer-failed/angular/main.ts

Hide filesViewing: app.component.ts

• custom-loading-cell-renderer.component.ts
• main.ts
• app.component.ts
• interfaces.ts

Console

Clear

Console logs from the example shown here...

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.

Angular Example - Component Loading Cell Renderer - Skeleton Loading Cell Renderer

Example Error: Error: Failed to fetch Instantiating https://www.ag-grid.com/examples/component-loading-cell-renderer/skeleton-loading-cell-renderer/angular/main.ts Loading /examples/component-loading-cell-renderer/skeleton-loading-cell-renderer/angular/main.ts

Hide filesViewing: app.component.ts

• main.ts
• app.component.ts
• interfaces.ts

Console

Clear

Console logs from the example shown here...

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.

Angular Example - Component Loading Cell Renderer - Custom Cell Loading Renderer

Example Error: Error: Failed to fetch Instantiating https://www.ag-grid.com/examples/component-loading-cell-renderer/custom-cell-loading-renderer/angular/main.ts Loading /examples/component-loading-cell-renderer/custom-cell-loading-renderer/angular/main.ts

Hide filesViewing: app.component.ts

• custom-loading-cell-renderer.component.ts
• main.ts
• app.component.ts
• interfaces.ts

Console

Clear

Console logs from the example shown here...

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.