angular - Mat Table with reordering Columns (cdkDrag) not working with sticky header row - Stack Overflow

admin管理员组

文章数量:1291326

I made a mat table with column reordering and it works partially correct.

The only issue I got is that when I have a sticky header row and the table body is scrolled and then I want to reorder the columns, the boundary is not the mat header row and instead a random row that was behind it, when i started dragging.

I also tried to change cdkDragBoundary but this probably needs to stay on "mat-table" otherwise I cant drag the columns to the edges when the table has an overflow in x axis

Angular version is 17.4

<div class="table-wrapper-container">
  <div class="mat-elevation-z8 table-wrapper">
    <mat-table
      [dataSource]="dataSource"
      class="table small-density resizeable"
      cdkDropList
      cdkDropListOrientation="horizontal"
      (cdkDropListDropped)="tableDrop($event)"
      matSort
      #table
    >
      <ng-container matColumnDef="position">
        <mat-header-cell
          *matHeaderCellDef
          mat-sort-header
          appResize
          host="flex-table"
          cdkDrag
          cdkDragBoundary="mat-table"
          cdkDragPreviewClass="drag-preview"
          cdkDragPreviewContainer="parent"
          cdkDragLockAxis="x"
          cdkdrag
        >
          No.
        </mat-header-cell>
        <mat-cell *matCellDef="let element"> {{ element.position }} </mat-cell>
      </ng-container>

      <ng-container matColumnDef="name">
        <mat-header-cell
          *matHeaderCellDef
          mat-sort-header
          appResize
          host="flex-table"
          cdkDrag
          cdkDragBoundary="mat-table"
          cdkDragPreviewClass="drag-preview"
          cdkDragPreviewContainer="parent"
          cdkDragLockAxis="x"
        >
          Name
        </mat-header-cell>
        <mat-cell *matCellDef="let element">
          <mat-form-field>
            <input matInput [(ngModel)]="element.name" />
          </mat-form-field>
        </mat-cell>
      </ng-container>

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

    <mat-paginator
      [length]="100"
      [pageSize]="25"
      [pageSizeOptions]="[5, 10, 25]"
    >
    </mat-paginator>
  </div>
</div>

本文标签： angularMat Table with reordering Columns (cdkDrag) not working with sticky header rowStack Overflow