Vue Data GridRow Grouping - Single Column

Version 36.2.0

Enterprise

Display the group structure with a single generated column in the grid.

main.ts

import {
  createApp,
  defineComponent,
  onBeforeMount,
  ref,
  shallowRef,
} from "vue";
import { AgGridVue } from "ag-grid-vue3";
import {
  AutoGroupColumnDef,
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  GridApi,
  GridOptions,
  GridReadyEvent,
  ModuleRegistry,
  RowGroupingDisplayType,
  enableDevValidations,
} from "ag-grid-community";
import { RowGroupingModule } from "ag-grid-enterprise";
import { IOlympicData } from "./interfaces";

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

ModuleRegistry.registerModules([ClientSideRowModelModule, RowGroupingModule]);

const VueExample = defineComponent({
  template: `
        <div style="height: 100%">
                <ag-grid-vue
      style="width: 100%; height: 100%;"
      @grid-ready="onGridReady"
      :columnDefs="columnDefs"
      :defaultColDef="defaultColDef"
      :autoGroupColumnDef="autoGroupColumnDef"
      :groupDisplayType="groupDisplayType"
      :groupDefaultExpanded="groupDefaultExpanded"
      :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: "country", rowGroup: true, hide: true },
      { field: "year", rowGroup: true, hide: true },
      { field: "athlete" },
      { field: "sport" },
      { field: "total" },
    ]);
    const defaultColDef = ref<ColDef>({
      flex: 1,
      minWidth: 100,
    });
    const autoGroupColumnDef = ref<AutoGroupColumnDef>({
      minWidth: 200,
    });
    const groupDisplayType = ref<RowGroupingDisplayType>("singleColumn");
    const groupDefaultExpanded = ref(1);
    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,
      autoGroupColumnDef,
      groupDisplayType,
      groupDefaultExpanded,
      rowData,
      onGridReady,
    };
  },
});

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

Enabling a Single Group Column Copy Link

The example above demonstrates that both country and year are grouped. Only a single group column is used to display the group value cells.

The Single Group Column is enabled by default, but it can be set explicitly by setting the groupDisplayType grid option to "singleColumn" as shown below:

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

this.groupDisplayType = 'singleColumn';

Configuration Copy Link

The Single Group Column is added to the grid when row grouping is present, and can be configured via the autoGroupColumnDef grid option to define Column Options.

main.ts

import {
  createApp,
  defineComponent,
  onBeforeMount,
  ref,
  shallowRef,
} from "vue";
import { AgGridVue } from "ag-grid-vue3";
import {
  AutoGroupColumnDef,
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  GridApi,
  GridOptions,
  GridReadyEvent,
  ModuleRegistry,
  RowGroupingDisplayType,
  enableDevValidations,
} from "ag-grid-community";
import { RowGroupingModule } from "ag-grid-enterprise";
import { IOlympicData } from "./interfaces";

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

ModuleRegistry.registerModules([ClientSideRowModelModule, RowGroupingModule]);

const VueExample = defineComponent({
  template: `
        <div style="height: 100%">
                <ag-grid-vue
      style="width: 100%; height: 100%;"
      @grid-ready="onGridReady"
      :columnDefs="columnDefs"
      :defaultColDef="defaultColDef"
      :autoGroupColumnDef="autoGroupColumnDef"
      :groupDisplayType="groupDisplayType"
      :groupDefaultExpanded="groupDefaultExpanded"
      :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: "country", rowGroup: true, hide: true },
      { field: "year", rowGroup: true, hide: true },
      { field: "sport" },
      { field: "total" },
    ]);
    const defaultColDef = ref<ColDef>({
      flex: 1,
      minWidth: 100,
    });
    const autoGroupColumnDef = ref<AutoGroupColumnDef>({
      headerName: "My Group",
      field: "athlete",
      minWidth: 220,
      cellRendererParams: {
        suppressCount: true,
      },
    });
    const groupDisplayType = ref<RowGroupingDisplayType>("singleColumn");
    const groupDefaultExpanded = ref(-1);
    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,
      autoGroupColumnDef,
      groupDisplayType,
      groupDefaultExpanded,
      rowData,
      onGridReady,
    };
  },
});

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

