{
  "$schema": "https://ai.syncfusion.com/schema/registry-item.json",
  "name": "grid-inline-editing",
  "framework": "react",
  "type": "registry:component",
  "component": "Grid",
  "variant": "inline-editing",
  "dependencies": [
    "@syncfusion/ej2-react-grids"
  ],
  "description": "Data grid with inline editing, top new-row placement, paging, and excel filter.",
  "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/ts/grid-inline-editing.md"
  },
  "files": [
    {
      "target": "src/components/grid-inline-editing/Grid.tsx",
      "content": "import { GridComponent, ColumnsDirective, ColumnDirective, Inject, Page, Edit, Toolbar, Sort, type FilterSettingsModel, Filter } from '@syncfusion/ej2-react-grids';\n\nconst orderDataSource = [\n    { 'OrderID': 10248, 'CustomerName': 'Maria Anders', 'Freight': 32.38, 'OrderDate': new Date('1996-07-04T14:00:00'), 'ShipCountry': 'France' },\n    { 'OrderID': 10249, 'CustomerName': 'Ana Trujillo', 'Freight': 11.61, 'OrderDate': new Date('1996-07-05T12:20:00'), 'ShipCountry': 'Germany' },\n    { 'OrderID': 10250, 'CustomerName': 'Antonio Moreno', 'Freight': 65.83, 'OrderDate': new Date('1996-07-08T13:30:00'), 'ShipCountry': 'Brazil' },\n    { 'OrderID': 10251, 'CustomerName': 'Thomas Hardy', 'Freight': 41.34, 'OrderDate': new Date('1996-07-08T14:20:00'), 'ShipCountry': 'France' },\n    { 'OrderID': 10252, 'CustomerName': 'Christina Berglund', 'Freight': 51.30, 'OrderDate': new Date('1996-07-09T12:00:00'), 'ShipCountry': 'Belgium' },\n    { 'OrderID': 10253, 'CustomerName': 'Hanna Moos', 'Freight': 58.17, 'OrderDate': new Date('1996-07-10T14:30:00'), 'ShipCountry': 'Brazil' },\n    { 'OrderID': 10254, 'CustomerName': 'Frédérique Citeaux', 'Freight': 22.98, 'OrderDate': new Date('1996-07-11T11:00:00'), 'ShipCountry': 'Switzerland' },\n    { 'OrderID': 10255, 'CustomerName': 'Martín Sommer', 'Freight': 148.33, 'OrderDate': new Date('1996-07-12T15:00:00'), 'ShipCountry': 'Switzerland' },\n    { 'OrderID': 10256, 'CustomerName': 'Laurence Lebihan', 'Freight': 13.97, 'OrderDate': new Date('1996-07-15T09:30:00'), 'ShipCountry': 'Brazil' },\n    { 'OrderID': 10257, 'CustomerName': 'Elizabeth Lincoln', 'Freight': 81.91, 'OrderDate': new Date('1996-07-16T10:15:00'), 'ShipCountry': 'Venezuela' },\n    { 'OrderID': 10258, 'CustomerName': 'Victoria Ashworth', 'Freight': 140.51, 'OrderDate': new Date('1996-07-17T16:45:00'), 'ShipCountry': 'Austria' },\n    { 'OrderID': 10259, 'CustomerName': 'Patricio Simpson', 'Freight': 3.25, 'OrderDate': new Date('1996-07-18T08:30:00'), 'ShipCountry': 'Mexico' },\n    { 'OrderID': 10260, 'CustomerName': 'Francisco Chang', 'Freight': 55.09, 'OrderDate': new Date('1996-07-19T13:00:00'), 'ShipCountry': 'Germany' },\n    { 'OrderID': 10261, 'CustomerName': 'Yang Wang', 'Freight': 3.05, 'OrderDate': new Date('1996-07-19T17:20:00'), 'ShipCountry': 'Brazil' },\n    { 'OrderID': 10262, 'CustomerName': 'Pedro Afonso', 'Freight': 48.29, 'OrderDate': new Date('1996-07-22T11:45:00'), 'ShipCountry': 'USA' }\n  ];\n\nfunction NormalEdit() {\n  const filterSettings: FilterSettingsModel = {type: 'Excel'};\n  const toolbarOptions: any = ['Add', 'Edit', 'Delete', 'Update', 'Cancel'];\n  const editSettings: any = { allowEditing: true, allowAdding: true, allowDeleting: true, showAddNewRow: true, newRowPosition: 'Top' };\n  const editparams: any = { params: { popupHeight: '300px' } };\n  const customeridRule: Object = { required: true, minLength: 5};\n  const freightRule: Object = { required: true, min: 0};\n  const orderidRules: Object = { required: true, number: true };\n  const pageSettings: Object = { pageCount: 5 };\n  const format: any = { type: 'dateTime', format: 'M/d/y hh:mm a' };\n\n  let gridInstance: GridComponent;\n\n  function actionBegin(args: any): void {\n    if (args.requestType === 'save') {\n      if (gridInstance.pageSettings.currentPage !== 1 && gridInstance.editSettings.newRowPosition === 'Top') {\n        args.index = (gridInstance.pageSettings.currentPage * gridInstance.pageSettings.pageSize) - gridInstance.pageSettings.pageSize;\n      } else if (gridInstance.editSettings.newRowPosition === 'Bottom') {\n        args.index = (gridInstance.pageSettings.currentPage * gridInstance.pageSettings.pageSize) - 1;\n      }\n    }\n  }\n\n  return (\n    <div className='control-pane'>\n      <div className='control-section'>\n        <div className='col-md-9'>\n          <GridComponent dataSource={orderDataSource} ref={grid => gridInstance = grid} toolbar={toolbarOptions} allowSorting={true} allowFiltering={true} filterSettings={filterSettings} allowPaging={true} editSettings={editSettings} pageSettings={pageSettings}\n            actionBegin={actionBegin.bind(this)}>\n            <ColumnsDirective>\n              <ColumnDirective field='OrderID' headerText='Order ID' width='140' textAlign='Right' validationRules={orderidRules} isPrimaryKey={true}></ColumnDirective>\n              <ColumnDirective field='CustomerName' headerText='Customer Name' width='150' validationRules={customeridRule}></ColumnDirective>\n              <ColumnDirective field='Freight' headerText='Freight' width='140' format='C2' textAlign='Right' validationRules={freightRule} editType='numericedit' ></ColumnDirective>\n              <ColumnDirective field='OrderDate' headerText='Order Date' editType='datetimepickeredit' format={format} width='160' ></ColumnDirective>\n              <ColumnDirective field='ShipCountry' headerText='Ship Country' width='150' editType='dropdownedit' edit={editparams} ></ColumnDirective>\n            </ColumnsDirective>\n            <Inject services={[Page, Toolbar, Edit, Sort, Filter]} />\n          </GridComponent>\n        </div>\n\n      </div>\n    </div>\n  )\n}\nexport default NormalEdit;"
    }
  ]
}