Vue Data GridLocalisation

Version 36.3.0

The grid's displayed text can be customised for localisation. You can achieve this by providing locale information in the required language. Use the localeText property to apply one of the provided locales, create a custom locale, or use the getLocaleText callback to integrate the grid with your application's localisation system.

LocaleText

Initial

A map of key->value pairs for localising text within the grid.

Localisation

LocaleModule

GetLocaleText

Initial

A callback for localising text within the grid.

Localisation

LocaleModule

Provided Locales Copy Link

The default language of the grid is American English, however, we provide a number of translations that can be used as a starting point for commonly requested languages:

Language	BCP47 Tag	Locale Module
Arabic (Egyptian)	ar-EG	AG_GRID_LOCALE_AR_EG
Bengali (Bangladesh)	bn-BD	AG_GRID_LOCALE_BN_BD
Bengali (India)	bn-IN	AG_GRID_LOCALE_BN_IN
Bosnian	bs-BA	AG_GRID_LOCALE_BS_BA
Bulgarian	bg-BG	AG_GRID_LOCALE_BG_BG
Chinese (Traditional)	zh-HK	AG_GRID_LOCALE_ZH_HK
Chinese (Simplified)	zh-CN	AG_GRID_LOCALE_ZH_CN
Chinese (Taiwan)	zh-TW	AG_GRID_LOCALE_ZH_TW
Croatian	hr-HR	AG_GRID_LOCALE_HR_HR
Czech	cs-CZ	AG_GRID_LOCALE_CS_CZ
Danish	da-DK	AG_GRID_LOCALE_DA_DK
Dutch	nl-NL	AG_GRID_LOCALE_NL_NL
Estonian	et-EE	AG_GRID_LOCALE_ET_EE
Filipino	fil-PH	AG_GRID_LOCALE_FIL_PH
Finnish	fi-FI	AG_GRID_LOCALE_FI_FI
French	fr-FR	AG_GRID_LOCALE_FR_FR
German	de-DE	AG_GRID_LOCALE_DE_DE
Greek	el-GR	AG_GRID_LOCALE_EL_GR
Hebrew	he-IL	AG_GRID_LOCALE_HE_IL
Hindi	hi-IN	AG_GRID_LOCALE_HI_IN
Hungarian	hu-HU	AG_GRID_LOCALE_HU_HU
Indonesian	id-ID	AG_GRID_LOCALE_ID_ID
Italian	it-IT	AG_GRID_LOCALE_IT_IT
Japanese	ja-JP	AG_GRID_LOCALE_JA_JP
Korean	ko-KR	AG_GRID_LOCALE_KO_KR
Latvian	lv-LV	AG_GRID_LOCALE_LV_LV
Lithuanian	lt-LT	AG_GRID_LOCALE_LT_LT
Malay	ms-MY	AG_GRID_LOCALE_MS_MY
Norwegian (Bokmål)	nb-NO	AG_GRID_LOCALE_NB_NO
Persian	fa-IR	AG_GRID_LOCALE_FA_IR
Polish	pl-PL	AG_GRID_LOCALE_PL_PL
Portuguese	pt-PT	AG_GRID_LOCALE_PT_PT
Portuguese (Brazil)	pt-BR	AG_GRID_LOCALE_PT_BR
Romanian	ro-RO	AG_GRID_LOCALE_RO_RO
Russian	ru-RU	AG_GRID_LOCALE_RU_RU
Serbian (Cyrillic)	sr-RS	AG_GRID_LOCALE_SR_RS
Serbian (Latin)	sr-Latn-RS	AG_GRID_LOCALE_SR_LATN_RS
Slovak	sk-SK	AG_GRID_LOCALE_SK_SK
Slovenian	sl-SI	AG_GRID_LOCALE_SL_SI
Spanish	es-ES	AG_GRID_LOCALE_ES_ES
Swedish	sv-SE	AG_GRID_LOCALE_SV_SE
Thai	th-TH	AG_GRID_LOCALE_TH_TH
Turkish	tr-TR	AG_GRID_LOCALE_TR_TR
Ukrainian	uk-UA	AG_GRID_LOCALE_UK_UA
Urdu (Pakistan)	ur-PK	AG_GRID_LOCALE_UR_PK
Vietnamese	vi-VN	AG_GRID_LOCALE_VI_VN

