md-table - Jak zaktualizować szerokość kolumny

Zacząłem używać tabeli md w moim projekcie i chcę mieć stałą szerokość kolumny. Obecnie wszystkie szerokości kolumn są podzielone na równe rozmiary.

Gdzie mogę uzyskać dokumentację wymiarów tabeli danych?

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

Kiedy Material tworzy tabelę, automagicznie stosuje dwie nazwy klas, których możesz użyć do nadania stylu każdej kolumnie. W poniższym przykładzie style są nazwane mat-column-userIdi 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>

Teraz możesz używać tych nazw w css:

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

Podobna do odpowiedzi Rahula Patila , ale nie musisz dodawać kolejnej klasy do definicji kolumn.

W tej chwili nie został jeszcze ujawniony na poziomie interfejsu API. Możesz to jednak osiągnąć za pomocą czegoś podobnego do tego

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

W css musisz dodać tę klasę niestandardową -

.customWidthClass{
   flex: 0 0 75px;
}

Możesz tu wprowadzić logikę, aby dołączyć klasę lub niestandardową szerokość. Zastosuje niestandardową szerokość kolumny.

Ponieważ używa md-table flex, musimy podać stałą szerokość w sposób elastyczny. To po prostu wyjaśnia -

0 = nie rosnąć (skrót od flex-grow)

0 = nie kurczą się (skrót od flex-shrink)

75 pikseli = zacznij od 75 pikseli (skrót dla flex-base)

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

Jeśli używasz w projekcie układu angular / flex-layout , możesz ustawić kolumnę za pomocą, dodając dyrektywę fxFlex do mat-header-cell i 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>

W przeciwnym razie możesz dodać niestandardowy CSS, aby osiągnąć ten sam wynik:

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

Sprawdź to: https://github.com/angular/material2/issues/5808

Ponieważ materiał2 używa układu flex, możesz po prostu ustawić fxFlex="40"(lub żądaną wartość dla fxFlex) na md-celli md-header-cell.

Odkryłem, że najlepiej dla mnie działa kombinacja odpowiedzi Jymdmana i Rahula Patila:

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

Ponadto, jeśli masz jedną „wiodącą” kolumnę, która zawsze powinna zajmować pewną ilość miejsca na różnych urządzeniach, uważam, że poniższe informacje są bardzo przydatne do dostosowania do dostępnej szerokości kontenera w bardziej responsywny sposób (zmusza to pozostałe kolumny do równomiernie wykorzystać pozostałą przestrzeń):

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

Dokumentacja materiału Angular używa

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

aby jego składnik tabeli zmienił szerokość kolumny. Ponownie userId będzie nazwą komórki.

Używam FlexLayout, aby zaktualizować szerokość kolumny zgodnie z mediami zapytań, które daje nam FlexLayout.

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

oznacza, że ​​ta kolumna będzie domyślnie używać 30% szerokości wiersza, gdy spełnione jest kryterium gt-xs @mediaQuery, nowa szerokość będzie wynosić 15% i podobne zachowanie dla innych warunków

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

Przeczytaj więcej o FlexLayout i @MediaQueries na https://github.com/angular/flex-layout/wiki/Responsive-API

Właśnie użyłem:

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

Zastąp 4 pozycją nagłówka, dla którego chcesz dostosować szerokość.Przykłady w użytej dokumentacji :

td, th {
  width: 25%;
}

Więc po prostu zmodyfikowałem to, aby uzyskać to, czego chciałem.

Możesz ustawić klasę .mat-cell na flex: 0 0 200px; zamiast flex: 1 wraz z n-tym dzieckiem.

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

Możesz to teraz zrobić w ten sposób

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

możesz użyć fxFlexfrom "@ angular / flex-layout" w thi tdtak:

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

Możesz także użyć selektorów elementów:

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

Ale odpowiedź jymdmana jest w większości przypadków najbardziej zalecanym sposobem.

Przykładowa kolumna tabeli Mat i odpowiadający jej kod CSS:

HTML / szablon

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

Jeśli chcesz, możesz również dodać styl bezpośrednio w znaczniku:

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

Jeśli masz zbyt wiele kolumn tabeli i nie jest ona dostosowywana w tabeli kątowej za pomocą md-table, wklej następujący styl do component.csspliku. Będzie działać jak urok z widokiem przewijania w poziomie.

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

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

.mat-row {
    width: 100%;
}

Dodaj ten styl, aby osobno zmienić kolumnę.

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

Ewentualnie sprawdzić ten link , (gdzie powyżej przyszedł kod z) , aby uzyskać więcej szczegółów.

Weźmy przykład. Jeśli Twoja tabela zawiera następujące kolumny:

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

Ponieważ zawiera dwie kolumny. wtedy możemy ustawić szerokość kolumn za pomocą

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

w tym przykładzie bierzemy

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

Mam na to bardzo proste rozwiązanie - ustawienie innej szerokości kolumny w arkuszu stylów przez nadpisanie komórki i komórki nagłówka:

Przykład - ustawienie niestandardowej szerokości dla pierwszej i piątej kolumny:

.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