<button mat-raised-button (click)="onNew($event)">
  <mat-icon>add</mat-icon> 添加
</button>
<button
  mat-raised-button
  (click)="onDeleteTriggered()"
  [disabled]="!selection.hasValue()"
>
  <mat-icon>delete</mat-icon> 删除
</button>

<div class="mat-elevation-z4">
  <div class="table-container">
    <table class="table-hover" mat-table [dataSource]="dataSource">
      <ng-container matColumnDef="select">
        <th mat-header-cell *matHeaderCellDef>
          <mat-checkbox
            (change)="$event ? masterToggle() : null"
            [checked]="selection.hasValue() && isAllSelected()"
            [indeterminate]="selection.hasValue() && !isAllSelected()"
          >
          </mat-checkbox>
        </th>
        <td mat-cell *matCellDef="let row">
          <mat-checkbox
            (click)="$event.stopPropagation()"
            (change)="$event ? selection.toggle(row) : null"
            [checked]="selection.isSelected(row)"
          >
          </mat-checkbox>
        </td>
      </ng-container>

      <ng-container matColumnDef="name" sticky>
        <th mat-header-cell *matHeaderCellDef>姓名</th>
        <td mat-cell *matCellDef="let element">{{ element.name }}</td>
      </ng-container>

      <ng-container matColumnDef="company">
        <th mat-header-cell *matHeaderCellDef>公司名称</th>
        <td mat-cell *matCellDef="let element">{{ element.company }}</td>
      </ng-container>

      <ng-container matColumnDef="tel">
        <th mat-header-cell *matHeaderCellDef>电话</th>
        <td mat-cell *matCellDef="let element">{{ element.tel }}</td>
      </ng-container>

      <ng-container matColumnDef="phone">
        <th mat-header-cell *matHeaderCellDef>手机</th>
        <td mat-cell *matCellDef="let element">{{ element.phone }}</td>
      </ng-container>

      <ng-container matColumnDef="status_mapped">
        <th mat-header-cell *matHeaderCellDef>跟进状态</th>
        <td mat-cell *matCellDef="let element">{{ element.status_mapped }}</td>
      </ng-container>

      <ng-container matColumnDef="lastest_revisit_log">
        <th mat-header-cell *matHeaderCellDef>最新跟进记录</th>
        <td mat-cell *matCellDef="let element">
          {{ element.lastest_revisit_log }}
        </td>
      </ng-container>

      <ng-container matColumnDef="real_revisit_at">
        <th mat-header-cell *matHeaderCellDef>实际跟进时间</th>
        <td mat-cell *matCellDef="let element">
          {{ element.real_revisit_at }}
        </td>
      </ng-container>

      <ng-container matColumnDef="revisit_remind_at">
        <th mat-header-cell *matHeaderCellDef>下次跟进时间</th>
        <td mat-cell *matCellDef="let element">
          {{ element.revisit_remind_at }}
        </td>
      </ng-container>

      <ng-container matColumnDef="star" stickyEnd>
        <th mat-header-cell *matHeaderCellDef>操作</th>
        <td
          mat-cell
          *matCellDef="let element"
          (click)="onEditorTriggered(element); $event.stopPropagation()"
        >
          编辑
        </td>
      </ng-container>

      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
      <tr
        mat-row
        *matRowDef="let row; columns: displayedColumns"
        (click)="rowSelection(row)"
      ></tr>
    </table>
  </div>

  <mat-paginator [pageSize]="10"></mat-paginator>
</div>

./lead.component.scss

:host {
  display: block;
  margin: 24px;
}

button {
  margin: 0 16px 16px 0;
}

.table-container {
  position: relative;
  overflow: auto;
}

table {
  width: 100%;
}