JavaScript Data GridLoading Rows

Version 36.2.0

The Client-Side Row Model can display skeleton rows instead of the loading overlay while row data is loading.

main.ts

import {
  ClientSideRowModelModule,
  GridApi,
  GridOptions,
  ModuleRegistry,
  createGrid,
  enableDevValidations,
} from "ag-grid-community";

if (process.env.NODE_ENV !== "production") {
  enableDevValidations();
}

ModuleRegistry.registerModules([ClientSideRowModelModule]);

interface IAthlete {
  athlete: string;
  country: string;
  sport: string;
  year: number;
  gold: number;
  silver: number;
  bronze: number;
}

let gridApi: GridApi<IAthlete>;

const rowData: IAthlete[] = [
  {
    athlete: "Michael Phelps",
    country: "United States",
    sport: "Swimming",
    year: 2008,
    gold: 8,
    silver: 0,
    bronze: 0,
  },
  {
    athlete: "Natalie Coughlin",
    country: "United States",
    sport: "Swimming",
    year: 2008,
    gold: 1,
    silver: 2,
    bronze: 3,
  },
  {
    athlete: "Aleksey Nemov",
    country: "Russia",
    sport: "Gymnastics",
    year: 2000,
    gold: 2,
    silver: 1,
    bronze: 3,
  },
  {
    athlete: "Alicia Coutts",
    country: "Australia",
    sport: "Swimming",
    year: 2012,
    gold: 1,
    silver: 3,
    bronze: 1,
  },
  {
    athlete: "Missy Franklin",
    country: "United States",
    sport: "Swimming",
    year: 2012,
    gold: 4,
    silver: 0,
    bronze: 1,
  },
  {
    athlete: "Ryan Lochte",
    country: "United States",
    sport: "Swimming",
    year: 2012,
    gold: 2,
    silver: 2,
    bronze: 1,
  },
  {
    athlete: "Chris Hoy",
    country: "Great Britain",
    sport: "Cycling",
    year: 2008,
    gold: 3,
    silver: 0,
    bronze: 0,
  },
  {
    athlete: "Ian Thorpe",
    country: "Australia",
    sport: "Swimming",
    year: 2000,
    gold: 3,
    silver: 2,
    bronze: 0,
  },
];

const gridOptions: GridOptions<IAthlete> = {
  loading: true,
  loadingRows: { rowCount: 10 },
  rowData,
  columnDefs: [
    { field: "athlete" },
    { field: "country" },
    { field: "sport" },
    { field: "year" },
    { field: "gold" },
    { field: "silver" },
    { field: "bronze" },
  ],
};

function onLoadingToggled() {
  const loading =
    document.querySelector<HTMLInputElement>("#loading-toggle")!.checked;
  gridApi.setGridOption("loading", loading);
}

function onRowCountChanged() {
  const rowCount =
    document.querySelector<HTMLInputElement>("#row-count")!.valueAsNumber;
  if (!Number.isInteger(rowCount) || rowCount < 1) {
    return;
  }
  gridApi.setGridOption("loadingRows", { rowCount });
}

const gridDiv = document.querySelector<HTMLElement>("#myGrid")!;
gridApi = createGrid(gridDiv, gridOptions);

if (typeof window !== "undefined") {
  // Attach external event handlers to window so they can be called from index.html
  (<any>window).onLoadingToggled = onLoadingToggled;
  (<any>window).onRowCountChanged = onRowCountChanged;
}

styles.css

.example-wrapper {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.example-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 10px;
}

.example-header label {
    display: flex;
    align-items: center;
    gap: 6px;
}

.example-header input[type='number'] {
    width: 60px;
}

#myGrid {
    flex: 1 1 0px;
    width: 100%;
}

index.html

<div class="example-wrapper">
    <div class="example-header">
        <label>
            <span>loading:</span>
            <input type="checkbox" id="loading-toggle" checked onchange="onLoadingToggled()" />
        </label>
        <label>
            <span>loadingRows.rowCount:</span>
            <input type="number" id="row-count" min="1" max="50" value="10" onchange="onRowCountChanged()" />
        </label>
    </div>
    <div id="myGrid" style="height: 100%"></div>
</div>

For loading rows managed by a server-side datasource, see Server-Side Row Model Loading Rows.

Enabling Loading Rows Copy Link

Set loadingRows=true to use skeleton rows when loading=true. Ten rows are displayed by default. Alternatively, provide LoadingRowsOptions with rowCount to configure the number displayed.

const gridOptions = {
    loading: true,
    loadingRows: {
        rowCount: 10,
    },

    // other grid options ...
}

boolean

default: undefined

Show or hide the loading UI.

true: the loading overlay is shown, or skeleton rows if loadingRows is enabled (Client-Side Row Model only).

false: the loading UI is hidden.

undefined: the grid will automatically show the loading overlay until rowData and columnDefs are provided. (Client Side Row Model only)

boolean | LoadingRowsOptions

default: false

Display skeleton rows instead of the loading overlay when loading=true (Client-Side Row Model only). Set to true to display ten rows, or provide options to configure the row count. This option does not start loading; set loading=true to show the skeleton rows.

