---
product: "AG Grid"
title: "Loading Rows"
description: "Display skeleton rows while Client-Side Row Model data is loading."
framework: vue
version: "36.2.0"
related:
    - title: "Overview"
      url: "https://www.ag-grid.com/vue-data-grid/overlays-overview/"
    - title: "Provided Overlays"
      url: "https://www.ag-grid.com/vue-data-grid/overlays-provided/"
    - title: "Active Overlay"
      url: "https://www.ag-grid.com/vue-data-grid/overlays-active/"
llms: "https://www.ag-grid.com/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 {
  createApp,
  defineComponent,
  onBeforeMount,
  ref,
  shallowRef,
} from "vue";
import { AgGridVue } from "ag-grid-vue3";
import "./styles.css";
import {
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  GridApi,
  GridOptions,
  GridReadyEvent,
  LoadingRowsOptions,
  ModuleRegistry,
  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;
}

const VueExample = defineComponent({
  template: `
        <div style="height: 100%">
                <div class="example-wrapper">
      <div class="example-header">
        <label>
          <span>loading:</span>
          <input type="checkbox" id="loading-toggle" checked="" v-on:change="onLoadingToggled()">
          </label>
          <label>
            <span>loadingRows.rowCount:</span>
            <input type="number" id="row-count" min="1" max="50" value="10" v-on:change="onRowCountChanged()">
            </label>
          </div>
          <ag-grid-vue
            style="width: 100%; height: 100%;"
            @grid-ready="onGridReady"
            :rowData="rowData"
            :loading="true"
            :loadingRows="loadingRows"
            :columnDefs="columnDefs"></ag-grid-vue>
          </div>
        </div>
    `,
  components: {
    "ag-grid-vue": AgGridVue,
  },
  setup(props) {
    const gridApi = shallowRef<GridApi<IAthlete> | null>(null);
    const rowData = ref<IAthlete[] | null>([
      {
        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 loadingRows = ref<boolean | LoadingRowsOptions>({ rowCount: 10 });
    const columnDefs = ref<ColDef[]>([
      { 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.value.setGridOption("loading", loading);
    }
    function onRowCountChanged() {
      const rowCount =
        document.querySelector<HTMLInputElement>("#row-count")!.valueAsNumber;
      if (!Number.isInteger(rowCount) || rowCount < 1) {
        return;
      }
      gridApi.value.setGridOption("loadingRows", { rowCount });
    }
    const onGridReady = (params: GridReadyEvent) => {
      gridApi.value = params.api;
    };

    return {
      gridApi,
      rowData,
      loadingRows,
      columnDefs,
      onGridReady,
      onLoadingToggled,
      onRowCountChanged,
    };
  },
});

const app = createApp(VueExample);
app.mount("#app");
```

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

> **Note**
>
> For loading rows managed by a server-side datasource, see [Server-Side Row Model Loading Rows](https://www.ag-grid.com/vue-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.

```ts
<ag-grid-vue
    :loading="loading"
    :loadingRows="loadingRows"
    /* other grid options ... */>
</ag-grid-vue>

this.loading = true;
this.loadingRows = {
    rowCount: 10,
};
```

| 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/vue-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 {
  createApp,
  defineComponent,
  onBeforeMount,
  ref,
  shallowRef,
} from "vue";
import { AgGridVue } from "ag-grid-vue3";
import "./styles.css";
import {
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  GridApi,
  GridOptions,
  GridReadyEvent,
  LoadingRowsOptions,
  ModuleRegistry,
  enableDevValidations,
} from "ag-grid-community";
import CustomLoadingCellRenderer from "./customLoadingCellRendererVue";

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

const VueExample = defineComponent({
  template: `
        <div style="height: 100%">
                <div class="example-wrapper">
      <div class="example-header">
        <label>
          <span>loading:</span>
          <input type="checkbox" id="loading-toggle" checked="" v-on:change="onLoadingToggled()">
          </label>
        </div>
        <ag-grid-vue
          style="width: 100%; height: 100%;"
          @grid-ready="onGridReady"
          :rowData="rowData"
          :loading="true"
          :loadingRows="loadingRows"
          :columnDefs="columnDefs"></ag-grid-vue>
        </div>
        </div>
    `,
  components: {
    "ag-grid-vue": AgGridVue,
    CustomLoadingCellRenderer,
  },
  setup(props) {
    const gridApi = shallowRef<GridApi<IAthlete> | null>(null);
    const rowData = ref<IAthlete[] | null>([
      {
        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 loadingRows = ref<boolean | LoadingRowsOptions>({ rowCount: 10 });
    const columnDefs = ref<ColDef[]>([
      {
        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.value.setGridOption("loading", loading);
    }
    const onGridReady = (params: GridReadyEvent) => {
      gridApi.value = params.api;
    };

    return {
      gridApi,
      rowData,
      loadingRows,
      columnDefs,
      onGridReady,
      onLoadingToggled,
    };
  },
});

const app = createApp(VueExample);
app.mount("#app");
```

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