# grid-inline-editing

> Data grid with inline editing, top new-row placement, paging, and excel filter.

**Framework:** react  **Component:** Grid  **Variant:** inline-editing

## 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/react/js/grid-inline-editing.json
```

**Install Package(s)**

```bash
npm install @syncfusion/ej2-react-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-inline-editing/Grid.jsx

```jsx
import { GridComponent, ColumnsDirective, ColumnDirective, Inject, Page, Edit, Toolbar, Sort, Filter } from '@syncfusion/ej2-react-grids';

const orderDataSource = [
    { 'OrderID': 10248, 'CustomerName': 'Maria Anders', 'Freight': 32.38, 'OrderDate': new Date('1996-07-04T14:00:00'), 'ShipCountry': 'France' },
    { 'OrderID': 10249, 'CustomerName': 'Ana Trujillo', 'Freight': 11.61, 'OrderDate': new Date('1996-07-05T12:20:00'), 'ShipCountry': 'Germany' },
    { 'OrderID': 10250, 'CustomerName': 'Antonio Moreno', 'Freight': 65.83, 'OrderDate': new Date('1996-07-08T13:30:00'), 'ShipCountry': 'Brazil' },
    { 'OrderID': 10251, 'CustomerName': 'Thomas Hardy', 'Freight': 41.34, 'OrderDate': new Date('1996-07-08T14:20:00'), 'ShipCountry': 'France' },
    { 'OrderID': 10252, 'CustomerName': 'Christina Berglund', 'Freight': 51.30, 'OrderDate': new Date('1996-07-09T12:00:00'), 'ShipCountry': 'Belgium' },
    { 'OrderID': 10253, 'CustomerName': 'Hanna Moos', 'Freight': 58.17, 'OrderDate': new Date('1996-07-10T14:30:00'), 'ShipCountry': 'Brazil' },
    { 'OrderID': 10254, 'CustomerName': 'Frédérique Citeaux', 'Freight': 22.98, 'OrderDate': new Date('1996-07-11T11:00:00'), 'ShipCountry': 'Switzerland' },
    { 'OrderID': 10255, 'CustomerName': 'Martín Sommer', 'Freight': 148.33, 'OrderDate': new Date('1996-07-12T15:00:00'), 'ShipCountry': 'Switzerland' },
    { 'OrderID': 10256, 'CustomerName': 'Laurence Lebihan', 'Freight': 13.97, 'OrderDate': new Date('1996-07-15T09:30:00'), 'ShipCountry': 'Brazil' },
    { 'OrderID': 10257, 'CustomerName': 'Elizabeth Lincoln', 'Freight': 81.91, 'OrderDate': new Date('1996-07-16T10:15:00'), 'ShipCountry': 'Venezuela' },
    { 'OrderID': 10258, 'CustomerName': 'Victoria Ashworth', 'Freight': 140.51, 'OrderDate': new Date('1996-07-17T16:45:00'), 'ShipCountry': 'Austria' },
    { 'OrderID': 10259, 'CustomerName': 'Patricio Simpson', 'Freight': 3.25, 'OrderDate': new Date('1996-07-18T08:30:00'), 'ShipCountry': 'Mexico' },
    { 'OrderID': 10260, 'CustomerName': 'Francisco Chang', 'Freight': 55.09, 'OrderDate': new Date('1996-07-19T13:00:00'), 'ShipCountry': 'Germany' },
    { 'OrderID': 10261, 'CustomerName': 'Yang Wang', 'Freight': 3.05, 'OrderDate': new Date('1996-07-19T17:20:00'), 'ShipCountry': 'Brazil' },
    { 'OrderID': 10262, 'CustomerName': 'Pedro Afonso', 'Freight': 48.29, 'OrderDate': new Date('1996-07-22T11:45:00'), 'ShipCountry': 'USA' }
  ];
  
function NormalEdit() {
    const filterSettings = { type: 'Excel' };
    const toolbarOptions = ['Add', 'Edit', 'Delete', 'Update', 'Cancel'];
    const editSettings = { allowEditing: true, allowAdding: true, allowDeleting: true, showAddNewRow: true, newRowPosition: 'Top' };
    const editparams = { params: { popupHeight: '300px' } };
    const customeridRule = { required: true, minLength: 5 };
    const freightRule = { required: true, min: 0 };
    const orderidRules = { required: true, number: true };
    const pageSettings = { pageCount: 5 };
    const format = { type: 'dateTime', format: 'M/d/y hh:mm a' };
    let gridInstance;

    function actionBegin(args) {
        if (args.requestType === 'save') {
            if (gridInstance.pageSettings.currentPage !== 1 && gridInstance.editSettings.newRowPosition === 'Top') {
                args.index = (gridInstance.pageSettings.currentPage * gridInstance.pageSettings.pageSize) - gridInstance.pageSettings.pageSize;
            }
            else if (gridInstance.editSettings.newRowPosition === 'Bottom') {
                args.index = (gridInstance.pageSettings.currentPage * gridInstance.pageSettings.pageSize) - 1;
            }
        }
    }

    return (<div className='control-pane'>
      <div className='control-section'>
        <div className='col-md-9'>
          <GridComponent dataSource={orderDataSource} ref={grid => gridInstance = grid} toolbar={toolbarOptions} allowSorting={true} allowFiltering={true} filterSettings={filterSettings} allowPaging={true} editSettings={editSettings} pageSettings={pageSettings} actionBegin={actionBegin.bind(this)}>
            <ColumnsDirective>
              <ColumnDirective field='OrderID' headerText='Order ID' width='140' textAlign='Right' validationRules={orderidRules} isPrimaryKey={true}></ColumnDirective>
              <ColumnDirective field='CustomerName' headerText='Customer Name' width='150' validationRules={customeridRule}></ColumnDirective>
              <ColumnDirective field='Freight' headerText='Freight' width='140' format='C2' textAlign='Right' validationRules={freightRule} editType='numericedit'></ColumnDirective>
              <ColumnDirective field='OrderDate' headerText='Order Date' editType='datetimepickeredit' format={format} width='160'></ColumnDirective>
              <ColumnDirective field='ShipCountry' headerText='Ship Country' width='150' editType='dropdownedit' edit={editparams}></ColumnDirective>
            </ColumnsDirective>
            <Inject services={[Page, Toolbar, Edit, Sort, Filter]}/>
          </GridComponent>
        </div>

      </div>
    </div>);
}
export default NormalEdit;
```