Loading rows are visual placeholders and are not included in Client-Side Row Model operations such as sorting, filtering, grouping or selection. When loading finishes, set loading=false to display the row data.

Both options can be updated at runtime. Update loadingRows to change the row count while loading, or set it to false to switch back to the overlay without ending the loading state.

Custom Loading Cells Copy Link

Set loadingCellRenderer and loadingCellRendererParams on a column definition to customise that column, or on defaultColDef to customise every loading cell. See Loading Cell Component for component interfaces, parameters and dynamic component selection.

The following example uses a custom loading component for the Athlete column while the other columns retain the default skeleton effect.

main.ts

import {
  ClientSideRowModelModule,
  GridApi,
  GridOptions,
  ModuleRegistry,
  createGrid,
  enableDevValidations,
} from "ag-grid-community";
import { CustomLoadingCellRenderer } from "./customLoadingCellRenderer";

if (process.env.NODE_ENV !== "production") {
  enableDevValidations();
}

ModuleRegistry.registerModules([ClientSideRowModelModule]);

interface IAthlete {
  athlete: string;
  country: string;
  sport: string;
  year: number;
  gold: number;
  silver: number;
  bronze: number;
}

let gridApi: GridApi<IAthlete>;

const rowData: IAthlete[] = [
  {
    athlete: "Michael Phelps",
    country: "United States",
    sport: "Swimming",
    year: 2008,
    gold: 8,
    silver: 0,
    bronze: 0,
  },
  {
    athlete: "Natalie Coughlin",
    country: "United States",
    sport: "Swimming",
    year: 2008,
    gold: 1,
    silver: 2,
    bronze: 3,
  },
  {
    athlete: "Aleksey Nemov",
    country: "Russia",
    sport: "Gymnastics",
    year: 2000,
    gold: 2,
    silver: 1,
    bronze: 3,
  },
  {
    athlete: "Alicia Coutts",
    country: "Australia",
    sport: "Swimming",
    year: 2012,
    gold: 1,
    silver: 3,
    bronze: 1,
  },
  {
    athlete: "Missy Franklin",
    country: "United States",
    sport: "Swimming",
    year: 2012,
    gold: 4,
    silver: 0,
    bronze: 1,
  },
  {
    athlete: "Ryan Lochte",
    country: "United States",
    sport: "Swimming",
    year: 2012,
    gold: 2,
    silver: 2,
    bronze: 1,
  },
  {
    athlete: "Chris Hoy",
    country: "Great Britain",
    sport: "Cycling",
    year: 2008,
    gold: 3,
    silver: 0,
    bronze: 0,
  },
  {
    athlete: "Ian Thorpe",
    country: "Australia",
    sport: "Swimming",
    year: 2000,
    gold: 3,
    silver: 2,
    bronze: 0,
  },
];

const gridOptions: GridOptions<IAthlete> = {
  loading: true,
  loadingRows: { rowCount: 10 },
  rowData,
  columnDefs: [
    {
      field: "athlete",
      loadingCellRenderer: CustomLoadingCellRenderer,
      loadingCellRendererParams: {
        loadingMessage: "Loading athletes...",
      },
    },
    { field: "country" },
    { field: "sport" },
    { field: "year" },
    { field: "gold" },
    { field: "silver" },
    { field: "bronze" },
  ],
};

function onLoadingToggled() {
  const loading =
    document.querySelector<HTMLInputElement>("#loading-toggle")!.checked;
  gridApi.setGridOption("loading", loading);
}

const gridDiv = document.querySelector<HTMLElement>("#myGrid")!;
gridApi = createGrid(gridDiv, gridOptions);

if (typeof window !== "undefined") {
  // Attach external event handlers to window so they can be called from index.html
  (<any>window).onLoadingToggled = onLoadingToggled;
}

styles.css

.example-wrapper {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.example-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 10px;
}

.example-header label {
    display: flex;
    align-items: center;
    gap: 6px;
}

.example-header input[type='number'] {
    width: 60px;
}

#myGrid {
    flex: 1 1 0px;
    width: 100%;
}

customLoadingCellRenderer.ts

import type { ILoadingCellRendererComp, ILoadingCellRendererParams } from 'ag-grid-community';

export class CustomLoadingCellRenderer implements ILoadingCellRendererComp {
    private eGui!: HTMLElement;

    init(params: ILoadingCellRendererParams & { loadingMessage: string }) {
        this.eGui = document.createElement('div');
        this.eGui.className = 'ag-custom-loading-cell';
        this.eGui.innerHTML = `<i class="fas fa-spinner fa-pulse"></i> <span>${params.loadingMessage}</span>`;
    }

    getGui() {
        return this.eGui;
    }
}

index.html

<div class="example-wrapper">
    <div class="example-header">
        <label>
            <span>loading:</span>
            <input type="checkbox" id="loading-toggle" checked onchange="onLoadingToggled()" />
        </label>
    </div>
    <div id="myGrid" style="height: 100%"></div>
</div>

Getting Started

AI Features

Layout & Styling

Charting

Core Features

Advanced Features

JavaScript Data GridLoading Rows

Enabling Loading Rows Copy Link

Custom Loading Cells Copy Link