Vue Data GridColumn Spanning

vue logo

By default, each cell will take up the width of one column. You can change this behaviour to allow cells to span multiple columns. This feature is similar to 'cell merging' in Excel or 'column spanning' in HTML tables.

Configuring Column Spanning

Column spanning is configured at the column definition level. To have a cell span more than one column, return how many columns to span in the callback colDef.colSpan.

    /* other grid options ... */>

this.columnDefs = [
        field: 'country',
        // col span is 2 for rows with Russia, but 1 for everything else
        colSpan: params => === 'Russia' ? 2 : 1,

The interface for the colSpan callback is as follows: