md-table - So aktualisieren Sie die Spaltenbreite

Ich habe begonnen, die md-Tabelle für mein Projekt zu verwenden, und ich möchte eine feste Spaltenbreite. Derzeit sind alle Spaltenbreiten gleich groß.

Woher bekomme ich die Dokumentation der Datentabellenabmessungen?

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

Wenn Material die Tabelle erstellt, werden automatisch zwei Klassennamen für Sie angewendet, mit denen Sie jede Spalte formatieren können. Im folgenden Beispiel heißen die Stile mat-column-userIdund 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>

Jetzt können Sie diese Namen in CSS verwenden:

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

Ähnlich wie bei Rahul Patils Antwort , aber Sie müssen Ihren Spaltendefinitionen keine weitere Klasse hinzufügen.

Derzeit wurde es noch nicht auf API-Ebene verfügbar gemacht. Sie können dies jedoch mit etwas Ähnlichem erreichen

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

In CSS müssen Sie diese benutzerdefinierte Klasse hinzufügen -

.customWidthClass{
   flex: 0 0 75px;
}

Geben Sie hier die Logik zum Anhängen der Klasse oder der benutzerdefinierten Breite ein. Es wird eine benutzerdefinierte Breite für die Spalte angewendet.

Da md-table verwendet flex, müssen wir eine feste Breite in flexibler Weise angeben. Das erklärt einfach -

0 = nicht wachsen (Abkürzung für Flex-Grow)

0 = nicht schrumpfen (Abkürzung für Flex-Shrink)

75px = Start bei 75px (Abkürzung für Flex-Basis)

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

Wenn Sie in Ihrem Projekt das Winkel- / Flex-Layout verwenden , können Sie die Spalte mit festlegen, indem Sie der mat-header-cell und der mat-cell die Anweisung fxFlex hinzufügen :

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

Andernfalls können Sie benutzerdefiniertes CSS hinzufügen, um dasselbe Ergebnis zu erzielen:

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

Überprüfen Sie dies: https://github.com/angular/material2/issues/5808

Da material2 das Flex-Layout verwendet, können Sie einfach fxFlex="40"(oder den gewünschten Wert für fxFlex) auf md-cellund setzen md-header-cell.

Ich fand, dass eine Kombination der Antworten von Jymdman und Rahul Patil am besten für mich funktioniert:

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

Wenn Sie eine "führende" Spalte haben, die immer einen bestimmten Speicherplatz auf verschiedenen Geräten einnehmen soll, fand ich Folgendes sehr praktisch, um die verfügbare Containerbreite reaktionsschneller zu gestalten (dies zwingt die verbleibenden Spalten dazu Verwenden Sie den verbleibenden Platz gleichmäßig):

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

Die Angular-Materialdokumentation verwendet

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

für seine Tabellenkomponente, um die Spaltenbreite zu ändern. Auch hier wäre userId der Zellenname.

Ich verwende FlexLayout, um die Spaltenbreite entsprechend den von FlexLayout bereitgestellten Abfragemedien zu aktualisieren.

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

bedeutet, dass diese Spalte standardmäßig 30% der Zeilenbreite verwendet. Wenn gt-xs @mediaQuery erfüllt ist, beträgt die neue Breite 15% und ein ähnliches Verhalten für andere Bedingungen

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

Weitere Informationen zu FlexLayout und @MediaQueries finden Sie unter https://github.com/angular/flex-layout/wiki/Responsive-API

Ich habe gerade verwendet:

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

Ersetzen Sie 4 durch die Position des Headers, für den Sie die Breite anpassen müssen. Die Beispiele in der verwendeten Dokumentation :

td, th {
  width: 25%;
}

Also habe ich es einfach modifiziert, um das zu bekommen, was ich wollte.

Sie können die .mat-cell-Klasse auf flex setzen: 0 0 200px; statt flex: 1 zusammen mit dem n-ten Kind.

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

Sie können es jetzt so machen

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

Sie können fxFlexvon "@ angle / flex-layout" in thund tdwie folgt verwenden:

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

Sie können auch die Elementauswahl verwenden:

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

Aber Jymdmans Antwort ist in den meisten Fällen der am meisten empfohlene Weg.

Beispiel-Mat-Table-Spalte und entsprechendes CSS:

HTML / Vorlage

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

Ich habe die sehr einfache Lösung dafür gefunden: Festlegen einer unterschiedlichen Breite für die Spalte im Stylesheet durch Überschreiben der Zelle und der Kopfzelle:

Example: setting custom width for 1st and 5th column:-
.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

Sie können das Styling auch direkt im Markup hinzufügen, wenn Sie dies wünschen:

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

Wenn Sie zu viele Tabellenspalten haben und diese nicht in der Winkeltabelle mit angepasst werden md-table, fügen Sie den folgenden Stil in die component.cssDatei ein. Es funktioniert wie ein Zauber mit horizontaler Bildlaufansicht.

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

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

.mat-row {
    width: 100%;
}

Fügen Sie diesen Stil hinzu, um Ihre Spalte separat zu ändern.

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

Alternativ überprüfen Sie diesen Link , (wo der Code oben kam) , für weitere Einzelheiten.

Nehmen wir ein Beispiel. Wenn Ihre Tabelle folgende Spalten enthält:

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

Da diese zwei Spalten enthalten. dann können wir die Breite der Spalten mit einstellen

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

Für dieses Beispiel nehmen wir

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