Translations are provided as an illustration only and are not guaranteed to be accurate or error free. They are designed to show developers where to store their chosen phrase or spelling variant in the target language.

Each locale module is named after its full BCP47 tag, e.g. AG_GRID_LOCALE_DA_DK for da-DK. Locales that shipped before v36.3 are also still exported under their older region-only name, e.g. AG_GRID_LOCALE_DK. Those older names are deprecated and will be removed in a future major version — prefer the full-tag name.

Using a Provided Locale Module Copy Link

All of the provided locales listed above are available in the @ag-grid-community/locale package. To use any of the provided locales in your application, follow these steps:

First, import the desired locale module from the @ag-grid-community/locale package. For example, to use the German locale, import AG_GRID_LOCALE_DE_DE:

import { AG_GRID_LOCALE_DE_DE } from '@ag-grid-community/locale';

Next, assign the imported locale object to the localeText property in your Grid Options:

<ag-grid-vue
    :localeText="localeText"
    /* other grid options ... */>
</ag-grid-vue>

this.localeText = AG_GRID_LOCALE_DE_DE;

Finally, ensure the @ag-grid-community/locale module is listed as a dependency in your application's package configuration:

"dependencies": {
    "@ag-grid-community/locale": "36.3.0-beta.20261103.1437",
    ...
}

The following example demonstrates applying the AG_GRID_LOCALE_DE_DE locale to the grid:

main.ts

import { AG_GRID_LOCALE_DE_DE } from "@ag-grid-community/locale";
import {
  createApp,
  defineComponent,
  onBeforeMount,
  ref,
  shallowRef,
} from "vue";
import { AgGridVue } from "ag-grid-vue3";
import { AgChartsEnterpriseModule } from "ag-charts-enterprise";
import {
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  CsvExportModule,
  GridApi,
  GridOptions,
  GridReadyEvent,
  ICellRendererComp,
  ICellRendererParams,
  LocaleModule,
  LocaleText,
  ModuleRegistry,
  NumberEditorModule,
  NumberFilterModule,
  PaginationModule,
  RowSelectionModule,
  RowSelectionOptions,
  SideBarDef,
  StatusBar,
  TextEditorModule,
  TextFilterModule,
  enableDevValidations,
} from "ag-grid-community";
import {
  CellSelectionModule,
  ClipboardModule,
  ColumnMenuModule,
  ColumnsToolPanelModule,
  ContextMenuModule,
  ExcelExportModule,
  FiltersToolPanelModule,
  IntegratedChartsModule,
  MultiFilterModule,
  PivotModule,
  RowGroupingPanelModule,
  SetFilterModule,
  SideBarModule,
  StatusBarModule,
} from "ag-grid-enterprise";
import { IOlympicData } from "./interfaces";

if (process.env.NODE_ENV !== "production") {
  // Enable extended validations only for development
  enableDevValidations();
}

ModuleRegistry.registerModules([
  NumberEditorModule,
  TextEditorModule,
  RowSelectionModule,
  LocaleModule,
  PaginationModule,
  ClientSideRowModelModule,
  ClipboardModule,
  ColumnsToolPanelModule,
  CsvExportModule,
  ExcelExportModule,
  FiltersToolPanelModule,
  ColumnMenuModule,
  ContextMenuModule,
  MultiFilterModule,
  CellSelectionModule,
  PivotModule,
  SetFilterModule,
  SideBarModule,
  StatusBarModule,
  RowGroupingPanelModule,
  TextFilterModule,
  NumberFilterModule,
  IntegratedChartsModule.with(AgChartsEnterpriseModule),
]);

class NodeIdRenderer implements ICellRendererComp {
  eGui!: HTMLElement;

  init(params: ICellRendererParams) {
    this.eGui = document.createElement("div");
    this.eGui.textContent = params.node!.id! + 1;
  }

  getGui() {
    return this.eGui;
  }

  refresh(params: ICellRendererParams): boolean {
    return false;
  }
}

