Vue 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-balham" 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.