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

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-table은를 사용하기 때문에 flex플렉스 방식으로 고정 너비를 제공해야합니다. 이것은 단순히 설명합니다-

0 = 성장하지 않음 (플렉스 성장의 약어)

0 = 축소 안 함 (플렉스 축소의 약어)

75px = 75px에서 시작 (플렉스 기준의 약어)

여기에 Plunkr- https: //plnkr.co/edit/v7ww6DhJ6zCaPyQhPRE8?p=preview

프로젝트에서 앵귤러 / 플렉스 레이아웃 을 사용하는 경우 mat-header-cell 및 mat-cell에 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

material2는 플렉스 레이아웃을 사용하기 때문에 fxFlex="40"(또는 fxFlex에 대해 원하는 값)을 md-cell및로 설정할 수 있습니다 md-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-->

https://github.com/angular/flex-layout/wiki/Responsive-API 에서 FlexLayout 및 @MediaQueries에 대해 자세히 알아보십시오.

방금 사용 :

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

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

td, th {
  width: 25%;
}

그래서 나는 내가 원하는 것을 얻기 위해 그것을 수정했습니다.

.mat-cell 클래스를 flex : 0 0 200px로 설정할 수 있습니다. flex : 1 대신 nth-child와 함께.

.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의 대답 은 대부분의 경우 가장 권장되는 방법입니다.

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

나는 이것에 대한 매우 쉬운 해결책을 얻었습니다-셀과 헤더 셀을 모두 재정 의하여 스타일 시트의 열에 대해 다른 너비를 설정합니다.

예-첫 번째 및 다섯 번째 열의 사용자 지정 너비 설정 :

.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