Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://www.ag-grid.com/javascript-data-grid/component-loading-cell-renderer/ below:

JavaScript Grid: Loading Component | AG Grid

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

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.

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

interface ILoadingCellRendererComp {
    
    init(params: ILoadingCellRendererParams): void;

    
    getGui(): HTMLElement;
}

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

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

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.

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: {
                
                loadingMessage: '--- CUSTOM LOADING MESSAGE ---',
            },
        };
        } else {
            
            return undefined;
        }
    }
}

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

const gridOptions = {
    suppressServerSideFullWidthLoadingRow: true,
};

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 },
        
    ],
    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.

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4