Angular 6 Datatable заголовки строк?

Question

Я новичок в Angular 6, я очень привык к AngularJS, так что это новая область для меня. У меня есть пример таблицы, созданной и работающей с использованием угловых данных 6, и я понимаю заголовки столбцов и вызовы данных, но есть ли способ также реализовать заголовки строк?

Так, например, у меня есть таблица с заголовками столбцов в годах, мои заголовки строк будут месяцами в году, а данные будут заполняться в зависимости от месяцев до их лет. В настоящее время у меня есть традиционный пример для angular-6-datatable, установленный и работающий и пытающийся изучить его, который я получил здесь. nmpjs Angular 6 Datatable

Answer 1

Почему бы вам не использовать таблицу материалов для угловых, я думаю, это хорошо для тех, кто плохо знаком с угловыми 2+.https://material.angular.io/components/table/overview

В вашем случае:

<div class="mat-elevation-z8">
  <table mat-table [dataSource]="dataSource">

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

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

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

    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
  </table>

  <mat-paginator [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons></mat-paginator>
</div>