### Clone Example Project

Source: https://www.ag-grid.com/vue-data-grid/server-side-operations-nodejs

Clone the example project repository to get started.

```bash
git clone https://github.com/ag-grid/ag-grid-server-side-nodejs-example.git
```

--------------------------------

### Clone Example Project

Source: https://www.ag-grid.com/vue-data-grid/server-side-operations-oracle

Clone the ag-grid-server-side-oracle-example project from GitHub to get started.

```bash
git clone https://github.com/ag-grid/ag-grid-server-side-oracle-example.git
```

--------------------------------

### Vue Example Setup

Source: https://www.ag-grid.com/vue-data-grid/notes

Sets up the Vue application and mounts it to the DOM.

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

--------------------------------

### AG Grid Vue Enterprise Example Setup

Source: https://www.ag-grid.com/vue-data-grid/key-features

This example demonstrates the setup for AG Grid Vue Enterprise, including enabling integrated charting, row grouping, pivoting, aggregation, and tool panels. Ensure all necessary modules are registered.

```javascript
import {
  createApp,
  defineComponent,
  onBeforeMount,
  ref,
  shallowRef,
} from "vue";
import { AgGridVue } from "ag-grid-vue3";
import { AgChartsEnterpriseModule } from "ag-charts-enterprise";
import {
  AllCommunityModule,
  CellSelectionOptions,
  ColDef,
  ColGroupDef,
  GridApi,
  GridOptions,
  GridReadyEvent,
  ModuleRegistry,
  RowGroupingDisplayType,
  SideBarDef,
} from "ag-grid-community";
import {
  AllEnterpriseModule,
  IntegratedChartsModule,
} from "ag-grid-enterprise";
ModuleRegistry.registerModules([
  AllCommunityModule,
  AllEnterpriseModule,
  IntegratedChartsModule.with(AgChartsEnterpriseModule),
]);

const VueExample = defineComponent({
  template: `
        <div style="height: 100%">
                <ag-grid-vue
      style="width: 100%; height: 100%;"
      @grid-ready="onGridReady"
      :rowData="rowData"
      :columnDefs="columnDefs"
      :defaultColDef="defaultColDef"
      :groupDisplayType="groupDisplayType"
      :cellSelection="true"
      :enableCharts="true"
      :sideBar="sideBar"
      @first-data-rendered="onFirstDataRendered"></ag-grid-vue>
        </div>
    `,
  components: {
    "ag-grid-vue": AgGridVue,
  },
  setup(props) {
    const gridApi = shallowRef<GridApi | null>(null);
    const rowData = ref<any[] | null>([
      {
        make: "Tesla",
        model: "Model Y",
        price: 64950,
        electric: true,
        month: "June",
      },
      {
        make: "Ford",
        model: "F-Series",
        price: 33850,
        electric: false,
        month: "October",
      },
      {
        make: "Toyota",
        model: "Corolla",
        price: 29600,
        electric: false,
        month: "August",
      },
      {
        make: "Mercedes",
        model: "EQA",
        price: 48890,
        electric: true,
        month: "February",
      },
      {
        make: "Fiat",
        model: "500",
        price: 15774,
        electric: false,
        month: "January",
      },
      {
        make: "Nissan",
        model: "Juke",
        price: 20675,
        electric: false,
        month: "March",

```

--------------------------------

### AG-Grid Vue Setup with Keyboard Navigation Example

Source: https://www.ag-grid.com/vue-data-grid/keyboard-navigation

A Vue 3 application setup using ag-grid-vue3, demonstrating grid configuration and data fetching. This example is designed to test tabbing into the grid from surrounding input elements.

```javascript
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,
  NumberEditorModule,
  NumberFilterModule,
  TextEditorModule,
  TextFilterModule,
  ValidationModule,
} from "ag-grid-community";
import { IOlympicData } from "./interfaces";
ModuleRegistry.registerModules([
  NumberEditorModule,
  TextEditorModule,
  TextFilterModule,
  NumberFilterModule,
  ClientSideRowModelModule,
  ...(process.env.NODE_ENV !== "production" ? [ValidationModule] : []),
]);

const VueExample = defineComponent({
  template: `
        <div style="height: 100%">
                <div class="test-container">
      <div>
        <div class="form-container">
          <label>
            Input Above
            <input>
            </label>
          </div>
        </div>
        <ag-grid-vue
          style="width: 100%; height: 100%;"
          @grid-ready="onGridReady"
          :columnDefs="columnDefs"
          :defaultColDef="defaultColDef"
          :rowData="rowData"></ag-grid-vue>
          <div class="form-container">
            <label>
              Input Below
              <input>
              </label>
            </div>
          </div>
        </div>
    `,
  components: {
    "ag-grid-vue": AgGridVue,
  },
  setup(props) {
    const gridApi = shallowRef<GridApi<IOlympicData> | null>(null);
    const columnDefs = ref<ColDef[]>([
      { headerName: "#", colId: "rowNum", valueGetter: "node.id" },
      { field: "athlete", minWidth: 170 },
      { field: "age" },
      { field: "country" },
      { field: "year" },
      { field: "date" },
      { field: "sport" },
      { field: "gold" },
      { field: "silver" },
      { field: "bronze" },
      { field: "total" },
    ]);
    const defaultColDef = ref<ColDef>({
      editable: true,
      flex: 1,
      minWidth: 100,
      filter: true,
    });
    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");

```

