base_project/src/app/components/user/users/users.component.html

<div dir="ltr">
  <button mat-button color="primary" (click)="edit()">
    افزودن کاربر جدید
    <mat-icon>add</mat-icon>
  </button>
  <button mat-button [matMenuTriggerFor]="menu">
    <mat-icon>more_vert</mat-icon>
  </button>
  <mat-menu #menu="matMenu">
    <button (click)='toggle(column)' *ngFor="let column of allColumns" mat-menu-item>
      <input
        type='checkbox'
        [id]="column.prop"
        [checked]='isChecked(column)'
        [disabled]="(column.prop == 'id')"
      />
      {{column.name}}
    </button>
  </mat-menu>
</div>
<ngx-datatable
  class="material"
  [rows]="rows"
  [columns]="columns"
  [columnMode]="'force'"
  [headerHeight]="30"
  [footerHeight]="50"
  [rowHeight]="30"
  [limit]="limit"
  [count]="count"
  [offset]="offset"
  [filterRow]="true"
  [externalSorting]="true"
  [loadingIndicator]="is_loading"
  [externalPaging]="true"
  [appUrl]="appUrl"
  (sort)="fetchList($event)"
  (page)='fetchList($event)'
  (perPage)="fetchList($event)"
  [filters]="filters"
  [sortDir]="sortDir"
  [sortProp]="sortProp"
  [includes]="includes"
  [resource]='listService.type'
  id='my-table'
>

  <ngx-datatable-column *ngFor="let column of columns" prop="{{column.prop}}" name="{{column.name}}"
                        [filterTemplate]="column.filter">
    <ng-template *ngIf="column.prop == 'id'" let-row="row" let-value="value" ngx-datatable-cell-template>
      <button mat-button color="primary" (click)="remove(value)">
        <mat-icon style="margin: 5px" svgIcon="delete"></mat-icon>
      </button>
      <button mat-button color="primary" (click)="edit(value)">
        <mat-icon>edit</mat-icon>
      </button>
    </ng-template>
  </ngx-datatable-column>
</ngx-datatable>


<ng-template #filter_name>
  <mat-form-field>
    <input matInput [(ngModel)]="filters['name']" (change)="fetchList('filter')">
  </mat-form-field>
</ng-template>

<ng-template #filter_mobile>
  <mat-form-field style="width: 100%" floatLabel="never">
    <input matInput [(ngModel)]="filters['mobile']" (change)="fetchList('filter')">
  </mat-form-field>
</ng-template>

<ng-template #filter_email>
  <mat-form-field style="width: 100%" floatLabel="never">
    <input matInput [(ngModel)]="filters['email']" (change)="fetchList('filter')">
  </mat-form-field>
</ng-template>


<ng-template #filter_id>
  <button mat-icon-button (click)="fetchList('refresh')">
    <mat-icon svgIcon="refresh"></mat-icon>
  </button>
</ng-template>