How to stick title on the position with angular material?

Question

I have a column name project in angular material. And under the title some check boxes.

But the if you scroll down in the table the column header name will also scroll. But it has to be sticked on his position.

So this is the html:

<ng-container matColumnDef="projects">
    <th mat-header-cell *matHeaderCellDef (mouseover)="show = true" (mouseout)="show = false" mat-sort-header i18n>
      <div class="mat-checkbox-project">

          <div class="row" *ngFor="let item of returnProjectCodes; let i = index">
            <mat-checkbox
              (click)="$event.stopPropagation()"
              (change)="filterProjects($event, i, item); selected=i"
              [checked]="selected === i"
              >{{ item.name }}
            </mat-checkbox>
          </div>
      </div>
      <div class="mat-sort-header-button-project">Project</div>
    </th>

    <td mat-cell *matCellDef="let row">{{ row.projects }}</td>
</ng-container>

Annd this the important css:

.mat-sort-header-button-project {
  //position: relative;
  position: fixed;
}

I have done: position: fixed , because then the column header name is in line with the checkboxes under the column name.

But the problem now is that the column header title project will scroll if you go down in the table. And not sticked on his position.

So what I have to change that it also sticks with the position?

Thank you

Answer 1

There is no need to add external CSS to make a column / Row Sticky.

Refer to this example on stackblitz from the official doc.

Hope this helps!