# grid-default

> Data grid presents records with paging, sorting, filtering, and inline editing.

**Framework:** vue  **Component:** Grid  **Variant:** default

## 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-default.json
```

**Install Package(s)**

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

**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-default/Grid.vue

```vue
<template>
<div class="col-lg-12 control-section">
    <div>
        <ejs-grid :dataSource="data" :allowSorting='true' :allowFiltering='true' :filterSettings='filterSettings' :editSettings='editSettings' :toolbar='toolbar'>
            <e-columns>
                <e-column field='OrderID' headerText='Order ID' width='180' textAlign='Right' :isPrimaryKey='true' :validationRules='orderidrules'></e-column>
                <e-column field='CustomerName' headerText='Customer Name' width='150' :validationRules='customeridrules'></e-column>
                <e-column field='OrderDate' headerText='Order Date' width='130' format="yMd" textAlign='Right' editType='datepickeredit'></e-column>
                <e-column field='Freight' headerText='Freight' width='120' format='C2' textAlign='Right' editType='numericedit' :validationRules='freightrules' ></e-column>
                <e-column field='ShippedDate' headerText='Shipped Date' width='130' format="yMd" textAlign='Right' editType='datepickeredit'></e-column>
                <e-column field='ShipCountry' headerText='Ship Country' width='150' editType='dropdownedit'></e-column>
            </e-columns>
        </ejs-grid>
    </div>

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