--------------------------------

### Complete Ag-Grid Vue Setup with Pagination

Source: https://www.ag-grid.com/vue-data-grid/deep-dive

This example shows a full Vue 3 component setup using `ag-grid-vue`, including module registration, data fetching, column definitions, and enabling pagination.

```typescript
import { createApp, defineComponent, onMounted, ref } from "vue";

import type { ColDef } from "ag-grid-community";
import { AllCommunityModule, ModuleRegistry } from "ag-grid-community";
import { AgGridVue } from "ag-grid-vue3";

ModuleRegistry.registerModules([AllCommunityModule]);

// Row Data Interface
interface IRow {
  mission: string;
  company: string;
  location: string;
  date: string;
  time: string;
  rocket: string;
  price: number;
  successful: boolean;
}

// Define the component configuration
const App = defineComponent({
  name: "App",
  template:
    `
    <ag-grid-vue
        style="width: 100%; height: 100%"
        :columnDefs="colDefs"
        :rowData="rowData"
        :defaultColDef="defaultColDef"
        :pagination="true"
    >
    </ag-grid-vue>
    `,
  components: {
    AgGridVue,
  },
  setup() {
    const rowData = ref<IRow[]>([]);

    const colDefs = ref<ColDef[]>([
      { field: "mission", filter: true },
      { field: "company" },
      { field: "location" },
      { field: "date" },
      { field: "price" },
      { field: "successful" },
      { field: "rocket" },
    ]);

    const defaultColDef = ref<ColDef>({
      filter: true,
    });

    // Fetch data when the component is mounted
    onMounted(async () => {
      rowData.value = await fetchData();
    });

    const fetchData = async () => {
      const response = await fetch(
        "https://www.ag-grid.com/example-assets/space-mission-data.json",
      );
      return response.json();
    };

    return {
      rowData,
      colDefs,
      defaultColDef,
    };
  },
});

createApp(App).mount("#app");

```

--------------------------------

### AG Grid Vue Setup with Sparklines

Source: https://www.ag-grid.com/vue-data-grid/sparklines-column-customisation

This example demonstrates the setup of an AG Grid Vue component, including module registration and column definitions with sparkline cell renderers.

