md-table - Как обновить ширину столбца

Я начал использовать md-table для своего проекта, и мне нужна фиксированная ширина столбца. На данный момент все столбцы по ширине разделены на одинаковые размеры.

Где я могу получить документацию по размерам таблицы данных?

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 = не сжиматься (сокращение от flex-shrink)

75px = начало с 75px (сокращение от flex-base)

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.

Я обнаружил, что комбинация ответов Джимдмана и Рахула Патила лучше всего работает для меня:

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

Кроме того, если у вас есть один «ведущий» столбец, который вы хотите всегда занимать определенное количество места на разных устройствах, я обнаружил, что следующее очень удобно для адаптации к доступной ширине контейнера в более гибком виде (это заставляет остальные столбцы равномерно используйте оставшееся пространство):

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

В документации по материалам Angular используются

.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; вместо flex: 1 вместе с nth-child.

.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-table и соответствующий 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