md-table - Como atualizar a largura da coluna

Comecei a usar a md-table para meu projeto e quero uma largura de coluna fixa. Atualmente todas as larguras das colunas são divididas em tamanhos iguais.

Onde posso obter a documentação das dimensões da tabela de dados?

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

Quando o Material cria a tabela, ele automaticamente aplica dois nomes de classe para você, que você pode usar para definir o estilo de cada coluna. No exemplo abaixo, os estilos são nomeados 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>

Agora você pode usar esses nomes em css:

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

Semelhante à resposta de Rahul Patil , mas você não precisa adicionar outra classe às suas definições de coluna.

No momento, ele ainda não foi exposto no nível da API. No entanto, você pode conseguir isso usando algo semelhante a este

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

No css, você precisa adicionar esta classe personalizada -

.customWidthClass{
   flex: 0 0 75px;
}

Sinta-se à vontade para inserir a lógica para anexar classe ou largura personalizada aqui. Isso aplicará largura personalizada para a coluna.

Como o md-table usa flex, precisamos fornecer largura fixa de maneira flexível. Isso simplesmente explica -

0 = não cresce (abreviação de flex-grow)

0 = não encolher (abreviação de flex-encolher)

75px = começa em 75px (abreviação de flex-basis)

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

Se você estiver usando layout angular / flex em seu projeto, você pode definir a coluna adicionando diretiva 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>

Caso contrário, você pode adicionar CSS personalizado para obter o mesmo resultado:

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

Verifique isto: https://github.com/angular/material2/issues/5808

Como o material2 está usando o layout flexível, você pode apenas definir fxFlex="40"(ou o valor que deseja para fxFlex) como md-celle md-header-cell.

Descobri que uma combinação das respostas de jymdman e Rahul Patil funciona melhor para mim:

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

Além disso, se você tem uma coluna "à esquerda" que deseja sempre ocupar uma certa quantidade de espaço em diferentes dispositivos, achei o seguinte bastante útil para adotar a largura do contêiner disponível em um tipo mais responsivo (isso força as colunas restantes a use o espaço restante uniformemente):

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

A documentação do material Angular usa

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

para seu componente de tabela para alterar a largura da coluna. Novamente, userId seria o nome das células.

Estou usando o FlexLayout para atualizar a largura da coluna de acordo com a mídia de consulta que o FlexLayout nos fornece.

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

significa que esta coluna usará 30% da largura da linha por padrão, quando gt-xs @mediaQuery for encontrado, a nova largura será de 15% e comportamento semelhante para outras condições

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

Leia mais sobre FlexLayout e @MediaQueries em https://github.com/angular/flex-layout/wiki/Responsive-API

Acabei de usar:

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

Substitua 4 pela posição do cabeçalho para a qual você precisa ajustar a largura. Os exemplos na documentação usados:

td, th {
  width: 25%;
}

Então, eu apenas modifiquei para conseguir o que queria.

Você pode definir a classe .mat-cell para flex: 0 0 200px; em vez de flex: 1 junto com o enésimo filho.

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

Agora você pode fazer assim

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

você pode usar fxFlex"@ angular / flex-layout" em the tdassim:

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

Você também pode usar os seletores de elemento:

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

Mas a resposta de jymdman é o caminho mais recomendado na maioria dos casos.

Amostra de coluna Mat-table e CSS correspondente:

HTML / modelo

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

Você também pode adicionar o estilo diretamente na marcação, se desejar:

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

Se você tiver muitas colunas de tabela e não forem ajustadas na tabela angular usando md-table, cole o seguinte estilo no component.cssarquivo. Ele funcionará perfeitamente com a visualização de rolagem horizontal.

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

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

.mat-row {
    width: 100%;
}

Adicione este estilo para alterar sua coluna separadamente.

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

Verificar alternativamente esta ligação , (onde o código acima veio) , para mais detalhes.

Vamos dar um exemplo. Se a sua tabela tiver as seguintes colunas:

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

Como este contém duas colunas. então podemos definir a largura das colunas usando

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

para este exemplo, pegamos

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

Eu obtive a solução muito fácil para isso - definir larguras diferentes para a coluna na folha de estilo substituindo a célula e a célula do cabeçalho:

Exemplo - configuração de largura personalizada para a 1ª e 5ª coluna:

.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