Угловая таблица материалов с клейкой и настраиваемой шириной - PullRequest
Новая
       45

Угловая таблица материалов с клейкой и настраиваемой шириной

0 голосов
/ 13 февраля 2019

Мне нужна таблица, которую можно настроить по размеру и ширине столбца.К настоящему моменту я нашел что-то, если бы я поместил пользовательский класс с шириной : 150px на th и td , атрибут sticky при горизонтальной прокрутке незнать, как правильно вычислить style.left .

enter image description here

Но, например, если я переопределю в CSS классы .mat-header-cell , .mat-footer-cell , .mat-cell с ширина: 150px атрибут sticky знает, как управлять этими поместите style.left правильно.

enter image description here

CSS: 

.table-responsive {
    height: 400px;
    width: 800px;
    overflow: auto;
}

table {
    width: 1000px;
}

.mat-header-cell, .mat-footer-cell, .mat-cell {
    box-sizing: border-box;
    text-align: center;
    width: 150px;
}

.mat-header-row {
    width: 100%;
}

HTML:

<div dir="ltr" class="table-responsive mat-elevation-z8">
    <table mat-table #table [dataSource]="dataSource" matSort >
      <ng-container *ngFor="let col of displayedColumns">

        <ng-container *ngIf="col.type === 'masterCheckbox'" [matColumnDef]="col.value"
                        [sticky]="col.sticky">
          <th mat-header-cell *matHeaderCellDef [style.width]="col.width" [fxFlex]="col.width">
            <mat-checkbox (change)="$event ? masterToggle() : null"
                            [checked]="selection.hasValue() && isAllSelected()"
                            [indeterminate]="selection.hasValue() && !isAllSelected()">
            </mat-checkbox>
          </th>
          <td mat-cell *matCellDef="let row" [style.width]="col.width" [fxFlex]="col.width">
            <span class="header-label"></span>
            <mat-checkbox (click)="$event.stopPropagation()"
                            (change)="$event? selection.toggle(row) : null"
                            [checked]="selection.isSelected(row)">
            </mat-checkbox>
          </td>
        </ng-container>


        <ng-container *ngIf="col.type === 'text'" [matColumnDef]="col.value" [sticky]="col.sticky">
          <th mat-header-cell *matHeaderCellDef mat-sort-header
                [fxFlex]="col.width">
              {{ 'TABLE.COLUMN.' + col.name | translate }}
          </th>
          <td mat-cell *matCellDef="let row" [fxFlex]="col.width">
            <div fxLayout="column" fxLayoutAlign="space-between start">
              <div>{{row[col.value]}}</div>
              <div fxLayout="row" fxLayoutAlign="space-between end">
                <app-column-actions (actionEvent)="doAction($event)" [row]="row"
                                      [actions]="col.actions"></app-column-actions>
              </div>
            </div>
          </td>
        </ng-container>

        <ng-container *ngIf="col.type === 'toggle'" [matColumnDef]="col.value" [sticky]="col.sticky">
          <th mat-header-cell *matHeaderCellDef mat-sort-header
                [fxFlex]="col.width">
              {{ 'TABLE.COLUMN.' + col.name | translate }}
          </th>
          <td mat-cell *matCellDef="let row" [fxFlex]="col.width">
            <div fxLayout="column" fxLayoutAlign="space-between start">
              <mat-slide-toggle [checked]="row[col.value]"></mat-slide-toggle>
              <div fxLayout="row" fxLayoutAlign="space-between end">
                <app-column-actions (actionEvent)="doAction($event)" [row]="row"
                                      [actions]="col.actions"></app-column-actions>
              </div>
            </div>
          </td>
        </ng-container>

        <ng-container *ngIf="col.type === 'checkbox'" [matColumnDef]="col.value">
          <th mat-header-cell *matHeaderCellDef mat-sort-header
                [fxFlex]="col.width">
              {{ 'TABLE.COLUMN.' + col.name | translate }}
          </th>
          <td mat-cell *matCellDef="let row" [fxFlex]="col.width">
            <div fxLayout="column" fxLayoutAlign="space-between start">
              <span class="header-label"></span>
              <mat-checkbox [checked]="row[col.value]"></mat-checkbox>
              <div fxLayout="row" fxLayoutAlign="space-between end">
                <app-column-actions (actionEvent)="doAction($event)" [row]="row"
                                      [actions]="col.actions"></app-column-actions>
              </div>
            </div>
          </td>
        </ng-container>

        <ng-container *ngIf="col.type === 'percentage'" [matColumnDef]="col.value">
          <th mat-header-cell *matHeaderCellDef mat-sort-header
                [fxFlex]="col.width">
              {{ 'TABLE.COLUMN.' + col.name | translate }}
          </th>
          <td mat-cell *matCellDef="let row" [fxFlex]="col.width">
            <div fxLayout="column" fxLayoutAlign="space-between start">
                {{row[col.value]}}%
              <div fxLayout="row" fxLayoutAlign="space-between end">
                <app-column-actions (actionEvent)="doAction($event)" [row]="row"
                                      [actions]="col.actions"></app-column-actions>
              </div>
            </div>
          </td>
        </ng-container>

        <ng-container *ngIf="col.type === 'link'" [matColumnDef]="col.value">
          <th mat-header-cell *matHeaderCellDef mat-sort-header
                [fxFlex]="col.width">
              {{ 'TABLE.COLUMN.' + col.name | translate }}
          </th>
          <td mat-cell *matCellDef="let row" [fxFlex]="col.width">
            <div fxLayout="column" fxLayoutAlign="space-between start">
              <button> CLICK </button>
              <div fxLayout="row" fxLayoutAlign="space-between end">
                <app-column-actions (actionEvent)="doAction($event)" [row]="row"
                                      [actions]="col.actions"></app-column-actions>
              </div>
            </div>
          </td>
        </ng-container>

        <ng-container *ngIf="col.type === 'actions'" [matColumnDef]="col.value" stickyEnd>
          <th mat-header-cell *matHeaderCellDef mat-sort-header
                [fxFlex]="col.width">
              {{ 'TABLE.COLUMN.' + col.name | translate }}
          </th>
          <td mat-cell *matCellDef="let row" [fxFlex]="col.width">
            <button mat-icon-button [matMenuTriggerFor]="menu">
              <mat-icon class="actionBtn">add_circle</mat-icon>
            </button>
            <mat-menu #menu="matMenu">
              <ng-container *ngFor="let action of singleSelectionActions">
                <app-single-selection-actions
                    (actionEvent)="doAction($event)"
                    [selectedRow]="row"
                    [singleSelectionAction]="action">
                </app-single-selection-actions>
              </ng-container>
            </mat-menu>
          </td>
        </ng-container>

      </ng-container>
      <mat-header-row *matHeaderRowDef="columnDefinitions"></mat-header-row>
      <mat-row *matRowDef="let row; columns: columnDefinitions"></mat-row>
    </table>
    <mat-paginator #paginator [pageSize]="10" [pageSizeOptions]="[5, 10, 20]"></mat-paginator>
  </div>

1 Ответ

0 голосов
/ 14 февраля 2019

Это работает, если вы установите fxFlex и класс с минимальной шириной 

.min-width-100 {
  min-width: 100px !important;
}
<th mat-header-cell *matHeaderCellDef mat-sort-header [fxFlex]="col.width"
                    class="min-width-100">
 {{ 'TABLE.COLUMN.' + col.name | translate }}
</th>
<td mat-cell *matCellDef="let row" [fxFlex]="col.width" class="min-width-100 d-flex d-j-c-flex-end">
  <div fxLayout="column" fxLayoutAlign="space-between start">
    {{row[col.value]}}%
    <div fxLayout="row" fxLayoutAlign="space-between end">
       <app-column-actions 
         (actionEvent)="doAction($event)" 
         [row]="row"
         [actions]="col.actions">
       </app-column-actions>
    </div>
  </div>
</td>
...