Markup

You can also define your grid column definition decoratively if you would prefer.

You declare the grid as normal:

<ag-grid-vue
        class="ag-theme-alpine"
        style="width: 700px; height: 400px;"
        :rowData="rowData"
        //...rest of definition

And within this component you can then define your column definitions:

<ag-grid-vue
    //...rest of definition
>
    <ag-grid-column headerName="IT Skills">
        <ag-grid-column 
            field="skills" 
            :width="120" 
            suppressSorting
            cellRendererFramework="SkillsCellRenderer"
            :menuTabs="['filterMenuTab']">
        </ag-grid-column>
        <ag-grid-column
            field="proficiency" 
            :width="135"
            cellRendererFramework="ProficiencyCellRenderer"
            :menuTabs="['filterMenuTab']">
        </ag-grid-column>
    </ag-grid-column>
</ag-grid-vue>

In this example we're defining a grouped column with IT Skills having two child columns Skills and Proficiency.

Not that anything other than a string value will need to be bound (i.e. :width="120") as Vue will default to providing values as Strings.

A full working example of defining a grid declaratively can be found in the Vue Playground Repo.