md-table - Cómo actualizar el ancho de la columna

Comencé a usar la tabla md para mi proyecto y quiero un ancho de columna fijo. Actualmente, el ancho de todas las columnas se divide en tamaños iguales.

¿Dónde puedo obtener la documentación de las dimensiones de la tabla de datos?

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

Cuando Material crea la tabla, automáticamente le aplica dos nombres de clase que puede usar para diseñar cada columna. En el ejemplo siguiente, los estilos se denominan mat-column-userIdy 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>

Ahora puede usar esos nombres en css:

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

Similar a la respuesta de Rahul Patil , pero no necesita agregar otra clase a las definiciones de sus columnas.

En este momento, aún no se ha expuesto a nivel de API. Sin embargo, puedes lograrlo usando algo similar a esto.

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

En CSS, debe agregar esta clase personalizada:

.customWidthClass{
   flex: 0 0 75px;
}

Siéntase libre de ingresar la lógica para agregar clase o ancho personalizado aquí. Aplicará un ancho personalizado para la columna.

Dado que se usa md-table flex, necesitamos dar un ancho fijo de manera flexible. Esto simplemente explica:

0 = no crecer (abreviatura de flex-grow)

0 = no encoger (abreviatura de flex-shrink)

75px = comenzar en 75px (abreviatura de base flexible)

Plunkr aquí: https://plnkr.co/edit/v7ww6DhJ6zCaPyQhPRE8?p=preview

Si está utilizando angular / flex-layout en su proyecto, puede configurar la columna agregando la directiva fxFlex a mat-header-cell y 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>

De lo contrario, puede agregar CSS personalizado para lograr el mismo resultado:

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

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

Dado que material2 utiliza un diseño flexible, puede establecer fxFlex="40"(o el valor que desee para fxFlex) en md-celly md-header-cell.

Encontré que una combinación de las respuestas de jymdman y Rahul Patil funciona mejor para mí:

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

Además, si tiene una columna "principal" que desea ocupar siempre una cierta cantidad de espacio en diferentes dispositivos, encontré lo siguiente bastante útil para adoptar el ancho del contenedor disponible en un tipo más receptivo (esto obliga a las columnas restantes a use el espacio restante de manera uniforme):

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

La documentación de material angular utiliza

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

para que su componente de tabla cambie el ancho de la columna. Nuevamente, userId sería el nombre de las celdas.

Estoy usando FlexLayout para actualizar el ancho de la columna de acuerdo con los medios de consulta que nos brinda FlexLayout.

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

significa que esta columna usará el 30% del ancho de la fila por defecto, cuando se cumpla gt-xs @mediaQuery, el nuevo ancho será del 15% y un comportamiento similar para otras condiciones

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

Lea más sobre FlexLayout y @MediaQueries en https://github.com/angular/flex-layout/wiki/Responsive-API

Acabo de usar:

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

Reemplaza 4 con la posición del encabezado para el que necesitas ajustar el ancho. Los ejemplos en la documentación utilizados:

td, th {
  width: 25%;
}

Así que lo modifiqué para obtener lo que quería.

Puede configurar la clase .mat-cell en flex: 0 0 200px; en lugar de flex: 1 junto con nth-child.

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

Ahora puedes hacerlo así

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

puede usar fxFlexdesde "@ angular / flex-layout" thy tdasí:

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

También puede utilizar los selectores de elementos:

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

Pero la respuesta de jymdman es el camino más recomendado en la mayoría de los casos.

Ejemplo de columna de tabla de Mat y CSS correspondiente:

HTML / Plantilla

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

También puede agregar el estilo directamente en el marcado si lo desea:

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

Si tiene demasiadas columnas de tabla y no se ajusta en la tabla angular usando md-table, pegue el siguiente estilo en el component.cssarchivo. Funcionará como un encanto con la vista de desplazamiento horizontalmente.

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

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

.mat-row {
    width: 100%;
}

Agregue este estilo para modificar su columna por separado.

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

Alternativamente, consulte este enlace , (de donde proviene el código anterior) , para obtener más detalles.

Pongamos un ejemplo. Si su tabla tiene las siguientes columnas:

<!-- 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 esto contiene dos columnas. entonces podemos establecer el ancho de las columnas usando

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

para este ejemplo, tomamos

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

Obtuve la solución muy fácil para esto: establecer un ancho diferente para la columna en la hoja de estilo anulando la celda y la celda del encabezado:

Ejemplo: configuración de ancho personalizado para la primera y la quinta columna:

.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