---
title: "Row Data"
framework: vue
version: "36.1.0"
---

# Row Data

Provide an array of data to the grid via the `rowData` property to render a row for each item in the array.

## Row Data

When using the default row model - [Client Side](https://www.ag-grid.com/vue-data-grid/row-models/#client-side) data is provided to the grid via the `rowData` property.

#### Row Data

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

ModuleRegistry.registerModules([ClientSideRowModelModule]);

const VueExample = defineComponent({
  template: `
        <div style="height: 100%">
                <ag-grid-vue
      style="width: 100%; height: 100%;"
      @grid-ready="onGridReady"
      :rowData="rowData"
      :columnDefs="columnDefs"></ag-grid-vue>
        </div>
    `,
  components: {
    "ag-grid-vue": AgGridVue,
  },
  setup(props) {
    const gridApi = shallowRef<GridApi | null>(null);
    const rowData = ref<any[] | null>([
      { make: "Toyota", model: "Celica", price: 35000 },
      { make: "Ford", model: "Mondeo", price: 32000 },
      { make: "Porsche", model: "Boxster", price: 72000 },
      { make: "BMW", model: "M50", price: 60000 },
      { make: "Aston Martin", model: "DBX", price: 190000 },
    ]);
    const columnDefs = ref<ColDef[]>([
      { field: "make" },
      { field: "model" },
      { field: "price" },
    ]);

    const onGridReady = (params: GridReadyEvent) => {
      gridApi.value = params.api;
    };

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

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

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

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

this.rowData = [
    { make: "Toyota", model: "Celica", price: 35000 },
    { make: "Ford", model: "Mondeo", price: 32000 },
    { make: "Porsche", model: "Boxster", price: 72000 },
];
```

> **Note**
>
> If you are using TypeScript you may wish to provide the grid with your row data type for an improved developer experience. See [TypeScript Generics](https://www.ag-grid.com/vue-data-grid/typescript-generics/) for more details.

## Updating Row Data

The simplest way to update `rowData` is to pass a new array of data to the grid. For full details on updating row data, including transactions, see [Updating Data](https://www.ag-grid.com/vue-data-grid/data-update/).

## Row IDs

Providing a unique ID for each row allows the grid to work optimally across a range of features. It is strongly recommended to provide row IDs by passing a function that returns a string to the `getRowId` grid option. This function should always return the same string for a given row, and no two rows should share the same ID.

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `getRowId` | `GetRowIdFunc` |  |  | Provide a pure function that returns a string ID to uniquely identify a given row. This enables the grid to work optimally with data changes and updates. [Initial](https://www.ag-grid.com/vue-data-grid/grid-interface/#initial-grid-options). |

#### Get Row ID

```ts
import {
  createApp,
  defineComponent,
  onBeforeMount,
  ref,
  shallowRef,
} from "vue";
import { AgGridVue } from "ag-grid-vue3";
import {
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  GetRowIdFunc,
  GetRowIdParams,
  GridApi,
  GridOptions,
  GridReadyEvent,
  ModuleRegistry,
  enableDevValidations,
} from "ag-grid-community";
if (process.env.NODE_ENV !== "production") {
  enableDevValidations();
}

ModuleRegistry.registerModules([ClientSideRowModelModule]);

const VueExample = defineComponent({
  template: `
        <div style="height: 100%">
                <ag-grid-vue
      style="width: 100%; height: 100%;"
      @grid-ready="onGridReady"
      :columnDefs="columnDefs"
      :rowData="rowData"
      :defaultColDef="defaultColDef"
      :getRowId="getRowId"></ag-grid-vue>
        </div>
    `,
  components: {
    "ag-grid-vue": AgGridVue,
  },
  setup(props) {
    const gridApi = shallowRef<GridApi | null>(null);
    const columnDefs = ref<ColDef[]>([
      { field: "id", headerName: "Row ID" },
      { field: "make" },
      { field: "model" },
      { field: "price" },
    ]);
    const rowData = ref<any[] | null>([
      { id: "c1", make: "Toyota", model: "Celica", price: 35000 },
      { id: "c2", make: "Ford", model: "Mondeo", price: 32000 },
      { id: "c8", make: "Porsche", model: "Boxster", price: 72000 },
      { id: "c4", make: "BMW", model: "M50", price: 60000 },
      { id: "c14", make: "Aston Martin", model: "DBX", price: 190000 },
    ]);
    const defaultColDef = ref<ColDef>({
      flex: 1,
    });
    const getRowId = ref<GetRowIdFunc>((params: GetRowIdParams) =>
      String(params.data.id),
    );

    const onGridReady = (params: GridReadyEvent) => {
      gridApi.value = params.api;
    };

    return {
      gridApi,
      columnDefs,
      rowData,
      defaultColDef,
      getRowId,
      onGridReady,
    };
  },
});

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

[Live example: Get Row ID](https://www.ag-grid.com/examples/row-ids/get-row-id/vue3)

## Row Nodes

Every row displayed in the grid is represented by a [Row Node](https://www.ag-grid.com/vue-data-grid/row-interface/) which exposes stateful attributes and methods for directly interacting with the row.

Row Nodes are accessed via [Grid API](https://www.ag-grid.com/vue-data-grid/grid-api/) methods, as well as provided as props for items such as [Cell Component](https://www.ag-grid.com/vue-data-grid/component-cell-renderer/).

The following buttons log the data to the developer console.

#### Row Node

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

ModuleRegistry.registerModules([RowApiModule, ClientSideRowModelModule]);

const VueExample = defineComponent({
  template: `
        <div style="height: 100%">
                <div class="example-wrapper">
      <div style="margin-bottom: 1rem">
        <button v-on:click="getAllRows()">Log All Rows</button>
        <button v-on:click="getRowById()">Get ONE Row</button>
      </div>
      <ag-grid-vue
        style="width: 100%; height: 100%;"
        @grid-ready="onGridReady"
        :columnDefs="columnDefs"
        :rowData="rowData"
        :defaultColDef="defaultColDef"
        :getRowId="getRowId"></ag-grid-vue>
      </div>
        </div>
    `,
  components: {
    "ag-grid-vue": AgGridVue,
  },
  setup(props) {
    const gridApi = shallowRef<GridApi | null>(null);
    const columnDefs = ref<ColDef[]>([
      { field: "id", headerName: "Row ID" },
      { field: "make" },
      { field: "model" },
      { field: "price" },
    ]);
    const rowData = ref<any[] | null>([
      { id: "c1", make: "Toyota", model: "Celica", price: 35000 },
      { id: "c2", make: "Ford", model: "Mondeo", price: 32000 },
      { id: "c8", make: "Porsche", model: "Boxster", price: 72000 },
      { id: "c4", make: "BMW", model: "M50", price: 60000 },
      { id: "c14", make: "Aston Martin", model: "DBX", price: 190000 },
    ]);
    const defaultColDef = ref<ColDef>({
      flex: 1,
    });
    const getRowId = ref<GetRowIdFunc>((params: GetRowIdParams) =>
      String(params.data.id),
    );

    function getAllRows() {
      gridApi.value!.forEachNode((rowNode) => {
        console.log(`=============== ROW ${rowNode.rowIndex}`);
        console.log(`id = ${rowNode.id}`);
        console.log(`rowIndex = ${rowNode.rowIndex}`);
        console.log(`data = ${JSON.stringify(rowNode.data)}`);
        console.log(`group = ${rowNode.group}`);
        console.log(`height = ${rowNode.rowHeight}px`);
        console.log(`isSelected = ${rowNode.isSelected()}`);
      });
    }
    function getRowById() {
      const rowNode = gridApi.value!.getRowNode("c2");
      if (rowNode && rowNode.id == "c2") {
        console.log(`################ Got Row Node C2`);
        console.log(`data = ${JSON.stringify(rowNode.data)}`);
      }
    }
    const onGridReady = (params: GridReadyEvent) => {
      gridApi.value = params.api;
    };

    return {
      gridApi,
      columnDefs,
      rowData,
      defaultColDef,
      getRowId,
      onGridReady,
      getAllRows,
      getRowById,
    };
  },
});

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

[Live example: Row Node](https://www.ag-grid.com/examples/row-ids/row-node/vue3)

Check the [Row Reference](https://www.ag-grid.com/vue-data-grid/row-object/) and [Row Events](https://www.ag-grid.com/vue-data-grid/row-events/) for all items available on the [Row Node](https://www.ag-grid.com/vue-data-grid/row-interface/).