```javascript
import {
  createApp,
  defineComponent,
  onBeforeMount,
  ref,
  shallowRef,
} from "vue";
import { AgGridVue } from "ag-grid-vue3";
import {
  AgChartsCommunityModule,
  AgSparklineOptions,
} from "ag-charts-community";
import {
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  GridApi,
  GridOptions,
  GridReadyEvent,
  ModuleRegistry,
  ValidationModule,
} from "ag-grid-community";
import {
  ClipboardModule,
  ContextMenuModule,
  SparklinesModule,
} from "ag-grid-enterprise";
import { getData } from "./data";
ModuleRegistry.registerModules([
  ClientSideRowModelModule,
  SparklinesModule.with(AgChartsCommunityModule),
  ClipboardModule,
  ContextMenuModule,
  ...(process.env.NODE_ENV !== "production" ? [ValidationModule] : []),
]);

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"
      :rowHeight="rowHeight"></ag-grid-vue>
        </div>
    `,
  components: {
    "ag-grid-vue": AgGridVue,
  },
  setup(props) {
    const gridApi = shallowRef<GridApi | null>(null);
    const columnDefs = ref<ColDef[]>([
      { field: "symbol", maxWidth: 120 },
      { field: "name", minWidth: 250 },
      {
        field: "change",
        cellRenderer: "agSparklineCellRenderer",
        cellRendererParams: {
          sparklineOptions: {
            type: "bar",
            direction: "vertical",
            fill: "#fac858",
            padding: {
              top: 10,
              bottom: 10,
            },
            label: {
              enabled: true,
              color: "#999999",
              placement: "outside-end",
              fontSize: 7.5,
              padding: 1,
            },
            axis: {
              type: "category",
              stroke: "#cccccc",
              strokeWidth: 2,
            },
            highlight: {
              highlightedItem: {
                stroke: "#fac858",
              },
            },
          } as AgSparklineOptions,
        },
      },
      {
        field: "volume",
        maxWidth: 140,
      },
    ]);
    const defaultColDef = ref<ColDef>({
      flex: 1,
      minWidth: 100,
    });
    const rowData = ref<any[] | null>(getData());
    const rowHeight = ref(80);

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

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

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

```

--------------------------------

### Full Vue 3 Example with Status Bar Configuration

Source: https://www.ag-grid.com/vue-data-grid/status-bar

This comprehensive example demonstrates setting up AG-Grid Vue 3 with status bar panels, row selection, and fetching data. Ensure `ag-grid-enterprise` is installed and `StatusBarModule` is registered.

```javascript
import {
  createApp,
  defineComponent,
  onBeforeMount,
  ref,
  shallowRef,
} from "vue";
import { AgGridVue } from "ag-grid-vue3";
import {
  CellSelectionOptions,
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  GridApi,
  GridOptions,
  GridReadyEvent,
  ModuleRegistry,
  NumberFilterModule,
  RowSelectionModule,
  RowSelectionOptions,
  StatusBar,
  TextFilterModule,
  ValidationModule,
} from "ag-grid-community";
import { CellSelectionModule, StatusBarModule } from "ag-grid-enterprise";
import { IOlympicData } from "./interfaces";
ModuleRegistry.registerModules([
  TextFilterModule,
  RowSelectionModule,
  ClientSideRowModelModule,
  CellSelectionModule,
  StatusBarModule,
  NumberFilterModule,
  ...(process.env.NODE_ENV !== "production" ? [ValidationModule] : []),
]);

const VueExample = defineComponent({
  template: `
        <div style="height: 100%">
                <ag-grid-vue
      style="width: 100%; height: 100%;"
      @grid-ready="onGridReady"
      :columnDefs="columnDefs"
      :defaultColDef="defaultColDef"
      :rowSelection="rowSelection"
      :cellSelection="true"
      :statusBar="statusBar"
      :rowData="rowData"></ag-grid-vue>
        </div>
    `,
  components: {
    "ag-grid-vue": AgGridVue,
  },
  setup(props) {
    const gridApi = shallowRef<GridApi<IOlympicData> | null>(null);
    const columnDefs = ref<ColDef[]>([
      { field: "athlete", minWidth: 200 },
      { field: "age", filter: "agNumberColumnFilter" },
      { field: "country", minWidth: 200 },
      { field: "year" },
      { field: "date", minWidth: 180 },
      { field: "sport", minWidth: 200 },
      { field: "gold" },
      { field: "silver" },
      { field: "bronze" },
      { field: "total" },
    ]);
    const defaultColDef = ref<ColDef>({
      flex: 1,
      minWidth: 100,
      filter: true,
    });
    const rowSelection = ref<RowSelectionOptions | "single" | "multiple">({
      mode: "multiRow",
    });
    const statusBar = ref<StatusBar>({
      statusPanels: [
        { statusPanel: "agTotalAndFilteredRowCountComponent" },
        { statusPanel: "agTotalRowCountComponent" },
        { statusPanel: "agFilteredRowCountComponent" },
        { statusPanel: "agSelectedRowCountComponent" },
        { statusPanel: "agAggregationComponent" },
      ],
    });
    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,
      rowSelection,
      statusBar,
      rowData,
      onGridReady,
    };
  },
});

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

```

--------------------------------

### Vue 3 AG-Grid Setup with Enterprise Modules

Source: https://www.ag-grid.com/vue-data-grid/custom-icons

Basic setup for an AG-Grid Vue 3 application, including importing and registering necessary enterprise modules. This example fetches data from a remote URL to populate the grid.

```typescript
import {
  createApp,
  defineComponent,
  onBeforeMount,
  ref,
  shallowRef,
} from "vue";
import { AgGridVue } from "ag-grid-vue3";
import "./style.css";
import {
  AutoGroupColumnDef,
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  GridApi,
  GridOptions,
  GridReadyEvent,
  ModuleRegistry,
  NumberEditorModule,
  NumberFilterModule,
  TextEditorModule,
  ValidationModule,
} from "ag-grid-community";
import {
  ColumnMenuModule,
  ColumnsToolPanelModule,
  ContextMenuModule,
  FiltersToolPanelModule,
  PivotModule,
  RowGroupingModule,
  SetFilterModule,
} from "ag-grid-enterprise";
import { IOlympicData } from "./interfaces";
ModuleRegistry.registerModules([
  NumberEditorModule,
  TextEditorModule,
  NumberFilterModule,
  ClientSideRowModelModule,
  ColumnsToolPanelModule,
  FiltersToolPanelModule,
  ColumnMenuModule,
  ContextMenuModule,
  RowGroupingModule,
  SetFilterModule,
  PivotModule,
  ...(process.env.NODE_ENV !== "production" ? [ValidationModule] : []),
]);

