Vue DataGrid - AI Columns

AI columns augment DataGrid data with AI-generated insights. You can add one or multiple AI columns to a DataGrid. AI columns are a type of command column and are not bound to a data field.

To add an AI column to DataGrid, follow these steps:

• Define aiIntegration (or columns[].ai.aiIntegration to configure AI settings specific to a column).
• Set a column's type to "ai".
• Specify the AI column's name.
• Configure columns[].ai options, including mode, predefined prompt, and noDataText (displayed when the AI service returns no data for a row).

Default AI requests include all data from rows visible in the DataGrid container. This data includes fields of hidden columns and fields not bound to a column. To save AI resources, you can configure the component to include only relevant data fields. Modify the AIColumnRequestCreatingEvent.data parameter within onAIColumnRequestCreating as follows:

$('#data-grid-container').dxDataGrid({
    onAIColumnRequestCreating(e) {
        e.data = e.data.map((item) => ({
            ID: item.ID,
            // ...
        }));
    },
});

<dx-data-grid ...
    (onAIColumnRequestCreating)="handleAIColumnRequestCreating($event)"
></dx-data-grid>

import { DxDataGridModule, type DxDataGridTypes } from 'devextreme-angular/ui/data-grid';

export class AppComponent {
    handleAIColumnRequestCreating(e: DxDataGridTypes.AIColumnRequestCreatingEvent) {
        e.data = e.data.map((item) => ({
            ID: item.ID,
            // ...
        }));
    }
}

<template>
    <DxDataGrid ...
        :on-a-i-column-request-creating={handleAIColumnRequestCreating}
    />
</template>

<script setup lang="ts">
import { DxDataGrid, type DxDataGridTypes } from 'devextreme-vue/data-grid';

function handleAIColumnRequestCreating(e: DxDataGridTypes.AIColumnRequestCreatingEvent) {
    e.data = e.data.map((item) => ({
        ID: item.ID,
        // ...
    }));
};
</script>

import { DataGrid, type DataGridTypes } from 'devextreme-react/data-grid';

function handleAIColumnRequestCreating(e: DataGridTypes.AIColumnRequestCreatingEvent) {
    e.data = e.data.map((item) => ({
        ID: item.ID,
        // ...
    }));
};

function App() {
    return (
        <DataGrid ...
            onAIColumnRequestCreating={handleAIColumnRequestCreating}
        />
    );
};

Note the following AI column limitations:

• AI columns cannot be integrated within band columns.
• DataGrid does not save AI-generated values to the component data source and does not support AI data editing, filtering, searching, and sorting.
• AI columns ignore the following columns[] properties: