---
product: "AG Grid"
title: "Loading Rows"
description: "Display skeleton rows while Client-Side Row Model data is loading."
framework: javascript
version: "36.2.0"
related:
    - title: "Overview"
      url: "https://www.ag-grid.com/archive/36.2.0/javascript-data-grid/overlays-overview/"
    - title: "Provided Overlays"
      url: "https://www.ag-grid.com/archive/36.2.0/javascript-data-grid/overlays-provided/"
    - title: "Active Overlay"
      url: "https://www.ag-grid.com/archive/36.2.0/javascript-data-grid/overlays-active/"
llms: "https://www.ag-grid.com/archive/36.2.0/llms.txt"
---

# Loading Rows

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

#### Loading Rows

```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;
}
```

[Live example: Loading Rows](https://www.ag-grid.com/archive/36.2.0/examples/loading-rows/client-side-loading-rows/typescript/)

> **Note**
>
> For loading rows managed by a server-side datasource, see [Server-Side Row Model Loading Rows](https://www.ag-grid.com/archive/36.2.0/javascript-data-grid/server-side-model-loading-rows/).

## Enabling Loading Rows

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.

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

    // other grid options ...
}
```

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `loading` | `boolean` |  |  |  |
| `loadingRows` | `boolean \| LoadingRowsOptions` |  |  |  |

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

Set `loadingCellRenderer` and `loadingCellRendererParams` on a column definition to customise that column, or on `defaultColDef` to customise every loading cell. See [Loading Cell Component](https://www.ag-grid.com/archive/36.2.0/javascript-data-grid/component-loading-cell-renderer/) 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.

#### Custom Loading Cells

```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;
}
```

[Live example: Custom Loading Cells](https://www.ag-grid.com/archive/36.2.0/examples/loading-rows/custom-loading-cells/typescript/)