const VueExample = defineComponent({
  template: `
        <div style="height: 100%">
                <ag-grid-vue
      style="width: 100%; height: 100%;"
      @grid-ready="onGridReady"
      :columnDefs="columnDefs"
      :rowData="rowData"
      :autoGroupColumnDef="autoGroupColumnDef"></ag-grid-vue>
        </div>
    `,
  components: {
    "ag-grid-vue": AgGridVue,
  },
  setup(props) {
    const gridApi = shallowRef<GridApi<IOlympicData> | null>(null);
    const columnDefs = ref<ColDef[]>([
      { field: "country", rowGroup: true, hide: true },
      { field: "athlete", minWidth: 170 },
      { field: "age" },
      { field: "year" },
      { field: "date" },
      { field: "sport" },
      { field: "gold" },
      { field: "silver" },
      { field: "bronze" },
      { field: "total" },
    ]);
    const autoGroupColumnDef = ref<AutoGroupColumnDef>({
      headerName: "Country",
    });
    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,
      autoGroupColumnDef,
      onGridReady,
    };
  },
});

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

```

--------------------------------

### Database Setup Script

Source: https://www.ag-grid.com/vue-data-grid/server-side-operations-nodejs

Command to import the sample data into the MySQL database.

```bash
mysql -u root -p -D sample_data < ./data/olympic_winners.sql

```

--------------------------------

### Cell Editing API Examples - AG Grid Vue

Source: https://www.ag-grid.com/vue-data-grid/cell-editing-start-stop

Illustrates various cell editing functionalities including starting edits with different inputs, navigating between cells, and checking the editing status. This example is part of a Vue.js application setup.

```typescript
import {
  createApp,
  defineComponent,
  onBeforeMount,
  ref,
  shallowRef,
} from "vue";
import { AgGridVue } from "ag-grid-vue3";
import "./styles.css";
import {
  CellEditingStartedEvent,
  CellEditingStoppedEvent,
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  GridApi,
  GridOptions,
  GridReadyEvent,
  ModuleRegistry,
  NumberEditorModule,
  PinnedRowModule,
  RowEditingStartedEvent,
  RowEditingStoppedEvent,
  RowPinnedType,
  TextEditorModule,
  ValidationModule,
} from "ag-grid-community";
import { getData } from "./data";
ModuleRegistry.registerModules([
  NumberEditorModule,
  TextEditorModule,
  PinnedRowModule,
  ClientSideRowModelModule,
  ...(process.env.NODE_ENV !== "production" ? [ValidationModule] : []),
]);

function getPinnedTopData() {
  return [
    {
      firstName: "##",
      lastName: "##",
      gender: "##",
      address: "##",
      mood: "##",
      country: "##",
    },
  ];
}

```

--------------------------------

### Basic AG-Grid Vue Component Setup

Source: https://www.ag-grid.com/vue-data-grid/deep-dive

This snippet shows the complete setup for a basic AG-Grid Vue component, including module registration, row data, and column definitions. It's suitable for getting started with AG-Grid in a Vue.js application.

```typescript
import { createApp, defineComponent, ref } from "vue";

import type { ColDef } from "ag-grid-community";
import { AllCommunityModule, ModuleRegistry } from "ag-grid-community";
import { AgGridVue } from "ag-grid-vue3";

ModuleRegistry.registerModules([AllCommunityModule]);

// Row Data Interface
interface IRow {
  make: string;
  model: string;
  price: number;
  electric: boolean;
}

// Define the component configuration
const App = defineComponent({
  name: "App",
  template: `
    <ag-grid-vue
        style="width: 100%; height: 100%"
        :columnDefs="colDefs"
        :rowData="rowData"
    >
    </ag-grid-vue>
    `,
  components: {
    AgGridVue,
  },
  setup() {
    const rowData = ref<IRow[]>([
      { make: "Tesla", model: "Model Y", price: 64950, electric: true },
      { make: "Ford", model: "F-Series", price: 33850, electric: false },
      { make: "Toyota", model: "Corolla", price: 29600, electric: false },
    ]);

    const colDefs = ref<ColDef<IRow>[]>([
      { field: "make" },
      { field: "model" },
      { field: "price" },
      { field: "electric" },
    ]);

    return {
      rowData,
      colDefs,
    };
  },
});

createApp(App).mount("#app");

```

--------------------------------

### Start the Application

Source: https://www.ag-grid.com/vue-data-grid/server-side-operations-graphql

Start the GraphQL server application. Access the application at http://localhost:4000/.

```bash
yarn start
```

--------------------------------

### Vue Row Dragger with Custom Start Drag Pixels

Source: https://www.ag-grid.com/vue-data-grid/row-dragging-customisation

This example demonstrates how to configure AG Grid Vue to start row dragging immediately on mouse down (0px threshold). It includes setup for grid options, column definitions, and event handlers for row drag interactions.

```javascript
import {
  createApp,
  defineComponent,
  onBeforeMount,
  ref,
  shallowRef,
} from "vue";
import { AgGridVue } from "ag-grid-vue3";
import "./styles.css";
import {
  CellStyleModule,
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  GridApi,
  GridOptions,
  GridReadyEvent,
  ModuleRegistry,
  NumberFilterModule,
  RowDragCancelEvent,
  RowDragEndEvent,
  RowDragEnterEvent,
  RowDragModule,
  TextFilterModule,
  ValidationModule,
} from "ag-grid-community";
import CustomCellRenderer from "./customCellRendererVue";
import { IOlympicData } from "./interfaces";
ModuleRegistry.registerModules([
  TextFilterModule,
  NumberFilterModule,
  RowDragModule,
  CellStyleModule,
  ClientSideRowModelModule,
  ...(process.env.NODE_ENV !== "production" ? [ValidationModule] : []),
]);

