md-table - วิธีอัปเดตความกว้างของคอลัมน์

ฉันได้เริ่มใช้ตาราง md สำหรับโครงการของฉันแล้วและฉันต้องการความกว้างของคอลัมน์คงที่ ปัจจุบันความกว้างของคอลัมน์ทั้งหมดแบ่งออกเป็นขนาดเท่ากัน

ฉันจะรับเอกสารของขนาดตารางข้อมูลได้จากที่ใด

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

เมื่อ Material สร้างตารางมันจะใช้ชื่อคลาสสองชื่อสำหรับคุณโดยอัตโนมัติซึ่งคุณสามารถใช้จัดรูปแบบแต่ละคอลัมน์ได้ ในตัวอย่างด้านล่างรูปแบบที่มีการตั้งชื่อและmat-column-userIdcdk-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;
}

คล้ายกับคำตอบของ Rahul Patilแต่คุณไม่จำเป็นต้องเพิ่มคลาสอื่นในคำจำกัดความคอลัมน์ของคุณ

ตอนนี้ยังไม่เปิดเผยในระดับ 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 flexเราจึงต้องให้ความกว้างคงที่ในลักษณะที่ยืดหยุ่น นี่อธิบายง่ายๆ -

0 = ไม่เติบโต (ชวเลขสำหรับการเติบโตแบบยืดหยุ่น)

0 = ไม่หดตัว (ชวเลขสำหรับการหดตัว)

75px = เริ่มต้นที่ 75px (ชวเลขสำหรับ Flex-Basis)

Plunkr ที่นี่ - https://plnkr.co/edit/v7ww6DhJ6zCaPyQhPRE8?p=preview

หากคุณใช้โครงร่างเชิงมุม / เฟล็กซ์ในโครงการของคุณคุณสามารถตั้งค่าคอลัมน์ด้วยการเพิ่มคำสั่ง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-cellmd-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จาก "@ เชิงมุม / ดิ้นรูปแบบ" ใน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