Material button datagrid devexpress

Question

Is it possible to define a material button inside a column of a dexpress datagrid?

<dx-data-grid [dataSource]="datasource" keyExpr="id">
<dxi-column>
        <button mat-button>Basic</button>
    </dxi-column>
</dx-data-grid>

app.module.ts

import { ReactiveFormsModule } from '@angular/forms';
import { DxDataGridModule, DxBulletModule, DxTemplateModule, DxNumberBoxModule, DxPopupModule, DxCheckBoxModule, DxLookupModule, DxButtonModule } from 'devextreme-angular';
import { MatIconModule } from '@angular/material/icon';
import { MatTabsModule } from '@angular/material/tabs';
import { MatButtonModule } from '@angular/material/button';
import { MatChipsModule } from '@angular/material/chips';
import { MatExpansionModule } from '@angular/material/expansion';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
import { MatPaginatorModule } from '@angular/material/paginator';
import { MatRippleModule } from '@angular/material/core';
import { MatSelectModule } from '@angular/material/select';
import { MatSortModule } from '@angular/material/sort';
import { MatSnackBarModule } from '@angular/material/snack-bar';

in this way the button is not displayed.

Answer 1

Create a cell template:

<dx-data-grid [dataSource]="datasource" keyExpr="id">
    <dxi-column cellTemplate="myCellTemplate"></dxi-column>
    <div *dxTemplate="let data of 'myCellTemplate'">
        <button mat-button>Basic</button>
    </div>
</dx-data-grid>