src/dev-app/table-scroll-container/table-scroll-container-demo.html - main - githubmirror/components

src/dev-app/table-scroll-container/table-scroll-container-demo.html
80 строк4 KB
Kristiyan Kostadinov
refactor(multiple): switch button selectors
14 мар 2025, 09:04
14 мар 2025, 09:04103ac7c
<div>
  <button matButton="elevated" (click)="tables.push(tables.length)">Add table</button>
  <button matButton="elevated" (click)="tables.pop()">Remove table</button>
</div>

<div>
  Sticky Headers:
  <mat-button-toggle-group multiple [value]="['header-1']"
                           #stickyHeaders="matButtonToggleGroup"
                           class="example-sticky-toggle-group">
    <mat-button-toggle value="header-1"> Row 1 </mat-button-toggle>
    <mat-button-toggle value="header-2"> Row 2 </mat-button-toggle>
  </mat-button-toggle-group>
</div>

<div>
  Sticky Footers:
  <mat-button-toggle-group multiple [value]="['footer-1']"
                           #stickyFooters="matButtonToggleGroup"
                           class="example-sticky-toggle-group">
    <mat-button-toggle value="footer-1"> Row 1 </mat-button-toggle>
    <mat-button-toggle value="footer-2"> Row 2 </mat-button-toggle>
  </mat-button-toggle-group>
</div>

<div>
  Sticky Columns:
  <mat-button-toggle-group multiple [value]="['position', 'symbol']"
                           #stickyColumns="matButtonToggleGroup"
                           class="example-sticky-toggle-group">
    <mat-button-toggle value="position"> Position </mat-button-toggle>
    <mat-button-toggle value="name"> Name </mat-button-toggle>
    <mat-button-toggle value="weight"> Weight </mat-button-toggle>
    <mat-button-toggle value="symbol"> Symbol </mat-button-toggle>
  </mat-button-toggle-group>
</div>

@for (table of tables; track table) {
  <div class="example-container mat-elevation-z8" cdkTableScrollContainer>
    <table mat-table [dataSource]="dataSource">
      <ng-container matColumnDef="position" [sticky]="isSticky(stickyColumns, 'position')">
        <th mat-header-cell *matHeaderCellDef> Position </th>
        <td mat-cell *matCellDef="let element"> {{element.position}} </td>
        <td mat-footer-cell *matFooterCellDef> Position Footer </td>
      </ng-container>

      <ng-container matColumnDef="name" [sticky]="isSticky(stickyColumns, 'name')">
        <th mat-header-cell *matHeaderCellDef> Name </th>
        <td mat-cell *matCellDef="let element"> {{element.name}} </td>
        <td mat-footer-cell *matFooterCellDef> Name Footer </td>
      </ng-container>

      <ng-container matColumnDef="weight" [stickyEnd]="isSticky(stickyColumns, 'weight')">
        <th mat-header-cell *matHeaderCellDef> Weight </th>
        <td mat-cell *matCellDef="let element"> {{element.weight}} </td>
        <td mat-footer-cell *matFooterCellDef> Weight Footer </td>
      </ng-container>

      <ng-container matColumnDef="symbol" [stickyEnd]="isSticky(stickyColumns, 'symbol')">
        <th mat-header-cell *matHeaderCellDef> Symbol </th>
        <td mat-cell *matCellDef="let element"> {{element.symbol}} </td>
        <td mat-footer-cell *matFooterCellDef> Symbol Footer </td>
      </ng-container>

      <ng-container matColumnDef="filler">
        <th mat-header-cell *matHeaderCellDef> Filler header cell </th>
        <td mat-cell *matCellDef="let element"> Filler data cell </td>
        <td mat-footer-cell *matFooterCellDef> Filler footer cell </td>
      </ng-container>

      <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: isSticky(stickyHeaders, 'header-1')"></tr>
      <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: isSticky(stickyHeaders, 'header-2')"></tr>

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

      <tr mat-footer-row *matFooterRowDef="displayedColumns; sticky: isSticky(stickyFooters, 'footer-1')"></tr>
      <tr mat-footer-row *matFooterRowDef="displayedColumns; sticky: isSticky(stickyFooters, 'footer-2')"></tr>
    </table>
  </div>
}