# grid-default

> Data grid with paging, sorting, filtering, validation, toolbar, and editing via GridModule.

**Framework:** angular  **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/angular/grid-default.json
```

**Install Package(s)**

```bash
npm install @syncfusion/ej2-angular-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.component.html

```html
<div class="grid-container" style="margin: 50px 90px">
  <ejs-grid [dataSource]='data' height='350' [allowSorting]='true' [allowFiltering]='true' [filterSettings]='filterSettings' [editSettings]='editSettings' [toolbar]='toolbar'>
      <e-columns>
          <e-column field='OrderID' headerText='Order ID' width='180' textAlign='Right' isPrimaryKey='true' [validationRules]='orderIdRules'></e-column>
          <e-column field='CustomerName' headerText='Customer Name' width='150' [validationRules]='customerIdRules'></e-column>
          <e-column field='OrderDate' headerText='Order Date' width='130' format="yMd" textAlign='Right' editType='datepickeredit'></e-column>
          <e-column field='Freight' headerText='Freight' width='120' format='C2' textAlign='Right' editType='numericedit' [validationRules]='freightRules'></e-column>
          <e-column field='ShippedDate' headerText='Shipped Date' width='130' format="yMd" textAlign='Right' editType='datepickeredit'></e-column>
          <e-column field='ShipCountry' headerText='Ship Country' width='150' editType='dropdownedit'></e-column>
      </e-columns>
    </ejs-grid>
</div>

```

### src/components/grid-default/grid.component.ts

```typescript
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { GridModule, PageService, SortService, FilterService, ToolbarService, EditService, SelectionService } from '@syncfusion/ej2-angular-grids';

@Component({
  selector: 'app-grid',
  standalone: true,
  imports: [CommonModule, GridModule],
  providers: [PageService, SortService, FilterService, ToolbarService, EditService, SelectionService],
  templateUrl: './grid.component.html'
})

export class GridComponent {
  public data: Object[] = [
    { 'OrderID': 10248, 'CustomerName': 'Maria ', 'OrderDate': new Date('1996-07-04'), 'ShippedDate': new Date('1996-07-16'), 'Freight': 32.38, 'ShipCountry': 'France' },
    { 'OrderID': 10249, 'CustomerName': 'Ana Trujillo', 'OrderDate': new Date('1996-07-05'), 'ShippedDate': new Date('1996-07-10'), 'Freight': 11.61, 'ShipCountry': 'Germany' },
    { 'OrderID': 10250, 'CustomerName': 'Antonio Moreno', 'OrderDate': new Date('1996-07-08'), 'ShippedDate': new Date('1996-07-12'), 'Freight': 65.83, 'ShipCountry': 'Brazil' },
    { 'OrderID': 10251, 'CustomerName': 'Thomas Hardy', 'OrderDate': new Date('1996-07-08'), 'ShippedDate': new Date('1996-07-15'), 'Freight': 41.34, 'ShipCountry': 'France' },
    { 'OrderID': 10252, 'CustomerName': 'Christina Berglund', 'OrderDate': new Date('1996-07-09'), 'ShippedDate': new Date('1996-07-11'), 'Freight': 51.3, 'ShipCountry': 'Belgium' },
    { 'OrderID': 10253, 'CustomerName': 'Hanna Moos', 'OrderDate': new Date('1996-07-10'), 'ShippedDate': new Date('1996-07-16'), 'Freight': 58.17, 'ShipCountry': 'Brazil' },
    { 'OrderID': 10254, 'CustomerName': 'Frédérique Citeaux', 'OrderDate': new Date('1996-07-11'), 'ShippedDate': new Date('1996-07-23'), 'Freight': 22.98, 'ShipCountry': 'Switzerland' },
    { 'OrderID': 10255, 'CustomerName': 'Martín Sommer', 'OrderDate': new Date('1996-07-12'), 'ShippedDate': new Date('1996-07-15'), 'Freight': 148.33, 'ShipCountry': 'Switzerland' },
    { 'OrderID': 10256, 'CustomerName': 'Laurence Lebihan', 'OrderDate': new Date('1996-07-15'), 'ShippedDate': new Date('1996-07-17'), 'Freight': 13.97, 'ShipCountry': 'Brazil' },
    { 'OrderID': 10257, 'CustomerName': 'Elizabeth Lincoln', 'OrderDate': new Date('1996-07-16'), 'ShippedDate': new Date('1996-07-22'), 'Freight': 81.91, 'ShipCountry': 'Venezuela' },
    { 'OrderID': 10258, 'CustomerName': 'Victoria Ashworth', 'OrderDate': new Date('1996-07-17'), 'ShippedDate': new Date('1996-07-23'), 'Freight': 140.51, 'ShipCountry': 'Austria' },
    { 'OrderID': 10259, 'CustomerName': 'Patricio Simpson', 'OrderDate': new Date('1996-07-18'), 'ShippedDate': new Date('1996-07-25'), 'Freight': 3.25, 'ShipCountry': 'Mexico' },
    { 'OrderID': 10260, 'CustomerName': 'Francisco Chang', 'OrderDate': new Date('1996-07-19'), 'ShippedDate': new Date('1996-07-29'), 'Freight': 55.09, 'ShipCountry': 'Germany' },
    { 'OrderID': 10261, 'CustomerName': 'Yang Wang', 'OrderDate': new Date('1996-07-19'), 'ShippedDate': new Date('1996-07-30'), 'Freight': 3.05, 'ShipCountry': 'Brazil' },
    { 'OrderID': 10262, 'CustomerName': 'Pedro Afonso', 'OrderDate': new Date('1996-07-22'), 'ShippedDate': new Date('1996-07-25'), 'Freight': 48.29, 'ShipCountry': 'USA' }
  ];

  public filterSettings = {
    type: 'Excel'
  };

  public toolbar = ['Add', 'Edit', 'Delete', 'Update', 'Cancel'];

  public editSettings = {
    allowEditing: true,
    allowAdding: true,
    allowDeleting: true
  };

  public customerIdRules = {
    required: true,
    minLength: 5
  };

  public orderIdRules = {
    required: true,
    number: true
  };

  public freightRules = {
    required: true,
    min: 0
  };
}

```