---
title: "Row Spanning"
framework: vue
version: "36.1.0"
---

# Row Spanning

A single cell can be used to represent multiple contiguous leaf rows with equal values.

#### Row Spanning Simple

```ts
import {
  createApp,
  defineComponent,
  onBeforeMount,
  ref,
  shallowRef,
} from "vue";
import { AgGridVue } from "ag-grid-vue3";
import {
  CellSpanModule,
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  ColumnApiModule,
  GridApi,
  GridOptions,
  GridReadyEvent,
  ModuleRegistry,
  enableDevValidations,
} from "ag-grid-community";
import { IOlympicData } from "./interfaces";
if (process.env.NODE_ENV !== "production") {
  enableDevValidations();
}

ModuleRegistry.registerModules([
  CellSpanModule,
  ClientSideRowModelModule,
  ColumnApiModule,
]);

const VueExample = defineComponent({
  template: `
        <div style="height: 100%">
                <ag-grid-vue
      style="width: 100%; height: 100%;"
      @grid-ready="onGridReady"
      :columnDefs="columnDefs"
      :defaultColDef="defaultColDef"
      :enableCellSpan="true"
      :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", spanRows: true, sort: "asc" },
      { field: "year", spanRows: true, sort: "asc" },
      { field: "sport", spanRows: true, sort: "asc" },
      { field: "athlete" },
      { field: "age" },
      { field: "total" },
    ]);
    const defaultColDef = ref<ColDef>({
      flex: 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,
      rowData,
      onGridReady,
    };
  },
});

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

[Live example: Row Spanning Simple](https://www.ag-grid.com/examples/row-spanning/row-spanning-simple/vue3)

## Enabling Row Spanning

The example above demonstrates merging cells with equal values into a single cell that spans multiple rows.

Row spanning requires the `CellSpanModule` to be registered. The `enableCellSpan` grid option is an initial property and cannot be changed after the grid is created.

The following snippet demonstrates enabling row spanning by setting `gridOptions.enableCellSpan` to true. The country, year, and sport columns then configure row span by setting `colDef.spanRows` to `true`.

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

this.columnDefs = [
    {
        field: 'country',
        spanRows: true,
    },
    {
        field: 'year',
        spanRows: true,
    },
    {
        field: 'sport',
        spanRows: true,
    },
    // other column definitions ...
];
this.enableCellSpan = true;
```

## Custom Row Spanning

Row spanning can be customised by providing a callback function to `colDef.spanRows`. The callback returns `true` if the two adjacent rows should be spanned together.

The example below demonstrates custom row spanning which prevents any country cells with the value `"Algeria"` from being spanned.

#### Row Spanning Custom

```ts
import {
  createApp,
  defineComponent,
  onBeforeMount,
  ref,
  shallowRef,
} from "vue";
import { AgGridVue } from "ag-grid-vue3";
import {
  CellSpanModule,
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  GridApi,
  GridOptions,
  GridReadyEvent,
  ModuleRegistry,
  SpanRowsParams,
  enableDevValidations,
} from "ag-grid-community";
import { IOlympicData } from "./interfaces";
if (process.env.NODE_ENV !== "production") {
  enableDevValidations();
}

ModuleRegistry.registerModules([CellSpanModule, ClientSideRowModelModule]);

const customSpanFunc = ({ valueA, valueB }: SpanRowsParams) => {
  return valueA != "Algeria" && valueA === valueB;
};

const VueExample = defineComponent({
  template: `
        <div style="height: 100%">
                <ag-grid-vue
      style="width: 100%; height: 100%;"
      @grid-ready="onGridReady"
      :columnDefs="columnDefs"
      :defaultColDef="defaultColDef"
      :enableCellSpan="true"
      :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", spanRows: customSpanFunc, sort: "asc" },
      { field: "year", spanRows: true, sort: "asc" },
      { field: "sport", spanRows: true, sort: "asc" },
      { field: "athlete" },
      { field: "age" },
      { field: "total" },
    ]);
    const defaultColDef = ref<ColDef>({
      flex: 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,
      rowData,
      onGridReady,
    };
  },
});

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

[Live example: Row Spanning Custom](https://www.ag-grid.com/examples/row-spanning/row-spanning-custom/vue3)

The following snippet demonstrates how to configure custom row spanning on the country column:

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

this.columnDefs = [
    {
        field: 'country',
        spanRows: ({ valueA, valueB }) => valueA != 'Algeria' && valueA === valueB,
    },
    // other column definitions ...
];
this.enableCellSpan = true;
```

## Auto Height and Row Spanning

Row spanning can be configured alongside auto height. Note when doing so, if the cell is taller than the combined height of the rows, the last row in the span gains any additional required height.

#### Row Spanning Auto Height

```ts
import {
  createApp,
  defineComponent,
  onBeforeMount,
  ref,
  shallowRef,
} from "vue";
import { AgGridVue } from "ag-grid-vue3";
import {
  CellSpanModule,
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  GridApi,
  GridOptions,
  GridReadyEvent,
  ModuleRegistry,
  RowAutoHeightModule,
  enableDevValidations,
} from "ag-grid-community";
import { IOlympicData } from "./interfaces";
if (process.env.NODE_ENV !== "production") {
  enableDevValidations();
}

ModuleRegistry.registerModules([
  CellSpanModule,
  ClientSideRowModelModule,
  RowAutoHeightModule,
]);

const lorem = `Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.`;

const VueExample = defineComponent({
  template: `
        <div style="height: 100%">
                <ag-grid-vue
      style="width: 100%; height: 100%;"
      @grid-ready="onGridReady"
      :columnDefs="columnDefs"
      :defaultColDef="defaultColDef"
      :enableCellSpan="true"
      :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: "lorem",
        spanRows: true,
        wrapText: true,
        autoHeight: true,
        minWidth: 300,
      },
      { field: "athlete" },
      { field: "age" },
      { field: "total" },
    ]);
    const defaultColDef = ref<ColDef>({
      flex: 1,
    });
    const rowData = ref<IOlympicData[]>(null);

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

      const updateData = (data) => {
        data.forEach((row, i) => {
          if (i % 3 === 0) {
            return;
          }
          row.lorem = lorem;
        });
        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");
```

[Live example: Row Spanning Auto Height](https://www.ag-grid.com/examples/row-spanning/row-spanning-auto-height/vue3)

The following snippet demonstrates how to configure auto height and row spanning:

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

this.columnDefs = [
    {
        field: 'lorem',
        spanRows: true,
        autoHeight: true,
        wrapText: true,
    },
    // other column definitions ...
];
this.enableCellSpan = true;
```