const VueExample = defineComponent({
  template: `
        <div style="height: 100%">
                <ag-grid-vue
      style="width: 100%; height: 100%;"
      @grid-ready="onGridReady"
      :columnDefs="columnDefs"
      :defaultColDef="defaultColDef"
      :rowDragManaged="true"
      :rowData="rowData"
      @row-drag-enter="onRowDragEnter"
      @row-drag-end="onRowDragEnd"
      @row-drag-cancel="onRowDragCancel"></ag-grid-vue>
        </div>
    `,
  components: {
    "ag-grid-vue": AgGridVue,
    CustomCellRenderer,
  },
  setup(props) {
    const gridApi = shallowRef<GridApi<IOlympicData> | null>(null);
    const columnDefs = ref<ColDef[]>([
      {
        field: "athlete",
        cellClass: "custom-athlete-cell",
        cellRenderer: "CustomCellRenderer",
      },
      { field: "country" },
      { field: "year", width: 100 },
      { field: "date" },
      { field: "sport" },
      { field: "gold" },
      { field: "silver" },
      { field: "bronze" },
    ]);
    const defaultColDef = ref<ColDef>({
      width: 170,
      filter: true,
    });
    const rowData = ref<IOlympicData[]>(null);

    function onRowDragEnter(e: RowDragEnterEvent) {
      console.log("onRowDragEnter: node", e.node.id);
    }
    function onRowDragEnd(e: RowDragEndEvent) {
      console.log("onRowDragEnd: node", e.node.id);
    }
    function onRowDragCancel(e: RowDragCancelEvent) {
      console.log("onRowDragCancel: node", e.node.id);
    }
    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,
      onRowDragEnter,
      onRowDragEnd,
      onRowDragCancel,
    };
  },
});

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

```

--------------------------------

### Database Setup Script

Source: https://www.ag-grid.com/vue-data-grid/server-side-operations-graphql

Run the SQL script to create and populate the 'olympic_winners' table in the 'sample_data' database.

```bash
mysql -u root -p -D sample_data < ./data/olympic_winners.sql
```

--------------------------------

### Vue Example Component Setup

Source: https://www.ag-grid.com/vue-data-grid/server-side-model-row-height

This snippet shows the setup for a Vue AG Grid component, including grid API, column definitions, default column definitions, and essential grid options like row model type and event handlers. It also includes functions for getting row IDs, row heights, and resetting row heights.

```javascript
return {
      gridApi,
      columnDefs,
      defaultColDef,
      getRowId,
      getRowHeight,
      autoGroupColumnDef,
      rowModelType,
      rowData,
      onGridReady,
      onRowClicked,
      resetRowHeights,
    };
  },
```

--------------------------------

### Vue Example with Custom Group Cell Renderer

Source: https://www.ag-grid.com/vue-data-grid/tree-data-group-column

This is a complete Vue 3 application demonstrating the use of a custom cell renderer for the auto-group column. It includes grid setup, data loading, and event handling. Ensure you have `ag-grid-vue3` and `ag-grid-enterprise` installed.

```typescript
import { createApp, defineComponent } from "vue";

import type {
  CellDoubleClickedEvent,
  CellKeyDownEvent,
  ColDef,
  GridReadyEvent,
  ValueFormatterParams,
} from "ag-grid-community";
import {
  ClientSideRowModelModule,
  ModuleRegistry,
  ValidationModule,
} from "ag-grid-community";
import { TreeDataModule } from "ag-grid-enterprise";
import { AgGridVue } from "ag-grid-vue3";

import CustomGroupCellRenderer from "./customGroupCellRendererVue";
import { getData } from "./data";

ModuleRegistry.registerModules([
  ClientSideRowModelModule,
  TreeDataModule,
  ...(process.env.NODE_ENV !== "production" ? [ValidationModule] : []),
]);

