ipsos-components/src/demo-app/a11y/table/table-a11y.html

Material Design components for Angular

<div>
  <section>
    <h2>Basic Table</h2>
    <p>Shows name, color and age data.</p>
    <mat-table aria-readonly="true"
              [dataSource]="basicDataSource"
              aria-label="Users favorite colors and age">
      <ng-container cdkColumnDef="name">
        <mat-header-cell *cdkHeaderCellDef>Name</mat-header-cell>
        <mat-cell *cdkCellDef="let row">{{row.name}}</mat-cell>
      </ng-container>
      <ng-container cdkColumnDef="color">
        <mat-header-cell *cdkHeaderCellDef>Color</mat-header-cell>
        <mat-cell *cdkCellDef="let row">{{row.color}}</mat-cell>
      </ng-container>
      <ng-container cdkColumnDef="age">
        <mat-header-cell *cdkHeaderCellDef>Age</mat-header-cell>
        <mat-cell *cdkCellDef="let row">{{row.age}}</mat-cell>
      </ng-container>
      <mat-header-row *cdkHeaderRowDef="displayedColumns"></mat-header-row>
      <mat-row *cdkRowDef="let row; columns: displayedColumns;"></mat-row>
    </mat-table>
  </section>

  <section>
    <h2>Sortable Table</h2>
    <p>Shows name, color and age data. Sorted ascending by age.</p>
    <mat-table [dataSource]="sortDataSource"
              aria-label="Users favorite colors and age"
              aria-readonly="true"
              mdSort mdSortActive="age"
              mdSortDirection="asc">
      <ng-container cdkColumnDef="name">
        <mat-header-cell *cdkHeaderCellDef>Name</mat-header-cell>
        <mat-cell *cdkCellDef="let row">{{row.name}}</mat-cell>
      </ng-container>
      <ng-container cdkColumnDef="color">
        <mat-header-cell *cdkHeaderCellDef>Color</mat-header-cell>
        <mat-cell *cdkCellDef="let row">{{row.color}}</mat-cell>
      </ng-container>
      <ng-container cdkColumnDef="age">
        <mat-header-cell *cdkHeaderCellDef mat-sort-header>Age</mat-header-cell>
        <mat-cell *cdkCellDef="let row">{{row.age}}</mat-cell>
      </ng-container>
      <mat-header-row *cdkHeaderRowDef="displayedColumns"></mat-header-row>
      <mat-row *cdkRowDef="let row; columns: displayedColumns;"></mat-row>
    </mat-table>
  </section>

  <section>
    <h2>Paginated Table</h2>
    <p>Shows name, color and age data. Shows only first 5 until paginated.</p>
    <mat-table [dataSource]="paginatedDataSource"
              aria-readonly="true"
              aria-label="Users favorite colors and age">
      <ng-container cdkColumnDef="name">
        <mat-header-cell *cdkHeaderCellDef>Name</mat-header-cell>
        <mat-cell *cdkCellDef="let row">{{row.name}}</mat-cell>
      </ng-container>
      <ng-container cdkColumnDef="color">
        <mat-header-cell *cdkHeaderCellDef>Color</mat-header-cell>
        <mat-cell *cdkCellDef="let row">{{row.color}}</mat-cell>
      </ng-container>
      <ng-container cdkColumnDef="age">
        <mat-header-cell *cdkHeaderCellDef>Age</mat-header-cell>
        <mat-cell *cdkCellDef="let row">{{row.age}}</mat-cell>
      </ng-container>
      <mat-header-row *cdkHeaderRowDef="displayedColumns"></mat-header-row>
      <mat-row *cdkRowDef="let row; columns: displayedColumns;"></mat-row>
    </mat-table>
    <mat-paginator #paginator
      [length]="6"
      [pageIndex]="0"
      [pageSize]="3"
      [pageSizeOptions]="[1, 3, 5]">
    </mat-paginator>
  </section>
</div>