md-table - Come aggiornare la larghezza della colonna

Risposte:

140

Quando Material crea la tabella, applica automaticamente due nomi di classi che puoi utilizzare per definire lo stile di ciascuna colonna. Nell'esempio seguente gli stili sono denominati mat-column-userIde 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>

Ora puoi usare quei nomi in css:

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

Simile alla risposta di Rahul Patil , ma non è necessario aggiungere un'altra classe alle definizioni delle colonne.

— jymdman
fonte
Nel mio caso avevo bisogno di! Important per stili applicati in questo modo perché altrimenti lo stile per .mat-header-cellavrebbe avuto la precedenza. In alternativa, potresti semplicemente aggiungere un'altra regola di stile per la cella di intestazione.
— Adrian Smith
La documentazione per questo è disponibile ovunque (volevo capire cosa significava ciascuno dei 3 valori dopo "flex" e come .mat-column- <colName> si riferiva alla colonna corrispondente)? Grazie!
— rahs
1
Questa è la soluzione che ho finito per usare, ma invece di impostare la base flex ho impostato crescere in modo flessibile la cella è 3x più grande di altre cellule (Flex: 3 0 0)
— emulcahy
3
L'impostazione della larghezza con flex non ha funzionato nel mio caso. Nemmeno la larghezza. min-width sì (per qualche motivo).
— Paul Evans,
1
@jymdman c'è un modo per definire la stessa dimensione per la colonna anche le modifiche alle dimensioni dello schermo? stackoverflow.com/questions/65296518/…
— app
55

Al momento, non è stato ancora esposto a livello di API. Tuttavia puoi ottenerlo usando qualcosa di simile a questo

<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, è necessario aggiungere questa classe personalizzata - 

.customWidthClass{
   flex: 0 0 75px;
}

Sentiti libero di inserire la logica per aggiungere la classe o la larghezza personalizzata qui. Applicherà la larghezza personalizzata per la colonna.

Dato che md-table usa flex, dobbiamo dare una larghezza fissa in modo flessibile. Questo spiega semplicemente:

0 = non crescere (abbreviazione di flex-grow)

0 = non restringere (abbreviazione per flex-shrink)

75px = inizia da 75px (abbreviazione per base flessibile)

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

— Rahul Patil
fonte
1
Bene, entrambi funzionano. Grazie. Ma se i dati sono di più, vanno anche oltre la tabella. E anche il
— ritorno a capo
2
perché usi [ngClass] invece della normale classe?
— Andre Elrico
@Rahul c'è un modo per definire la stessa dimensione per la colonna anche le modifiche alle dimensioni dello schermo? stackoverflow.com/questions/65296518/…
— app
38

Se stai usando angular / flex-layout nel tuo progetto, puoi impostare la colonna con aggiungendo la direttiva fxFlex a mat-header-cell e 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>

Altrimenti, puoi aggiungere CSS personalizzati per ottenere lo stesso risultato:

.mat-column-name{
    flex: 0 0 100px;
}
— Uliana Pavelko
fonte
1
c'è un modo per definire la stessa dimensione per la colonna anche le modifiche alle dimensioni dello schermo? stackoverflow.com/questions/65296518/…
— app
15

Ho scoperto che una combinazione delle risposte di jymdman e Rahul Patil funziona meglio per me:

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

Inoltre, se si dispone di una colonna "iniziale" che si desidera occupare sempre una certa quantità di spazio su dispositivi diversi, ho trovato quanto segue abbastanza utile da adottare per la larghezza del contenitore disponibile in un tipo più reattivo (questo costringe le colonne rimanenti a utilizzare lo spazio rimanente in modo uniforme):

.mat-column-userName {
  flex: 0 0 60%;
}
— Hans
fonte
Questa è la migliore risposta.
— PedroPovedaQ
9

Sto usando FlexLayout per aggiornare la larghezza della colonna in base al supporto di query fornito da FlexLayout.

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

significa che questa colonna utilizzerà il 30% della larghezza della riga per impostazione predefinita, quando gt-xs @mediaQuery è soddisfatta, la nuova larghezza sarà del 15% e un comportamento simile per altre condizioni 

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

Maggiori informazioni su FlexLayout e @MediaQueries su https://github.com/angular/flex-layout/wiki/Responsive-API

— Felipe Santa
fonte
L'aggiunta della direttiva fxFlex a una colonna sembra averli tutti. C'è un modo per scegliere come target solo una colonna?
— zakdances il
6

Ho appena usato:

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

Sostituisci 4 con la posizione dell'intestazione di cui devi regolare la larghezza. Esempi nella documentazione utilizzati:

td, th {
  width: 25%;
}

Quindi l'ho modificato per ottenere quello che volevo.

— daniekpo
fonte
4

Puoi impostare la classe .mat-cell su flex: 0 0 200px; invece di flex: 1 insieme all'ennesimo bambino.

.mat-cell:nth-child(2), .mat-header-cell:nth-child(2) {
    flex: 0 0 200px;
}
— Mark Cutajar
fonte
4

puoi usare fxFlexda "@ angular / flex-layout" in the in tdquesto modo:

<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>
— amir110
fonte
2 
.mat-column-skills {
    max-width: 40px;
}
— Pragati Dugar
fonte
Sei sicuro che si discosti dalla risposta più votata? Probabilmente il tuo cdkColumnDef è solo diverso?
— user1781290
no, è più o meno lo stesso, volevo solo evidenziare che solo questo ha funzionato per me.
— Pragati Dugar
1

Puoi anche usare i selettori di elementi:

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

Ma la risposta di jymdman è il modo più consigliato per andare nella maggior parte dei casi.

— Martin Schneider
fonte
1

Esempio di colonna Mat-table e CSS corrispondente:

HTML / modello

<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%;
}
— meol
fonte
0

Puoi anche aggiungere lo stile direttamente nel markup se lo desideri:

<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>
— Sen Alexandru
fonte
0

Se hai troppe colonne della tabella e non è regolato nella tabella angolare usando md-table, incolla il seguente stile nel component.cssfile. Funzionerà come un incantesimo con la visualizzazione a scorrimento in orizzontale. 

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

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

.mat-row {
    width: 100%;
}

Aggiungi questo stile per modificare la tua colonna separatamente. 

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

In alternativa, controlla questo link , (da cui proviene il codice sopra) , per maggiori dettagli.

— kontashi35
fonte
0

Facciamo un esempio. Se la tua tabella ha colonne come segue:

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

Poiché questo contiene due colonne. quindi possiamo impostare la larghezza delle colonne usando

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

per questo esempio, prendiamo 

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

Ho ottenuto la soluzione molto semplice per questo: impostare una larghezza diversa per la colonna nel foglio di stile sovrascrivendo sia la cella che la cella di intestazione:

Esempio: impostazione della larghezza personalizzata per la prima e la quinta colonna:

.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

— reza.cse08
fonte
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.