este problema se puede resolver de diferentes maneras, pero en este caso te mostramos la resolución más completa en nuestra opinión.
Solución:
Si usa la solución de Hoang Duc Nguyen, también puede almacenar el ancho en las columnas:
columns = [
name: 'Name', prop: 'name', width: 250,
name: 'Gender', prop: 'gender',
name: 'Company', prop: 'company', sortable: false
];
Necesitas establecer la columna width junto con [columnMode]="force"como esto:
aplicación.componente.html
aplicación.componente.ts
columns = [
name: 'Name', prop: 'name',
name: 'Gender', prop: 'gender',
name: 'Company', prop: 'company', sortable: false
];
rows = [
name: "A", gender: "male", company: "abc",
name: "B", gender: "female", company: "abc",
name: "C", gender: "male", company: "abc"
];
columnWidths = [
column: "name", width: 50,
column: "gender", width: 100,
column: "company", width: 150
]
ngOnInit()
this.columns.forEach((col: any) =>
const colWidth = this.columnWidths.find(colWidth => colWidth.column === col.prop);
if (colWidth)
col.width = colWidth.width;
);
puede establecer el ancho deseado para la columna en la definición de columna de su tabla. por ejemplo:
providersColumns = [
prop: 'id', name: 'ID', sortable: true, width: -100 ,
prop: 'name', name: 'Name', sortable: true ,
prop: 'email', name: 'Email', sortable: true ,width:50
hay un punto aquí !!! Ngx-datatable establece un ancho fijo para cada columna si desea aumentar ese ancho, debe establecer un número positivo que este número agregará al ancho de Ngx-datatable, es decir, si establece 50 como ancho, 50 se agregará a Ngx-datatable ancho fijo: 50 + x (no estoy seguro, pero creo que fue 130 PX para cada columna)
por lo que el ancho final de la columna de correo electrónico será 50+130 =180 PX
o si desea disminuir ese ancho, debe establecer un número negativo que este número agregará al ancho de la tabla de datos Ngx, es decir, si establece -100 como ancho, -100 menos el ancho fijo de la tabla de datos Ngx: -100 + x
el ancho final para la columna de identificación será -100+130 =30 PX