# grid-grouping

> Data grid organizes records into expandable grouped sections with column drag.

**Framework:** vue  **Component:** Grid  **Variant:** grouping

## Get this item

**If you are an agent, fetch the JSON.** Source is inlined, so one request is enough and no tooling is required:

```
GET https://ai.syncfusion.com/r/vue/grid-grouping.json
```

**Install Package(s)**

```bash
npm install @syncfusion/ej2-vue-grids @syncfusion/ej2-vue-popups
```

**Notes**

- Syncfusion release: 2026 Volume 2 (v34.1.29)
- The Syncfusion package is licensed. The composition in this file is source you own and edit. See https://ai.syncfusion.com/licensing.md

## Source files

### src/components/grid-grouping/Grid.vue

```vue
<template>
<div class="col-lg-12">
    <div class="control-section">
        <ejs-grid ref="grid" :dataSource="data" id='GridGrouping' :allowGrouping='true' :allowPaging='true' :allowSorting='true' :allowFiltering='true' :filterSettings='filterSettings' :groupSettings='groupOptions' :editSettings='editSettings' :toolbar='toolbar' :pageSettings='pageOptions' :created='created' height=320>
            <e-columns>
                <e-column field='OrderID' headerText='Order ID' width='120' textAlign='Right' :isPrimaryKey='true' :validationRules='orderidrules'></e-column>
                <e-column field='CustomerID' headerText='Customer ID' width='120' :validationRules='customeridrules'></e-column>
                <e-column field='Freight' headerText='Freight' width='180' format='C2' textAlign='Right' editType='numericedit' :validationRules='freightrules'></e-column>
                <e-column field='OrderDate' headerText='Order Date' width='130' editType='datetimepickeredit' :allowGrouping='false' :format='formatoptions' textAlign='Right'></e-column>
                <e-column field='ShipCountry' headerText='Ship Country' width='150' editType='dropdownedit' :edit='editparams'></e-column>
            </e-columns>
        </ejs-grid>
        <ejs-dialog :buttons='alertDlgButtons' ref="alertDialog" v-bind:visible="false" :header='alertHeader' :animationSettings='animationSettings' :content='alertContent' :showCloseIcon='showCloseIcon' :target='target'
            :width='alertWidth'>
        </ejs-dialog>
        <div style="margin-top: 10px; text-align: right">Source:
            <a href="https://en.wikipedia.org/wiki/List_of_prolific_inventors" target='_blank'>Wikipedia: List of Prolific inventors</a>
        </div>
    </div>

</div>
</template>
<script lang="ts">
import { GridComponent, ColumnDirective, ColumnsDirective, Group, Page, Sort, Edit, Toolbar, Filter } from "@syncfusion/ej2-vue-grids";
import { DialogComponent } from '@syncfusion/ej2-vue-popups';

const orderDataSource = [
    { OrderID: 10248, CustomerID: 'VINET',  OrderDate: new Date(1996, 6,  4, 10, 10), ShippedDate: new Date(1996, 6, 16, 12, 20), Freight: 32.38, ShipName: 'Vins et alcools Chevalier',  ShipAddress: '59 rue de l\'Abbaye',            ShipCity: 'Reims',          ShipRegion: null,    ShipCountry: 'France' },
    { OrderID: 10249, CustomerID: 'TOMSP',  OrderDate: new Date(1996, 6,  5, 12, 20), ShippedDate: new Date(1996, 6, 10, 13, 20), Freight: 11.61, ShipName: 'Toms Spezialit�ten',          ShipAddress: 'Luisenstr. 48',                  ShipCity: 'M�nster',        ShipRegion: null,    ShipCountry: 'Germany' },
    { OrderID: 10250, CustomerID: 'HANAR',  OrderDate: new Date(1996, 6,  8,  8, 40), ShippedDate: new Date(1996, 6, 12,  7, 50), Freight: 65.83, ShipName: 'Hanari Carnes',               ShipAddress: 'Rua do Pa�o, 67',                ShipCity: 'Rio de Janeiro', ShipRegion: 'RJ',  ShipCountry: 'Brazil' },
    { OrderID: 10251, CustomerID: 'VICTE',  OrderDate: new Date(1996, 6,  8,  7, 50), ShippedDate: new Date(1996, 6, 15, 15, 50), Freight: 41.34, ShipName: 'Victuailles en stock',        ShipAddress: '2, rue du Commerce',             ShipCity: 'Lyon',           ShipRegion: null,    ShipCountry: 'France' },
    { OrderID: 10252, CustomerID: 'SUPRD',  OrderDate: new Date(1996, 6,  9, 12,  5), ShippedDate: new Date(1996, 6, 11, 17, 30), Freight: 51.30, ShipName: 'Supr�mes d�lices',            ShipAddress: 'Boulevard Tirou, 255',           ShipCity: 'Charleroi',      ShipRegion: null,    ShipCountry: 'Belgium' }
];

export default {
  components: {
    'ejs-grid': GridComponent,
    'e-column': ColumnDirective,
    'e-columns': ColumnsDirective,
    'ejs-dialog': DialogComponent
  },
  data: function() {
    return {
      alertHeader: 'Grouping',
      alertContent: 'Grouping is disabled for this column',
      showCloseIcon: false,
      target: '#GridGrouping',  
      alertWidth: '300px',
      animationSettings: { effect: 'None' },
      alertDlgButtons: [{ click: ((<any>this).alertDlgBtnClick as any), buttonModel: { content: 'OK', isPrimary: true } }],
      data: orderDataSource,
      editSettings: { allowEditing: true },
      toolbar: ['Edit', 'Update', 'Cancel'],
      orderidrules: { required: true, number: true },
      customeridrules: { required: true },
      formatoptions: { type: 'dateTime', format: 'M/d/y hh:mm a' },
      freightrules:  { required: true },
      editparams: { params: { popupHeight: '300px' }},
      pageOptions: { pageCount: 5 },
      groupOptions: { columns: ["ShipCountry"] },
      filterSettings: { type: 'Excel' },
    };
  },
  methods: {
    created: function() {
        ((<any>this).$refs.grid.ej2Instances as any).on("columnDragStart", this.columnDragStart, this);
    },
    columnDragStart: function(args: any) {
        if(args.column.field === "OrderDate"){
             ((this as any).$refs.alertDialog).show();
        }
    },
    alertDlgBtnClick: function() {
        ((<any>this).$refs.alertDialog as any).hide();
    },
  },
  provide: {
    grid: [Group, Page, Sort, Edit, Toolbar, Filter]
  }
}
</script>

```

