Wie stelle ich die Breite der Mat-Table-Säule im Winkel ein?

Hier in meiner Mat-Tabelle gibt es 6 Spalten, wenn eine Spalte nicht mehr Wörter enthält als Image-1, aber wenn eine Spalte mehr Wörter enthält, sieht die Benutzeroberfläche wie Image-2 aus. So stellen Sie die Benutzeroberfläche wie Image-1 ein, falls vorhanden Spalte hat mehr Wörter in Winkel 6?

Bild-1

Bild-2

user.component.html

<div class="mat-elevation-z8">      
 <table mat-table [dataSource]="dataSource">
  <ng-container matColumnDef="userimage">
    <th mat-header-cell *matHeaderCellDef> # </th>
    <td mat-cell *matCellDef="let element"> 
      <img src="{{commonUrlObj.commonUrl}}/images/{{element.userimage}}" style="height: 40px;width: 40px;"/>
    </td>
  </ng-container>

  <ng-container matColumnDef="username">
    <th mat-header-cell *matHeaderCellDef> Full Name </th>
    <td mat-cell *matCellDef="let element"> {{element.username}} ( {{element.usertype}} )</td>
  </ng-container>

  <ng-container matColumnDef="emailid">
    <th mat-header-cell *matHeaderCellDef> EmailId </th>
    <td mat-cell *matCellDef="let element"> {{element.emailid}} </td>
   </ng-container>

  <ng-container matColumnDef="contactno">
    <th mat-header-cell *matHeaderCellDef> Contact No. </th>
    <td mat-cell *matCellDef="let element"> {{element.contactno}} </td>
  </ng-container>

  <ng-container matColumnDef="enabled">
    <th mat-header-cell *matHeaderCellDef> Enabled </th>
    <td mat-cell *matCellDef="let element" style="color: blue">
      <ng-container *ngIf="element.enabled == 'true'; else otherss">Enabled</ng-container>
        <ng-template #otherss>Disabled</ng-template>
    </td>
  </ng-container>

  <ng-container matColumnDef="action">
    <th mat-header-cell *matHeaderCellDef> Action </th>
      <td mat-cell *matCellDef="let element" fxLayoutGap="5px">
        <button mat-mini-fab color="primary" routerLink="/base/editUserDetails/{{element.userid}}"><mat-icon>edit</mat-icon></button>
        <button mat-mini-fab color="primary" routerLink="/base/viewUserDetails/{{element.userid}}"><mat-icon>pageview</mat-icon></button>
      </td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
<mat-paginator [pageSizeOptions]="[5, 10, 20, 50 ,100]" showFirstLastButtons></mat-paginator>

Mit CSS können wir die spezifische Spaltenbreite anpassen, die ich unter dem Code eingefügt habe.

user.component.css

table{
 width: 100%;
}

.mat-column-username {
  word-wrap: break-word !important;
  white-space: unset !important;
  flex: 0 0 28% !important;
  width: 28% !important;
  overflow-wrap: break-word;
  word-wrap: break-word;

  word-break: break-word;

  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;
}

.mat-column-emailid {
  word-wrap: break-word !important;
  white-space: unset !important;
  flex: 0 0 25% !important;
  width: 25% !important;
  overflow-wrap: break-word;
  word-wrap: break-word;

  word-break: break-word;

  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;
}

.mat-column-contactno {
  word-wrap: break-word !important;
  white-space: unset !important;
  flex: 0 0 17% !important;
  width: 17% !important;
  overflow-wrap: break-word;
  word-wrap: break-word;

  word-break: break-word;

  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;
}

.mat-column-userimage {
  word-wrap: break-word !important;
  white-space: unset !important;
  flex: 0 0 8% !important;
  width: 8% !important;
  overflow-wrap: break-word;
  word-wrap: break-word;

  word-break: break-word;

  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;
}

.mat-column-userActivity {
  word-wrap: break-word !important;
  white-space: unset !important;
  flex: 0 0 10% !important;
  width: 10% !important;
  overflow-wrap: break-word;
  word-wrap: break-word;

  word-break: break-word;

  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;
}

Wenn Sie scss für Ihre Stile verwenden, können Sie ein Mixin verwenden, um den Code zu generieren. Ihre Stile geraten schnell außer Kontrolle, wenn Sie jedes Mal alle Eigenschaften festlegen.

Dies ist ein sehr einfaches Beispiel - eigentlich nichts anderes als ein Proof of Concept. Sie können dies bei Bedarf um mehrere Eigenschaften und Regeln erweitern.

