CODEWITHSUNDEEP
angularangular-material
vargaadam
vargaadam

Reputation: 489

Angular material table sticky not working on header

I want to use the material table sticky parameter, but for some reason it doesn't work in the table header, it works nicely in the sections below, it just slides in the header when I scroll sideways.

Here is the HTML code:

<div class="table-container">
      <table mat-table [dataSource]="dataSource" matSort>

        <ng-container matColumnDef="select" sticky>
          <th mat-header-cell *matHeaderCellDef class="px-2 w-50px">
            <div class="pr-3">
              <mat-checkbox (change)="$event ? masterToggle() : null" color="warn"
                [checked]="selection.hasValue() && isAllSelected()"
                [indeterminate]="selection.hasValue() && !isAllSelected()" [attr.aria-label]="checkboxLabel()">
              </mat-checkbox>
            </div>
          </th>
          <td mat-cell *matCellDef="let row" class="px-2 w-50px">
            <div class="pr-3">
              <mat-checkbox (click)="$event.stopPropagation()" color="warn"
                (change)="$event ? selection.toggle(row) : null" [checked]="selection.isSelected(row)"
                [attr.aria-label]="checkboxLabel(row)">
              </mat-checkbox>
            </div>
          </td>
        </ng-container>

        <!-- name -->
        <ng-container matColumnDef="name" sticky>
          <th mat-header-cell *matHeaderCellDef class="pl-3">
            <div class="d-flex flex-column pl-0 pr-2">
              <div mat-sort-header>
                Name
              </div>
            </div>
          </th>
          <td mat-cell *matCellDef="let element">
            <div>
              <!-- ... -->
            </div>
          </td>
        </ng-container>

        <!-- ... -->

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

</div>

enter image description here I invite everything well, everything works since the sticky in the lines below also works. What can I do to fix the bug so that the sticky works in the header too?

Upvotes: 4

Views: 10833

Answers (2)

Kisinga
Kisinga

Reputation: 1729

What you're looking for is sticky column, not sticky header, as much as you can combine both Here's an example

Sticky headers are meant to remain visible when you have multiple table items and you scroll "downwards" or vertically. Sticky columns remain visible when an individual table column is scrolled "sideways" or horizontally as demonstrated in your screenshot. Take a look at the documentation

Upvotes: 0

Sandman
Sandman

Reputation: 1569

You need to show more of the code to help you. It seems that the tr rows in the table are missing. Try adding the value: "sticky: true" to the *matHeaderRowDef attribute, like this:

<tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"
    (click)="selection.toggle(row)">
</tr>

Here a code snippet: https://stackblitz.com/edit/angular-uzg5aa?embed=1&file=src/app/table-selection-example.html

Upvotes: 4

Related Questions