md-table - Як оновити ширину стовпця

Я почав використовувати таблицю md для свого проекту, і мені потрібна фіксована ширина стовпця. В даний час всі ширини стовпців розділені на однакові розміри.

Де я можу отримати документацію щодо розмірів таблиці даних?

https://material.angular.io/components/table/overview

Коли Material створює таблицю, він автоматично застосовує для вас дві назви класів, які ви можете використовувати для стилізації кожного стовпця. У наведеному нижче прикладі стилі названі mat-column-userIdта cdk-column-userId.

<ng-container cdkColumnDef="userId">
  <md-header-cell *cdkHeaderCellDef> ID </md-header-cell>
  <md-cell *cdkCellDef="let row"> {{row.id}} </md-cell>
</ng-container>

Тепер ви можете використовувати ці імена в css:

.mat-column-userId {
  flex: 0 0 100px;
}

Подібно до відповіді Рахула Патіла , але вам не потрібно додавати інший клас до визначень стовпців.

На даний момент він ще не виставлений на рівні API. Однак ви можете досягти цього, використовуючи щось подібне до цього

<ng-container cdkColumnDef="userId" >
  <md-header-cell *cdkHeaderCellDef [ngClass]="'customWidthClass'"> ID </md-header-cell>
  <md-cell *cdkCellDef="let row" [ngClass]="'customWidthClass'"> {{row.id}} </md-cell>
</ng-container>

У css вам потрібно додати цей власний клас -

.customWidthClass{
   flex: 0 0 75px;
}

Не соромтеся вводити логіку для додавання класу чи спеціальної ширини сюди. Для стовпця буде застосовано спеціальну ширину.

Оскільки використовується md-table flex, нам потрібно надавати фіксовану ширину гнучким способом. Це просто пояснює -

0 = не рости (скорочення від flex-grow)

0 = не стискатися (скорочення для гнучкої усадки)

75 пікселів = початок із 75 пікселів (скорочення для гнучкої основи)

Plunkr тут - https://plnkr.co/edit/v7ww6DhJ6zCaPyQhPRE8?p=preview

Якщо ви використовуєте angular / flex-layout у своєму проекті, ви можете встановити стовпець, додавши директиву fxFlex до mat-header-cell і mat-cell:

 <ng-container matColumnDef="name" >
      <mat-header-cell fxFlex="100px" *matHeaderCellDef mat-sort-header>Name</mat-header-cell>
      <mat-cell  fxFlex="100px" *matCellDef="let row;" (click)="rowClick(row)">{{row.Name}}</mat-cell>
 </ng-container>

В іншому випадку ви можете додати власний CSS, щоб досягти того самого результату:

.mat-column-name{
    flex: 0 0 100px;
}

Перевірте це: https://github.com/angular/material2/issues/5808

Оскільки material2 використовує гнучкий макет, ви можете просто встановити fxFlex="40"(або значення, яке потрібно для fxFlex), на md-cellта md-header-cell.

Я виявив, що комбінація відповідей jymdman та Rahul Patil мені найкраще підходить:

.mat-column-userId {
  flex: 0 0 75px;
}

Крім того, якщо у вас є один "провідний" стовпець, який ви хочете завжди займати певну кількість місця на різних пристроях, я знайшов наступне цілком зручним для прийняття до доступної ширини контейнера в більш адаптивному вигляді (це змушує решту стовпців використовуйте решту місця рівномірно):

.mat-column-userName {
  flex: 0 0 60%;
}

У Угловому матеріалі документації застосування

.mat-column-userId {
    max-width: 40px;
}

для компонента таблиці, щоб змінити ширину стовпця. Знову ж, userId було б ім’ям комірки.

Я використовую FlexLayout для оновлення ширини стовпця відповідно до запиту, який нам надає FlexLayout.

fxFlex="30" fxFlex.gt-xs="15" fxFlex.gt-sm="20" fxFlex.gt-md="25"

означає, що цей стовпець буде використовувати 30% ширини рядка за замовчуванням, коли gt-xs @mediaQuery досягнуто, нова ширина буде 15% та аналогічна поведінка для інших умов

<!-- CURRENTBALANCE COLUMN-->
  <ng-container cdkColumnDef="balance_2">
    <mat-header-cell fxFlex="30" fxFlex.gt-xs="15" fxFlex.gt-sm="20"
       fxFlex.gt-md="25" fxLayout="row" fxLayoutAlign="center center"
       *cdkHeaderCellDef>{{ balanceTable.datesHeaders[2] }}</mat-header-cell>
    <mat-cell fxFlex="30" fxFlex.gt-xs="15" fxFlex.gt-sm="20" fxFlex.gt-md="25" 
      *cdkCellDef="let eventTop">
      <div fxLayout="column" fxLayoutAlign="center center">
        <!-- CELL_CONTENT-->
      </div>
    </mat-cell>
  </ng-container>