@mixin mat-table-columns($columns)
{
    .mat-column-
    {
        @each $colName, $props in $columns {

            $width: map-get($props, 'width');

            &#{$colName} 
            {
                flex: $width;
                min-width: $width;

                @if map-has-key($props, 'color') 
                {
                    color: map-get($props, 'color');
                }
            }  
        }
    }
}

Dann tun Sie in Ihrer Komponente, in der Ihre Tabelle definiert ist, einfach Folgendes:

@include mat-table-columns((

    orderid: (width: 6rem, color: gray),
    date: (width: 9rem),
    items: (width: 20rem)

));

Dies erzeugt ungefähr so:

.mat-column-orderid[_ngcontent-c15] {
  flex: 6rem;
  min-width: 6rem;
  color: gray; }

.mat-column-date[_ngcontent-c15] {
  flex: 9rem;
  min-width: 9rem; }

In dieser Version widthwird flex: value; min-width: value.

Für Ihr spezielles Beispiel könnten Sie wrap: trueoder so etwas als neuen Parameter hinzufügen .

Wie ich implementiert habe, und es funktioniert gut. Sie müssen nur die Spaltenbreite mit hinzufügenmatColumnDef="description"

zum Beispiel :

<mat-table #table [dataSource]="dataSource" matSortDisableClear>
    <ng-container matColumnDef="productId">
        <mat-header-cell *matHeaderCellDef>product ID</mat-header-cell>
        <mat-cell *matCellDef="let product">{{product.id}}</mat-cell>
    </ng-container>
    <ng-container matColumnDef="productName">
        <mat-header-cell *matHeaderCellDef>Name</mat-header-cell>
        <mat-cell *matCellDef="let product">{{product.name}}</mat-cell>
    </ng-container>
    <ng-container matColumnDef="actions">
        <mat-header-cell *matHeaderCellDef>Actions</mat-header-cell>
        <mat-cell *matCellDef="let product">
            <button (click)="view(product)">
                <mat-icon>visibility</mat-icon>
            </button>
        </mat-cell>
    </ng-container>
    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
    <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
</mat-table>

hier matColumnDefist productId, productNameundaction

jetzt wenden wir width by an matColumnDef

Styling

.mat-column-productId {
    flex: 0 0 10%;
}
.mat-column-productName {
    flex: 0 0 50%;
}

und die verbleibende Breite wird gleichermaßen anderen Spalten zugewiesen

Sie können dies mit dem folgenden CSS tun:

table {
  width: 100%;
  table-layout: fixed;
}

th, td {
  overflow: hidden;
  width: 200px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

Hier ist ein StackBlitz Examplemit Beispieldaten

Sie können dies leicht tun. In jeder Spalte erhalten Sie eine Klasse mit dem Feldnamen, dem mat-column vorangestellt ist, sodass die Klasse wie mat-column-yourFieldName ist. Dazu können Sie den Stil wie folgt einstellen

.mat-column-yourFieldName {
    flex: none;
    width: 100px;
}

So können wir eine feste Breite für die Säule gemäß unserer Anforderung angeben.

Hoffe das hilft jemandem.

Hier ist eine alternative Möglichkeit, das Problem anzugehen:

Warum versuchen Sie nicht, die Beschreibung abzuschneiden, bevor die Tabelle versuchen muss, sie in ihre Spalten einzupassen, anstatt zu versuchen, sie in der Post zu reparieren? Ich habe es so gemacht:

<ng-container matColumnDef="description">
   <th mat-header-cell *matHeaderCellDef> {{ 'Parts.description' | translate }} </th>
            <td mat-cell *matCellDef="let element">
                {{(element.description.length > 80) ? ((element.description).slice(0, 80) + '...') : element.description}}
   </td>
</ng-container>

Also überprüfe ich zuerst, ob das Array größer als eine bestimmte Länge ist, wenn ja, dann schneide ich ab und füge '...' hinzu, andernfalls übergebe ich den Wert wie er ist. Dies ermöglicht es uns, immer noch von dem automatischen Abstand zu profitieren, den die Tabelle bietet :)

wir können Attribut hinzufügen Breite direkt auf th

z.B:

<ng-container matColumnDef="position" >
    <th mat-header-cell *matHeaderCellDef width ="20%"> No. </th>
    <td mat-cell *matCellDef="let element"> {{element.position}} </td>
  </ng-container>

Sie müssen nur die Breite des thTags aktualisieren .

th {
  width: 100px;
}