The example above uses the configuration demonstrated below to change the columns header name, apply a minimum width, and display athlete values in the leaf level rows. It also Configures the Group Cell Component using the cellRendererParams option to remove the count from each row group.

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

this.autoGroupColumnDef = {
    headerName: 'My Group',
    field: 'athlete',
    minWidth: 220,
    cellRendererParams: {
        suppressCount: true,
    }
};

Cell Component Copy Link

The group column uses the agGroupCellRenderer component to display the group information, as well as the chevron control for expanding and collapsing rows. The renderer also embeds the grouped columns renderer and displays this inside of the group cell.

This can be configured with several Group Renderer Properties using the autoGroupColumnDef property cellRendererParams. The example below removes the row count and also Configures Row Selection to enable checkboxes for row selection.

main.ts

import {
  createApp,
  defineComponent,
  onBeforeMount,
  ref,
  shallowRef,
} from "vue";
import { AgGridVue } from "ag-grid-vue3";
import "./styles.css";
import {
  AutoGroupColumnDef,
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  GridApi,
  GridOptions,
  GridReadyEvent,
  ModuleRegistry,
  RowGroupingDisplayType,
  RowSelectionModule,
  RowSelectionOptions,
  enableDevValidations,
} from "ag-grid-community";
import { RowGroupingModule } from "ag-grid-enterprise";
import CustomMedalCellRenderer from "./customMedalCellRendererVue";
import { IOlympicData } from "./interfaces";

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

ModuleRegistry.registerModules([
  RowSelectionModule,
  ClientSideRowModelModule,
  RowGroupingModule,
]);

const VueExample = defineComponent({
  template: `
        <div style="height: 100%">
                <ag-grid-vue
      style="width: 100%; height: 100%;"
      @grid-ready="onGridReady"
      :columnDefs="columnDefs"
      :defaultColDef="defaultColDef"
      :autoGroupColumnDef="autoGroupColumnDef"
      :groupDisplayType="groupDisplayType"
      :rowSelection="rowSelection"
      :rowData="rowData"></ag-grid-vue>
        </div>
    `,
  components: {
    "ag-grid-vue": AgGridVue,
    CustomMedalCellRenderer,
  },
  setup(props) {
    const gridApi = shallowRef<GridApi<IOlympicData> | null>(null);
    const columnDefs = ref<ColDef[]>([
      {
        field: "total",
        rowGroup: true,
        cellRenderer: "CustomMedalCellRenderer",
      },
      { field: "year" },
      { field: "athlete" },
      { field: "sport" },
    ]);
    const defaultColDef = ref<ColDef>({
      flex: 1,
      minWidth: 100,
    });
    const autoGroupColumnDef = ref<AutoGroupColumnDef>({
      headerName: "Gold Medals",
      minWidth: 240,
      cellRendererParams: {
        suppressCount: true,
      },
    });
    const groupDisplayType = ref<RowGroupingDisplayType>("singleColumn");
    const rowSelection = ref<RowSelectionOptions | "single" | "multiple">({
      mode: "singleRow",
      checkboxLocation: "autoGroupColumn",
    });
    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,
      autoGroupColumnDef,
      groupDisplayType,
      rowSelection,
      rowData,
      onGridReady,
    };
  },
});

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

styles.css

.imgSpan {
    display: flex;
    height: 40px;
    width: 100%;
    align-items: center;
}

.medalIcon {
    display: block;
    width: 15px;
    height: auto;
    max-height: 50%;
}

customMedalCellRendererVue.ts