const VueExample = defineComponent({
  template: `
        <div style="height: 100%">
                <ag-grid-vue
      style="width: 100%; height: 100%;"
      @grid-ready="onGridReady"
      :columnDefs="columnDefs"
      :defaultColDef="defaultColDef"
      :sideBar="true"
      :statusBar="statusBar"
      :rowGroupPanelShow="rowGroupPanelShow"
      :pagination="true"
      :paginationPageSize="paginationPageSize"
      :paginationPageSizeSelector="paginationPageSizeSelector"
      :enableCharts="true"
      :localeText="localeText"
      :rowSelection="rowSelection"
      :rowData="rowData"></ag-grid-vue>
        </div>
    `,
  components: {
    "ag-grid-vue": AgGridVue,
  },
  setup(props) {
    const gridApi = shallowRef<GridApi<IOlympicData> | null>(null);
    const columnDefs = ref<ColDef[]>([
      // this row just shows the row index, doesn't use any data from the row
      {
        headerName: "#",
        cellRenderer: NodeIdRenderer,
      },
      {
        field: "athlete",
        filterParams: { buttons: ["clear", "reset", "apply"] },
      },
      {
        field: "age",
        filterParams: { buttons: ["apply", "cancel"] },
        enablePivot: true,
      },
      { field: "country", enableRowGroup: true },
      { field: "year", filter: "agNumberColumnFilter" },
      { field: "date" },
      {
        field: "sport",
        filter: "agMultiColumnFilter",
        filterParams: {
          filters: [
            {
              filter: "agTextColumnFilter",
              display: "accordion",
            },
            {
              filter: "agSetColumnFilter",
              display: "accordion",
            },
          ],
        },
      },
      { field: "gold", enableValue: true },
      { field: "silver", enableValue: true },
      { field: "bronze", enableValue: true },
      { field: "total", enableValue: true },
    ]);
    const defaultColDef = ref<ColDef>({
      editable: true,
      flex: 1,
      minWidth: 100,
      filter: true,
    });
    const statusBar = ref<StatusBar>({
      statusPanels: [
        { statusPanel: "agTotalAndFilteredRowCountComponent", align: "left" },
        { statusPanel: "agAggregationComponent" },
      ],
    });
    const rowGroupPanelShow = ref<"always" | "onlyWhenGrouping" | "never">(
      "always",
    );
    const paginationPageSize = ref(500);
    const paginationPageSizeSelector = ref<number[] | boolean>([
      100, 500, 1000,
    ]);
    const localeText = ref<LocaleText>(AG_GRID_LOCALE_DE_DE);
    const rowSelection = ref<RowSelectionOptions | "single" | "multiple">({
      mode: "multiRow",
    });
    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,
      statusBar,
      rowGroupPanelShow,
      paginationPageSize,
      paginationPageSizeSelector,
      localeText,
      rowSelection,
      rowData,
      onGridReady,
    };
  },
});

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

Some localisation variables have ${variable} in them. When this occurs, it means that part of the string will be replaced by a variable value.

Customising a Provided Locale Copy Link

If you want to customise a provided locale, you can do so by creating a new object and merging the provided locale with your customisations.

import { AG_GRID_LOCALE_DE_DE } from '@ag-grid-community/locale';

const customGermanLocale = {
    ...AG_GRID_LOCALE_DE_DE,
    // customise the locale here
};

const gridOptions = {
    localeText: customGermanLocale,
};

The example below shows this in action by adding a "zzz" prefix to each Locale key to create a new zzzLocale object, and then applying this customised locale to the grid:

main.ts

