let data : ExampleData [] = 
    [
      {id : 1, name : "Dx Radio", status : "todo", custom : true},
      {id : 2, name : "Dx datagrid", status : "error", custom : true},
      {id : 3, name : "Dx popup", status : "done", custom : false},
      {id : 4, name : "Dx button", status : "warning", custom : true},
      {id : 5, name : "Dx form", status : "in progress", custom : false},
      {id : 6, name : "Dx Text", status : "done", custom : true}
    ];

export class ExampleData {
    id: number;
    name: string;
    status: string;
    custom: boolean;
}

<dx-button 
    type="default"
    [disabled]="data.value"
    text="label of button"     [visible]="true"	
    (onClick)="click($event, data)">
</dx-button>

  <!-- Pagination. -->
  <dxo-paging [pageSize]="3" [pageIndex]="0" 
              [enabled]="true"></dxo-paging>
  <dxo-pager [allowedPageSizes]="[3, 6, 10, 25]"
    [visible]="false" [showPageSizeSelector]="true"   
    [showNavigationButtons]="true" [showInfo]="true"></dxo-pager>

  <!-- Columns -->
  <dxi-column dataField="id" caption="ID#" [visible]="true"
              width="50" alignment="center"></dxi-column>
  <dxi-column dataField="name" caption="Name" [visible]="true"
              width="150"></dxi-column>
  <dxi-column dataField="status" caption="Status" [visible]="true"
              width="100" alignment="center"></dxi-column>
  <dxi-column dataField="custom" caption="Custom"
              cellTemplate="cellTemplate" [allowFiltering]="false"
              [allowSorting]="false" alignment="center"
              width="150"></dxi-column>

<div *dxTemplate="let data of 'cellTemplate'">
    <!-- In the last column of the datagrid we add an action button -->
    <dx-button type="default" [disabled]="data?.value"                           text="label of button" (onClick)="click($event, data)">     </dx-button>
  </div>
 
</dx-data-grid>

// DxButton widget with composant configuration in options 
public refreshBtnToolbar: DxToolbarComponent.items = {
        location: "after",
        widget: "dxButton",
        locateInMenu: "auto",
        options: {
              icon: "pulldown",
              hint: "Clear & Reload",
              onClick: (e: Event): void => this.ClearRefreshAction(e)
        }
};

// Event DevExtreme during the datagrid’s toolbar building
private toolbarPreparing(event: Event) {     // we get back the list of DxToolbarComponent.items instance     const toolbarItems: DxToolbarComponent.items = event.toolbarOptions.items;      // jQuery typical form     // we add a DxButton widget in toolbar by passing a configuration object     toolbarItemsref.push(this.reshBtnToolbar);     // We can edit the properties them as we wish from the moment    // we get back the DxToolbarComponent.items instance     toolbarItems.forEach(       // for each toolbar item we change the location at « before »       (item: DxToolbarComponent.items): void => {         item.location = "before";       });  }

@ViewChild("datagrid", { static: false }) _datagrid: DxDataGridComponent;
   private ClearRefreshAction (event: Event) {
          // Notify          notify({
            message: `Click on the toolbar button "Clear & Reload" triggered!`,
            type: "success",
            position: { at: "center", my: "center",  offset: "0 52" },
            width: 250,  duration: 500
          });
          // Event Clear filter action
          this._datagrid.instance.clearFilter();
          // Reload Datagrid
          this._datagrid.dataSource = this.dataSource;
          this._datagrid.instance.getDataSource().reload();
  }

<dx-popup   [width]="260"  [height]="240"  [showTitle]="true"  [title]="currentRow.name"   [dragEnabled]="false"  [closeOnOutsideClick]="true"  [(visible)]="popupVisible"   (onShown)="shown($event)">
  <div *dxTemplate="let data of 'content'">
    <div class="popup-property-details">       <pre>{{ currentRow | json }}</pre>
    </div>
  </div>
</dx-popup>

Let db = new sqlite3.Database('exampleData.db');
let restapi = express();

// Configure express server 
// And Creation DB with data
[ … ]

//#region API | CRUD Actions
/** CREATE */
restapi.post("/add", (req, res) => { … });
/** READ */
restapi.get('/all', (req, res) => { … });
/** UPDATE */
restapi.put("/upd/:id", (req, res) => { … });
/** Delete */
restapi.delete("/del/:id", (req, res) => {
  const itemId = req.params.id;
  console.log("Delete item with id: ", itemId);
  // Delete item
  db.run('DELETE FROM exampleData WHERE id = $id', { $id: itemId });
});
//#endregion API | CRUD Actions