export default {
    template: `<span class="imgSpan">
      <img v-for="images in arr" :src="src" class="medalIcon" />
      </span>`,
    data: function () {
        return {
            arr: [],
            src: 'https://www.ag-grid.com/example-assets/gold-star.png',
        };
    },
    beforeMount() {
        this.updateDisplay(this.params);
    },
    methods: {
        refresh(params) {
            this.updateDisplay(params);
        },
        updateDisplay(params) {
            this.arr = new Array(params.value ?? 0);
        },
    },
};

The example above demonstrates the following configuration:

<ag-grid-vue
    :columnDefs="columnDefs"
    :autoGroupColumnDef="autoGroupColumnDef"
    :rowSelection="rowSelection"
    /* other grid options ... */>
</ag-grid-vue>

this.columnDefs = [
    { field: 'total', rowGroup: true, cellRenderer: CustomMedalCellRenderer },
    // ... other column definitions
];
this.autoGroupColumnDef = {
    cellRendererParams: {
        suppressCount: true,
    }
};
this.rowSelection = {
    mode: 'singleRow',
    checkboxLocation: 'autoGroupColumn',
};

Configurable Options Copy Link

boolean

Set to true to not include any padding (indentation) in the child rows.

boolean

Set to true to suppress expand on double click.

boolean

Set to true to suppress expand on ↵ Enter

string | TotalValueGetterFunc

The value getter for the total row text. Can be a function or expression.

boolean

If true, count is not displayed beside the name.

any

The renderer to use for inside the cell (after grouping functions are added)

any

Additional params to customise to the innerRenderer.

CellRendererSelectorFunc

Callback to enable different innerRenderers to be used based of value of params.

Checkbox Selection Copy Link

The agGroupCellRenderer can be configured to show checkboxes for row selection. Setting the Row Selection checkboxLocation property to 'autoGroupColumn' hides the Checkbox Column instead using the group cell renderer to display checkboxes.

Setting groupSelects to 'descendants' causes selecting a group row to also select all of its children.

main.ts

import {
  createApp,
  defineComponent,
  onBeforeMount,
  ref,
  shallowRef,
} from "vue";
import { AgGridVue } from "ag-grid-vue3";
import {
  AutoGroupColumnDef,
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  GridApi,
  GridOptions,
  GridReadyEvent,
  ModuleRegistry,
  RowSelectionModule,
  RowSelectionOptions,
  enableDevValidations,
} from "ag-grid-community";
import { RowGroupingModule } from "ag-grid-enterprise";
import { IOlympicData } from "./interfaces";

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

ModuleRegistry.registerModules([
  RowSelectionModule,
  ClientSideRowModelModule,
  RowGroupingModule,
]);

