Vue 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.

<ag-grid-vue
    :columnDefs="columnDefs"
    /* other grid options ... */>
</ag-grid-vue>

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

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

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