const VueExample = defineComponent({
  template: `
        <div style="height: 100%">
                <ag-grid-vue
                
                style="width: 100%; height: 100%;"
                :columnDefs="columnDefs"
                @grid-ready="onGridReady"
                @cell-double-clicked="onCellDoubleClicked"
                @cell-key-down="onCellKeyDown"
                :autoGroupColumnDef="autoGroupColumnDef"
                :defaultColDef="defaultColDef"
                :groupDefaultExpanded="groupDefaultExpanded"
                :rowData="rowData"
                :treeData="true"
                :getDataPath="getDataPath"></ag-grid-vue>
        </div>
    `,
  components: {
    "ag-grid-vue": AgGridVue,
    CustomGroupCellRenderer,
  },
  data: function () {
    return {
      columnDefs: <ColDef[]>[
        { field: "created" },
        { field: "modified" },
        {
          field: "size",
          aggFunc: "sum",
          valueFormatter: (params: ValueFormatterParams) => {
            const sizeInKb = params.value / 1024;

            if (sizeInKb > 1024) {
              return `${+(sizeInKb / 1024).toFixed(2)} MB`;
            } else {
              return `${+sizeInKb.toFixed(2)} KB`;
            }
          },
        },
      ],
      gridApi: null,
      defaultColDef: <ColDef>{
        flex: 1,
        minWidth: 120,
      },
      autoGroupColumnDef: null,
      groupDefaultExpanded: null,
      rowData: null,
      getDataPath: (data) => data.path,
    };
  },
  created() {
    this.autoGroupColumnDef = {
      cellRenderer: "CustomGroupCellRenderer",
    };
    this.groupDefaultExpanded = 1;
  },
  methods: {
    onGridReady(params: GridReadyEvent) {
      this.gridApi = params.api;

      params.api.setGridOption("rowData", getData());
    },
    onCellDoubleClicked: (params: CellDoubleClickedEvent) => {
      if (params.colDef.showRowGroup) {
        params.node.setExpanded(!params.node.expanded);
      }
    },
    onCellKeyDown: (params: CellKeyDownEvent) => {
      if (!("colDef" in params)) {
        return;
      }
      if (!(params.event instanceof KeyboardEvent)) {
        return;
      }
      if (params.event.code !== "Enter") {
        return;
      }
      if (params.colDef.showRowGroup) {
        params.node.setExpanded(!params.node.expanded);
      }
    },
  },
});

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

```

--------------------------------

### Basic Grid Setup with Column Definitions

Source: https://www.ag-grid.com/vue-data-grid/tool-panel-columns

Sets up the AG Grid Vue component with initial column definitions.

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

// original column definitions supplied to the grid
this.columnDefs = [
    { field: 'a' },
    { field: 'b' },
    { field: 'c' }
];
```

--------------------------------

### Running the Application

Source: https://www.ag-grid.com/vue-data-grid/server-side-operations-nodejs

Command to start the Node.js application.

```bash
yarn start

```

--------------------------------

### Complete Vue Example for Single Row Selection

Source: https://www.ag-grid.com/vue-data-grid/row-selection-single-row

This example demonstrates a full AG Grid Vue setup with single row selection enabled. It includes component setup, column definitions, data fetching, and grid event handling.

```typescript
import {
  createApp,
  defineComponent,
  onBeforeMount,
  ref,
  shallowRef,
} from "vue";
import { AgGridVue } from "ag-grid-vue3";
import {
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  GridApi,
  GridOptions,
  GridReadyEvent,
  GridState,
  GridStateModule,
  ModuleRegistry,
  RowSelectionModule,
  RowSelectionOptions,
  ValidationModule,
} from "ag-grid-community";
import {
  ColumnMenuModule,
  ColumnsToolPanelModule,
  ContextMenuModule,
  RowGroupingModule,
} from "ag-grid-enterprise";
import { IOlympicData } from "./interfaces";

ModuleRegistry.registerModules([
  RowSelectionModule,
  GridStateModule,
  ClientSideRowModelModule,
  ColumnsToolPanelModule,
  ColumnMenuModule,
  ContextMenuModule,
  RowGroupingModule,
  ...(process.env.NODE_ENV !== "production" ? [ValidationModule] : []),
]);

const VueExample = defineComponent({
  template: `
        <div style="height: 100%">
                <ag-grid-vue
      style="width: 100%; height: 100%;"
      @grid-ready="onGridReady"
      :columnDefs="columnDefs"
      :defaultColDef="defaultColDef"
      :rowSelection="rowSelection"
      :initialState="initialState"
      :rowData="rowData"></ag-grid-vue>
        </div>
    `,
  components: {
    "ag-grid-vue": AgGridVue,
  },
  setup(props) {
    const gridApi = shallowRef<GridApi<IOlympicData> | null>(null);
    const columnDefs = ref<ColDef[]>([
      { field: "athlete", minWidth: 150 },
      { field: "age", maxWidth: 90 },
      { field: "year", maxWidth: 90 },
      { field: "sport", minWidth: 150 },
      { field: "gold" },
      { field: "silver" },
      { field: "bronze" },
    ]);
    const defaultColDef = ref<ColDef>({
      flex: 1,
      minWidth: 100,
    });
    const rowSelection = ref<RowSelectionOptions | "single" | "multiple">({
      mode: "singleRow",
    });
    const initialState = ref<GridState>({
      rowSelection: ["2"],
    });
    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/small-olympic-winners.json")
        .then((resp) => resp.json())
        .then((data) => updateData(data));
    };

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

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

```

