md-table - Sütun genişliği nasıl güncellenir

Projem için md tablosunu kullanmaya başladım ve sabit sütun genişliği istiyorum. Şu anda tüm sütun genişliği eşit boyuta bölünmüştür.

Veri tablosu boyutlarının belgelerini nereden alabilirim?

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

Malzeme tabloyu oluşturduğunda, otomatik olarak sizin için her bir sütuna stil vermek için kullanabileceğiniz iki sınıf adı uygular. Aşağıdaki örnekte stiller mat-column-userIdve adı verilmiştir 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>

Şimdi bu isimleri css'de kullanabilirsiniz:

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

Rahul Patil'ın cevabına benzer , ancak sütun tanımlarınıza başka bir sınıf eklemenize gerek yoktur.

Şu anda, henüz API düzeyinde ortaya çıkmadı. Ancak buna benzer bir şey kullanarak bunu başarabilirsiniz

<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'de, bu özel sınıfı eklemeniz gerekir -

.customWidthClass{
   flex: 0 0 75px;
}

Buraya sınıf veya özel genişlik eklemek için mantığı girmekten çekinmeyin. Sütun için özel genişlik uygulayacaktır.

Md-table kullandığından flexesnek bir şekilde sabit genişlik vermemiz gerekiyor. Bu basitçe açıklıyor -

0 = büyüme (esnek büyümenin kısaltması)

0 = küçültme (esnek küçültme için kısaltma)

75px = 75px'de başla (esnek tabanlı kısaltma)

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

Projenizde angular / flex-layout kullanıyorsanız , mat-header-cell ve mat- cell'e fxFlex yönergesi ekleyerek sütunu ile ayarlayabilirsiniz :

 <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>

Aksi takdirde, aynı sonucu elde etmek için özel CSS ekleyebilirsiniz:

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

Şunu kontrol edin: https://github.com/angular/material2/issues/5808

fxFlex="40"Material2 esnek düzen kullandığından, (veya fxFlex için istediğiniz değeri) md-cellve olarak ayarlayabilirsiniz md-header-cell.

Jymdman'ın ve Rahul Patil'ın yanıtlarının bir kombinasyonunun benim için en iyisi olduğunu buldum:

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

Ayrıca, farklı cihazlarda her zaman belirli bir alanı kaplamak istediğiniz bir "önde gelen" sütununuz varsa, mevcut kapsayıcı genişliğini daha duyarlı bir şekilde benimsemek için aşağıdakileri oldukça kullanışlı buldum (bu kalan sütunları kalan alanı eşit olarak kullanın):

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

Açısal malzeme belgeler kullanımları

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

tablo bileşeninin sütun genişliğini değiştirmek için. Yine, userId, hücrelerin adı olacaktır.

Sütun genişliğini FlexLayout'un bize verdiği sorgu ortamına göre güncellemek için FlexLayout kullanıyorum.

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

bu sütunun varsayılan olarak satır genişliğinin% 30'unu kullanacağı anlamına gelir, gt-xs @mediaQuery karşılandığında, yeni genişlik% 15 olacak ve diğer koşullar için benzer davranış

<!-- 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 ve @MediaQueries hakkında daha fazla bilgiyi https://github.com/angular/flex-layout/wiki/Responsive-API adresinde okuyun.

Ben sadece kullandım:

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

4'ü, genişliği ayarlamanız gereken başlığın konumu ile değiştirin. Kullanılan belgelerdeki örnekler :

td, th {
  width: 25%;
}

Bu yüzden istediğimi elde etmek için onu değiştirdim.

.Mat-cell sınıfını flex: 0 0 200px; flex yerine: nth-child ile birlikte 1.

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

Şimdi bunu böyle yapabilirsin

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

Kullandığınız yapabilirsiniz fxFlexyılında "@ açısal / esnek-düzen" den thve tdbunun gibi:

<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;
}

Ayrıca öğe seçicilerini de kullanabilirsiniz:

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

Ancak jymdman'ın cevabı çoğu durumda en çok önerilen yoldur.

Örnek Mat tablo sütunu ve karşılık gelen CSS:

HTML / Şablon

<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%;
}

İsterseniz stili doğrudan biçimlendirmeye de ekleyebilirsiniz:

<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>

Çok fazla tablo sütununuz varsa ve bu sütun kullanılarak açısal tabloda ayarlanmadıysa md-table, aşağıdaki stili component.cssdosyaya yapıştırın . Yatay olarak kaydırma görünümü ile bir cazibe gibi çalışacaktır.

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

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

.mat-row {
    width: 100%;
}

Sütununuzu ayrı ayrı değiştirmek için bu stili ekleyin.

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

Alternatif kontrol bu bağlantıyı , (kod yukarıdan geldi) Daha fazla ayrıntı için.

Bir örnek alalım. Tablonuzda aşağıdaki gibi sütunlar varsa:

<!-- 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>

Bu iki sütun içerdiğinden. ardından sütunların genişliğini ayarlayabiliriz

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

bu örnek için alıyoruz

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

Bunun için çok kolay bir çözüm buldum - hem hücreyi hem de başlık hücresini geçersiz kılarak stil sayfasındaki sütun için farklı genişlik belirleme:

Örnek - 1. ve 5. sütun için özel genişlik ayarlama:

.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