### src/components/grid-grouping/GridView.vue

```vue
<template>
  <Grid />
</template>

<script setup>
import Grid from '../../components/Grid.vue'
</script>
```

### src/components/grid-grouping/datasource.ts

```typescript
export const purchaseData = JSON.stringify([
    {
        "OrderID": 10248,
        "CustomerID": "VINET",
        "OrderDate": "1996-07-04T10:10:00.000Z",
        "ShippedDate": "1996-07-16T12:20:00.000Z",
        "Freight": 32.38,
        "ShipName": "Vins et alcools Chevalier",
        "ShipAddress": "59 rue de l\"Abbaye",
        "ShipCity": "Reims",
        "ShipRegion": null,
        "ShipCountry": "France"
    },
    {
        "OrderID": 10249,
        "CustomerID": "TOMSP",
        "OrderDate": "1996-07-05T12:20:00.000Z",
        "ShippedDate": "1996-07-10T13:20:00.000Z",
        "Freight": 11.61,
        "ShipName": "Toms Spezialitäten",
        "ShipAddress": "Luisenstr. 48",
        "ShipCity": "Münster",
        "ShipRegion": null,
        "ShipCountry": "Germany"
    },
    {
        "OrderID": 10250,
        "CustomerID": "HANAR",
        "OrderDate": "1996-07-08T08:40:00.000Z",
        "ShippedDate": "1996-07-12T07:50:00.000Z",
        "Freight": 65.83,
        "ShipName": "Hanari Carnes",
        "ShipAddress": "Rua do Paço, 67",
        "ShipCity": "Rio de Janeiro",
        "ShipRegion": "RJ",
        "ShipCountry": "Brazil"
    },
    {
        "OrderID": 10251,
        "CustomerID": "VICTE",
        "OrderDate": "1996-07-08T07:50:00.000Z",
        "ShippedDate": "1996-07-15T15:50:00.000Z",
        "Freight": 41.34,
        "ShipName": "Victuailles en stock",
        "ShipAddress": "2, rue du Commerce",
        "ShipCity": "Lyon",
        "ShipRegion": null,
        "ShipCountry": "France"
    },
    {
        "OrderID": 10252,
        "CustomerID": "SUPRD",
        "OrderDate": "1996-07-09T12:05:00.000Z",
        "ShippedDate": "1996-07-11T17:30:00.000Z",
        "Freight": 51.3,
        "ShipName": "Suprêmes délices",
        "ShipAddress": "Boulevard Tirou, 255",
        "ShipCity": "Charleroi",
        "ShipRegion": null,
        "ShipCountry": "Belgium"
    },
    {
        "OrderID": 10253,
        "CustomerID": "HANAR",
        "OrderDate": "1996-07-10T11:20:00.000Z",
        "ShippedDate": "1996-07-16T10:10:00.000Z",
        "Freight": 58.17,
        "ShipName": "Hanari Carnes",
        "ShipAddress": "Rua do Paço, 67",
        "ShipCity": "Rio de Janeiro",
        "ShipRegion": "RJ",
        "ShipCountry": "Brazil"
    },
    {
        "OrderID": 10254,
        "CustomerID": "CHOPS",
        "OrderDate": "1996-07-11T10:00.00.000Z",
        "ShippedDate": "1996-07-23T20:40:00.000Z",
        "Freight": 22.98,
        "ShipName": "Chop-suey Chinese",
        "ShipAddress": "Hauptstr. 31",
        "ShipCity": "Bern",
        "ShipRegion": null,
        "ShipCountry": "Switzerland"
    },
    {
        "OrderID": 10255,
        "CustomerID": "RICSU",
        "OrderDate": "1996-07-12T10:40:00.000Z",
        "ShippedDate": "1996-07-15T05:40:00.000Z",
        "Freight": 148.33,
        "ShipName": "Richter Supermarkt",
        "ShipAddress": "Starenweg 5",
        "ShipCity": "Genève",
        "ShipRegion": null,
        "ShipCountry": "Switzerland"
    }
]);
```