Haz todo lo posible por interpretar el código de forma correcta previamente a usarlo a tu proyecto y si ttienes algo que aportar puedes compartirlo con nosotros.
Solución:
usando css podemos ajustar el ancho de columna específico que puse en el código a continuación.
usuario.componente.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;
Si está usando scss para sus estilos, puede usar un mixin para ayudar a generar el código. Sus estilos se saldrán de control rápidamente si pone todas las propiedades cada vez.
Este es un ejemplo muy simple: realmente no es más que una prueba de concepto, puede ampliarlo con varias propiedades y reglas según sea necesario.
@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');
Luego, en su componente donde se define su tabla, simplemente haga esto:
@include mat-table-columns((
orderid: (width: 6rem, color: gray),
date: (width: 9rem),
items: (width: 20rem)
));
Esto genera algo como esto:
.mat-column-orderid[_ngcontent-c15]
flex: 6rem;
min-width: 6rem;
color: gray;
.mat-column-date[_ngcontent-c15]
flex: 9rem;
min-width: 9rem;
en esta versión width se convierte flex: value; min-width: value.
Para su ejemplo específico, podría agregar wrap: true o algo así como un nuevo parámetro.
Como he implementado, y está funcionando bien. solo necesita agregar ancho de columna usando matColumnDef="description"
por ejemplo :
product ID
product.id
Name
product.name
Actions
aquí matColumnDef es
productId, productName y action
ahora aplicamos ancho por matColumnDef
estilismo
.mat-column-productId
flex: 0 0 10%;
.mat-column-productName
flex: 0 0 50%;
y el ancho restante se asigna igualmente a otras columnas
Al final de la página puedes encontrar las notas de otros creadores, tú además eres capaz mostrar el tuyo si te gusta.