---
title: "Grid Lifecycle"
framework: vue
version: "36.1.0"
---

# Grid Lifecycle

This section covers some common lifecycle events that are raised after grid initialisation, data updates, and before the grid is destroyed.

> **Note**
>
> The events on this page are listed in the order they are raised.

## Grid Ready

The `gridReady` event fires upon grid initialisation but the grid may not be fully rendered.

**Common Uses**

- Customising Grid via API calls.
- Event listener setup.
- Grid-dependent setup code.

In this example, `gridReady` applies user pinning preferences before rendering data.

#### Using Grid Ready Event

```ts
import {
  createApp,
  defineComponent,
  onBeforeMount,
  ref,
  shallowRef,
} from "vue";

import type { ColDef, GridApi, GridReadyEvent } from "ag-grid-community";
import {
  ClientSideRowModelModule,
  ColumnApiModule,
  ModuleRegistry,
  enableDevValidations,
} from "ag-grid-community";
import { AgGridVue } from "ag-grid-vue3";

import { getData } from "./data";
import "./styles.css";

// Enable extended validations only for development
if (process.env.NODE_ENV !== "production") {
  enableDevValidations();
}

ModuleRegistry.registerModules([ColumnApiModule, ClientSideRowModelModule]);

const VueExample = defineComponent({
  template: `
        <div style="height: 100%">
            <div class="test-container">
                <div class="test-header">
                    <div style="margin-bottom: 1rem;">
                        <input type="checkbox" id="pinFirstColumnOnLoad">
                        <label for="pinFirstColumnOnLoad">Pin first column on load</label>
                    </div>
                    <div style="margin-bottom: 1rem;">
                        <button id="reloadGridButton" v-on:click="reloadGrid()">Reload Grid</button>
                    </div>
                </div>
                <ag-grid-vue
                    v-if="isVisible"              
                    style="width: 100%; height: 100%;"
                    :columnDefs="columnDefs"
                    @grid-ready="onGridReady"
                    :rowData="rowData"></ag-grid-vue>
            </div>
        </div>
    `,
  components: {
    "ag-grid-vue": AgGridVue,
  },
  setup(props) {
    const columnDefs = ref<ColDef[]>([
      {
        field: "name",
        headerName: "Athlete",
        width: 250,
      },
      {
        field: "person.country",
        headerName: "Country",
      },
      {
        field: "person.age",
        headerName: "Age",
      },
      {
        field: "medals.gold",
        headerName: "Gold Medals",
      },
      {
        field: "medals.silver",
        headerName: "Silver Medals",
      },
      {
        field: "medals.bronze",
        headerName: "Bronze Medals",
      },
    ]);

    const gridApi = shallowRef<GridApi | null>(null);

    const rowData = ref<any[]>(null);
    const isVisible = ref(true);

    onBeforeMount(() => {
      rowData.value = getData();
    });

    const reloadGrid = () => {
      isVisible.value = false;
      setTimeout(() => (isVisible.value = true), 1);
    };
    const onGridReady = (params: GridReadyEvent) => {
      gridApi.value = params.api;

      const checkbox = document.querySelector("#pinFirstColumnOnLoad");
      const shouldPinFirstColumn = checkbox && checkbox.checked;

      if (shouldPinFirstColumn) {
        params.api.applyColumnState({
          state: [{ colId: "name", pinned: "left" }],
        });
      }
    };

    return {
      columnDefs,
      gridApi,
      rowData,
      onGridReady,
      reloadGrid,
      isVisible,
    };
  },
});

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

[Live example: Using Grid Ready Event](https://www.ag-grid.com/examples/grid-lifecycle/grid-ready/vue3)

## First Data Rendered

The `firstDataRendered` event fires the first time data is rendered into the grid. It will only be fired once unlike `rowDataUpdated` which is fired on every data change.

## Row Data Updated

The `rowDataUpdated` event fires every time the grid's data changes, by [Updating Row Data](https://www.ag-grid.com/vue-data-grid/data-update-row-data/) or by applying [Transaction Updates](https://www.ag-grid.com/vue-data-grid/data-update-transactions/). In the [Server Side Row Model](https://www.ag-grid.com/vue-data-grid/server-side-model/), use the [Model Updated Event](https://www.ag-grid.com/vue-data-grid/grid-events/#reference-gridLifecycle-modelUpdated) instead.

In this example the time at which `firstDataRendered` and `rowDataUpdated` are fired is recorded above the grid. Note that `firstDataRendered` is only set on the initial load of the grid and is not updated when reloading data.

#### Using Row Data Event

```ts
import {
  createApp,
  defineComponent,
  onBeforeMount,
  ref,
  shallowRef,
} from "vue";
import { AgGridVue } from "ag-grid-vue3";
import "./styles.css";
import {
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  FirstDataRenderedEvent,
  GridApi,
  GridOptions,
  GridReadyEvent,
  ModuleRegistry,
  RowDataUpdatedEvent,
  enableDevValidations,
} from "ag-grid-community";
import { TAthlete } from "./data";
import { fetchDataAsync } from "./data";
if (process.env.NODE_ENV !== "production") {
  enableDevValidations();
}

