<mat-card appearance="outlined" class="card">
  <mat-card-title>
    <p>Grid options</p>
  </mat-card-title>

  <mat-card-subtitle>
    <p>
      Grid recommendations below are aligned with the breakpoint tokens used in this template.
      The table is intended for practical responsive layout decisions in Angular Material pages.
    </p>
  </mat-card-subtitle>

  <mat-card-content class="table-wrapper">
    <mat-table [dataSource]="dataSource">

      <!-- Value Column -->
      <ng-container matColumnDef="value">
        <mat-header-cell *matHeaderCellDef class="table-header"></mat-header-cell>
        <mat-cell *matCellDef="let element" class="table-body-row"> {{element.value}} </mat-cell>
      </ng-container>

      <!-- XS Column -->
      <ng-container matColumnDef="xs">
        <mat-header-cell *matHeaderCellDef class="table-header">
          <p class="table-header-title">Extra small</p>
          <p class="table-header-subtitle">&lt;576px</p>
        </mat-header-cell>
        <mat-cell *matCellDef="let element" class="table-body"> {{element.xs}} </mat-cell>
      </ng-container>

      <!-- S Column -->
      <ng-container matColumnDef="s">
        <mat-header-cell *matHeaderCellDef class="table-header">
          <p class="table-header-title">Small</p>
          <p class="table-header-subtitle">≥576px</p>
        </mat-header-cell>
        <mat-cell *matCellDef="let element" class="table-body"> {{element.s}} </mat-cell>
      </ng-container>

      <!-- M Column -->
      <ng-container matColumnDef="m">
        <mat-header-cell *matHeaderCellDef class="table-header">
          <p class="table-header-title">Medium</p>
          <p class="table-header-subtitle">≥768px</p>
        </mat-header-cell>
        <mat-cell *matCellDef="let element" class="table-body"> {{element.m}} </mat-cell>
      </ng-container>

      <!-- L Column -->
      <ng-container matColumnDef="l">
        <mat-header-cell *matHeaderCellDef class="table-header">
          <p class="table-header-title">Large</p>
          <p class="table-header-subtitle">≥992px</p>
        </mat-header-cell>
        <mat-cell *matCellDef="let element" class="table-body"> {{element.l}} </mat-cell>
      </ng-container>

      <!-- XL Column -->
      <ng-container matColumnDef="xl">
        <mat-header-cell *matHeaderCellDef class="table-header">
          <p class="table-header-title">Extra large</p>
          <p class="table-header-subtitle">≥1200px</p>
        </mat-header-cell>
        <mat-cell *matCellDef="let element" class="table-body"> {{element.xl}} </mat-cell>
      </ng-container>

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

</mat-card>
