---
title: "Getting Values"
framework: vue
version: "36.1.0"
---

# Getting Values

Values are mapped into Cells using either `field` or `valueGetter` from the Column Definition.

#### Nested Row Data Example

```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";
import { getData } from "./data";
if (process.env.NODE_ENV !== "production") {
  enableDevValidations();
}

ModuleRegistry.registerModules([ClientSideRowModelModule]);

const VueExample = defineComponent({
  template: `
        <div style="height: 100%">
                <div style="height: 100%; box-sizing: border-box">
      <ag-grid-vue
        style="width: 100%; height: 100%;"
        @grid-ready="onGridReady"
        :columnDefs="columnDefs"
        :defaultColDef="defaultColDef"
        :rowData="rowData"></ag-grid-vue>
      </div>
        </div>
    `,
  components: {
    "ag-grid-vue": AgGridVue,
  },
  setup(props) {
    const gridApi = shallowRef<GridApi | null>(null);
    const columnDefs = ref<ColDef[]>([
      { headerName: "Name (field)", field: "name" },
      // Using dot notation to access nested property
      { headerName: "Country (field & dot notation)", field: "person.country" },
      // Show default header name
      {
        headerName: "Total Medals (valueGetter)",
        valueGetter: (p) =>
          p.data.medals.gold + p.data.medals.silver + p.data.medals.bronze,
      },
    ]);
    const defaultColDef = ref<ColDef>({
      flex: 1,
    });
    const rowData = ref<any[] | null>(getData());

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

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

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

[Live example: Nested Row Data Example](https://www.ag-grid.com/examples/value-getters/column-fields/vue3)

## Field

The Column Definition `field` property maps values from the row data object to the Column's Cells.

The field supports dot notation (e.g. `medals.gold`) to access properties of complex objects.

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

this.rowData = [
    {
        athlete: 'Michael Phelps',
        medals: {
            gold: 8, silver: 1, bronze: 0
        }
    }
];
this.columnDefs = [
    // simple field attribute
    { field: 'athlete' },
    // using dot notation, a Header Name is usually needed
    { field: 'medals.gold', headerName: 'Gold' },
];
```

## Value Getter

A Value Getter is a function that gets called for each row to return the Cell Value for a Column. Typically column cell values are loaded using a `field`, and then a `valueGetter` is used when retrieving the value requires custom logic. Columns with Value Getters usually have manually provided Header Names as the grid cannot derive Header Names from Value Getters like it does with Fields.

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

this.columnDefs = [
    // achieves the same as using 'athlete' for the field
    { headerName: 'Athlete', valueGetter: p => p.data.athlete },
    // using valueGetter to combine 3 values into 1
    { headerName: 'Total Medals', valueGetter: p => p.data.bronze + p.data.silver + p.data.gold }
];
```

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `valueGetter` | `string \| ValueGetterFunc` |  |  | Function or [expression](https://www.ag-grid.com/vue-data-grid/cell-expressions/#column-definition-expressions). Gets the value from your data for display. |

> **Note**
>
> All valueGetters must be pure functions. That means, given the same state of your data, it should consistently return the same result. This is important as the grid will only call your valueGetter once during a redraw, even though the value may be used multiple times. For example, the value will be used to display the cell value, however it can additionally be used to provide values to an aggregation function when grouping.

The example below demonstrates `valueGetter`. The following can be noted from the demo:

- Columns A and B are simple columns using `field`
- Value Getters are used in all subsequent columns as follows:
  - Column 'ID #' prints the row number, taken from the [Row Node](https://www.ag-grid.com/vue-data-grid/row-object/).
  - Column 'A+B' adds A and B.
  - Column 'A * 1000' multiplies A by 1000.
  - Column 'B * 137' multiplies B by 137.
  - Column 'Chain' takes the value 'A+B' and works on it further, thus chaining value getters.
  - Column 'Const' returns back the same value for each column.

#### Value Getters

```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,
  ModuleRegistry,
  ValueGetterParams,
  enableDevValidations,
} from "ag-grid-community";
if (process.env.NODE_ENV !== "production") {
  enableDevValidations();
}

ModuleRegistry.registerModules([ClientSideRowModelModule]);

function hashValueGetter(params: ValueGetterParams) {
  return params.node ? Number(params.node.id) : null;
}

function abValueGetter(params: ValueGetterParams) {
  return params.data.a + params.data.b;
}

function a1000ValueGetter(params: ValueGetterParams) {
  return params.data.a * 1000;
}

function b137ValueGetter(params: ValueGetterParams) {
  return params.data.b * 137;
}

function chainValueGetter(params: ValueGetterParams) {
  return params.getValue("aPlusB") * 1000;
}

function constValueGetter() {
  return 99999;
}

function createRowData() {
  const rowData = [];
  for (let i = 0; i < 100; i++) {
    rowData.push({
      a: Math.floor(i % 4),
      b: Math.floor(i % 7),
    });
  }
  return rowData;
}

const VueExample = defineComponent({
  template: `
        <div style="height: 100%">
                <ag-grid-vue
      style="width: 100%; height: 100%;"
      @grid-ready="onGridReady"
      :columnDefs="columnDefs"
      :defaultColDef="defaultColDef"
      :rowData="rowData"></ag-grid-vue>
        </div>
    `,
  components: {
    "ag-grid-vue": AgGridVue,
  },
  setup(props) {
    const gridApi = shallowRef<GridApi | null>(null);
    const columnDefs = ref<ColDef[]>([
      {
        headerName: "ID #",
        maxWidth: 100,
        valueGetter: hashValueGetter,
      },
      { field: "a" },
      { field: "b" },
      {
        headerName: "A + B",
        colId: "aPlusB",
        valueGetter: abValueGetter,
      },
      {
        headerName: "A * 1000",
        minWidth: 95,
        valueGetter: a1000ValueGetter,
      },
      {
        headerName: "B * 137",
        minWidth: 90,
        valueGetter: b137ValueGetter,
      },
      {
        headerName: "Chain",
        valueGetter: chainValueGetter,
      },
      {
        headerName: "Const",
        minWidth: 85,
        valueGetter: constValueGetter,
      },
    ]);
    const defaultColDef = ref<ColDef>({
      flex: 1,
      minWidth: 75,
      // cellClass: 'number-cell'
    });
    const rowData = ref<any[] | null>(createRowData());

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

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

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

[Live example: Value Getters](https://www.ag-grid.com/examples/value-getters/value-getters/vue3)

## Header Value Getters

See the [Column Header Value Getters](https://www.ag-grid.com/vue-data-grid/column-headers/#header-value-getters) for an example of using `headerValueGetter`.