import { AG_GRID_LOCALE_DE_DE } from "@ag-grid-community/locale";
import {
  createApp,
  defineComponent,
  onBeforeMount,
  ref,
  shallowRef,
} from "vue";
import { AgGridVue } from "ag-grid-vue3";
import { AgChartsEnterpriseModule } from "ag-charts-enterprise";
import {
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  CsvExportModule,
  GridApi,
  GridOptions,
  GridReadyEvent,
  ICellRendererComp,
  ICellRendererParams,
  LocaleModule,
  LocaleText,
  ModuleRegistry,
  NumberEditorModule,
  NumberFilterModule,
  PaginationModule,
  RowSelectionModule,
  RowSelectionOptions,
  SideBarDef,
  StatusBar,
  TextEditorModule,
  TextFilterModule,
  enableDevValidations,
} from "ag-grid-community";
import {
  CellSelectionModule,
  ClipboardModule,
  ColumnMenuModule,
  ColumnsToolPanelModule,
  ContextMenuModule,
  ExcelExportModule,
  FiltersToolPanelModule,
  IntegratedChartsModule,
  MultiFilterModule,
  PivotModule,
  RowGroupingPanelModule,
  SetFilterModule,
  SideBarModule,
  StatusBarModule,
} from "ag-grid-enterprise";
import { zzzLocale } from "./locale";
import { IOlympicData } from "./interfaces";

if (process.env.NODE_ENV !== "production") {
  // Enable extended validations only for development
  enableDevValidations();
}

ModuleRegistry.registerModules([
  NumberEditorModule,
  TextEditorModule,
  RowSelectionModule,
  LocaleModule,
  PaginationModule,
  ClientSideRowModelModule,
  ClipboardModule,
  ColumnsToolPanelModule,
  CsvExportModule,
  ExcelExportModule,
  FiltersToolPanelModule,
  ColumnMenuModule,
  ContextMenuModule,
  MultiFilterModule,
  CellSelectionModule,
  PivotModule,
  SetFilterModule,
  SideBarModule,
  StatusBarModule,
  RowGroupingPanelModule,
  TextFilterModule,
  NumberFilterModule,
  IntegratedChartsModule.with(AgChartsEnterpriseModule),
]);

class NodeIdRenderer implements ICellRendererComp {
  eGui!: HTMLElement;

  init(params: ICellRendererParams) {
    this.eGui = document.createElement("div");
    this.eGui.textContent = params.node!.id! + 1;
  }

  getGui() {
    return this.eGui;
  }

  refresh(params: ICellRendererParams): boolean {
    return false;
  }
}

// Create a dummy locale based on english but prefix everything with zzz
const AG_GRID_LOCALE_ZZZ: Record<string, string> =
  zzzLocale(AG_GRID_LOCALE_DE_DE);

const VueExample = defineComponent({
  template: `
        <div style="height: 100%">
                <ag-grid-vue
      style="width: 100%; height: 100%;"
      @grid-ready="onGridReady"
      :columnDefs="columnDefs"
      :defaultColDef="defaultColDef"
      :sideBar="true"
      :statusBar="statusBar"
      :rowGroupPanelShow="rowGroupPanelShow"
      :pagination="true"
      :paginationPageSize="paginationPageSize"
      :paginationPageSizeSelector="paginationPageSizeSelector"
      :enableCharts="true"
      :localeText="localeText"
      :rowSelection="rowSelection"
      :rowData="rowData"></ag-grid-vue>
        </div>
    `,
  components: {
    "ag-grid-vue": AgGridVue,
  },
  setup(props) {
    const gridApi = shallowRef<GridApi<IOlympicData> | null>(null);
    const columnDefs = ref<ColDef[]>([
      // this row just shows the row index, doesn't use any data from the row
      {
        headerName: "#",
        cellRenderer: NodeIdRenderer,
      },
      {
        field: "athlete",
        filterParams: { buttons: ["clear", "reset", "apply"] },
      },
      {
        field: "age",
        filterParams: { buttons: ["apply", "cancel"] },
        enablePivot: true,
      },
      { field: "country", enableRowGroup: true },
      { field: "year", filter: "agNumberColumnFilter" },
      { field: "date" },
      {
        field: "sport",
        filter: "agMultiColumnFilter",
        filterParams: {
          filters: [
            {
              filter: "agTextColumnFilter",
              display: "accordion",
            },
            {
              filter: "agSetColumnFilter",
              display: "accordion",
            },
          ],
        },
      },
      { field: "gold", enableValue: true },
      { field: "silver", enableValue: true },
      { field: "bronze", enableValue: true },
      { field: "total", enableValue: true },
    ]);
    const defaultColDef = ref<ColDef>({
      editable: true,
      flex: 1,
      minWidth: 100,
      filter: true,
    });
    const statusBar = ref<StatusBar>({
      statusPanels: [
        { statusPanel: "agTotalAndFilteredRowCountComponent", align: "left" },
        { statusPanel: "agAggregationComponent" },
      ],
    });
    const rowGroupPanelShow = ref<"always" | "onlyWhenGrouping" | "never">(
      "always",
    );
    const paginationPageSize = ref(500);
    const paginationPageSizeSelector = ref<number[] | boolean>([
      100, 500, 1000,
    ]);
    const localeText = ref<LocaleText>(AG_GRID_LOCALE_ZZZ);
    const rowSelection = ref<RowSelectionOptions | "single" | "multiple">({
      mode: "multiRow",
    });
    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,
      statusBar,
      rowGroupPanelShow,
      paginationPageSize,
      paginationPageSizeSelector,
      localeText,
      rowSelection,
      rowData,
      onGridReady,
    };
  },
});

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

