{
  "$schema": "https://ai.syncfusion.com/schema/registry-item.json",
  "name": "grid-default",
  "framework": "vue",
  "type": "registry:component",
  "component": "Grid",
  "variant": "default",
  "dependencies": [
    "@syncfusion/ej2-vue-grids"
  ],
  "description": "Data grid presents records with paging, sorting, filtering, and inline editing.",
  "meta": {
    "essentialStudioRelease": "2026 Volume 2 (v34.1.29)",
    "license": "commercial-or-community",
    "licenseNote": "The Syncfusion package is licensed. The composition in this file is source you own and edit. See https://ai.syncfusion.com/licensing.md",
    "requiresLicenseKey": true,
    "requiresServerEndpoint": false,
    "platformIndex": "https://ai.syncfusion.com/vue/llms.txt",
    "skillPack": "syncfusion/vue-ui-components-skills",
    "docs": "https://ai.syncfusion.com/gallery/vue/grid-default.md"
  },
  "files": [
    {
      "target": "src/components/grid-default/Grid.vue",
      "content": "<template>\n<div class=\"col-lg-12 control-section\">\n    <div>\n        <ejs-grid :dataSource=\"data\" :allowSorting='true' :allowFiltering='true' :filterSettings='filterSettings' :editSettings='editSettings' :toolbar='toolbar'>\n            <e-columns>\n                <e-column field='OrderID' headerText='Order ID' width='180' textAlign='Right' :isPrimaryKey='true' :validationRules='orderidrules'></e-column>\n                <e-column field='CustomerName' headerText='Customer Name' width='150' :validationRules='customeridrules'></e-column>\n                <e-column field='OrderDate' headerText='Order Date' width='130' format=\"yMd\" textAlign='Right' editType='datepickeredit'></e-column>\n                <e-column field='Freight' headerText='Freight' width='120' format='C2' textAlign='Right' editType='numericedit' :validationRules='freightrules' ></e-column>\n                <e-column field='ShippedDate' headerText='Shipped Date' width='130' format=\"yMd\" textAlign='Right' editType='datepickeredit'></e-column>\n                <e-column field='ShipCountry' headerText='Ship Country' width='150' editType='dropdownedit'></e-column>\n            </e-columns>\n        </ejs-grid>\n    </div>\n\n\n</div>\n</template>\n<script lang=\"ts\">\nimport { GridComponent, ColumnDirective, ColumnsDirective, Sort, Toolbar, Edit, Filter } from \"@syncfusion/ej2-vue-grids\";\n\nconst order = JSON.stringify([\n    {\n        \"OrderID\": 10248,\n        \"CustomerID\": \"VINET\",\n        \"CustomerName\": \"Maria \",\n        \"OrderDate\": \"1996-07-04T00:00:00.000Z\",\n        \"ShippedDate\": \"1996-07-16T00:00:00.000Z\",\n        \"Freight\": 32.38,\n        \"ShipName\": \"Vins et alcools Chevalier\",\n        \"ShipAddress\": \"59 rue de l'Abbaye\",\n        \"ShipCity\": \"Reims\",\n        \"ShipRegion\": null,\n        \"ShipCountry\": \"France\",\n        \"Verified\": true\n    },\n    {\n        \"OrderID\": 10249,\n        \"CustomerID\": \"TOMSP\",\n        \"CustomerName\": \"Ana Trujillo\",\n        \"OrderDate\": \"1996-07-05T00:00:00.000Z\",\n        \"ShippedDate\": \"1996-07-10T00:00:00.000Z\",\n        \"Freight\": 11.61,\n        \"ShipName\": \"Toms Spezialitäten\",\n        \"ShipAddress\": \"Luisenstr. 48\",\n        \"ShipCity\": \"Münster\",\n        \"ShipRegion\": null,\n        \"ShipCountry\": \"Germany\",\n        \"Verified\": true\n    },\n    {\n        \"OrderID\": 10250,\n        \"CustomerID\": \"HANAR\",\n        \"CustomerName\": \"Antonio Moreno\",\n        \"OrderDate\": \"1996-07-08T00:00:00.000Z\",\n        \"ShippedDate\": \"1996-07-12T00:00:00.000Z\",\n        \"Freight\": 65.83,\n        \"ShipName\": \"Hanari Carnes\",\n        \"ShipAddress\": \"Rua do Paço, 67\",\n        \"ShipCity\": \"Rio de Janeiro\",\n        \"ShipRegion\": \"RJ\",\n        \"ShipCountry\": \"Brazil\",\n        \"Verified\": true\n    },\n    {\n        \"OrderID\": 10251,\n        \"CustomerID\": \"VICTE\",\n        \"CustomerName\": \"Thomas Hardy\",\n        \"OrderDate\": \"1996-07-08T00:00:00.000Z\",\n        \"ShippedDate\": \"1996-07-15T00:00:00.000Z\",\n        \"Freight\": 41.34,\n        \"ShipName\": \"Victuailles en stock\",\n        \"ShipAddress\": \"2, rue du Commerce\",\n        \"ShipCity\": \"Lyon\",\n        \"ShipRegion\": null,\n        \"ShipCountry\": \"France\"\n    },\n    {\n        \"OrderID\": 10252,\n        \"CustomerID\": \"SUPRD\",\n        \"CustomerName\": \"Christina Berglund\",\n        \"OrderDate\": \"1996-07-09T00:00:00.000Z\",\n        \"ShippedDate\": \"1996-07-11T00:00:00.000Z\",\n        \"Freight\": 51.3,\n        \"ShipName\": \"Suprêmes délices\",\n        \"ShipAddress\": \"Boulevard Tirou, 255\",\n        \"ShipCity\": \"Charleroi\",\n        \"ShipRegion\": null,\n        \"ShipCountry\": \"Belgium\"\n    },\n    {\n        \"OrderID\": 10253,\n        \"CustomerID\": \"HANAR\",\n        \"CustomerName\": \"Hanna Moos\",\n        \"OrderDate\": \"1996-07-10T00:00:00.000Z\",\n        \"ShippedDate\": \"1996-07-16T00:00:00.000Z\",\n        \"Freight\": 58.17,\n        \"ShipName\": \"Hanari Carnes\",\n        \"ShipAddress\": \"Rua do Paço, 67\",\n        \"ShipCity\": \"Rio de Janeiro\",\n        \"ShipRegion\": \"RJ\",\n        \"ShipCountry\": \"Brazil\",\n        \"Verified\": true\n    },\n    {\n        \"OrderID\": 10254,\n        \"CustomerID\": \"CHOPS\",\n        \"CustomerName\": \"Frédérique Citeaux\",\n        \"OrderDate\": \"1996-07-11T00:00:00.000Z\",\n        \"ShippedDate\": \"1996-07-23T00:00:00.000Z\",\n        \"Freight\": 22.98,\n        \"ShipName\": \"Chop-suey Chinese\",\n        \"ShipAddress\": \"Hauptstr. 31\",\n        \"ShipCity\": \"Bern\",\n        \"ShipRegion\": null,\n        \"ShipCountry\": \"Switzerland\"\n    },\n    {\n        \"OrderID\": 10255,\n        \"CustomerID\": \"RICSU\",\n        \"CustomerName\": \"Martín Sommer\",\n        \"OrderDate\": \"1996-07-12T00:00:00.000Z\",\n        \"ShippedDate\": \"1996-07-15T00:00:00.000Z\",\n        \"Freight\": 148.33,\n        \"ShipName\": \"Richter Supermarkt\",\n        \"ShipAddress\": \"Starenweg 5\",\n        \"ShipCity\": \"Genève\",\n        \"ShipRegion\": null,\n        \"ShipCountry\": \"Switzerland\"\n    },\n    {\n        \"OrderID\": 10256,\n        \"CustomerID\": \"WELLI\",\n        \"CustomerName\": \"Laurence Lebihan\",\n        \"OrderDate\": \"1996-07-15T00:00:00.000Z\",\n        \"ShippedDate\": \"1996-07-17T00:00:00.000Z\",\n        \"Freight\": 13.97,\n        \"ShipName\": \"Wellington Importadora\",\n        \"ShipAddress\": \"Rua do Mercado, 12\",\n        \"ShipCity\": \"Resende\",\n        \"ShipRegion\": \"SP\",\n        \"ShipCountry\": \"Brazil\"\n    },\n    {\n        \"OrderID\": 10257,\n        \"CustomerID\": \"HILAA\",\n        \"CustomerName\": \"Elizabeth Lincoln\",\n        \"OrderDate\": \"1996-07-16T00:00:00.000Z\",\n        \"ShippedDate\": \"1996-07-22T00:00:00.000Z\",\n        \"Freight\": 81.91,\n        \"ShipName\": \"HILARION-Abastos\",\n        \"ShipAddress\": \"Carrera 22 con Ave. Carlos Soublette #8-35\",\n        \"ShipCity\": \"San Cristóbal\",\n        \"ShipRegion\": \"Táchira\",\n        \"ShipCountry\": \"Venezuela\",\n        \"Verified\": true\n    },\n    {\n        \"OrderID\": 10258,\n        \"CustomerID\": \"ERNSH\",\n        \"CustomerName\": \"Victoria Ashworth\",\n        \"OrderDate\": \"1996-07-17T00:00:00.000Z\",\n        \"ShippedDate\": \"1996-07-23T00:00:00.000Z\",\n        \"Freight\": 140.51,\n        \"ShipName\": \"Ernst Handel\",\n        \"ShipAddress\": \"Kirchgasse 6\",\n        \"ShipCity\": \"Graz\",\n        \"ShipRegion\": null,\n        \"ShipCountry\": \"Austria\",\n        \"Verified\": true\n    },\n    {\n        \"OrderID\": 10259,\n        \"CustomerID\": \"CENTC\",\n        \"CustomerName\": \"Patricio Simpson\",\n        \"OrderDate\": \"1996-07-18T00:00:00.000Z\",\n        \"ShippedDate\": \"1996-07-25T00:00:00.000Z\",\n        \"Freight\": 3.25,\n        \"ShipName\": \"Centro comercial Moctezuma\",\n        \"ShipAddress\": \"Sierras de Granada 9993\",\n        \"ShipCity\": \"México D.F.\",\n        \"ShipRegion\": null,\n        \"ShipCountry\": \"Mexico\"\n    }\n]);\n\nconst orderDetails = JSON.parse(order, function (field, value) {\n    var dupValue = value;\n    if (typeof value === 'string' && /^(\\d{4}\\-\\d\\d\\-\\d\\d([tT][\\d:\\.]*){1})([zZ]|([+\\-])(\\d\\d):?(\\d\\d))?$/.test(value)) {\n        var arr = dupValue.split(/[^0-9]/);\n        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));\n    }\n    return value;\n});\n\nexport default {\n  components: {\n    'ejs-grid': GridComponent,\n    'e-column': ColumnDirective,\n    'e-columns': ColumnsDirective\n  },\n  data: () => {\n    return {\n      data: orderDetails.slice(0, 12),\n      filterSettings: { type: 'Excel' },\n      editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true },\n      orderidrules: { required: true, number: true },\n      customeridrules: { required: true, minLength: 5 },\n      freightrules:  { required: true, min: 0 },\n      toolbar: ['Add', 'Edit', 'Delete', 'Update', 'Cancel'],\n    };\n  },\n  provide: {\n      grid: [Sort, Toolbar, Edit, Filter]\n  }\n}\n</script>"
    },
    {
      "target": "src/components/grid-default/GridView.vue",
      "content": "<template>\n  <Grid />\n</template>\n\n<script setup>\nimport Grid from '../../components/Grid.vue'\n</script>"
    }
  ]
}