ModuleRegistry.registerModules([ClientSideRowModelModule]);

const updateRowCount = (id: string) => {
  const element = document.querySelector(`#${id} > .value`);
  element!.textContent = `${new Date().toLocaleTimeString()}`;
};

const setBtnReloadDataDisabled = (disabled: boolean) => {
  (document.getElementById("btnReloadData") as HTMLButtonElement).disabled =
    disabled;
};

const VueExample = defineComponent({
  template: `
        <div style="height: 100%">
                <div class="test-container">
      <div class="test-header">
        <div id="firstDataRendered">First Data Rendered: <span class="value">-</span></div>
        <div id="rowDataUpdated">Row Data Updated: <span class="value">-</span></div>
        <div>
          <button id="btnReloadData" v-on:click="onBtnReloadData()">Reload Data</button>
        </div>
      </div>
      <ag-grid-vue
        style="width: 100%; height: 100%;"
        @grid-ready="onGridReady"
        :columnDefs="columnDefs"
        :loading="true"
        :rowData="rowData"
        @first-data-rendered="onFirstDataRendered"
        @row-data-updated="onRowDataUpdated"></ag-grid-vue>
      </div>
        </div>
    `,
  components: {
    "ag-grid-vue": AgGridVue,
  },
  setup(props) {
    const gridApi = shallowRef<GridApi | null>(null);
    const columnDefs = ref<ColDef[]>([
      { field: "name", headerName: "Athlete" },
      { field: "person.age", headerName: "Age" },
      { field: "medals.gold", headerName: "Gold Medals" },
    ]);
    const rowData = ref<any[]>(null);

    function onFirstDataRendered(event: FirstDataRenderedEvent) {
      updateRowCount("firstDataRendered");
      console.log("First Data Rendered");
    }
    function onRowDataUpdated(event: RowDataUpdatedEvent<TAthlete>) {
      updateRowCount("rowDataUpdated");
      console.log("Row Data Updated");
    }
    function onBtnReloadData() {
      console.log("Reloading Data ...");
      setBtnReloadDataDisabled(true);
      gridApi.value!.setGridOption("loading", true);
      fetchDataAsync()
        .then((data) => {
          console.log("Data Reloaded");
          gridApi.value!.setGridOption("rowData", data);
        })
        .catch((error) => {
          console.error("Failed to reload data", error);
        })
        .finally(() => {
          gridApi.value!.setGridOption("loading", false);
          setBtnReloadDataDisabled(false);
        });
    }
    const onGridReady = (params: GridReadyEvent) => {
      gridApi.value = params.api;

      console.log("Loading Data ...");
      fetchDataAsync()
        .then((data) => {
          console.log("Data Loaded");
          params.api!.setGridOption("rowData", data);
        })
        .catch((error) => {
          console.error("Failed to load data", error);
        })
        .finally(() => {
          params.api!.setGridOption("loading", false);
          setBtnReloadDataDisabled(false);
        });
    };

    return {
      gridApi,
      columnDefs,
      rowData,
      onGridReady,
      onFirstDataRendered,
      onRowDataUpdated,
      onBtnReloadData,
    };
  },
});

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

[Live example: Using Row Data Event](https://www.ag-grid.com/examples/grid-lifecycle/row-data-updated/vue3)

## Grid Pre-Destroyed

The `gridPreDestroyed` event fires just before the grid is destroyed and is removed from the DOM.

**Common Uses**

- Clean up resources.
- Save grid state.
- Disconnect other libraries.

The [Grid State Example](https://www.ag-grid.com/vue-data-grid/grid-state/#saving-and-restoring-state) demonstrates how `gridPreDestroyed` can be used to save and restore grid state.