Changing Locale Copy Link

The grid uses the locale as it is needed. It does not refresh as the locale changes. If your application allows changing the locale for the application, you must destroy and recreate the grid for it to use the new locale.

Creating a Locale Copy Link

By default, the grid does not require a locale. If no locale is provided, the grid will default to English. If a locale is provided but is missing values, the default English will be used for the missing values.

All locales provided are listed above, and are also available in the @ag-grid-community/locale package.

To support other languages, the first step is to import the @ag-grid-community/locale package and reference the locale you're interested in.

There is a single locale file which covers all modules across all of AG Grid Enterprise and AG Grid Community. This was done on purpose as having a separate localisation file for each module would be harder to manage.

Locale Callback Copy Link

Providing a locale for the grid does not fit in with localisation libraries or localisation for a broader application. If you want the grid to take from an application wide locale, then implement the getLocaleText to act as a bridge between the grid and the applications localisation.

The example below shows providing a callback for the grid's localisation. The example for simplicity just returns the default value in upper case. In a real world application, the callback would use the applications localisation.

main.ts

import {
  createApp,
  defineComponent,
  onBeforeMount,
  ref,
  shallowRef,
} from "vue";
import { AgGridVue } from "ag-grid-vue3";
import { AgChartsEnterpriseModule } from "ag-charts-enterprise";
import {
  CellSelectionOptions,
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  CsvExportModule,
  GetLocaleText,
  GetLocaleTextParams,
  GridApi,
  GridOptions,
  GridReadyEvent,
  ICellRendererComp,
  ICellRendererParams,
  LocaleModule,
  ModuleRegistry,
  NumberEditorModule,
  NumberFilterModule,
  PaginationModule,
  SideBarDef,
  StatusBar,
  TextEditorModule,
  TextFilterModule,
  enableDevValidations,
} from "ag-grid-community";
import {
  CellSelectionModule,
  ClipboardModule,
  ColumnMenuModule,
  ColumnsToolPanelModule,
  ContextMenuModule,
  ExcelExportModule,
  FiltersToolPanelModule,
  IntegratedChartsModule,
  MultiFilterModule,
  PivotModule,
  RowGroupingPanelModule,
  SetFilterModule,
  SideBarModule,
  StatusBarModule,
} from "ag-grid-enterprise";
import { IOlympicData } from "./interfaces";

if (process.env.NODE_ENV !== "production") {
  // Enable extended validations only for development
  enableDevValidations();
}

ModuleRegistry.registerModules([
  NumberEditorModule,
  TextEditorModule,
  LocaleModule,
  PaginationModule,
  ClientSideRowModelModule,
  ClipboardModule,
  ColumnsToolPanelModule,
  CsvExportModule,
  ExcelExportModule,
  FiltersToolPanelModule,
  ColumnMenuModule,
  ContextMenuModule,
  MultiFilterModule,
  CellSelectionModule,
  PivotModule,
  SetFilterModule,
  SideBarModule,
  StatusBarModule,
  RowGroupingPanelModule,
  TextFilterModule,
  NumberFilterModule,
  IntegratedChartsModule.with(AgChartsEnterpriseModule),
]);

