md-table - Cara memperbarui lebar kolom

Saya sudah mulai menggunakan md-table untuk proyek saya, dan saya ingin lebar kolom tetap. Saat ini semua lebar kolom dibagi menjadi ukuran yang sama.

Di mana saya bisa mendapatkan dokumentasi dimensi tabel data?

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

Saat Material membuat tabel, secara otomatis menerapkan dua nama kelas untuk Anda yang bisa Anda gunakan untuk mengatur gaya setiap kolom. Pada contoh di bawah ini, gaya diberi nama mat-column-userIddan 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>

Sekarang Anda dapat menggunakan nama-nama itu di css:

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

Mirip dengan jawaban Rahul Patil , tetapi Anda tidak perlu menambahkan kelas lain ke definisi kolom Anda.

Saat ini, ini belum diekspos di level API. Bagaimanapun Anda dapat mencapainya dengan menggunakan sesuatu yang serupa dengan ini

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

Di css, Anda perlu menambahkan kelas kustom ini -

.customWidthClass{
   flex: 0 0 75px;
}

Silakan masukkan logika untuk menambahkan kelas atau lebar khusus di sini. Ini akan menerapkan lebar khusus untuk kolom.

Karena md-table menggunakan flex, kita perlu memberikan lebar tetap dengan cara yang fleksibel. Ini hanya menjelaskan -

0 = jangan tumbuh (singkatan dari flex-grow)

0 = jangan menyusut (singkatan dari flex-shrink)

75px = mulai dari 75px (singkatan dari flex-basis)

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

Jika Anda menggunakan angular / flex-layout dalam proyek Anda, Anda dapat mengatur kolom dengan menambahkan direktif fxFlex ke mat-header-cell dan 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>

Jika tidak, Anda dapat menambahkan CSS khusus untuk mendapatkan hasil yang sama:

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

Periksa ini: https://github.com/angular/material2/issues/5808

Karena material2 menggunakan tata letak fleksibel, Anda cukup menyetel fxFlex="40"(atau nilai yang Anda inginkan untuk fxFlex) ke md-celldan md-header-cell.

Saya menemukan kombinasi jawaban jymdman dan Rahul Patil paling cocok untuk saya:

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

Selain itu, jika Anda memiliki satu kolom "utama" yang ingin selalu menempati sejumlah ruang di perangkat yang berbeda, saya menemukan hal berikut ini cukup berguna untuk mengadopsi lebar penampung yang tersedia dengan cara yang lebih responsif (ini memaksa kolom yang tersisa untuk gunakan ruang yang tersisa secara merata):

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

The sudut materi dokumentasi penggunaan

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

untuk komponen tabelnya untuk mengubah lebar kolom. Sekali lagi, userId akan menjadi nama sel.

Saya menggunakan FlexLayout untuk memperbarui lebar kolom sesuai media kueri yang diberikan FlexLayout kepada kita.

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

berarti kolom ini akan menggunakan 30% dari lebar baris secara default, jika gt-xs @mediaQuery terpenuhi, lebar baru akan menjadi 15% dan perilaku serupa untuk kondisi lain

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

Baca lebih lanjut tentang FlexLayout dan @MediaQueries di https://github.com/angular/flex-layout/wiki/Responsive-API

Saya baru saja menggunakan:

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

Ganti 4 dengan posisi header yang perlu diatur lebarnya, Contoh dokumentasi yang digunakan:

td, th {
  width: 25%;
}

Jadi saya hanya memodifikasinya untuk mendapatkan apa yang saya inginkan.

Anda dapat menyetel kelas .mat-cell menjadi flex: 0 0 200px; bukannya flex: 1 bersama dengan nth-child.

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

Sekarang Anda dapat melakukannya seperti ini

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

Anda dapat menggunakan fxFlexdari "@ angular / flex-layout" dalam thdan tdseperti ini:

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

Anda juga dapat menggunakan pemilih elemen:

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

Tetapi jawaban jymdman adalah cara yang paling direkomendasikan dalam banyak kasus.

Contoh kolom Mat-table dan CSS yang sesuai:

HTML / Template

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

Anda juga dapat menambahkan gaya langsung di markup jika Anda menginginkannya:

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

Jika Anda memiliki terlalu banyak kolom tabel dan tidak disesuaikan dalam tabel sudut menggunakan md-table, maka tempel gaya berikut di component.cssfile. Ini akan bekerja seperti pesona dengan tampilan gulir secara horizontal.

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

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

.mat-row {
    width: 100%;
}

Tambahkan gaya ini untuk mengubah kolom Anda secara terpisah.

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

Atau periksa tautan ini , (dari mana kode di atas berasal) , untuk detail lebih lanjut.

Mari kita ambil contoh. Jika tabel Anda memiliki kolom sebagai berikut:

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

Karena ini berisi dua kolom. kemudian kita bisa mengatur lebar kolom menggunakan

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

untuk contoh ini, kami ambil

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

Saya mendapatkan solusi yang sangat mudah untuk ini - mengatur lebar berbeda untuk kolom dalam style sheet dengan menimpa sel dan sel header:

Contoh - menyetel lebar khusus untuk kolom ke-1 dan ke-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