md-table - 열 너비 업데이트 방법

md-table - 열 너비 업데이트 방법

프로젝트에 md-table을 사용하기 시작했고, 고정된 열 너비를 원합니다.현재 모든 열 너비가 동일한 크기로 분할되어 있습니다.

데이터 테이블 치수의 설명서는 어디서 구할 수 있습니까?

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

재료는 표를 작성할 때 자동으로 두 개의 클래스 이름을 적용하여 각 열을 스타일링하는 데 사용할 수 있습니다.아래 예제에서는 스타일 이름이 지정됩니다.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의 약자)

75 px = 75 px에서 시작(flex-basis의 약자)

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

프로젝트에서 각도/플렉스 레이아웃을 사용하는 경우 매트 헤더 셀 및 매트 셀에 fxFlex 지시를 추가하여 열을 설정할 수 있습니다.

 <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

소재2는 플렉스 레이아웃을 사용하고 있기 때문에 설정만 가능합니다.fxFlex="40"(또는 fxFlex에 대해 원하는 값):md-cell그리고.md-header-cell.

jymdmans와 Rahul Patil의 답변의 조합을 찾았습니다.

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

또한 다양한 장치에 걸쳐 항상 일정한 공간을 차지하기를 원하는 "선두" 열이 하나 있다면 다음과 같은 내용을 보다 반응성이 높은 종류의 컨테이너 폭에 적용하기가 매우 편리하다는 것을 알게 되었습니다(이를 통해 나머지 열은 나머지 공간을 균등하게 사용할 수 있음).

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

Angular material 설명서는 다음을 사용합니다.

.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 및 @MediaQuery에 대한 자세한 내용은 https://github.com/angular/flex-layout/wiki/Responsive-API 에서 확인하십시오.

방금 사용했습니다.

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

4를 너비를 조정해야 하는 헤더의 위치로 바꿉니다.설명서의 예는 다음과 같습니다.

td, th {
  width: 25%;
}

그래서 제가 원하는 것을 얻기 위해 수정한 것입니다.

.mat-cell 클래스를 flex:1 대신 flex:00 200px로 설정하고 n번째 자식을 함께 설정할 수 있습니다.

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

이렇게 하면 됩니다.

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

은 사용할 수 .fxFlex/flext" from "r/flext" "r/flext"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의 대답이 가장 권장되는 방법입니다.

샘플 매트 테이블 열 및 해당 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%;
}

깃헙

언급URL : https://stackoverflow.com/questions/45159066/md-table-how-to-update-the-column-width