---
title: "Cell Data Types"
framework: vue
version: "36.1.0"
---

# Cell Data Types

Working with values of different data types is made easy by using cell data types.

This allows different grid features to work without any additional configuration, including [Rendering](https://www.ag-grid.com/vue-data-grid/cell-content/), [Editing](https://www.ag-grid.com/vue-data-grid/cell-editing/), [Filtering](https://www.ag-grid.com/vue-data-grid/filtering/), [Sorting](https://www.ag-grid.com/vue-data-grid/row-sorting/), [Row Grouping](https://www.ag-grid.com/vue-data-grid/grouping/) and Import & Export ([CSV Export](https://www.ag-grid.com/vue-data-grid/csv-export/), [Excel Export](https://www.ag-grid.com/vue-data-grid/excel-export/), [Clipboard](https://www.ag-grid.com/vue-data-grid/clipboard/)).

## Enable Cell Data Types

There are a number of pre-defined cell data types: `'text'`, `'number'`, `'bigint'`, `'boolean'`, `'date'`, `'dateString'`, `'dateTime'`, `'dateTimeString'` and `'object'`.

These are enabled by default, with the data type being inferred from the row data if possible (see [Inferring Data Types](#inferring-data-types)).

Specific cell data types can also be defined by setting the `cellDataType` property on the column definition.

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

this.columnDefs = [
    {
        field: 'athlete',
        // enables cell data type `text`
        cellDataType: 'text'
    }
];
```

The following example demonstrates the pre-defined cell data types (most of which are inferred from the row data):

- The **Athlete** column has a `'text'` data type.
- The **Age** column has a `'number'` data type.
- The **Total (BigInt)** column has a `'bigint'` data type.
- The **Gold** column has a `'boolean'` data type.
- The **Date** column has a `'date'` data type (cell values are `Date` objects).
- The **DateTime** column has a `'dateTime'` data type (cell values are `Date` objects). This is explicitly set to `cellDataType: 'dateTime'` as `Date` objects are inferred to be `'date'` data type.
- The **Date (String)** column has a `'dateString'` data type (cell values are `string`s representing dates).
- The **DateTime (String)** column has a `'dateTimeString'` data type (cell values are `string`s representing dates).
- The **Country** column has an `'object'` data type. This also [Overrides the Pre-Defined Cell Data Type Definition](#overriding-the-pre-defined-cell-data-type-definitions) so that the value parser and formatter work with the object structure.

#### Enable Cell Data Types

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

ModuleRegistry.registerModules([
  BigIntFilterModule,
  NumberEditorModule,
  NumberFilterModule,
  CheckboxEditorModule,
  DateFilterModule,
  DateEditorModule,
  TextEditorModule,
  TextFilterModule,
  ClientSideRowModelModule,
]);

interface IOlympicDataTypes extends IOlympicData {
  dateObject: Date;
  dateTime: Date;
  dateTimeString: string;
  hasGold: boolean;
  hasSilver: boolean;
  medalsBigInt: bigint;
  countryObject: {
    name: string;
  };
}

const VueExample = defineComponent({
  template: `
        <div style="height: 100%">
                <ag-grid-vue
      style="width: 100%; height: 100%;"
      @grid-ready="onGridReady"
      :columnDefs="columnDefs"
      :defaultColDef="defaultColDef"
      :dataTypeDefinitions="dataTypeDefinitions"
      :rowData="rowData"></ag-grid-vue>
        </div>
    `,
  components: {
    "ag-grid-vue": AgGridVue,
  },
  setup(props) {
    const gridApi = shallowRef<GridApi<IOlympicDataTypes> | null>(null);
    const columnDefs = ref<ColDef[]>([
      { field: "athlete" },
      { field: "age", minWidth: 100 },
      {
        field: "medalsBigInt",
        headerName: "Total (BigInt)",
        minWidth: 160,
        cellDataType: "bigint",
      },
      { field: "hasGold", minWidth: 100, headerName: "Gold" },
      {
        field: "hasSilver",
        minWidth: 100,
        headerName: "Silver",
        cellRendererParams: { disabled: true },
      },
      { field: "dateObject", headerName: "Date" },
      {
        field: "dateTime",
        headerName: "DateTime",
        cellDataType: "dateTime",
        minWidth: 250,
      },
      { field: "date", headerName: "Date (String)" },
      {
        field: "dateTimeString",
        headerName: "DateTime (String)",
        minWidth: 250,
      },
      { field: "countryObject", headerName: "Country" },
    ]);
    const defaultColDef = ref<ColDef>({
      flex: 1,
      minWidth: 180,
      filter: true,
      floatingFilter: true,
      editable: true,
    });
    const dataTypeDefinitions = ref<DataTypeDefinitions>({
      object: {
        baseDataType: "object",
        extendsDataType: "object",
        valueParser: (params) => ({ name: params.newValue }),
        valueFormatter: (params) =>
          params.value == null ? "" : params.value.name,
      },
    });
    const rowData = ref<IOlympicDataTypes[]>(null);

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

      const updateData = (data) =>
        (rowData.value = data.map((rowData) => {
          const dateParts = rowData.date.split("/");
          const [year, month, day] = dateParts
            .reverse()
            .map((e) => parseInt(e, 10));
          const [h, m, s] = [
            Math.floor(window.agRandom() * 24),
            Math.floor(window.agRandom() * 60),
            Math.floor(window.agRandom() * 60),
          ];
          const paddedDateTimeStrings = [month, day, h, m, s].map((e) =>
            e.toString().padStart(2, "0"),
          );
          const dateString = `${year}-${paddedDateTimeStrings[0]}-${paddedDateTimeStrings[1]}`;
          const dateTimeString = `${year}-${paddedDateTimeStrings[0]}-${paddedDateTimeStrings[1]}T${paddedDateTimeStrings.slice(2).join(":")}`;
          return {
            ...rowData,
            date: dateString,
            dateObject: new Date(year, month - 1, day),
            dateTimeString,
            dateTime: new Date(year, month - 1, day, h, m, s),
            countryObject: {
              name: rowData.country,
            },
            hasGold: rowData.gold > 0,
            hasSilver: rowData.silver > 0,
            medalsBigInt: BigInt(
              rowData.gold + rowData.silver + rowData.bronze,
            ),
          };
        }));

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

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

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

[Live example: Enable Cell Data Types](https://www.ag-grid.com/examples/cell-data-types/enable-cell-data-types/vue3)

## Inferring Data Types

By default, when using the Client-Side Row Model, the grid will infer cell data types the first time that row data is passed into the grid given the following conditions:

**The column must:**

- Have a `field` property set
- Contain at least one non-null value

**The column must not:**

- Have a `valueGetter`, `valueParser`, or `refData` property set on the resolved column definition (including the default column definition and column types)
- Use [Sparklines](https://www.ag-grid.com/vue-data-grid/sparklines-overview/)

If any condition is not met, no cell data type will be inferred. You can still set one explicitly via `cellDataType` on the column definition.

Where inference is possible but the values do not match any pre-defined type, it defaults to `'object'`.

### Disabling Inference

Set `cellDataType: false` on an individual column, or on the [Default Column Definition](https://www.ag-grid.com/vue-data-grid/column-definitions/#default-column-definitions) to disable it globally.

### Date vs DateTime

Because `'dateTime'` values are `Date` objects — the same as `'date'` — the grid cannot distinguish between them during inference. To use the higher-precision `'dateTime'` type, set `cellDataType: 'dateTime'` explicitly on the column definition.

> **Note**
>
> Inference only works with the Client-Side Row Model. For other row models, define `cellDataType` explicitly on each column.

## Pre-Defined Cell Data Types

Each of the pre-defined cell data types work by setting specific column definition properties with default values/callbacks. This enables the different grid features to work correctly for that data type.

The column definition properties that are set based on the cell data type will override any in the [Default Column Definition](https://www.ag-grid.com/vue-data-grid/column-definitions/#default-column-definitions), but will be overridden by any [Column Type](https://www.ag-grid.com/vue-data-grid/column-definitions/#default-column-definitions) properties as well as properties set directly on individual column definitions. Note that for `filterParams`, only nested properties on the default column definition will be overridden (rather than the entire object).

If you wish to override one of the properties set below for all types, you can do so by creating a [Column Type](https://www.ag-grid.com/vue-data-grid/column-definitions/#default-column-definitions), and assigning the column type to the [Default Column Definition](https://www.ag-grid.com/vue-data-grid/column-definitions/#default-column-definitions).

All the cell data types set the following (unless specified):

- A [Value Parser](https://www.ag-grid.com/vue-data-grid/value-parsers/) to convert from `string` to the relevant data type.
- A [Value Formatter](https://www.ag-grid.com/vue-data-grid/value-formatters/) to convert from the relevant data type to `string` (except for `'text'`).
- A [Key Creator](https://www.ag-grid.com/vue-data-grid/grouping-data/#grouping-on-object-data) which uses the Value Formatter to allow Row Grouping to work (except for `'number'` and `'text'`).

Note that when using cell data types, the Value Formatter will not run for values in group columns (as they have already been formatted), or for aggregated values where the data type can differ. To apply custom formatting in these cases, cell data types will need to be disabled for the underlying columns.

### Text

The `'text'` cell data type is used for `string` values. As most grid functionality works directly with `string` values, the `'text'` cell data type does not set any properties outside the ones specified above for all data types.

### Number

The `'number'` cell data type is used for `number` values.

The following properties are set:

- The [Number Cell Editor](https://www.ag-grid.com/vue-data-grid/provided-cell-editors-number/) is used for editing.
- When the [Set Filter is Disabled by Default](https://www.ag-grid.com/vue-data-grid/filter-set/#suppress-set-filter-by-default), the [Number Filter](https://www.ag-grid.com/vue-data-grid/filter-number/) is used.
- When the [Set Filter](https://www.ag-grid.com/vue-data-grid/filter-set/) is used, `filterParams.comparator` is set to [Sort the Filter List](https://www.ag-grid.com/vue-data-grid/filter-set-filter-list/#sorting-filter-lists).

To show only a certain number of decimal places, you can [Override the Pre-Defined Cell Data Type Definition](#overriding-the-pre-defined-cell-data-type-definitions) and provide your own Value Formatter. It is also possible to control the number of decimal places allowed during editing, by providing a precision to the [Number Cell Editor](https://www.ag-grid.com/vue-data-grid/provided-cell-editors-number/).

### BigInt

The `'bigint'` cell data type is used for `bigint` values.

The following properties are set:

- The [Text Cell Editor](https://www.ag-grid.com/vue-data-grid/provided-cell-editors-text/) is used for editing, with the Value Parser converting input to `bigint`.
- When the [Set Filter is Disabled by Default](https://www.ag-grid.com/vue-data-grid/filter-set/#suppress-set-filter-by-default), the [BigInt Filter](https://www.ag-grid.com/vue-data-grid/filter-bigint/) is used.
- When the [Set Filter](https://www.ag-grid.com/vue-data-grid/filter-set/) is used, `filterParams.comparator` is set to sort the filter list using `bigint` comparisons.
- A `comparator` is defined to allow [Custom Sorting](https://www.ag-grid.com/vue-data-grid/row-sorting/#custom-sorting) using `bigint` values, including absolute sort.

BigInt behaviour and limitations:

- Inputs must be decimal integers. Both `500` and `500n` are accepted, but hex, binary, decimals, and scientific notation are rejected.
- Values are displayed as plain strings by default. Use a Value Formatter to add separators or custom formatting.
- Aggregation and pivoting support `sum`, `min`, `max`, `count`. `avg` uses integer division when any `bigint` values are present, so the fractional part is discarded.
- CSV and clipboard export use the exact integer string. Excel export defaults to Text to avoid precision loss; you can opt into Number via [Excel export styles](https://www.ag-grid.com/javascript-data-grid/excel-export-data-types/), but large values may lose precision.

If you need a custom input format, provide a custom Value Parser/Formatter by [Overriding the Pre-Defined Cell Data Type Definition](#overriding-the-pre-defined-cell-data-type-definitions).

### Boolean

The `'boolean'` cell data type is used for `boolean` values.

The following properties are set:

- The Checkbox Cell Renderer is used for rendering, which displays a checkbox. Set `cellRendererParams.disabled=true` for the checkbox to be read only.
- The [Checkbox Cell Editor](https://www.ag-grid.com/vue-data-grid/provided-cell-editors-checkbox/) is used for editing (similar to the renderer).
- `suppressKeyboardEvent` is set to enable the `␣ Space` key to toggle the renderer value.
- When the [Set Filter is Disabled by Default](https://www.ag-grid.com/vue-data-grid/filter-set/#suppress-set-filter-by-default), the [Text Filter](https://www.ag-grid.com/vue-data-grid/filter-text/) is used.
- When the Text Filter is used, `filterParams` is set to display a single dropdown with `'True'`/`'False'` (or equivalents with [Localisation](https://www.ag-grid.com/vue-data-grid/localisation/)).
- When the [Set Filter](https://www.ag-grid.com/vue-data-grid/filter-set/) is used, `filterParams.valueFormatter` is set to show `'True'`/`'False'` (or equivalents with [Localisation](https://www.ag-grid.com/vue-data-grid/localisation/)).

### Date

The `'date'` cell data type is used for date values that are represented as `Date` objects.

The default Value Parser and Value Formatter use the ISO string format `'YYYY-MM-DD'`. If you wish to use a different date format, then you can [Override the Pre-Defined Cell Data Type Definition](#overriding-the-pre-defined-cell-data-type-definitions).

> **Note**
>
> Please note that the `'date'` cell data type compares full Date objects, including the time portion. As a result, if a date includes a time other than midnight (`00:00:00.000`), filtering or editing might behave unexpectedly. For consistent results with built-in filters, it’s best to normalize all time values to the same value. If keeping the time component is important, consider using the `'dateTime'` cell data type instead or defining a custom comparator, as explained in the [Date Filter Comparator](https://www.ag-grid.com/vue-data-grid/filter-date/#filter-comparator).

The following properties are set:

- The [Date Cell Editor](https://www.ag-grid.com/vue-data-grid/provided-cell-editors-date/) is used for editing.
- When the [Set Filter is Disabled by Default](https://www.ag-grid.com/vue-data-grid/filter-set/#suppress-set-filter-by-default), the [Date Filter](https://www.ag-grid.com/vue-data-grid/filter-date/) is used.
- When the [Set Filter](https://www.ag-grid.com/vue-data-grid/filter-set/) is used, the [Set Filter Tree List](https://www.ag-grid.com/vue-data-grid/filter-set-tree-list/) is enabled, and the [Values are Formatted](https://www.ag-grid.com/vue-data-grid/filter-set-tree-list/#formatting-values) by setting `filterParams.treeListFormatter` to convert the months to names and `filterParams.valueFormatter` to format the Floating Filter values using the Value Formatter.

### Date as String

The `'dateString'` cell data type is used for date values that are represented as `string` values.

This data type uses the ISO string format `'YYYY-MM-DD'`. If you wish to use a different date format, then you can [Override the Pre-Defined Cell Data Type Definition](#overriding-the-pre-defined-cell-data-type-definitions).

The following properties are set:

- The [Date as String Cell Editor](https://www.ag-grid.com/vue-data-grid/provided-cell-editors-date/#enabling-date-as-string-cell-editor) is used for editing.
- When the [Set Filter is Disabled by Default](https://www.ag-grid.com/vue-data-grid/filter-set/#suppress-set-filter-by-default), the [Date Filter](https://www.ag-grid.com/vue-data-grid/filter-date/) is used.
- When the Date Filter is used, `filterParams.comparator` is set to parse the `string` date values.
- When the [Set Filter](https://www.ag-grid.com/vue-data-grid/filter-set/) is used, the [Set Filter Tree List](https://www.ag-grid.com/vue-data-grid/filter-set-tree-list/) is enabled, with `filterParams.treeListPathGetter` set to convert the `string` date values into paths, and the [Values are Formatted](https://www.ag-grid.com/vue-data-grid/filter-set-tree-list/#formatting-values) by setting `filterParams.treeListFormatter` to convert the months to names and `filterParams.valueFormatter` to format the Floating Filter values using the Value Formatter.

### DateTime

The `'dateTime'` cell data type is used for date and time values that are represented as `Date` objects. Unlike the `'date'` cell data type which only shows the date portion, `'dateTime'` displays both date and time components.

This data type uses the ISO string format `'YYYY-MM-DDThh:mm:ssZ'`. If you wish to use a different format, you can [Override the Pre-Defined Cell Data Type Definition](#overriding-the-pre-defined-cell-data-type-definitions).

The following properties are set:

- The [Date Cell Editor](https://www.ag-grid.com/vue-data-grid/provided-cell-editors-date/) is used for editing.
- When the [Set Filter is Disabled by Default](https://www.ag-grid.com/vue-data-grid/filter-set/#suppress-set-filter-by-default), the [Date Filter](https://www.ag-grid.com/vue-data-grid/filter-date/) is used.
- When the [Set Filter](https://www.ag-grid.com/vue-data-grid/filter-set/) is used, the [Set Filter Tree List](https://www.ag-grid.com/vue-data-grid/filter-set-tree-list/) is enabled, and the [Values are Formatted](https://www.ag-grid.com/vue-data-grid/filter-set-tree-list/#formatting-values) by setting `filterParams.treeListFormatter` to convert the months to names and `filterParams.valueFormatter` to format the Floating Filter values using the Value Formatter.

### DateTime as String

The `'dateTimeString'` cell data type is used for date and time values that are represented as `string` values. Unlike the `'dateString'` cell data type which only shows the date portion, `'dateTimeString'` displays both date and time components.

This data type uses the ISO string format `'YYYY-MM-DDThh:mm:ssZ'`. If you wish to use a different format, you can [Override the Pre-Defined Cell Data Type Definition](#overriding-the-pre-defined-cell-data-type-definitions).

The following properties are set:

- The [Date as String Cell Editor](https://www.ag-grid.com/vue-data-grid/provided-cell-editors-date/#enabling-date-as-string-cell-editor) is used for editing.
- When the [Set Filter is Disabled by Default](https://www.ag-grid.com/vue-data-grid/filter-set/#suppress-set-filter-by-default), the [Date Filter](https://www.ag-grid.com/vue-data-grid/filter-date/) is used.
- When the Date Filter is used, `filterParams.comparator` is set to parse the `string` date values.
- When the [Set Filter](https://www.ag-grid.com/vue-data-grid/filter-set/) is used, the [Set Filter Tree List](https://www.ag-grid.com/vue-data-grid/filter-set-tree-list/) is enabled, with `filterParams.treeListPathGetter` set to convert the `string` date values into paths, and the [Values are Formatted](https://www.ag-grid.com/vue-data-grid/filter-set-tree-list/#formatting-values) by setting `filterParams.treeListFormatter` to convert the months to names and `filterParams.valueFormatter` to format the Floating Filter values using the Value Formatter.

### Object

The `'object'` cell data type is used for values that are complex objects (e.g. none of the above data types).

If you have different types of complex object, you will want to [Provide Custom Cell Data Types](#providing-custom-cell-data-types).

> **Note**
>
> For objects to work properly, you must provide a Value Formatter, and a Value Parser if editing is enabled. This is because their behaviour needs to change based on the object structure. Generally these should be provided on the data type definition, but they can be provided directly on the column if necessary.

The following properties are set:

- `cellEditorParams.useFormatter = true` so that the cell editor uses the Value Formatter.
- A `comparator` is defined to allow [Custom Sorting](https://www.ag-grid.com/vue-data-grid/row-sorting/#custom-sorting) using the Value Formatter.
- When the [Text Filter](https://www.ag-grid.com/vue-data-grid/filter-text/) is used, a [Filter Value Getter](https://www.ag-grid.com/vue-data-grid/column-properties/#reference-filtering-filterValueGetter) is used to convert the value with the Value Formatter.
- When the [Set Filter](https://www.ag-grid.com/vue-data-grid/filter-set/) is used with [Complex Objects](https://www.ag-grid.com/vue-data-grid/filter-set-filter-list/#complex-objects), `filterParams.valueFormatter` is set to format the values using the Value Formatter.

### Pre-Defined Cell Data Type Example

The [Enable Cell Data Types Example](#example-enable-cell-data-types) above demonstrates each of the different pre-defined cell data types with AG Grid Community.

The example below shows the same data types in AG Grid Enterprise:

- Row grouping is enabled allowing each of the fields to be grouped on.
- Import/Export features are enabled allowing the following:
  - Clipboard (copy/paste)
  - Fill handle
  - CSV/Excel export

#### Pre-Defined Cell Data Types

```ts
import {
  createApp,
  defineComponent,
  onBeforeMount,
  ref,
  shallowRef,
} from "vue";
import { AgGridVue } from "ag-grid-vue3";
import {
  CellSelectionOptions,
  CheckboxEditorModule,
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  DataTypeDefinitions,
  DateEditorModule,
  GridApi,
  GridOptions,
  GridReadyEvent,
  ModuleRegistry,
  NumberEditorModule,
  TextEditorModule,
  enableDevValidations,
} from "ag-grid-community";
import {
  CellSelectionModule,
  ClipboardModule,
  ColumnMenuModule,
  ContextMenuModule,
  ExcelExportModule,
  RowGroupingModule,
  RowGroupingPanelModule,
  SetFilterModule,
} from "ag-grid-enterprise";
if (process.env.NODE_ENV !== "production") {
  enableDevValidations();
}

ModuleRegistry.registerModules([
  NumberEditorModule,
  TextEditorModule,
  CheckboxEditorModule,
  DateEditorModule,
  ClientSideRowModelModule,
  ClipboardModule,
  ExcelExportModule,
  ColumnMenuModule,
  ContextMenuModule,
  CellSelectionModule,
  RowGroupingModule,
  SetFilterModule,
  RowGroupingPanelModule,
]);

interface IOlympicDataTypes extends IOlympicData {
  dateObject: Date;
  hasGold: boolean;
  hasSilver: boolean;
  dateTime: Date;
  dateTimeString: string;
  countryObject: {
    name: string;
  };
}

const VueExample = defineComponent({
  template: `
        <div style="height: 100%">
                <ag-grid-vue
      style="width: 100%; height: 100%;"
      @grid-ready="onGridReady"
      :columnDefs="columnDefs"
      :defaultColDef="defaultColDef"
      :dataTypeDefinitions="dataTypeDefinitions"
      :rowGroupPanelShow="rowGroupPanelShow"
      :cellSelection="cellSelection"
      :rowData="rowData"></ag-grid-vue>
        </div>
    `,
  components: {
    "ag-grid-vue": AgGridVue,
  },
  setup(props) {
    const gridApi = shallowRef<GridApi<IOlympicDataTypes> | null>(null);
    const columnDefs = ref<ColDef[]>([
      { field: "athlete" },
      { field: "age", minWidth: 100 },
      { field: "hasGold", minWidth: 100, headerName: "Gold" },
      {
        field: "hasSilver",
        minWidth: 100,
        headerName: "Silver",
        cellRendererParams: { disabled: true },
      },
      { field: "dateObject", headerName: "Date" },
      { field: "date", headerName: "Date (String)" },
      {
        field: "dateTime",
        headerName: "DateTime",
        cellDataType: "dateTime",
        minWidth: 250,
      },
      {
        field: "dateTimeString",
        headerName: "DateTime (String)",
        minWidth: 250,
      },
      { field: "countryObject", headerName: "Country" },
    ]);
    const defaultColDef = ref<ColDef>({
      flex: 1,
      minWidth: 180,
      filter: true,
      floatingFilter: true,
      editable: true,
      enableRowGroup: true,
    });
    const dataTypeDefinitions = ref<DataTypeDefinitions>({
      object: {
        baseDataType: "object",
        extendsDataType: "object",
        valueParser: (params) => ({ name: params.newValue }),
        valueFormatter: (params) =>
          params.value == null ? "" : params.value.name,
      },
    });
    const rowGroupPanelShow = ref<"always" | "onlyWhenGrouping" | "never">(
      "always",
    );
    const cellSelection = ref<boolean | CellSelectionOptions>({
      handle: { mode: "fill" },
    });
    const rowData = ref<IOlympicDataTypes[]>(null);

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

      const updateData = (data) =>
        (rowData.value = data.map((rowData) => {
          const dateParts = rowData.date.split("/");
          const [year, month, day] = dateParts
            .reverse()
            .map((e) => parseInt(e, 10));
          const [h, m, s] = [
            Math.floor(window.agRandom() * 24),
            Math.floor(window.agRandom() * 60),
            Math.floor(window.agRandom() * 60),
          ];
          const paddedDateTimeStrings = [month, day, h, m, s].map((e) =>
            e.toString().padStart(2, "0"),
          );
          const dateString = `${year}-${paddedDateTimeStrings[0]}-${paddedDateTimeStrings[1]}`;
          const dateTimeString = `${year}-${paddedDateTimeStrings[0]}-${paddedDateTimeStrings[1]}T${paddedDateTimeStrings.slice(2).join(":")}`;
          return {
            ...rowData,
            date: dateString,
            dateObject: new Date(year, month - 1, day),
            dateTimeString,
            dateTime: new Date(year, month - 1, day, h, m, s),
            countryObject: {
              name: rowData.country,
            },
            hasGold: rowData.gold > 0,
            hasSilver: rowData.silver > 0,
          };
        }));

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

    return {
      gridApi,
      columnDefs,
      defaultColDef,
      dataTypeDefinitions,
      rowGroupPanelShow,
      cellSelection,
      rowData,
      onGridReady,
    };
  },
});

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

[Live example: Pre-Defined Cell Data Types](https://www.ag-grid.com/examples/cell-data-types/pre-defined-cell-data-types/vue3)

## Providing Custom Cell Data Types

Custom cell data types can be added by setting the grid option `dataTypeDefinitions`.

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `dataTypeDefinitions` | `DataTypeDefinitions` |  |  | An object map of cell data types to their definitions. Cell data types can either override/update the pre-defined data types (`'text'`, `'number'`, `'boolean'`, `'date'`, `'dateString'`, `'dateTime'`, `'dateTimeString'` or `'object'`), or can be custom data types. |

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

this.dataTypeDefinitions = {
    percentage: {
        extendsDataType: 'number',
        baseDataType: 'number',
        valueFormatter: params => params.value == null
            ? ''
            : `${Math.round(params.value * 100)}%`,
    }
};
```

Each custom data type definition must have a `baseDataType` of one of the [Pre-Defined Cell Data Types](#pre-defined-cell-data-types), which represents the data type of the underlying cell values.

Data type definitions support inheritance via the `extendsDataType` property. Each custom cell data type must either extend one of the pre-defined types, or another custom type. Any non-overridden properties are inherited from the parent definition. To prevent inheriting properties from the parent definition, `suppressDefaultProperties = true` can be set on the definition.

[Column Types](https://www.ag-grid.com/vue-data-grid/column-definitions/#default-column-definitions) can be set via the `columnTypes` property to allow other column definition properties to be set for the data type. By default, these will replace any column types against the parent definition. To allow these to be appended to the parent definition column types, `appendColumnTypes = true` can be set.

To allow [Inferring Cell Data Types](#inferring-data-types) to work for custom types, the `dataTypeMatcher` property can be set. This returns `true` if the value is of the correct type. Note that the data type matchers will be called in the order they are provided in `dataTypeDefinitions` (for custom only), and then the pre-defined data type matchers will be called.

The following example demonstrates providing custom cell data types:

- The **Country** column contains complex objects and has a cell data type of `'country'`.
- The **Sport** column contains a different type of complex object and has a cell data type of `'sport'`.
- The **Date** column parses date values from a non-standard date format.
- The `dataTypeMatcher` callback is defined for all three cell data types to allow inferring the type.

#### Providing Custom Cell Data Types

```ts
import {
  createApp,
  defineComponent,
  onBeforeMount,
  ref,
  shallowRef,
} from "vue";
import { AgGridVue } from "ag-grid-vue3";
import {
  CellSelectionOptions,
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  DataTypeDefinitions,
  DateEditorModule,
  GridApi,
  GridOptions,
  GridReadyEvent,
  ModuleRegistry,
  NumberEditorModule,
  TextEditorModule,
  enableDevValidations,
} from "ag-grid-community";
import {
  CellSelectionModule,
  ColumnMenuModule,
  ContextMenuModule,
  SetFilterModule,
} from "ag-grid-enterprise";
if (process.env.NODE_ENV !== "production") {
  enableDevValidations();
}

ModuleRegistry.registerModules([
  TextEditorModule,
  ClientSideRowModelModule,
  ColumnMenuModule,
  ContextMenuModule,
  CellSelectionModule,
  SetFilterModule,
  DateEditorModule,
  NumberEditorModule,
]);

interface IOlympicDataTypes extends IOlympicData {
  countryObject: {
    code: string;
  };
  sportObject: {
    name: string;
  };
}

const DATE_REGEX = /\d{2}\/\d{2}\/\d{4}/;

const VueExample = defineComponent({
  template: `
        <div style="height: 100%">
                <ag-grid-vue
      style="width: 100%; height: 100%;"
      @grid-ready="onGridReady"
      :columnDefs="columnDefs"
      :defaultColDef="defaultColDef"
      :dataTypeDefinitions="dataTypeDefinitions"
      :cellSelection="cellSelection"
      :rowData="rowData"></ag-grid-vue>
        </div>
    `,
  components: {
    "ag-grid-vue": AgGridVue,
  },
  setup(props) {
    const gridApi = shallowRef<GridApi<IOlympicDataTypes> | null>(null);
    const columnDefs = ref<ColDef[]>([
      { field: "athlete" },
      { field: "countryObject", headerName: "Country" },
      { field: "sportObject", headerName: "Sport" },
      { field: "date" },
    ]);
    const defaultColDef = ref<ColDef>({
      filter: true,
      floatingFilter: true,
      editable: true,
    });
    const dataTypeDefinitions = ref<DataTypeDefinitions>({
      country: {
        baseDataType: "object",
        extendsDataType: "object",
        valueParser: (params) =>
          params.newValue == null || params.newValue === ""
            ? null
            : { code: params.newValue },
        valueFormatter: (params) =>
          params.value == null ? "" : params.value.code,
        dataTypeMatcher: (value) => value && !!value.code,
      },
      sport: {
        baseDataType: "object",
        extendsDataType: "object",
        valueParser: (params) =>
          params.newValue == null || params.newValue === ""
            ? null
            : { name: params.newValue },
        valueFormatter: (params) =>
          params.value == null ? "" : params.value.name,
        dataTypeMatcher: (value) => value && !!value.name,
      },
      dateString: {
        baseDataType: "dateString",
        extendsDataType: "dateString",
        valueParser: (params) =>
          params.newValue != null && params.newValue.match(DATE_REGEX)
            ? params.newValue
            : null,
        valueFormatter: (params) => (params.value == null ? "" : params.value),
        dataTypeMatcher: (value) =>
          typeof value === "string" && !!value.match(DATE_REGEX),
        dateParser: (value) => {
          if (value == null || value === "") {
            return undefined;
          }
          const dateParts = value.split("/");
          return dateParts.length === 3
            ? new Date(
                parseInt(dateParts[2]),
                parseInt(dateParts[1]) - 1,
                parseInt(dateParts[0]),
              )
            : undefined;
        },
        dateFormatter: (value) => {
          if (value == null) {
            return undefined;
          }
          const date = String(value.getDate());
          const month = String(value.getMonth() + 1);
          return `${date.length === 1 ? "0" + date : date}/${month.length === 1 ? "0" + month : month}/${value.getFullYear()}`;
        },
      },
    });
    const cellSelection = ref<boolean | CellSelectionOptions>({
      handle: { mode: "fill" },
    });
    const rowData = ref<IOlympicDataTypes[]>(null);

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

      const updateData = (data) =>
        (rowData.value = data.map((rowData) => ({
          ...rowData,
          countryObject: { code: rowData.country },
          sportObject: { name: rowData.sport },
        })));

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

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

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

[Live example: Providing Custom Cell Data Types](https://www.ag-grid.com/examples/cell-data-types/providing-custom-cell-data-types/vue3)

## Overriding the Pre-Defined Cell Data Type Definitions

The default properties for the [Pre-Defined Cell Data Types](#pre-defined-cell-data-types) can be overridden.

For example, this is required if a different date format is desired.

This works in the same way as when [Providing Custom Cell Data Types](#providing-custom-cell-data-types).

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

this.dataTypeDefinitions = {
    // override `date` to handle custom date format `dd/mm/yyyy`
    date: {
        baseDataType: 'date',
        extendsDataType: 'date',
        valueParser: params => {
            if (params.newValue == null) {
                return null;
            }
            // convert from `dd/mm/yyyy`
            const dateParts = params.newValue.split('/');
            return dateParts.length === 3 ? new Date(
                parseInt(dateParts[2]),
                parseInt(dateParts[1]) - 1,
                parseInt(dateParts[0])
            ) : null;
        },
        valueFormatter: params => {
            // convert to `dd/mm/yyyy`
            const date = params.value;
            return date == null
                ? ''
                : `${date.getDate()}/${date.getMonth() + 1}/${date.getFullYear()}`;
        },
    }
};
```

The following example demonstrates overriding pre-defined cell data types:

- The **Date** column is of type `'dateString'` which has been overridden to use a different date format (`dd/mm/yyyy`).
- The data type definition for `'dateString'` provides a `dateParser` and `dateFormatter` as it is a [Date as String Data Type Definition](#date-as-string).
- The **DateTimeWithSpace** column overrides a built-in `'dateTimeString'` type with custom parsing/formatting logic to support `dd/MM/yyyy HH:mm:ss` format instead of the default `yyyy-MM-ddTHH:mm:ss`.

#### Overriding Pre-Defined Cell Data Types

```ts
import {
  createApp,
  defineComponent,
  onBeforeMount,
  ref,
  shallowRef,
} from "vue";
import { AgGridVue } from "ag-grid-vue3";
import {
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  DataTypeDefinitions,
  DateEditorModule,
  DateFilterModule,
  DateTimeStringDataTypeDefinition,
  GridApi,
  GridOptions,
  GridReadyEvent,
  ModuleRegistry,
  NumberEditorModule,
  NumberFilterModule,
  TextEditorModule,
  TextFilterModule,
  ValueFormatterLiteParams,
  ValueParserLiteParams,
  enableDevValidations,
} from "ag-grid-community";
if (process.env.NODE_ENV !== "production") {
  enableDevValidations();
}

ModuleRegistry.registerModules([
  NumberEditorModule,
  NumberFilterModule,
  DateEditorModule,
  DateFilterModule,
  TextEditorModule,
  TextFilterModule,
  ClientSideRowModelModule,
]);

interface IOlympicDataTypes extends IOlympicData {
  countryObject: {
    code: string;
  };
  sportObject: {
    name: string;
  };
  dateTimeWithSpace: string;
}

const dateTimeRegex = /(\d{2})\/(\d{2})\/(\d{4}).{1,2}(\d{2}):(\d{2}):(\d{2})/;

const pad = (n: number) => (n < 10 ? `0${n}` : n);

const rand = (min: number, max: number) =>
  Math.floor((max + min) * window.agRandom() - min);

const VueExample = defineComponent({
  template: `
        <div style="height: 100%">
                <ag-grid-vue
      style="width: 100%; height: 100%;"
      @grid-ready="onGridReady"
      :columnDefs="columnDefs"
      :defaultColDef="defaultColDef"
      :dataTypeDefinitions="dataTypeDefinitions"
      :rowData="rowData"></ag-grid-vue>
        </div>
    `,
  components: {
    "ag-grid-vue": AgGridVue,
  },
  setup(props) {
    const gridApi = shallowRef<GridApi<IOlympicDataTypes> | null>(null);
    const columnDefs = ref<ColDef[]>([
      { field: "athlete" },
      { field: "age" },
      { field: "date" },
      {
        field: "dateTimeWithSpace",
        cellDataType: "dateTimeString",
        filterParams: { includeTime: true },
        cellEditorParams: { includeTime: true },
      },
    ]);
    const defaultColDef = ref<ColDef>({
      filter: true,
      floatingFilter: true,
      editable: true,
    });
    const dataTypeDefinitions = ref<DataTypeDefinitions>({
      dateString: {
        baseDataType: "dateString",
        extendsDataType: "dateString",
        valueParser: (
          params: ValueParserLiteParams<IOlympicDataTypes, string>,
        ) =>
          params.newValue != null &&
          params.newValue.match("\\d{2}/\\d{2}/\\d{4}")
            ? params.newValue
            : null,
        valueFormatter: (
          params: ValueFormatterLiteParams<IOlympicDataTypes, string>,
        ) => (params.value == null ? "" : params.value),
        dataTypeMatcher: (value: any) =>
          typeof value === "string" && !!value.match("\\d{2}/\\d{2}/\\d{4}"),
        dateParser: (value: string | undefined) => {
          if (value == null || value === "") {
            return undefined;
          }
          const dateParts = value.split("/");
          return dateParts.length === 3
            ? new Date(
                parseInt(dateParts[2]),
                parseInt(dateParts[1]) - 1,
                parseInt(dateParts[0]),
              )
            : undefined;
        },
        dateFormatter: (value: Date | undefined) => {
          if (value == null) {
            return undefined;
          }
          const date = String(value.getDate());
          const month = String(value.getMonth() + 1);
          return `${date.length === 1 ? "0" + date : date}/${month.length === 1 ? "0" + month : month}/${value.getFullYear()}`;
        },
      },
      dateTimeString: {
        baseDataType: "dateTimeString",
        extendsDataType: "dateTimeString",
        valueParser: (
          params: ValueParserLiteParams<IOlympicDataTypes, string>,
        ) => {
          if (params.newValue != null && params.newValue.match(dateTimeRegex)) {
            return params.newValue;
          } else {
            return null;
          }
        },
        dateParser: (value: string | undefined) => {
          if (value == null) {
            return;
          }
          let [_, dd, MM, yyyy, HH, mm, ss] = (
            value.match(dateTimeRegex) || Array(7).fill("0")
          ).map((e) => e || "0");
          return new Date(
            parseInt(yyyy),
            parseInt(MM) - 1,
            parseInt(dd),
            parseInt(HH),
            parseInt(mm),
            parseInt(ss),
          );
        },
        dateFormatter: (value: Date | undefined) => {
          // convert to `HH:mm:ss dd/MM/yyyy`
          return value == null
            ? ""
            : `${pad(value.getDate())}/${pad(value.getMonth() + 1)}/${value.getFullYear()}` +
                " " +
                `${pad(value.getHours())}:${pad(value.getMinutes())}:${pad(value.getSeconds())}`;
        },
      } as DateTimeStringDataTypeDefinition,
    });
    const rowData = ref<IOlympicDataTypes[]>(null);

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

      const updateData = (data) =>
        (rowData.value = data.map((d) => ({
          ...d,
          dateTimeWithSpace: `${d.date} ${pad(rand(0, 23))}:${pad(rand(0, 59))}:${pad(rand(0, 59))}`,
        })));

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

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

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

[Live example: Overriding Pre-Defined Cell Data Types](https://www.ag-grid.com/examples/cell-data-types/overriding-pre-defined-cell-data-types/vue3)

### Date and DateTime as String Data Type Definition

If overriding `'dateString'` or `'dateTimeString'` with a different date format, then a couple of extra properties need to be set to handle conversion between `Date` objects and the desired `string` format.

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `dateParser` | `Function` |  |  | Converts a date in `string` format to a `Date`. |
| `dateFormatter` | `Function` |  |  | Converts a date in `Date` format to a `string`. |