<!-- CURRENTBALANCE COLUMN-->

Детальніше про FlexLayout та @MediaQueries читайте на https://github.com/angular/flex-layout/wiki/Responsive-API

Я щойно використовував:

th:nth-child(4) {
    width: 10%;
}

Замініть 4 позицією заголовка, для якого вам потрібно відрегулювати ширину. Приклади у використаній документації :

td, th {
  width: 25%;
}

Тож я просто модифікував його, щоб отримати бажане.

Ви можете встановити для .mat-cell клас flex: 0 0 200px; замість флексу: 1 разом із n-ю дитиною.

.mat-cell:nth-child(2), .mat-header-cell:nth-child(2) {
    flex: 0 0 200px;
}

Тепер ви можете зробити це так

<cdk-cell [style.flex]="'0 0 75px'">

Ви можете використовувати fxFlexз "@ angular / flex-layout" thі, tdнаприклад, так:

<ng-container matColumnDef="value">
      <th mat-header-cell fxFlex="15%" *matHeaderCellDef>Value</th>
            <td mat-cell *matCellDef="let element" fxFlex="15%" fxLayoutAlign="start center">
                           {{'value'}}
            </td>
       </th>
</ng-container>

.mat-column-skills {
    max-width: 40px;
}

Ви також можете використовувати селектори елементів:

mat-header-cell:nth-child(1), mat-cell:nth-child(1) {
    flex: 0 0 64px;
}

Але відповідь jymdman - це найбільш рекомендований спосіб у більшості випадків.

Зразок стовпця Mat-таблиці та відповідний CSS:

HTML / шаблон

<ng-container matColumnDef="">
  <mat-header-cell *matHeaderCellDef>
     Wider Column Header
  </mat-header-cell>
  <mat-cell *matCellDef="let displayData">
    {{ displayData.value}}
  </mat-cell>`enter code here`
</ng-container>

CSS

.mat-column-courtFolderId {
    flex: 0 0 35%;
}

Ви також можете додати стиль безпосередньо в розмітку, якщо хочете:

<ng-container matColumnDef="Edit">
     <th mat-header-cell *matHeaderCellDef > Edit </th>
     <td mat-cell *matCellDef="let element" (click)="openModal()" style="width: 50px;"> <i class="fa fa-pencil" aria-hidden="true"></i> </td>
</ng-container>

Якщо у вас забагато стовпців таблиці, і він не коригується в кутовій таблиці за допомогою md-table, вставте наступний стиль у component.cssфайл. Це буде працювати як шарм із горизонтальним прокручуванням.

.mat-table__wrapper .mat-table {
    min-width: auto !important;
    width: 100% !important; }

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

.mat-row {
    width: 100%;
}

Додайте цей стиль, щоб окремо змінити стовпець.

.mat-column-{colum-name} {
    flex: 0 0 25% !important;
    min-width: 104px !important;
}

Крім того, перевірте це посилання , (де код вище прийшов від) , більш докладно.

Візьмемо приклад. Якщо у вашій таблиці є такі стовпці:

<!-- ID Column -->
  <ng-container matColumnDef="id" >
    <th mat-header-cell *matHeaderCellDef mat-sort-header> ID </th>
    <td mat-cell *matCellDef="let row"> {{row.sid}} </td>
  </ng-container>

 <!-- Name Column -->
  <ng-container matColumnDef="name">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> Name </th>
    <td mat-cell *matCellDef="let row"> {{row.name}} </td>
  </ng-container>

Оскільки він містить два стовпці. тоді ми можемо встановити ширину стовпців за допомогою

.mat-column-<matColumnDef-value>{
    width: <witdh-size>% !important;
}

для цього прикладу візьмемо

  .mat-column-id{
    width: 20% !important;      
  }
  .mat-column-name{
    width: 80% !important;
  }

Я отримав дуже просте рішення для цього - встановлення різної ширини для стовпця в таблиці стилів, замінивши комірку і комірку заголовка:

Приклад - встановлення спеціальної ширини для 1-го та 5-го стовпця:

.mat-cell:nth-child(1),
.mat-header-cell:nth-child(1) {
  flex: 0 0 5%;
}
.mat-cell:nth-child(5),
.mat-header-cell:nth-child(5) {
  flex: 0 0 10%;
}

github