---
title: "Column Definitions"
framework: vue
version: "36.1.0"
---

# Column Definitions

Each column in the grid is defined using a Column Definition (`ColDef`). Columns are positioned in the grid according to the order the Column Definitions are specified in the Grid Options.

#### Simple Definitions

```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 { IOlympicData } from "./interfaces";
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"
        :rowData="rowData"></ag-grid-vue>
      </div>
        </div>
    `,
  components: {
    "ag-grid-vue": AgGridVue,
  },
  setup(props) {
    const gridApi = shallowRef<GridApi<IOlympicData> | null>(null);
    const columnDefs = ref<ColDef[]>([
      { field: "athlete" },
      { field: "sport" },
      { field: "age" },
    ]);
    const rowData = ref<IOlympicData[]>(null);

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

      const updateData = (data) => (rowData.value = data);

      fetch("https://www.ag-grid.com/example-assets/olympic-winners.json")
        .then((resp) => resp.json())
        .then((data) => updateData(data));
    };

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

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

[Live example: Simple Definitions](https://www.ag-grid.com/examples/column-definitions/simple/vue3)

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

this.columnDefs = [
    { field: 'athlete' },
    { field: 'sport' },
    { field: 'age' }
];
```

See [Column Options](https://www.ag-grid.com/vue-data-grid/column-properties/) for all available properties.

## Column Defaults

Use `defaultColDef` to set properties across ALL Columns.

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

this.defaultColDef = {
    width: 150,
    cellStyle: { fontWeight: 'bold' },
};
```

#### Default Col Def

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

ModuleRegistry.registerModules([CellStyleModule, 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<IOlympicData> | null>(null);
    const columnDefs = ref<ColDef[]>([
      { field: "athlete" },
      { field: "sport" },
      { field: "age" },
    ]);
    const defaultColDef = ref<ColDef>({
      width: 150,
      cellStyle: { fontWeight: "bold" },
    });
    const rowData = ref<IOlympicData[]>(null);

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

      const updateData = (data) => (rowData.value = data);

      fetch("https://www.ag-grid.com/example-assets/olympic-winners.json")
        .then((resp) => resp.json())
        .then((data) => updateData(data));
    };

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

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

[Live example: Default Col Def](https://www.ag-grid.com/examples/column-definitions/default-col-def/vue3)

## Cell Data Types

The grid provides built-in [Cell Data Types](https://www.ag-grid.com/vue-data-grid/cell-data-types/) for common data types such as `text`, `number`, `boolean`, `date` and more. By default these types are [inferred](https://www.ag-grid.com/vue-data-grid/cell-data-types/#inferring-data-types) from the row data and configure appropriate rendering, editing, filtering, and sorting behaviour for each column without the need for explicit configuration via `columnDefs`.

## Column Types

Use `columnTypes` to define a set of Column properties to be applied together. The properties in a column type are applied to a Column by setting its `type` property.

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

// Define column types
this.columnTypes = {
    currency: {
        width: 150,
        valueFormatter: currencyFormatter
    },
    shaded: {
        cellClass: 'shaded-class'
    }
};
this.columnDefs = [
    { field: 'productName'},

    // uses properties from currency type
    { field: 'boughtPrice', type: 'currency'},

    // uses properties from currency AND shaded types
    { field: 'soldPrice', type: ['currency', 'shaded'] },
];
```

> **Note**
>
> Column Types work on Columns only and not Column Groups.

The below example shows Column Types.

#### Column Definition Example

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

ModuleRegistry.registerModules([CellStyleModule, ClientSideRowModelModule]);

interface SalesRecord {
  productName: string;
  boughtPrice: number;
  soldPrice: number;
}

function currencyFormatter(params: ValueFormatterParams) {
  const value = Math.floor(params.value);
  if (isNaN(value)) {
    return "";
  }
  return "£" + value.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1,");
}

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"
        :columnTypes="columnTypes"
        :columnDefs="columnDefs"
        :rowData="rowData"></ag-grid-vue>
      </div>
        </div>
    `,
  components: {
    "ag-grid-vue": AgGridVue,
  },
  setup(props) {
    const gridApi = shallowRef<GridApi<SalesRecord> | null>(null);
    const columnTypes = ref<ColTypeDefs>({
      currency: {
        width: 150,
        valueFormatter: currencyFormatter,
      },
      shaded: {
        cellClass: "shaded-class",
      },
    });
    const columnDefs = ref<ColDef[]>([
      { field: "productName" },
      // uses properties from currency type
      { field: "boughtPrice", type: "currency" },
      // uses properties from currency AND shaded types
      { field: "soldPrice", type: ["currency", "shaded"] },
    ]);
    const rowData = ref<SalesRecord[] | null>([
      { productName: "Lamp", boughtPrice: 100, soldPrice: 200 },
      { productName: "Chair", boughtPrice: 150, soldPrice: 300 },
      { productName: "Desk", boughtPrice: 200, soldPrice: 400 },
    ]);

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

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

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

[Live example: Column Definition Example](https://www.ag-grid.com/examples/column-definitions/column-types/vue3)

## Provided Column Types

The grid provides the Column Types `rightAligned` and `numericColumn`. Both of these types right align the header and cell contents by applying CSS classes `ag-right-aligned-header` to Column Headers and `ag-right-aligned-cell` to Cells.

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

this.columnDefs = [
    { headerName: 'Column A', field: 'a' },
    { headerName: 'Column B', field: 'b', type: 'rightAligned' },
    { headerName: 'Column C', field: 'c', type: 'numericColumn' },
];
```

> **Note**
>
> The provided column types use cell classes to apply styling. The `CellStyleModule` is required for these types to work correctly.

## Updating Columns

Columns can be controlled by updating the column state, or updating the column definition.

[Column State](https://www.ag-grid.com/vue-data-grid/column-state/) should be used when restoring a users grid, for example saving and restoring column widths.

Column Definitions should be updated to modify properties that the user cannot control, and as such are not supported by Column State. Whilst column definitions can be used to change stateful properties, this can cause additional side effects.

### Using Column State

The [Grid Api](https://www.ag-grid.com/vue-data-grid/grid-api/#reference-state-applyColumnState) function `applyColumnState` can be used to update [Column State](https://www.ag-grid.com/vue-data-grid/column-state/).

```ts
// Sort Athlete column ascending
this.gridApi.applyColumnState({
    state: [
        {
            colId: 'athlete',
            sort: 'asc'
        }
    ]
});
```

In the example below, use the 'Sort Athlete' button to apply a column state.

#### Column State

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

ModuleRegistry.registerModules([
  ColumnApiModule,
  ColumnAutoSizeModule,
  ClientSideRowModelModule,
]);

const VueExample = defineComponent({
  template: `
        <div style="height: 100%">
                <div class="test-container">
      <div class="test-header">
        <button v-on:click="onBtSortAthlete()">Sort Athlete</button>
        <button v-on:click="onBtClearAllSorting()">Clear All Sorting</button>
      </div>
      <ag-grid-vue
        style="width: 100%; height: 100%;"
        @grid-ready="onGridReady"
        :columnDefs="columnDefs"
        :autoSizeStrategy="autoSizeStrategy"
        :rowData="rowData"></ag-grid-vue>
      </div>
        </div>
    `,
  components: {
    "ag-grid-vue": AgGridVue,
  },
  setup(props) {
    const gridApi = shallowRef<GridApi<IOlympicData> | null>(null);
    const columnDefs = ref<ColDef[]>([
      { field: "athlete" },
      { field: "age" },
      { field: "country" },
      { field: "sport" },
    ]);
    const autoSizeStrategy = ref<AutoSizeStrategy>({
      type: "fitGridWidth",
    });
    const rowData = ref<IOlympicData[]>(null);

    function onBtSortAthlete() {
      gridApi.value!.applyColumnState({
        state: [{ colId: "athlete", sort: "asc" }],
      });
    }
    function onBtClearAllSorting() {
      gridApi.value!.applyColumnState({
        defaultState: { sort: null },
      });
    }
    const onGridReady = (params: GridReadyEvent) => {
      gridApi.value = params.api;

      const updateData = (data) => (rowData.value = data);

      fetch("https://www.ag-grid.com/example-assets/small-olympic-winners.json")
        .then((resp) => resp.json())
        .then((data) => updateData(data));
    };

    return {
      gridApi,
      columnDefs,
      autoSizeStrategy,
      rowData,
      onGridReady,
      onBtSortAthlete,
      onBtClearAllSorting,
    };
  },
});

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

[Live example: Column State](https://www.ag-grid.com/examples/column-definitions/column-state/vue3)

### Updating Column Definitions

To update an attribute by [Updating Column Definitions](https://www.ag-grid.com/vue-data-grid/column-updating-definitions/#changing-column-definition), pass a new array of [Column Definitions](https://www.ag-grid.com/vue-data-grid/column-definitions/) to the grid options.

```
// Define new column definitions
const updatedHeaderColumnDefs = [
  { field: 'athlete', headerName: 'C1' },
  { field: 'age', headerName: 'C2' },
  { field: 'country', headerName: 'C3' },
  { field: 'sport', headerName: 'C4' },
]
// Supply new column definitions to the grid
gridApi.setGridOption('columnDefs', updatedHeaderColumnDefs);
```

In the example below, use the 'Update Header Names' button to update the column definitions.

#### Column Definition Update

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

ModuleRegistry.registerModules([
  ColumnAutoSizeModule,
  ClientSideRowModelModule,
]);

const columnDefinitions: ColDef[] = [
  { field: "athlete" },
  { field: "age" },
  { field: "country" },
  { field: "sport" },
];

const updatedHeaderColumnDefs: ColDef[] = [
  { field: "athlete", headerName: "C1" },
  { field: "age", headerName: "C2" },
  { field: "country", headerName: "C3" },
  { field: "sport", headerName: "C4" },
];

const VueExample = defineComponent({
  template: `
        <div style="height: 100%">
                <div class="test-container">
      <div class="test-header">
        <button v-on:click="onBtUpdateHeaders()">Update Header Names</button>
        <button v-on:click="onBtRestoreHeaders()">Restore Original Column Definitions</button>
      </div>
      <ag-grid-vue
        style="width: 100%; height: 100%;"
        @grid-ready="onGridReady"
        :columnDefs="columnDefs"
        :autoSizeStrategy="autoSizeStrategy"
        :rowData="rowData"></ag-grid-vue>
      </div>
        </div>
    `,
  components: {
    "ag-grid-vue": AgGridVue,
  },
  setup(props) {
    const gridApi = shallowRef<GridApi<IOlympicData> | null>(null);
    const columnDefs = ref<ColDef[]>(columnDefinitions);
    const autoSizeStrategy = ref<AutoSizeStrategy>({
      type: "fitGridWidth",
    });
    const rowData = ref<IOlympicData[]>(null);

    function onBtUpdateHeaders() {
      gridApi.value!.setGridOption("columnDefs", updatedHeaderColumnDefs);
    }
    function onBtRestoreHeaders() {
      gridApi.value!.setGridOption("columnDefs", columnDefinitions);
    }
    const onGridReady = (params: GridReadyEvent) => {
      gridApi.value = params.api;

      const updateData = (data) => (rowData.value = data);

      fetch("https://www.ag-grid.com/example-assets/small-olympic-winners.json")
        .then((resp) => resp.json())
        .then((data) => updateData(data));
    };

    return {
      gridApi,
      columnDefs,
      autoSizeStrategy,
      rowData,
      onGridReady,
      onBtUpdateHeaders,
      onBtRestoreHeaders,
    };
  },
});

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

[Live example: Column Definition Update](https://www.ag-grid.com/examples/column-definitions/column-definition-update/vue3)