const order = JSON.stringify([
    {
        "OrderID": 10248,
        "CustomerID": "VINET",
        "CustomerName": "Maria ",
        "OrderDate": "1996-07-04T00:00:00.000Z",
        "ShippedDate": "1996-07-16T00:00:00.000Z",
        "Freight": 32.38,
        "ShipName": "Vins et alcools Chevalier",
        "ShipAddress": "59 rue de l'Abbaye",
        "ShipCity": "Reims",
        "ShipRegion": null,
        "ShipCountry": "France",
        "Verified": true
    },
    {
        "OrderID": 10249,
        "CustomerID": "TOMSP",
        "CustomerName": "Ana Trujillo",
        "OrderDate": "1996-07-05T00:00:00.000Z",
        "ShippedDate": "1996-07-10T00:00:00.000Z",
        "Freight": 11.61,
        "ShipName": "Toms Spezialitäten",
        "ShipAddress": "Luisenstr. 48",
        "ShipCity": "Münster",
        "ShipRegion": null,
        "ShipCountry": "Germany",
        "Verified": true
    },
    {
        "OrderID": 10250,
        "CustomerID": "HANAR",
        "CustomerName": "Antonio Moreno",
        "OrderDate": "1996-07-08T00:00:00.000Z",
        "ShippedDate": "1996-07-12T00:00:00.000Z",
        "Freight": 65.83,
        "ShipName": "Hanari Carnes",
        "ShipAddress": "Rua do Paço, 67",
        "ShipCity": "Rio de Janeiro",
        "ShipRegion": "RJ",
        "ShipCountry": "Brazil",
        "Verified": true
    },
    {
        "OrderID": 10251,
        "CustomerID": "VICTE",
        "CustomerName": "Thomas Hardy",
        "OrderDate": "1996-07-08T00:00:00.000Z",
        "ShippedDate": "1996-07-15T00:00:00.000Z",
        "Freight": 41.34,
        "ShipName": "Victuailles en stock",
        "ShipAddress": "2, rue du Commerce",
        "ShipCity": "Lyon",
        "ShipRegion": null,
        "ShipCountry": "France"
    },
    {
        "OrderID": 10252,
        "CustomerID": "SUPRD",
        "CustomerName": "Christina Berglund",
        "OrderDate": "1996-07-09T00:00:00.000Z",
        "ShippedDate": "1996-07-11T00:00:00.000Z",
        "Freight": 51.3,
        "ShipName": "Suprêmes délices",
        "ShipAddress": "Boulevard Tirou, 255",
        "ShipCity": "Charleroi",
        "ShipRegion": null,
        "ShipCountry": "Belgium"
    },
    {
        "OrderID": 10253,
        "CustomerID": "HANAR",
        "CustomerName": "Hanna Moos",
        "OrderDate": "1996-07-10T00:00:00.000Z",
        "ShippedDate": "1996-07-16T00:00:00.000Z",
        "Freight": 58.17,
        "ShipName": "Hanari Carnes",
        "ShipAddress": "Rua do Paço, 67",
        "ShipCity": "Rio de Janeiro",
        "ShipRegion": "RJ",
        "ShipCountry": "Brazil",
        "Verified": true
    },
    {
        "OrderID": 10254,
        "CustomerID": "CHOPS",
        "CustomerName": "Frédérique Citeaux",
        "OrderDate": "1996-07-11T00:00:00.000Z",
        "ShippedDate": "1996-07-23T00:00:00.000Z",
        "Freight": 22.98,
        "ShipName": "Chop-suey Chinese",
        "ShipAddress": "Hauptstr. 31",
        "ShipCity": "Bern",
        "ShipRegion": null,
        "ShipCountry": "Switzerland"
    },
    {
        "OrderID": 10255,
        "CustomerID": "RICSU",
        "CustomerName": "Martín Sommer",
        "OrderDate": "1996-07-12T00:00:00.000Z",
        "ShippedDate": "1996-07-15T00:00:00.000Z",
        "Freight": 148.33,
        "ShipName": "Richter Supermarkt",
        "ShipAddress": "Starenweg 5",
        "ShipCity": "Genève",
        "ShipRegion": null,
        "ShipCountry": "Switzerland"
    },
    {
        "OrderID": 10256,
        "CustomerID": "WELLI",
        "CustomerName": "Laurence Lebihan",
        "OrderDate": "1996-07-15T00:00:00.000Z",
        "ShippedDate": "1996-07-17T00:00:00.000Z",
        "Freight": 13.97,
        "ShipName": "Wellington Importadora",
        "ShipAddress": "Rua do Mercado, 12",
        "ShipCity": "Resende",
        "ShipRegion": "SP",
        "ShipCountry": "Brazil"
    },
    {
        "OrderID": 10257,
        "CustomerID": "HILAA",
        "CustomerName": "Elizabeth Lincoln",
        "OrderDate": "1996-07-16T00:00:00.000Z",
        "ShippedDate": "1996-07-22T00:00:00.000Z",
        "Freight": 81.91,
        "ShipName": "HILARION-Abastos",
        "ShipAddress": "Carrera 22 con Ave. Carlos Soublette #8-35",
        "ShipCity": "San Cristóbal",
        "ShipRegion": "Táchira",
        "ShipCountry": "Venezuela",
        "Verified": true
    },
    {
        "OrderID": 10258,
        "CustomerID": "ERNSH",
        "CustomerName": "Victoria Ashworth",
        "OrderDate": "1996-07-17T00:00:00.000Z",
        "ShippedDate": "1996-07-23T00:00:00.000Z",
        "Freight": 140.51,
        "ShipName": "Ernst Handel",
        "ShipAddress": "Kirchgasse 6",
        "ShipCity": "Graz",
        "ShipRegion": null,
        "ShipCountry": "Austria",
        "Verified": true
    },
    {
        "OrderID": 10259,
        "CustomerID": "CENTC",
        "CustomerName": "Patricio Simpson",
        "OrderDate": "1996-07-18T00:00:00.000Z",
        "ShippedDate": "1996-07-25T00:00:00.000Z",
        "Freight": 3.25,
        "ShipName": "Centro comercial Moctezuma",
        "ShipAddress": "Sierras de Granada 9993",
        "ShipCity": "México D.F.",
        "ShipRegion": null,
        "ShipCountry": "Mexico"
    }
]);

const orderDetails = JSON.parse(order, function (field, value) {
    var dupValue = value;
    if (typeof value === 'string' && /^(\d{4}\-\d\d\-\d\d([tT][\d:\.]*){1})([zZ]|([+\-])(\d\d):?(\d\d))?$/.test(value)) {
        var arr = dupValue.split(/[^0-9]/);
        value = new Date(parseInt(arr[0], 10), parseInt(arr[1], 10) - 1, parseInt(arr[2], 10), parseInt(arr[3], 10), parseInt(arr[4], 10), parseInt(arr[5], 10));
    }
    return value;
});

export default {
  components: {
    'ejs-grid': GridComponent,
    'e-column': ColumnDirective,
    'e-columns': ColumnsDirective
  },
  data: () => {
    return {
      data: orderDetails.slice(0, 12),
      filterSettings: { type: 'Excel' },
      editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true },
      orderidrules: { required: true, number: true },
      customeridrules: { required: true, minLength: 5 },
      freightrules:  { required: true, min: 0 },
      toolbar: ['Add', 'Edit', 'Delete', 'Update', 'Cancel'],
    };
  },
  provide: {
      grid: [Sort, Toolbar, Edit, Filter]
  }
}
</script>
```

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

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

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