table.component.html

<div>
  <button mat-button [matMenuTriggerFor]="chooseColumn">
    <mat-icon>more_vert</mat-icon>
  </button>
  <mat-menu #chooseColumn="matMenu">
    <button mat-menu-item *ngFor="let column of columns; let i = index">
      <mat-checkbox
        [checked]="!hiddenColumns.includes(column)"
        (change)="toggleColumn(column)"
        >{{ column }}</mat-checkbox
      >
    </button>
  </mat-menu>
</div>

<section class="example-container mat-elevation-z8" tabindex="0">
  <table
    mat-table
    [dataSource]="dataSource"
    multiTemplateDataRows
    class="mat-elevation-z8"
    matSort
    (matSortChange)="announceSortChange($event)"
    cdkDropList
    cdkDropListOrientation="horizontal"
    (cdkDropListDropped)="drop($event)"
  >
    <!-- Checkbox Column -->
    <ng-container matColumnDef="select" sticky>
      <th mat-header-cell *matHeaderCellDef>
        <mat-checkbox
          (change)="$event ? toggleAllRows() : null"
          [checked]="selection.hasValue() && isAllSelected()"
          [indeterminate]="selection.hasValue() && !isAllSelected()"
          [aria-label]="checkboxLabel()"
        >
        </mat-checkbox>
      </th>
      <td mat-cell *matCellDef="let row">
        <mat-checkbox
          (click)="$event.stopPropagation()"
          (change)="$event ? selection.toggle(row) : null"
          [checked]="selection.isSelected(row)"
          [aria-label]="checkboxLabel(row)"
        >
        </mat-checkbox>
      </td>
    </ng-container>
    <!-- Checkbox Column -->

    <!-- All Columns -->
    <ng-container
      matColumnDef="{{ column }}"
      *ngFor="let column of columns; let i = index"
    >
      <th mat-header-cell *matHeaderCellDef [resizeColumn]="true" [index]="i">
        <div class="header-title" mat-sort-header cdkDrag>
          {{ column }}
        </div>
      </th>
      <td mat-cell *matCellDef="let element">{{ element[column] }}</td>
    </ng-container>
    <tr mat-row *matRowDef="let element; columns: columnsToDisplay"></tr>
    <!-- All Columns -->

    <!-- All Columns Header -->
    <tr mat-header-row *matHeaderRowDef="columnsToDisplay; sticky: true"></tr>
    <!-- All Columns Header -->

    <!-- All Columns -->
    <ng-container matColumnDef="select-filter">
      <th mat-header-cell *matHeaderCellDef></th>
    </ng-container>
    <ng-container matColumnDef="name-filter">
      <th mat-header-cell *matHeaderCellDef>
        <mat-form-field>
          <input
            matInput
            (keyup)="applyFilter($event, 'name')"
            placeholder="Search"
          />
        </mat-form-field>
      </th>
    </ng-container>
    <ng-container matColumnDef="weight-filter">
      <th mat-header-cell *matHeaderCellDef>
        <mat-form-field>
          <input
            matInput
            (keyup)="applyFilter($event, 'weight')"
            placeholder="Search"
          />
        </mat-form-field>
      </th>
    </ng-container>
    <ng-container matColumnDef="symbol-filter">
      <th mat-header-cell *matHeaderCellDef>
        <mat-form-field>
          <input
            matInput
            (keyup)="applyFilter($event, 'symbol')"
            placeholder="Search"
          />
        </mat-form-field>
      </th>
    </ng-container>
    <ng-container matColumnDef="position-filter">
      <th mat-header-cell *matHeaderCellDef>
        <mat-form-field>
          <input
            matInput
            (keyup)="applyFilter($event, 'position')"
            placeholder="Search"
          />
        </mat-form-field>
      </th>
    </ng-container>
    <ng-container matColumnDef="address-filter">
      <th mat-header-cell *matHeaderCellDef>
        <mat-form-field>
          <input
            matInput
            (keyup)="applyFilter($event, 'address')"
            placeholder="Search"
          />
        </mat-form-field>
      </th>
    </ng-container>
    <ng-container matColumnDef="company-filter">
      <th mat-header-cell *matHeaderCellDef>
        <mat-form-field>
          <input
            matInput
            (keyup)="applyFilter($event, 'company')"
            placeholder="Search"
          />
        </mat-form-field>
      </th>
    </ng-container>
    <ng-container matColumnDef="option-filter">
      <th mat-header-cell *matHeaderCellDef></th>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="filterColumns; sticky: true"></tr>
    <!-- All Columns -->

    <!-- Inline Option Column -->
    <ng-container matColumnDef="option" stickyEnd>
      <th mat-header-cell *matHeaderCellDef></th>
      <td mat-cell *matCellDef="let element">
        <button
          mat-button
          [matMenuTriggerFor]="menu"
          [matMenuTriggerData]="{ $implicit: element }"
        >
          <mat-icon>more_vert</mat-icon>
        </button>
      </td>
    </ng-container>
    <!-- Inline Option Column -->

    <!-- Not Found Template -->
    <tr class="mat-row" *matNoDataRow>
      <td class="mat-cell" [attr.colspan]="columnsToDisplay.length">No data</td>
    </tr>
    <!-- Not Found Template -->
  </table>
</section>
<mat-paginator
  [pageSizeOptions]="[5, 10, 20]"
  showFirstLastButtons
  aria-label="Select page"
>
</mat-paginator>
<mat-menu #menu="matMenu">
  <ng-template matMenuContent let-dataItem>
    <button mat-menu-item>Edit</button>
    <button mat-menu-item>Delete</button>
  </ng-template>
</mat-menu>