--------------------------------

### Clone Example Project

Source: https://www.ag-grid.com/vue-data-grid/server-side-operations-graphql

Clone the AG Grid server-side GraphQL example project from GitHub.

```bash
git clone https://github.com/ag-grid/ag-grid-server-side-graphql-example.git
```

--------------------------------

### AG-Grid Vue Setup with Multiple Modules

Source: https://www.ag-grid.com/vue-data-grid/modules

This example sets up two AG-Grid Vue instances, each configured with a different set of modules. It demonstrates module registration and checks for registered modules upon grid readiness.

```javascript
import { createApp, defineComponent } from "vue";

import type { AgModuleName, ColDef, GridReadyEvent } from "ag-grid-community";
import {
  ClientSideRowModelModule,
  CsvExportModule,
  ModuleRegistry,
  NumberFilterModule,
  TextFilterModule,
  ValidationModule,
} from "ag-grid-community";
import {
  ClipboardModule,
  ColumnMenuModule,
  ContextMenuModule,
  ExcelExportModule,
  SetFilterModule,
} from "ag-grid-enterprise";
import { AgGridVue } from "ag-grid-vue3";

import "./styles.css";

const sharedModules = [
  ClientSideRowModelModule,
  ColumnMenuModule,
  ContextMenuModule,
  ...(process.env.NODE_ENV !== "production" ? [ValidationModule] : []),
];
const leftModules = [SetFilterModule, ClipboardModule, CsvExportModule];
const rightModules = [
  TextFilterModule,
  NumberFilterModule,
  CsvExportModule,
  ExcelExportModule,
];

// Register shared Modules globally
ModuleRegistry.registerModules(sharedModules);

let rowIdSequence = 100;
const createRowBlock = () =>
  ["Red", "Green", "Blue"].map((color) => ({
    id: rowIdSequence++,
    color: color,
    value1: Math.floor(window.agRandom() * 100),
  }));

const VueExample = defineComponent({
  /* html */
  template: `<div class="example-wrapper">

            <div class="inner-col">
                <div style="height: 100%;" class="inner-col">
                    <ag-grid-vue
                        style="height: 100%;"
                        :gridId="'Left'"
                        :defaultColDef="defaultColDef"
                        :rowData="leftRowData"
                        :columnDefs="columns"
                        :modules="leftModules"
                        @gridReady="onGridReady"
                        >
                    </ag-grid-vue>
                </div>
            </div>

            <div class="inner-col">
                <div style="height: 100%;" class="inner-col">
                    <ag-grid-vue
                        style="height: 100%;"
                        :gridId="'Right'"
                        :defaultColDef="defaultColDef"
                        :rowData="rightRowData"
                        :columnDefs="columns"
                        :modules="rightModules"
                        @gridReady="onGridReady"
                        >
                    </ag-grid-vue>
                </div>
            </div>
        </div>
    `,
  components: {
    "ag-grid-vue": AgGridVue,
  },
  data: function () {
    return {
      leftRowData: createRowBlock(),
      rightRowData: createRowBlock(),
      leftModules,
      rightModules,
      defaultColDef: <ColDef>{
        flex: 1,
        minWidth: 100,
        filter: true,
        floatingFilter: true,
      },
      columns: <ColDef[]>[
        { field: "id" },
        { field: "color" },
        { field: "value1" },
      ],
      onGridReady: (event: GridReadyEvent) => {
        const api = event.api;
        const moduleNames: AgModuleName[] = [
          "ClipboardModule",
          "ClientSideRowModelModule",
          "ColumnMenuModule",
          "ContextMenuModule",
          "CsvExportModule",
          "ExcelExportModule",
          "NumberFilterModule",
          "SetFilterModule",
          "TextFilterModule",
          "IntegratedChartsModule", // Not registered in this example
        ];
        const registered = moduleNames.filter((name) =>
          api.isModuleRegistered(name),
        );
        console.log(api.getGridId(), "registered:", registered.join(","));
      },
    };
  },
});

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

```

--------------------------------

### Example: Accessing Filter Instance

Source: https://www.ag-grid.com/vue-data-grid/filter-api

This example demonstrates how to get a reference to the filter UI instance for a column with the key 'name' and then interact with it.

```javascript
// Get a reference to the 'name' filter UI instance
const filterInstance = await api.getColumnFilterInstance('name');

// If using a custom filter, any other methods you have added will also be present,
// allowing bespoke behaviour to be added to your filter.
```

--------------------------------

### Start and Stop Cell Editing in AG Grid Vue