class NodeIdRenderer implements ICellRendererComp {
  eGui!: HTMLElement;

  init(params: ICellRendererParams) {
    this.eGui = document.createElement("div");
    this.eGui.textContent = params.node!.id! + 1;
  }

  getGui() {
    return this.eGui;
  }
  refresh() {
    return false;
  }
}

const VueExample = defineComponent({
  template: `
        <div style="height: 100%">
                <ag-grid-vue
      style="width: 100%; height: 100%;"
      @grid-ready="onGridReady"
      :columnDefs="columnDefs"
      :defaultColDef="defaultColDef"
      :sideBar="true"
      :statusBar="statusBar"
      :rowGroupPanelShow="rowGroupPanelShow"
      :pagination="true"
      :paginationPageSize="paginationPageSize"
      :paginationPageSizeSelector="paginationPageSizeSelector"
      :cellSelection="true"
      :enableCharts="true"
      :getLocaleText="getLocaleText"
      :rowData="rowData"></ag-grid-vue>
        </div>
    `,
  components: {
    "ag-grid-vue": AgGridVue,
  },
  setup(props) {
    const gridApi = shallowRef<GridApi<IOlympicData> | null>(null);
    const columnDefs = ref<ColDef[]>([
      // this row just shows the row index, doesn't use any data from the row
      {
        headerName: "#",
        cellRenderer: NodeIdRenderer,
      },
      {
        field: "athlete",
        filterParams: { buttons: ["clear", "reset", "apply"] },
      },
      {
        field: "age",
        filterParams: { buttons: ["apply", "cancel"] },
        enablePivot: true,
      },
      { field: "country", enableRowGroup: true },
      { field: "year", filter: "agNumberColumnFilter" },
      { field: "date" },
      {
        field: "sport",
        filter: "agMultiColumnFilter",
        filterParams: {
          filters: [
            {
              filter: "agTextColumnFilter",
              display: "accordion",
            },
            {
              filter: "agSetColumnFilter",
              display: "accordion",
            },
          ],
        },
      },
      { field: "gold", enableValue: true },
      { field: "silver", enableValue: true },
      { field: "bronze", enableValue: true },
      { field: "total", enableValue: true },
    ]);
    const defaultColDef = ref<ColDef>({
      editable: true,
      flex: 1,
      minWidth: 100,
      filter: true,
    });
    const statusBar = ref<StatusBar>({
      statusPanels: [
        { statusPanel: "agTotalAndFilteredRowCountComponent", align: "left" },
        { statusPanel: "agAggregationComponent" },
      ],
    });
    const rowGroupPanelShow = ref<"always" | "onlyWhenGrouping" | "never">(
      "always",
    );
    const paginationPageSize = ref(500);
    const paginationPageSizeSelector = ref<number[] | boolean>([
      100, 500, 1000,
    ]);
    const getLocaleText = ref<GetLocaleText>((params: GetLocaleTextParams) => {
      switch (params.key) {
        case "thousandSeparator":
          return ".";
        case "decimalSeparator":
          return ",";
        default:
          if (params.defaultValue) {
            // the &lrm; marker should not be made uppercase
            const val = params.defaultValue.split("&lrm;");
            const newVal = val[0].toUpperCase();
            if (val.length > 1) {
              return `${newVal}&lrm;`;
            }
            return newVal;
          }
          return "";
      }
    });
    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,
      statusBar,
      rowGroupPanelShow,
      paginationPageSize,
      paginationPageSizeSelector,
      getLocaleText,
      rowData,
      onGridReady,
    };
  },
});

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

In a real world application, the callback would look something like this:

const getLocaleText = (params) => {
    // to avoid key clash with external keys, we add 'grid' to the start of each key.
    const gridKey = 'grid.' + params.key;

    // look the value up using an application wide service
    return applicationLocaleService(gridKey);
}

Getting Started

AI Features

Layout & Styling

Charting

Core Features

Advanced Features

Vue Data GridLocalisation

Provided Locales Copy Link

Using a Provided Locale Module Copy Link

Customising a Provided Locale Copy Link

Changing Locale Copy Link

Creating a Locale Copy Link

Locale Callback Copy Link