---
product: "AG Grid"
title: "Aggregation - Total Rows"
description: "This section shows how to include group and grand total rows in the grid."
enterprise: true
framework: vue
version: "36.3.0"
related:
    - title: "Overview"
      url: "https://www.ag-grid.com/archive/36.3.0/vue-data-grid/aggregation/"
    - title: "Configure Columns"
      url: "https://www.ag-grid.com/archive/36.3.0/vue-data-grid/aggregation-columns/"
    - title: "Custom Functions"
      url: "https://www.ag-grid.com/archive/36.3.0/vue-data-grid/aggregation-custom-functions/"
    - title: "Filtering "
      url: "https://www.ag-grid.com/archive/36.3.0/vue-data-grid/aggregation-filtering/"
    - title: "Show Values As"
      url: "https://www.ag-grid.com/archive/36.3.0/vue-data-grid/aggregation-show-values-as/"
llms: "https://www.ag-grid.com/archive/36.3.0/llms.txt"
---

# Aggregation - Total Rows

This section shows how to include group and grand total rows in the grid.

## Enabling a Grand Total Row

A grand total row can be included in the grid by setting the `grandTotalRow` grid option to one of: `"top"`, `"bottom"`, `"pinnedTop"` or `"pinnedBottom"`.

Setting a value of `"top"` or `"bottom"` renders the grand total row as the first or last row in the grid, respectively. Setting a value of `"pinnedTop"` or `"pinnedBottom"` renders the grand total row pinned to the top or bottom of the grid, respectively.