Source: https://www.ag-grid.com/vue-data-grid/cell-editing-start-stop

Demonstrates how to programmatically start and stop cell editing using the AG Grid API. Includes examples for starting with specific keys or pinned rows, and stopping editing.

```javascript
function getPinnedBottomData() {
  return [
    {
      firstName: "##",
      lastName: "##",
      gender: "##",
      address: "##",
      mood: "##",
      country: "##",
    },
  ];
}

const VueExample = defineComponent({
  template: `
        <div style="height: 100%">
                <div class="example-wrapper">
      <div>
        <div style="margin-bottom: 5px; display: flex">
          <button v-on:click="onBtStartEditing(undefined)">edit (0)</button>
          <button v-on:click="onBtStartEditing('Backspace')">edit (0, Backspace)</button>
          <button v-on:click="onBtStartEditing('T')">edit (0, 'T')</button>
          <button v-on:click="onBtStartEditing(undefined, 'top')">edit (0, Top)</button>
          <button v-on:click="onBtStartEditing(undefined, 'bottom')">edit (0, Bottom)</button>
        </div>
        <div style="margin-bottom: 5px; display: flex">
          <button v-on:click="onBtStopEditing()">stop ()
          </button>
          <button v-on:click="onBtNextCell()">next ()
          </button>
          <button v-on:click="onBtPreviousCell()">previous ()
          </button>
          <button v-on:click="onBtWhich()">which ()
          </button>
        </div>
      </div>
      <div class="grid-wrapper">
        <ag-grid-vue
          style="width: 100%; height: 100%;"
          @grid-ready="onGridReady"
          :columnDefs="columnDefs"
          :defaultColDef="defaultColDef"
          :rowData="rowData"
          :pinnedTopRowData="pinnedTopRowData"
          :pinnedBottomRowData="pinnedBottomRowData"
          @row-editing-started="onRowEditingStarted"
          @row-editing-stopped="onRowEditingStopped"
          @cell-editing-started="onCellEditingStarted"
          @cell-editing-stopped="onCellEditingStopped"></ag-grid-vue>
        </div>
      </div>
        </div>
    `,
  components: {
    "ag-grid-vue": AgGridVue,
  },
  setup(props) {
    const gridApi = shallowRef<GridApi | null>(null);
    const columnDefs = ref<ColDef[]>([
      { field: "firstName" },
      { field: "lastName" },
      { field: "gender" },
      { field: "age" },
      { field: "mood" },
      { field: "country" },
      { field: "address", minWidth: 550 },
    ]);
    const defaultColDef = ref<ColDef>({
      flex: 1,
      minWidth: 110,
      editable: true,
    });
    const rowData = ref<any[] | null>(getData());
    const pinnedTopRowData = ref<any[]>(getPinnedTopData());
    const pinnedBottomRowData = ref<any[]>(getPinnedBottomData());

    function onRowEditingStarted(event: RowEditingStartedEvent) {
      console.log("never called - not doing row editing");
    }
    function onRowEditingStopped(event: RowEditingStoppedEvent) {
      console.log("never called - not doing row editing");
    }
    function onCellEditingStarted(event: CellEditingStartedEvent) {
      console.log("cellEditingStarted");
    }
    function onCellEditingStopped(event: CellEditingStoppedEvent) {
      console.log("cellEditingStopped");
    }
    function onBtStopEditing() {
      gridApi.value!.stopEditing();
    }
    function onBtStartEditing(key?: string, pinned?: RowPinnedType) {
      gridApi.value!.setFocusedCell(0, "lastName", pinned);
      gridApi.value!.startEditingCell({
        rowIndex: 0,
        colKey: "lastName",
        // set to 'top', 'bottom' or undefined
        rowPinned: pinned,
        key: key,
      });
    }
    function onBtNextCell() {
      gridApi.value!.tabToNextCell();
    }
    function onBtPreviousCell() {
      gridApi.value!.tabToPreviousCell();
    }
    function onBtWhich() {
      const cellDefs = gridApi.value!.getEditingCells();
      if (cellDefs.length > 0) {
        const cellDef = cellDefs[0];
        console.log(
          "editing cell is: row = " +
            cellDef.rowIndex +
            ", col = " +
            cellDef.column.getId() +
            ", floating = " +
            cellDef.rowPinned,
        );
      } else {
        console.log("no cells are editing");
      }
    }
    const onGridReady = (params: GridReadyEvent) => {
      gridApi.value = params.api;
    };

    return {
      gridApi,
      columnDefs,
      defaultColDef,
      rowData,
      pinnedTopRowData,
      pinnedBottomRowData,
      onGridReady,
      onRowEditingStarted,
      onRowEditingStopped,
      onCellEditingStarted,
      onCellEditingStopped,
      onBtStopEditing,
      onBtStartEditing,
      onBtNextCell,
      onBtPreviousCell,
      onBtWhich,
    };
  },
});

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

```