{
  "$schema": "https://ai.syncfusion.com/schema/registry-item.json",
  "name": "grid-default",
  "framework": "react",
  "type": "registry:component",
  "component": "Grid",
  "variant": "default",
  "dependencies": [
    "@syncfusion/ej2-react-grids"
  ],
  "description": "Data grid displays orders with sorting, Excel filtering, toolbar actions, 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/react/llms.txt",
    "skillPack": "syncfusion/react-ui-components-skills",
    "docs": "https://ai.syncfusion.com/gallery/react/js/grid-default.md"
  },
  "files": [
    {
      "target": "src/components/grid-default/Grid.jsx",
      "content": "import { GridComponent, ColumnsDirective, ColumnDirective, Sort, Inject, Toolbar, Filter, Edit } from '@syncfusion/ej2-react-grids';\n\nlet orderDetails = [\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        'EmployeeID': 3\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        'EmployeeID': 5\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        'EmployeeID': 1\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        'EmployeeID': 6\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        'EmployeeID': 2\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        'EmployeeID': 4\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        'EmployeeID': 9\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        'EmployeeID': 7\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        'EmployeeID': 8\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        'EmployeeID': 5\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        'EmployeeID': 1\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        'EmployeeID': 6\n    }];\n    \nfunction Default() {\n    const filterSettings = { type: 'Excel' };\n    const toolbar = ['Add', 'Edit', 'Delete', 'Update', 'Cancel'];\n    const editSettings = { allowEditing: true, allowAdding: true, allowDeleting: true };\n    const customeridRule = { required: true, minLength: 5 };\n    const orderidRules = { required: true, number: true };\n    const freightRules = { required: true, min: 0 };\n    return (<div className='control-pane'>\n      <div className='control-section'>\n        <GridComponent dataSource={orderDetails} height='350' allowSorting={true} editSettings={editSettings} allowFiltering={true} filterSettings={filterSettings} toolbar={toolbar}>\n          <ColumnsDirective>\n            <ColumnDirective field='OrderID' headerText='Order ID' width='180' textAlign='Right' validationRules={orderidRules} isPrimaryKey={true}></ColumnDirective>\n            <ColumnDirective field='CustomerName' headerText='Customer Name' width='150' validationRules={customeridRule}></ColumnDirective>\n            <ColumnDirective field='OrderDate' headerText='Order Date' width='130' format='yMd' textAlign='Right' editType='datepickeredit'/>\n            <ColumnDirective field='Freight' headerText='Freight' width='120' format='C2' textAlign='Right' validationRules={freightRules} editType='numericedit'/>\n            <ColumnDirective field='ShippedDate' headerText='Shipped Date' width='130' format='yMd' textAlign='Right' editType='datepickeredit'></ColumnDirective>\n            <ColumnDirective field='ShipCountry' headerText='Ship Country' width='150' editType='dropdownedit'></ColumnDirective>\n          </ColumnsDirective>\n          <Inject services={[Sort, Toolbar, Filter, Edit]}/>\n        </GridComponent>\n      </div>\n    </div>);\n}\nexport default Default;"
    }
  ]
}