const VueExample = defineComponent({
  template: `
        <div style="height: 100%">
                <ag-grid-vue
      style="width: 100%; height: 100%;"
      @grid-ready="onGridReady"
      :columnDefs="columnDefs"
      :defaultColDef="defaultColDef"
      :autoGroupColumnDef="autoGroupColumnDef"
      :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[]>([
      { field: "country", rowGroup: true },
      { field: "athlete" },
      { field: "year" },
      { field: "sport" },
    ]);
    const defaultColDef = ref<ColDef>({
      flex: 1,
      minWidth: 100,
    });
    const autoGroupColumnDef = ref<AutoGroupColumnDef>({
      minWidth: 220,
    });
    const rowSelection = ref<RowSelectionOptions | "single" | "multiple">({
      mode: "multiRow",
      groupSelects: "descendants",
      selectAll: "all",
      checkboxLocation: "autoGroupColumn",
    });
    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,
      autoGroupColumnDef,
      rowSelection,
      rowData,
      onGridReady,
    };
  },
});

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

The example above demonstrates the following configuration:

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

this.rowSelection = {
    mode: 'multiRow',
    groupSelects: 'descendants',
    selectAll: 'all',
    checkboxLocation: 'autoGroupColumn',
};

Custom Inner Renderer Copy Link

When using the group cell renderer, the agGroupCellRenderer component will inherit the grouped columns renderer and display this inside of the group cell, adjacent to any configured checkboxes, cell count, and the expand/collapse chevron control.

This inner renderer can be overridden with a Custom Cell Component by setting the innerRenderer and innerRendererParams properties on the cellRendererParams configuration.

main.ts

import {
  createApp,
  defineComponent,
  onBeforeMount,
  ref,
  shallowRef,
} from "vue";

import type { ColDef, GridApi, GridReadyEvent } from "ag-grid-community";
import {
  ClientSideRowModelModule,
  ModuleRegistry,
  enableDevValidations,
} from "ag-grid-community";
import { RowGroupingModule } from "ag-grid-enterprise";
import { AgGridVue } from "ag-grid-vue3";

import CustomMedalCellRenderer from "./customMedalCellRenderer";
import "./styles.css";

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

ModuleRegistry.registerModules([ClientSideRowModelModule, RowGroupingModule]);

const VueExample = defineComponent({
  template: `
        <div style="height: 100%">
            <ag-grid-vue
              style="width: 100%; height: 100%;"
              :columnDefs="columnDefs"
              @grid-ready="onGridReady"
              :defaultColDef="defaultColDef"
              :autoGroupColumnDef="autoGroupColumnDef"
              :groupDisplayType="groupDisplayType"
              :rowData="rowData">
            </ag-grid-vue>
        </div>
    `,
  components: {
    "ag-grid-vue": AgGridVue,
    CustomMedalCellRenderer,
  },
  setup(props) {
    const columnDefs = ref<ColDef[]>([
      { field: "total", rowGroup: true },
      { field: "country" },
      { field: "year" },
      { field: "athlete" },
      { field: "sport" },
    ]);
    const gridApi = shallowRef<GridApi | null>(null);
    const defaultColDef = ref<ColDef>({
      flex: 1,
      minWidth: 100,
    });
    const autoGroupColumnDef = ref<ColDef>({
      headerName: "Gold Medals",
      minWidth: 220,
      cellRendererParams: {
        suppressCount: true,
        innerRenderer: "CustomMedalCellRenderer",
      },
    });
    const groupDisplayType = ref(null);
    const rowData = ref(null);

    onBeforeMount(() => {
      groupDisplayType.value = "singleColumn";
    });

    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 {
      columnDefs,
      gridApi,
      defaultColDef,
      autoGroupColumnDef,
      groupDisplayType,
      rowData,
      onGridReady,
    };
  },
});

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

styles.css

.imgSpan {
    display: flex;
    height: 40px;
    width: 100%;
    align-items: center;
}

.medalIcon {
    display: block;
    width: 15px;
    height: auto;
    max-height: 50%;
}

customMedalCellRenderer.ts

import type { RefreshCellsParams } from "ag-grid-community";

export default {
  template: `
        <span class="imgSpan">
            <img v-for="images in arr" :src="src" class="medalIcon" />
        </span>
    `,
  data: function () {
    return {
      arr: [],
      src: "https://www.ag-grid.com/example-assets/gold-star.png",
    };
  },
  beforeMount() {
    this.updateDisplay(this.params);
  },
  methods: {
    refresh(params: RefreshCellsParams) {
      this.updateDisplay(params);
    },
    updateDisplay(params) {
      this.arr = new Array(params.value ?? 0);
    },
  },
};

The example above uses the following configuration to provide a custom inner renderer to the group column:

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

this.autoGroupColumnDef = {
    cellRendererParams: {
        innerRenderer: CustomMedalCellRenderer,
    },
};

Custom Cell Renderer Copy Link

The Group Cell Renderer can be entirely replaced with a Custom Cell Component by setting the cellRenderer property on the autoGroupColumnDef configuration.

main.ts

import {
  createApp,
  defineComponent,
  onBeforeMount,
  ref,
  shallowRef,
} from "vue";
import { AgGridVue } from "ag-grid-vue3";
import {
  AutoGroupColumnDef,
  CellDoubleClickedEvent,
  CellKeyDownEvent,
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  GridApi,
  GridOptions,
  GridReadyEvent,
  ModuleRegistry,
  enableDevValidations,
} from "ag-grid-community";
import { RowGroupingModule } from "ag-grid-enterprise";
import CustomGroupCellRenderer from "./customGroupCellRendererVue";
import { IOlympicData } from "./interfaces";

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

ModuleRegistry.registerModules([ClientSideRowModelModule, RowGroupingModule]);

const VueExample = defineComponent({
  template: `
        <div style="height: 100%">
                <ag-grid-vue
      style="width: 100%; height: 100%;"
      @grid-ready="onGridReady"
      :columnDefs="columnDefs"
      :autoGroupColumnDef="autoGroupColumnDef"
      :defaultColDef="defaultColDef"
      :groupDefaultExpanded="groupDefaultExpanded"
      :rowData="rowData"
      @cell-double-clicked="onCellDoubleClicked"
      @cell-key-down="onCellKeyDown"></ag-grid-vue>
        </div>
    `,
  components: {
    "ag-grid-vue": AgGridVue,
    CustomGroupCellRenderer,
  },
  setup(props) {
    const gridApi = shallowRef<GridApi<IOlympicData> | null>(null);
    const columnDefs = ref<ColDef[]>([
      {
        field: "country",
        rowGroup: true,
        hide: true,
      },
      {
        field: "year",
        rowGroup: true,
        hide: true,
      },
      {
        field: "athlete",
      },
      {
        field: "total",
        aggFunc: "sum",
      },
    ]);
    const autoGroupColumnDef = ref<AutoGroupColumnDef>({
      cellRenderer: "CustomGroupCellRenderer",
    });
    const defaultColDef = ref<ColDef>({
      flex: 1,
      minWidth: 120,
    });
    const groupDefaultExpanded = ref(1);
    const rowData = ref<IOlympicData[]>(null);

    function onCellDoubleClicked(
      params: CellDoubleClickedEvent<IOlympicData, any>,
    ) {
      if (params.colDef.showRowGroup) {
        params.node.setExpanded(!params.node.expanded);
      }
    }
    function onCellKeyDown(params: CellKeyDownEvent<IOlympicData, any>) {
      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);
      }
    }
    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,
      autoGroupColumnDef,
      defaultColDef,
      groupDefaultExpanded,
      rowData,
      onGridReady,
      onCellDoubleClicked,
      onCellKeyDown,
    };
  },
});

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

customGroupCellRendererVue.ts

export default {
    data() {
        return {
            isGroup: null,
            paddingLeft: null,
            rotation: null,
        };
    },
    template: `
        <div
            :style="{ paddingLeft: paddingLeft }"
        >
            <div
                v-if="isGroup"
                :style="{ transform: rotation, cursor: 'pointer', display: 'inline-block' }"
                @click="onExpand"
            >
                &rarr;
            </div>
            &nbsp;
            {{params.value}}
        </div>
    `,
    methods: {
        onExpand() {
            this.params.node.setExpanded(!this.params.node.expanded);
        },
        onExpandedChanged() {
            this.rotation = this.params.node.expanded ? 'rotate(90deg)' : 'rotate(0deg)';
        },
    },
    beforeMount() {
        this.isGroup = this.params.node.group;
        this.paddingLeft = `${this.params.node.level * 15}px`;
        this.rotation = this.params.node.expanded ? 'rotate(90deg)' : 'rotate(0deg)';

        this.params.node.addEventListener('expandedChanged', this.onExpandedChanged);
    },
    beforeDestroy() {
        this.params.node.removeEventListener('expandedChanged', this.onExpandedChanged);
    },
};

It is also possible to Determine Cell Renderers Dynamically.

Filtering Copy Link

The grid filters leaf rows by default, if all of a groups children are filtered out, the group is also hidden.

Inherit Row Grouped Columns Filters Copy Link

The single group column content changes depending on the columns which have row grouping enabled. The agGroupColumnFilter can be used to display the filters for the columns with row grouping enabled.

main.ts

import {
  createApp,
  defineComponent,
  onBeforeMount,
  ref,
  shallowRef,
} from "vue";
import { AgGridVue } from "ag-grid-vue3";
import {
  AutoGroupColumnDef,
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  GridApi,
  GridOptions,
  GridReadyEvent,
  ModuleRegistry,
  NumberFilterModule,
  enableDevValidations,
} from "ag-grid-community";
import {
  GroupFilterModule,
  RowGroupingModule,
  SetFilterModule,
} from "ag-grid-enterprise";
import { IOlympicData } from "./interfaces";

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

ModuleRegistry.registerModules([
  NumberFilterModule,
  ClientSideRowModelModule,
  RowGroupingModule,
  SetFilterModule,
  GroupFilterModule,
]);

const VueExample = defineComponent({
  template: `
        <div style="height: 100%">
                <ag-grid-vue
      style="width: 100%; height: 100%;"
      @grid-ready="onGridReady"
      :columnDefs="columnDefs"
      :defaultColDef="defaultColDef"
      :autoGroupColumnDef="autoGroupColumnDef"
      :groupDefaultExpanded="groupDefaultExpanded"
      :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: "country", rowGroup: true, hide: true, filter: true },
      { field: "year", rowGroup: true, hide: true, filter: true },
      { field: "athlete" },
      { field: "sport" },
      { field: "total" },
    ]);
    const defaultColDef = ref<ColDef>({
      flex: 1,
      minWidth: 100,
    });
    const autoGroupColumnDef = ref<AutoGroupColumnDef>({
      minWidth: 200,
      filter: "agGroupColumnFilter",
      floatingFilter: true,
    });
    const groupDefaultExpanded = ref(1);
    const rowData = ref<IOlympicData[]>(null);

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

      params.api.showColumnFilter("ag-Grid-AutoColumn");

      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,
      autoGroupColumnDef,
      groupDefaultExpanded,
      rowData,
      onGridReady,
    };
  },
});

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

