# grid-default

> Data grid displays orders with sorting, Excel filtering, toolbar actions, and inline editing.

**Framework:** react  **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/react/ts/grid-default.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-default/Grid.tsx

```tsx
import { GridComponent, ColumnsDirective, ColumnDirective, Sort, Inject, Toolbar, type ToolbarItems, type FilterSettingsModel, type EditSettingsModel, Filter, Edit } from '@syncfusion/ej2-react-grids';

let orderDetails = [
    {
        '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',
        'EmployeeID': 3
    },
    {
        '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',
        'EmployeeID': 5
    },
    {
        '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',
        'EmployeeID': 1
    },
    {
        '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',
        'EmployeeID': 6
    },
    {
        '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',
        'EmployeeID': 2
    },
    {
        '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',
        'EmployeeID': 4
    },
    {
        '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',
        'EmployeeID': 9
    },
    {
        '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',
        'EmployeeID': 7
    },
    {
        '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',
        'EmployeeID': 8
    },
    {
        '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',
        'EmployeeID': 5
    },
    {
        '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',
        'EmployeeID': 1
    },
    {
        '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',
        'EmployeeID': 6
    }];

function Default() {
  const filterSettings: FilterSettingsModel = {type: 'Excel'};
  const toolbar: ToolbarItems[] = ['Add', 'Edit', 'Delete', 'Update', 'Cancel'];
  const editSettings: EditSettingsModel = { allowEditing: true, allowAdding: true, allowDeleting: true };
  const customeridRule: Object = { required: true, minLength: 5};
  const orderidRules: Object = { required: true, number: true };
  const freightRules: Object = { required: true, min: 0 };
  return (
    <div className='control-pane'>
      <div className='control-section'>
        <GridComponent dataSource={orderDetails} height='350' allowSorting={true} editSettings={editSettings} allowFiltering={true} filterSettings={filterSettings} toolbar={toolbar}>
          <ColumnsDirective>
            <ColumnDirective field='OrderID' headerText='Order ID' width='180' textAlign='Right' validationRules={orderidRules} isPrimaryKey={true}></ColumnDirective>
            <ColumnDirective field='CustomerName' headerText='Customer Name' width='150' validationRules={customeridRule}></ColumnDirective>
            <ColumnDirective field='OrderDate' headerText='Order Date' width='130' format='yMd' textAlign='Right' editType='datepickeredit'/>
            <ColumnDirective field='Freight' headerText='Freight' width='120' format='C2' textAlign='Right' validationRules={freightRules} editType='numericedit'/>
            <ColumnDirective field='ShippedDate' headerText='Shipped Date' width='130' format='yMd' textAlign='Right' editType='datepickeredit'></ColumnDirective>
            <ColumnDirective field='ShipCountry' headerText='Ship Country' width='150' editType='dropdownedit'></ColumnDirective>
          </ColumnsDirective>
          <Inject services={[Sort, Toolbar, Filter, Edit]} />
        </GridComponent>
      </div>
    </div>
  )
}
export default Default;
```