> **Note**
>
> Grand total rows are also supported with the [Server-Side Row Model](https://www.ag-grid.com/archive/36.3.0/vue-data-grid/server-side-model-grouping/#grand-total-row), including on flat grids without grouping.

This example also sets the `grandTotalRowBorder` [theme parameter](https://www.ag-grid.com/archive/36.3.0/vue-data-grid/theming-parameters/) to style the border between the grand total row and the data rows.

#### Enabling Grand Total Row

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

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

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

const VueExample = defineComponent({
  template: `
        <div style="height: 100%">
                <div class="example-wrapper">
      <div class="example-header">
        <label>
          <span>grandTotalRow:</span>
          <select id="input-property-value" v-on:change="onChange()">
            <option value="bottom">"bottom"</option>
            <option value="top">"top"</option>
            <option value="pinnedBottom">"pinnedBottom"</option>
            <option value="pinnedTop">"pinnedTop"</option>
            <option value="undefined">undefined</option>
          </select>
        </label>
      </div>
      <ag-grid-vue
        style="width: 100%; height: 100%;"
        @grid-ready="onGridReady"
        :theme="theme"
        :columnDefs="columnDefs"
        :defaultColDef="defaultColDef"
        :autoGroupColumnDef="autoGroupColumnDef"
        :grandTotalRow="grandTotalRow"
        :rowData="rowData"></ag-grid-vue>
      </div>
        </div>
    `,
  components: {
    "ag-grid-vue": AgGridVue,
  },
  setup(props) {
    const gridApi = shallowRef<GridApi<IOlympicData> | null>(null);
    const theme = ref<Theme | "legacy">(
      themeQuartz.withParams({
        grandTotalRowBorder: { width: 2, color: "#2196f3" },
      }),
    );
    const columnDefs = ref<ColDef[]>([
      { field: "country", rowGroup: true, hide: true },
      { field: "gold", aggFunc: "sum" },
      { field: "silver", aggFunc: "sum" },
      { field: "bronze", aggFunc: "sum" },
    ]);
    const defaultColDef = ref<ColDef>({
      flex: 1,
      minWidth: 150,
    });
    const autoGroupColumnDef = ref<AutoGroupColumnDef>({
      minWidth: 300,
    });
    const grandTotalRow = ref<"top" | "bottom" | "pinnedTop" | "pinnedBottom">(
      "bottom",
    );
    const rowData = ref<IOlympicData[]>(null);

    function onChange() {
      const grandTotalRow = document.querySelector<HTMLInputElement>(
        "#input-property-value",
      )!.value;
      if (
        grandTotalRow === "bottom" ||
        grandTotalRow === "top" ||
        grandTotalRow === "pinnedTop" ||
        grandTotalRow === "pinnedBottom"
      ) {
        gridApi.value.setGridOption("grandTotalRow", grandTotalRow);
      } else {
        gridApi.value.setGridOption("grandTotalRow", undefined);
      }
    }
    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,
      theme,
      columnDefs,
      defaultColDef,
      autoGroupColumnDef,
      grandTotalRow,
      rowData,
      onGridReady,
      onChange,
    };
  },
});

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

[Live example: Enabling Grand Total Row](https://www.ag-grid.com/archive/36.3.0/examples/aggregation-total-rows/enabling-grand-total/vue3/)

The following configuration shows how grand total rows can be included at the bottom of the grid:

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

this.grandTotalRow = 'bottom';
```

### Showing the Grand Total Row with No Rows

By default, the grand total row is hidden when the grid has no rows to display, for example when the row data is empty or all rows are filtered out. To keep it visible, set `alwaysShowGrandTotalRow` to `true`. The no-rows overlay is still shown.

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

this.grandTotalRow = 'bottom';
this.alwaysShowGrandTotalRow = true;
```

## Enabling Group Total Rows

A total row can be included in every group when using [Row Grouping](https://www.ag-grid.com/archive/36.3.0/vue-data-grid/grouping/) or [Tree Data](https://www.ag-grid.com/archive/36.3.0/vue-data-grid/tree-data/) by setting the `groupTotalRow` grid option to either `"top"` or `"bottom"`. The provided value determines whether the total row will be included as the first or last row in the group.

#### Enabling Group Total Row

```ts
import {
  createApp,
  defineComponent,
  onBeforeMount,
  ref,
  shallowRef,
} from "vue";
import { AgGridVue } from "ag-grid-vue3";
import {
  AutoGroupColumnDef,
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  GridApi,
  GridOptions,
  GridReadyEvent,
  ModuleRegistry,
  UseGroupTotalRow,
  enableDevValidations,
} from "ag-grid-community";
import { RowGroupingModule } from "ag-grid-enterprise";
import "./styles.css";
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%">
                <div class="example-wrapper">
      <div class="example-header">
        <label>
          <span>groupTotalRow:</span>
          <select id="input-property-value" v-on:change="onChange()">
            <option value="bottom">"bottom"</option>
            <option value="top">"top"</option>
            <option value="undefined">undefined</option>
          </select>
        </label>
      </div>
      <ag-grid-vue
        style="width: 100%; height: 100%;"
        @grid-ready="onGridReady"
        :columnDefs="columnDefs"
        :defaultColDef="defaultColDef"
        :autoGroupColumnDef="autoGroupColumnDef"
        :groupDefaultExpanded="groupDefaultExpanded"
        :groupTotalRow="groupTotalRow"
        :rowData="rowData"></ag-grid-vue>
      </div>
        </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: "gold", aggFunc: "sum" },
      { field: "silver", aggFunc: "sum" },
      { field: "bronze", aggFunc: "sum" },
    ]);
    const defaultColDef = ref<ColDef>({
      flex: 1,
      minWidth: 150,
    });
    const autoGroupColumnDef = ref<AutoGroupColumnDef>({
      minWidth: 300,
    });
    const groupDefaultExpanded = ref(1);
    const groupTotalRow = ref<"top" | "bottom" | UseGroupTotalRow>("bottom");
    const rowData = ref<IOlympicData[]>(null);

    function onChange() {
      const groupTotalRow = document.querySelector<HTMLInputElement>(
        "#input-property-value",
      )!.value;
      if (groupTotalRow === "bottom" || groupTotalRow === "top") {
        gridApi.value.setGridOption("groupTotalRow", groupTotalRow);
      } else {
        gridApi.value.setGridOption("groupTotalRow", undefined);
      }
    }
    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,
      groupTotalRow,
      rowData,
      onGridReady,
      onChange,
    };
  },
});

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

[Live example: Enabling Group Total Row](https://www.ag-grid.com/archive/36.3.0/examples/aggregation-total-rows/enabling-group-total/vue3/)

The following configuration shows how group total rows can be included at the bottom of every group:

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

// adds subtotals to the bottom of each row group
this.groupTotalRow = 'bottom';
```

### Selectively Display Group Total Rows

Total rows can be applied to certain groups selectively by providing a callback to the `groupTotalRow` grid option. This callback should return `"top"`, `"bottom"` or `undefined` and will be called for each row group to determine whether the group should display a total row.

#### Selectively Enabling Group Footers

```ts
import {
  createApp,
  defineComponent,
  onBeforeMount,
  ref,
  shallowRef,
} from "vue";
import { AgGridVue } from "ag-grid-vue3";
import {
  AutoGroupColumnDef,
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  FirstDataRenderedEvent,
  GetGroupIncludeTotalRowParams,
  GridApi,
  GridOptions,
  GridReadyEvent,
  ModuleRegistry,
  RowApiModule,
  UseGroupTotalRow,
  enableDevValidations,
} from "ag-grid-community";
import { RowGroupingModule } from "ag-grid-enterprise";

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

ModuleRegistry.registerModules([
  RowApiModule,
  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"
      :groupTotalRow="groupTotalRow"
      :rowData="rowData"
      @first-data-rendered="onFirstDataRendered"></ag-grid-vue>
        </div>
    `,
  components: {
    "ag-grid-vue": AgGridVue,
  },
  setup(props) {
    const gridApi = shallowRef<GridApi | null>(null);
    const columnDefs = ref<ColDef[]>([
      { field: "country", rowGroup: true, hide: true },
      { field: "year", rowGroup: true, hide: true },
      { field: "gold", aggFunc: "sum" },
      { field: "silver", aggFunc: "sum" },
      { field: "bronze", aggFunc: "sum" },
    ]);
    const defaultColDef = ref<ColDef>({
      flex: 1,
      minWidth: 150,
    });
    const autoGroupColumnDef = ref<AutoGroupColumnDef>({
      minWidth: 300,
    });
    const groupTotalRow = ref<"top" | "bottom" | UseGroupTotalRow>(
      (params: GetGroupIncludeTotalRowParams) => {
        const node = params.node;
        if (node && node.level === 1) return "bottom";
        if (node && node.key === "United States") return "bottom";
        return undefined;
      },
    );
    const rowData = ref<any[]>(null);

    function onFirstDataRendered(params: FirstDataRenderedEvent) {
      params.api.forEachNode((node) => {
        if (node.key === "United States" || node.key === "Russia") {
          params.api.setRowNodeExpanded(node, true);
        }
      });
    }
    const onGridReady = (params: GridReadyEvent) => {
      gridApi.value = params.api;

      const updateData = (data) => (rowData.value = data.slice(0, 50));

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

    return {
      gridApi,
      columnDefs,
      defaultColDef,
      autoGroupColumnDef,
      groupTotalRow,
      rowData,
      onGridReady,
      onFirstDataRendered,
    };
  },
});

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

[Live example: Selectively Enabling Group Footers](https://www.ag-grid.com/archive/36.3.0/examples/aggregation-total-rows/enabling-group-total-selectively/vue3/)

The example above demonstrates the following configuration to display total rows for the `"United States"` group, and the rows grouped by the `"year"` field:

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

this.groupTotalRow = (params) => {
    const node = params.node;
    if (node && node.level === 1) return 'bottom';
    if (node && node.key === 'United States') return 'bottom';
    return undefined;
};
```

### Keeping Group Row Values

When a total row is visible, the group row values are hidden. This behaviour can be prevented by setting the `groupSuppressBlankHeader` grid option to `true`.

#### Suppress Blank Groups

```ts
import {
  createApp,
  defineComponent,
  onBeforeMount,
  ref,
  shallowRef,
} from "vue";
import { AgGridVue } from "ag-grid-vue3";
import {
  AutoGroupColumnDef,
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  GridApi,
  GridOptions,
  GridReadyEvent,
  ModuleRegistry,
  UseGroupTotalRow,
  enableDevValidations,
} from "ag-grid-community";
import { RowGroupingModule } from "ag-grid-enterprise";
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%">
                <div class="example-wrapper">
      <div class="example-header">
        <label>
          <span>groupSuppressBlankHeader:</span>
          <input id="groupSuppressBlankHeader" type="checkbox" v-on:change="toggleProperty()">
          </label>
        </div>
        <ag-grid-vue
          style="width: 100%; height: 100%;"
          @grid-ready="onGridReady"
          :columnDefs="columnDefs"
          :defaultColDef="defaultColDef"
          :autoGroupColumnDef="autoGroupColumnDef"
          :groupTotalRow="groupTotalRow"
          :groupDefaultExpanded="groupDefaultExpanded"
          :rowData="rowData"></ag-grid-vue>
        </div>
        </div>
    `,
  components: {
    "ag-grid-vue": AgGridVue,
  },
  setup(props) {
    const gridApi = shallowRef<GridApi | null>(null);
    const columnDefs = ref<ColDef[]>([
      { field: "country", rowGroup: true, hide: true },
      { field: "year", rowGroup: true, hide: true },
      { field: "gold", aggFunc: "sum" },
      { field: "silver", aggFunc: "sum" },
      { field: "bronze", aggFunc: "sum" },
    ]);
    const defaultColDef = ref<ColDef>({
      flex: 1,
      minWidth: 150,
    });
    const autoGroupColumnDef = ref<AutoGroupColumnDef>({
      minWidth: 300,
    });
    const groupTotalRow = ref<"top" | "bottom" | UseGroupTotalRow>("bottom");
    const groupDefaultExpanded = ref(1);
    const rowData = ref<any[]>(null);

    function toggleProperty() {
      const enable = document.querySelector<HTMLInputElement>(
        "#groupSuppressBlankHeader",
      )!.checked;
      gridApi.value.setGridOption("groupSuppressBlankHeader", enable);
    }
    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,
      groupTotalRow,
      groupDefaultExpanded,
      rowData,
      onGridReady,
      toggleProperty,
    };
  },
});

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

[Live example: Suppress Blank Groups](https://www.ag-grid.com/archive/36.3.0/examples/aggregation-total-rows/suppress-blank-groups/vue3/)

The configuration below demonstrates the configuration for preventing the hiding of group row values:

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

this.groupSuppressBlankHeader = true;
```

## Group Column Cell Values

When using [Row Grouping](https://www.ag-grid.com/archive/36.3.0/vue-data-grid/grouping-display-types/) or [Tree Data](https://www.ag-grid.com/archive/36.3.0/vue-data-grid/tree-data-group-column/) with group columns, the group cell will display `"Total"` by default in the footer rows.

The default `agGroupCellRenderer.cellRendererParams` can be provided with a `totalValueGetter` to configure the value displayed in this cell.

#### Customising Footer Values

```ts
import {
  createApp,
  defineComponent,
  onBeforeMount,
  ref,
  shallowRef,
} from "vue";
import { AgGridVue } from "ag-grid-vue3";
import {
  AutoGroupColumnDef,
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  GridApi,
  GridOptions,
  GridReadyEvent,
  ModuleRegistry,
  UseGroupTotalRow,
  enableDevValidations,
} from "ag-grid-community";
import { RowGroupingModule } from "ag-grid-enterprise";

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"
      :groupTotalRow="groupTotalRow"
      :grandTotalRow="grandTotalRow"
      :rowData="rowData"></ag-grid-vue>
        </div>
    `,
  components: {
    "ag-grid-vue": AgGridVue,
  },
  setup(props) {
    const gridApi = shallowRef<GridApi | null>(null);
    const columnDefs = ref<ColDef[]>([
      { field: "country", rowGroup: true, hide: true },
      { field: "year", rowGroup: true, hide: true },
      { field: "gold", aggFunc: "sum" },
      { field: "silver", aggFunc: "sum" },
      { field: "bronze", aggFunc: "sum" },
    ]);
    const defaultColDef = ref<ColDef>({
      flex: 1,
      minWidth: 150,
    });
    const autoGroupColumnDef = ref<AutoGroupColumnDef>({
      minWidth: 300,
      cellRendererParams: {
        totalValueGetter: (params: any) => {
          const isRootLevel = params.node.level === -1;
          if (isRootLevel) {
            return "Grand Total";
          }
          return `Sub Total (${params.value})`;
        },
      },
    });
    const groupTotalRow = ref<"top" | "bottom" | UseGroupTotalRow>("bottom");
    const grandTotalRow = ref<"top" | "bottom" | "pinnedTop" | "pinnedBottom">(
      "bottom",
    );
    const rowData = ref<any[]>(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,
      groupTotalRow,
      grandTotalRow,
      rowData,
      onGridReady,
    };
  },
});

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

[Live example: Customising Footer Values](https://www.ag-grid.com/archive/36.3.0/examples/aggregation-total-rows/customising-footer-values/vue3/)

The example above demonstrates using the following configuration to display custom group column values for grand total and group total rows:

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

this.autoGroupColumnDef = {
    cellRendererParams: {
        totalValueGetter: params =>  {
            const isRootLevel = params.node.level === -1;
            if (isRootLevel) {
                return 'Grand Total';
            }
            return `Sub Total (${params.value})`;
        },
    }
};
```

> **Note**
>
> When exporting, copying custom footers, or using Find with custom group cell values, the custom content must also be added using [processRowGroupCallback](https://www.ag-grid.com/archive/36.3.0/vue-data-grid/excel-export-customising-content/) for export, [processCellForClipboard](https://www.ag-grid.com/archive/36.3.0/vue-data-grid/clipboard/#processing-individual-cells) for copying to clipboard, or [getFindText](https://www.ag-grid.com/archive/36.3.0/vue-data-grid/find/#using-find-with-cell-components) for Find.

## Suppress Sticky Rows

All total rows stick to the top or bottom of the viewport when scrolling. This behaviour can be configured by using the `suppressStickyTotalRow` grid option.

#### Suppress Sticky Total Rows

```ts
import {
  createApp,
  defineComponent,
  onBeforeMount,
  ref,
  shallowRef,
} from "vue";
import { AgGridVue } from "ag-grid-vue3";
import {
  AutoGroupColumnDef,
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  GridApi,
  GridOptions,
  GridReadyEvent,
  ModuleRegistry,
  UseGroupTotalRow,
  enableDevValidations,
} from "ag-grid-community";
import { RowGroupingModule } from "ag-grid-enterprise";
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%">
                <div class="example-wrapper">
      <div class="example-header">
        <label>
          <span>suppressStickyTotalRow:</span>
          <select id="input-property-value" v-on:change="onChange()">
            <option value="false">false</option>
            <option value="true">true</option>
            <option value="grand">"grand"</option>
            <option value="group">"group"</option>
          </select>
        </label>
      </div>
      <ag-grid-vue
        style="width: 100%; height: 100%;"
        @grid-ready="onGridReady"
        :columnDefs="columnDefs"
        :defaultColDef="defaultColDef"
        :autoGroupColumnDef="autoGroupColumnDef"
        :groupDefaultExpanded="groupDefaultExpanded"
        :groupTotalRow="groupTotalRow"
        :grandTotalRow="grandTotalRow"
        :rowData="rowData"></ag-grid-vue>
      </div>
        </div>
    `,
  components: {
    "ag-grid-vue": AgGridVue,
  },
  setup(props) {
    const gridApi = shallowRef<GridApi | null>(null);
    const columnDefs = ref<ColDef[]>([
      { field: "country", rowGroup: true, hide: true },
      { field: "year", rowGroup: true, hide: true },
      { field: "gold", aggFunc: "sum" },
      { field: "silver", aggFunc: "sum" },
      { field: "bronze", aggFunc: "sum" },
    ]);
    const defaultColDef = ref<ColDef>({
      flex: 1,
      minWidth: 150,
    });
    const autoGroupColumnDef = ref<AutoGroupColumnDef>({
      minWidth: 300,
    });
    const groupDefaultExpanded = ref(-1);
    const groupTotalRow = ref<"top" | "bottom" | UseGroupTotalRow>("bottom");
    const grandTotalRow = ref<"top" | "bottom" | "pinnedTop" | "pinnedBottom">(
      "bottom",
    );
    const rowData = ref<any[]>(null);

    function onChange() {
      const suppressStickyTotalRow = document.querySelector<HTMLInputElement>(
        "#input-property-value",
      )!.value;
      if (
        suppressStickyTotalRow === "grand" ||
        suppressStickyTotalRow === "group"
      ) {
        gridApi.value.setGridOption(
          "suppressStickyTotalRow",
          suppressStickyTotalRow,
        );
      } else if (suppressStickyTotalRow === "true") {
        gridApi.value.setGridOption("suppressStickyTotalRow", true);
      } else {
        gridApi.value.setGridOption("suppressStickyTotalRow", false);
      }
    }
    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,
      groupTotalRow,
      grandTotalRow,
      rowData,
      onGridReady,
      onChange,
    };
  },
});

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

[Live example: Suppress Sticky Total Rows](https://www.ag-grid.com/archive/36.3.0/examples/aggregation-total-rows/suppress-sticky-total-rows/vue3/)

The following configuration demonstrates how to suppress sticky behaviour for both grand and group total rows:

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

this.suppressStickyTotalRow = true;
```