The example above demonstrates the following configuration to enable the group column filter:

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

this.autoGroupColumnDef = {
    filter: 'agGroupColumnFilter',
    floatingFilter: true,
};

When accessing filter instances via API, access the filters on the columns with row grouping.

Tree Filter Copy Link

The agSetColumnFilter can be used to filter the group column in a Tree List, representing the hierarchy of the row groups.

main.ts

import {
  createApp,
  defineComponent,
  onBeforeMount,
  ref,
  shallowRef,
} from "vue";
import { AgGridVue } from "ag-grid-vue3";
import {
  AutoGroupColumnDef,
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  GridApi,
  GridOptions,
  GridReadyEvent,
  KeyCreatorParams,
  ModuleRegistry,
  NumberFilterModule,
  enableDevValidations,
} from "ag-grid-community";
import { RowGroupingModule, SetFilterModule } from "ag-grid-enterprise";
import { IOlympicData } from "./interfaces";

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

ModuleRegistry.registerModules([
  NumberFilterModule,
  ClientSideRowModelModule,
  RowGroupingModule,
  SetFilterModule,
]);

const VueExample = defineComponent({
  template: `
        <div style="height: 100%">
                <ag-grid-vue
      style="width: 100%; height: 100%;"
      @grid-ready="onGridReady"
      :columnDefs="columnDefs"
      :defaultColDef="defaultColDef"
      :autoGroupColumnDef="autoGroupColumnDef"
      :groupDefaultExpanded="groupDefaultExpanded"
      :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: "country", rowGroup: true, hide: true, filter: true },
      { field: "year", rowGroup: true, hide: true, filter: true },
      { field: "athlete" },
      { field: "sport" },
      { field: "total" },
    ]);
    const defaultColDef = ref<ColDef>({
      flex: 1,
      minWidth: 100,
    });
    const autoGroupColumnDef = ref<AutoGroupColumnDef>({
      minWidth: 200,
      filter: true,
      floatingFilter: true,
      filterValueGetter: (params) => params.data?.athlete,
      filterParams: {
        treeList: true,
        keyCreator: (params: KeyCreatorParams) =>
          params.value ? params.value.join("#") : null,
      },
    });
    const groupDefaultExpanded = ref(1);
    const rowData = ref<IOlympicData[]>(null);

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

      params.api.showColumnFilter("ag-Grid-AutoColumn");

      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,
      autoGroupColumnDef,
      groupDefaultExpanded,
      rowData,
      onGridReady,
    };
  },
});

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

The tree filter needs a value for each leaf row. In absence of a field or valueGetter on the group column, provide a filterValueGetter to the group column definition.

The example above demonstrates the following configuration to enable the tree set filter:

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

this.autoGroupColumnDef = {
    filter: 'agSetColumnFilter',
    filterValueGetter: (params) => params.data.athlete,
    filterParams: {
        treeList: true,
        keyCreator: (params) => (params.value ? params.value.join('#') : null),
    },
};

Refer to the Tree List Filter documentation for further configuration options.

Text Filtering Copy Link

Providing a filter value getter to the group column allows for a simple string search of any group level.

main.ts

import {
  createApp,
  defineComponent,
  onBeforeMount,
  ref,
  shallowRef,
} from "vue";
import { AgGridVue } from "ag-grid-vue3";
import {
  AutoGroupColumnDef,
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  GridApi,
  GridOptions,
  GridReadyEvent,
  ModuleRegistry,
  NumberFilterModule,
  TextFilterModule,
  enableDevValidations,
} from "ag-grid-community";
import { RowGroupingModule } from "ag-grid-enterprise";
import { IOlympicData } from "./interfaces";

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

ModuleRegistry.registerModules([
  NumberFilterModule,
  ClientSideRowModelModule,
  RowGroupingModule,
  TextFilterModule,
]);

const VueExample = defineComponent({
  template: `
        <div style="height: 100%">
                <ag-grid-vue
      style="width: 100%; height: 100%;"
      @grid-ready="onGridReady"
      :columnDefs="columnDefs"
      :defaultColDef="defaultColDef"
      :autoGroupColumnDef="autoGroupColumnDef"
      :groupDefaultExpanded="groupDefaultExpanded"
      :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: "country", rowGroup: true, hide: true, filter: true },
      { field: "year", rowGroup: true, hide: true, filter: true },
      { field: "athlete" },
      { field: "sport" },
      { field: "total" },
    ]);
    const defaultColDef = ref<ColDef>({
      flex: 1,
      minWidth: 100,
    });
    const autoGroupColumnDef = ref<AutoGroupColumnDef>({
      minWidth: 200,
      filter: "agTextColumnFilter",
      floatingFilter: true,
      filterValueGetter: (params) => params.node?.parent?.getRoute(),
    });
    const groupDefaultExpanded = ref(1);
    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,
      autoGroupColumnDef,
      groupDefaultExpanded,
      rowData,
      onGridReady,
    };
  },
});

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

The example above demonstrates using a filter value getter which returns an array of ancestor row keys. This enables searching for any group value containing the filter text:

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

this.autoGroupColumnDef = {
    filter: 'agTextColumnFilter',
    filterValueGetter: (params) => params.node.parent.getRoute(),
};

Getting Started

AI Features

Layout & Styling

Charting

Core Features

Advanced Features

Vue Data GridRow Grouping - Single Column

Enabling a Single Group Column Copy Link

Configuration Copy Link

Cell Component Copy Link

Configurable Options Copy Link

Checkbox Selection Copy Link

Custom Inner Renderer Copy Link

Custom Cell Renderer Copy Link

Filtering Copy Link

Inherit Row Grouped Columns Filters Copy Link

Tree Filter Copy Link

Text Filtering Copy Link