Data Grid In DevExtreme

Custom Data Source :

DevExtreme includes the CustomStore component, which allows you to load and update data from a custom data source. It retrieves data from a custom remote server and shows it on the DataGrid.

The CustomStore and the server communicate in the following manner:

The server then transforms the data using these parameters and returns the updated dataset (you should write the server-side code for this).

Each parameter pertains to a specific data operation like sorting, filtering, and so forth.
It only available if the action is listed in the DataGrid’s remoteOperations property as a remote operation.

For further details on how to communicate between the client and server in DevExtreme, see the Server-Side Data Processing support page.

Implement the load function as described in the following help topic, with remoteOperations set to false:

If your server does not offer any data operations, client-side data processing may be required.

App.component.ts

<dx-data-grid
  id="gridContainer"
  [dataSource]="dataSource"
  [showBorders]="true"
  [remoteOperations]="true"
>
  <dxi-column dataField="OrderNumber" dataType="number"> </dxi-column>
  <dxi-column dataField="OrderDate" dataType="date"> </dxi-column>
  <dxi-column dataField="StoreCity" dataType="string"> </dxi-column>
  <dxi-column dataField="StoreState" dataType="string"> </dxi-column>
  <dxi-column dataField="Employee" dataType="string"> </dxi-column>
  <dxi-column dataField="SaleAmount" dataType="number" format="currency">
  </dxi-column>
  <dxo-paging [pageSize]="12"></dxo-paging>
  <dxo-pager
    [showPageSizeSelector]="true"
    [allowedPageSizes]="[8, 12, 20]"
  ></dxo-pager>
</dx-data-grid>

App.component.ts

import { NgModule, Component, enableProdMode } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { HttpClient, HttpClientModule, HttpParams } from '@angular/common/http';
import { lastValueFrom } from 'rxjs';

import { DxDataGridModule } from 'devextreme-angular';
import CustomStore from 'devextreme/data/custom_store';

if (!/localhost/.test(document.location.host)) {
  enableProdMode();
}

@Component({
    styleUrls: ['app/app.component.css'],
  selector: 'demo-app',
  templateUrl: 'app/app.component.html',
})
export class AppComponent {
  dataSource: any = {};

  constructor(httpClient: HttpClient) {
    function isNotEmpty(value: any): boolean {
      return value !== undefined && value !== null && value !== '';
    }
    this.dataSource = new CustomStore({
      key: 'OrderNumber',
      load(loadOptions: any) {
        let params: HttpParams = new HttpParams();
        [
          'skip',
          'take',
          'requireTotalCount',
          'requireGroupCount',
          'sort',
          'filter',
          'totalSummary',
          'group',
          'groupSummary',
        ].forEach((i) => {
          if (i in loadOptions && isNotEmpty(loadOptions[i])) { params = params.set(i, JSON.stringify(loadOptions[i])); }
        });
        return lastValueFrom(httpClient.get('http://localhost:4200/events/Demos/WidgetsGalleryDataService/api/orders', { params }))
          .then((data: any) => ({
            data: data.data,
            totalCount: data.totalCount,
            summary: data.summary,
            groupCount: data.groupCount,
          }))
          .catch((error) => { throw 'Data Loading Error'; });
      },
    });
  }
}

@NgModule({
  imports: [
    BrowserModule,
    DxDataGridModule,
    HttpClientModule,
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent],
})
export class AppModule { }

platformBrowserDynamic().bootstrapModule(AppModule);

OutPut: