md-table - Cara memperbarui lebar kolom

Jawaban:

140

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.

— jymdman
sumber
Dalam kasus saya, saya membutuhkan! Penting untuk gaya yang diterapkan seperti ini karena jika tidak gaya untuk .mat-header-cellakan diutamakan. Alternatifnya, Anda bisa menambahkan aturan gaya lain untuk sel header.
— Adrian Smith
Apakah dokumentasi untuk ini tersedia di mana saja (saya ingin memahami apa arti masing-masing dari 3 nilai setelah "flex" dan bagaimana .mat-column- <colName> merujuk ke kolom yang sesuai)? Terima kasih!
— hura
1
Ini adalah solusi yang akhirnya saya gunakan, tetapi alih-alih mengatur basis fleksibel, saya menetapkan pertumbuhan fleksibel sehingga selnya 3x lebih besar dari sel lain (flex: 3 0 0)
— emulcahy
3
Mengatur lebar dengan flex tidak berfungsi dalam kasus saya. Begitu pula dengan lebar. min-width melakukannya (untuk beberapa alasan).
— Paul Evans
1
@ Jymdman apakah ada cara untuk menentukan ukuran yang sama untuk kolom bahkan perubahan ukuran layar? stackoverflow.com/questions/65296518/…
— aplikasi
55

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

— Rahul Patil
sumber
1
Bagus, keduanya bekerja. Terima kasih. Tetapi jika data lebih dari tabel juga. Dan pembungkus kata juga tidak berfungsi
— Vinutha Kumar
2
mengapa Anda menggunakan [ngClass] daripada kelas normal?
— Andre Elrico
@Rahul adakah cara untuk menentukan ukuran yang sama untuk kolom bahkan perubahan ukuran layar? stackoverflow.com/questions/65296518/…
— aplikasi
38

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;
}
— Uliana Pavelko
sumber
1
apakah ada cara untuk menentukan ukuran yang sama untuk kolom bahkan perubahan ukuran layar? stackoverflow.com/questions/65296518/…
— aplikasi
15

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%;
}
— Hans
sumber
Ini jawaban terbaik.
— PedroPovedaQ
9

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

— Felipe Santa
sumber
Menambahkan direktif fxFlex ke satu kolom tampaknya mempengaruhi semuanya. Apakah ada cara untuk menargetkan hanya satu kolom?
— zakdances
6

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.

— daniekpo
sumber
4

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;
}
— Mark Cutajar
sumber
4

Sekarang Anda dapat melakukannya seperti ini

<cdk-cell [style.flex]="'0 0 75px'">
— Jason Politis
sumber
4

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>
— amir110
sumber
2 
.mat-column-skills {
    max-width: 40px;
}
— Pragati Dugar
sumber
Apakah Anda yakin, ini menyimpang dari jawaban pilihan teratas? Mungkin cdkColumnDef Anda hanya berbeda?
— pengguna1781290
tidak, itu hampir sama, hanya ingin menyoroti, bahwa hanya ini yang berhasil untuk saya.
— Pragati Dugar
1

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.

— Martin Schneider
sumber
1

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%;
}
— meol
sumber
0

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>
— Sen Alexandru
sumber
0

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.

— kontashi35
sumber
0

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;
  }
— am2505
sumber
0

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

— reza.cse08
sumber
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.