// URL of express server
let url: string = `http://localhost:3000/`;

//#region DataSource | CRUD Actions
// Define CustomStoreOptions
let customStoreOpt : CustomStoreOptions = new CustomStoreOptions({
        key: "id",
        load: () => this.sendRequest(`${url}all`),
        insert: values =>
          this.sendRequest(`${url}add`, "POST", values),
        update: (key, values) =>
          this.sendRequest(`${url}upd/${key}`, "PUT", values),
        remove: key =>
          this.sendRequest(`${url}del/${key}`, "DELETE", {
            key: key
          })
});
// Define DataSource
this.dataSource = new DataSource(customStoreOpt);
//#endregion CustomStoreOptions | CRUD Actions

  /**
   * Send Request
   * @param url 
   * @param method 
   * @param httpParams 
   */ 
 public sendRequest(url: string, method: string = "GET", httpParams: any = {}): any {
    let httpOptions = { withCredentials: false, body: httpParams };
    let result;
    switch (method) {
      case "GET":
        result = this.http.get(url, httpOptions);
        break;
      case "PUT":
        result = this.http.put(url, httpParams, httpOptions);
        break;
      case "POST":
        result = this.http.post(url, httpParams, httpOptions);
        break;
      case "DELETE":
        result = this.http.delete(url, httpOptions);
        break;
    }
    return result.toPromise().then((result: any) => {
        return  (method === "GET")
          ? { data: result.exampleData, totalCount: result.totalCount };
          :  result;
      }).catch(e => { throw e && e.error && e.error.Message; });
  }

<!—Editing -->
<dxo-editing 
      mode="cell" 
       [allowAdding]="true" 
       [allowUpdating]="true" 
       [allowDeleting]="true"
></dxo-editing>
<!-- Columns -->
<dxi-column dataField="id" [allowEditing]="false" caption="ID#" 
       [visible]="true" width="50" alignment="center">
</dxi-column>
<dxi-column dataField="name" caption="Name" 
       [visible]="true" width="150">
</dxi-column>
<dxi-column dataField="status" caption="Status" 
       [visible]="true" width="100" alignment="center">
</dxi-column>
<dxi-column dataField="custom" [allowEditing]="false" caption="Custom" 
      cellTemplate="cellTemplate" [allowFiltering]="false" [allowSorting]="false" 
      alignment="center" width="150">	
</dxi-column>

 // DxButton widget with composant configuration in options
  public deleteRowBtnToolbar: DxToolbarComponent["items"] = {
    location: "after",
    widget: "dxButton",
    locateInMenu: "auto",
    options: {
      disabled: !this.deleteBtnValid,
      icon: "trash",
      hint: "Delete Selected Rows",
      onInitialized: (args: any) => {
        // We  recover the instance of DxButton
        this.deleteBtnToolbarInstance = args.component;
      },
      onClick: (e: Event): void => this.deletedSelectedRow(e)
    }
  };

/**
  * Delected Selected Rows
  */
private deletedSelectedRow(event: Event) {
    let promiseList: Array<any> = [];
    let rows: Array<ExampleData> = this._datagrid.instance.getSelectedRowsData();      // 1 - for each row selected
    rows.forEach(row => {       // 2 - we add a promise for every call to our API  
      promiseList.push(this.sendRequest(`${this.url}del/${row.id}`, "DELETE", { key: row.id }));
    });
    Promise.all(promiseList).then(values => {
      // 3 - we send a notification after the good progress of our actions of suppression. 
      const type = "success";
      this._notifyConfig.message = "All selected rows deleted!";
      notify(this._notifyConfig, type, 1500);
      // 4 - we deselect the selected rows
      this._datagrid.instance.clearSelection();       // 5 - we pass the button status to false in order to disable delete button
      this.deleteBtnValid = false;
      if (this.deleteBtnToolbarInstance !== null) {
        this.deleteBtnToolbarInstance.option({
          disabled: !this.deleteBtnValid
        });
      }
      // 6 - we reload the Datagrid
      this._datagrid.instance.getDataSource().reload();
    });
  }