JavaScript Data GridLoading Cell Component

Use a custom Loading Cell Component to replace the grid's provided loading indicators. The same component interface is used for skeleton cells in the Client-Side and Server-Side Row Models, and for full-width loading rows in the Server-Side Row Model.

For configuration and examples, see the loading guide for your row model:

• Loading Rows for the Client-Side Row Model.
• Server-Side Row Model Loading Rows for datasource-driven loading.

Registering a Loading Cell Component Copy Link

Set loadingCellRenderer and loadingCellRendererParams on a column definition to customise its loading cells. Set them on defaultColDef to provide defaults for all columns. Individual column definitions take precedence over defaultColDef.

const gridOptions = {
    columnDefs: [
        {
            field: 'athlete',
            loadingCellRenderer: CustomLoadingCellRenderer,
            loadingCellRendererParams: {
                loadingMessage: 'Loading athlete...',
            },
        },
    ],

    // other grid options ...
}

For Server-Side Row Model full-width loading rows, configure the component on the grid options.

Loading rows are placeholders: row data is not yet available. Custom loading components should not rely on params.node.data being defined.

Component Interface 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;
}

Dynamic Loading Row Selection Copy Link

Use loadingCellRendererSelector to choose a loading component at runtime. Return the component and any additional parameters, or undefined to fall back to the configured loading component.

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 ---',
            },
        };
    }
    // Use the configured loading cell renderer.
    return undefined;
}

Full Width Loading Row Copy Link

See Full Width Loading Row for the Server-Side Row Model example.

Failed Loading Copy Link

See Failed Loading for handling datasource failures in a custom loading component.

Skeleton Loading Copy Link

See Custom Loading Cells for the Client-Side Row Model, or Skeleton Loading for the Server-Side Row Model.