Ngx-datatable set column width dynamically

Question

I'm storing the column widths of my ngx-datatable inside a database. I get these values using an AJAX call.

How can I set these values for the datatable?

What I've tried:

1. setting the [width] property on the <ngx-datatable-column> element
2. injecting the datatable as @ViewChild(DatatableComponent) table: DatatableComponent; and setting this.table.bodyComponent.columns[0].width = 500;
   
   I've tried these methods with and without this.table.recalculate();, but nothing seems to work.

EDIT
I'm using datatable-column with header-template and cell-template.

Answer 1

I got it working, though it was very trivial:

I store the width values of the columns in an object which acts as a dictionary. The problem was that the grid was rendered before my ajax call has finished and could not make the grid to redraw itself.

So I set the initial value of my dictionary object to null and put an *ngIf on the grid: <ngx-datatable *ngIf="colSizes">

This way the rendering happens only after the values of the dictionary are ready to be used.

Answer 2

If you use the solution of Hoang Duc Nguyen, you can also store the width in the columns:

 columns = [
    { name: 'Name', prop: 'name', width: 250},
    { name: 'Gender', prop: 'gender'},
    { name: 'Company', prop: 'company', sortable: false }
  ];

Answer 3

You need to set column width along with [columnMode]="force", like this:

app.component.html

<ngx-datatable
  class="material"
  [rows]="rows"
  [loadingIndicator]="loadingIndicator"
  [columns]="columns"
  [headerHeight]="50"
  [footerHeight]="50"
  [rowHeight]="'auto'"
  [reorderable]="reorderable"
  columnMode="force">
</ngx-datatable>

app.component.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;
      }
    });
  }

Answer 4

You can create custom ngx-datatable-column templates and use [width] prop like:

<ngx-datatable-column name="Name" prop="name" [width]="200">
    <ng-template let-name="value" ngx-datatable-cell-template>
        {{name}}
    </ng-template>
</ngx-datatable-column>


<ngx-datatable-column name="Gender" prop="gender" [width]="100">
    <ng-template let-gender="value" ngx-datatable-cell-template>
        {{gender}}
    </ng-template>
</ngx-datatable-column>


<ngx-datatable-column name="Company" prop="company" [width]="300">
    <ng-template let-company="value" ngx-datatable-cell-template>
        {{company}}
    </ng-template>
</ngx-datatable-column>

Answer 5

You can set your desired width for column in your table column definition. for exmaple:

  providersColumns = [
            { prop: 'id', name: 'ID', sortable: true, width: -100 },
            { prop: 'name', name: 'Name', sortable: true },
            { prop: 'email', name: 'Email', sortable: true ,width:50}

Btw there is a tricky point here !!! Ngx-datatable set a fixed width for every column if you want to increase that width you should set a positive number that this number will add to the Ngx-datatable width i mean if you set 50 as width ,50 will add to Ngx-datatable fixed width : 50 + x ( Im not sure but i think it was 130 PX for every column)

so final width for email column will be 50+130 =180 PX

or if you want to decrease that width you should set a negative number that this number will add to the Ngx-datatable width i mean if you set -100 as width ,-100 will minus Ngx-datatable fixed width : -100 + x

final width for id column will be -100+130 =30 PX

Answer 6

I wanna share my solution, I was able to assign percentage values ??to the columns, I hope work for you:

TEMPLATE:

 <ngx-datatable
        id="datatablele"
        #tablePedidos
        class="bootstrap expandable virtualized"
        rowHeight="auto"
        [rows]="pedidos"
        [columnMode]="innerWidth > 1250 ? columnMode.flex : columnMode.force"
        [loadingIndicator]="cargandoDatos"
        [headerHeight]="50"
        [footerHeight]="50"
>
...
</ngx-datatable>

TS:

import ResizeObserver from 'resize-observer-polyfill';

export class MyComponent implements OnInit {

initialSize = 0;
columnSize  = [ 20, 20, 23, 25, 25, 12 ];


ngOnInit(): void {
    const item = document.getElementById('datatablele');
    this.initialSize = item.offsetWidth;
    new ResizeObserver((event: any) => {
      this.escucharResizeDiv(event);
    }).observe(item);
  }


escucharResizeDiv(event) {
    const item = document.getElementById('datatablele');

    if (item.offsetWidth !== this.initialSize) {
      // HEADER
      const headerDatatable  = event[0].target.children[0].children[0];
      headerDatatable.style.width = '100%';
      headerDatatable.children[0].style.width = '100%';
      const rowHeader = headerDatatable.children[0].children[1];
      rowHeader.style.width = '100%';
      const headerColumns = Array.from( rowHeader.children );
      // BODY
      const bodyDatatable  = event[0].target.children[0].children[1].children[0].children[0];
      bodyDatatable.style.width = '100%';
      const rowsIterables = Array.from( bodyDatatable.children );
      // ============ CICLOS ==========================
      headerColumns.forEach( (column: any, index: number) => {
        column.style.width = `${this.columnSize[index]}%`;
      });

      // BODY - Recorremos las filas del datatable
      rowsIterables.forEach((row: any) => {
        row.children[0].style.width = '100%';
        const columns = Array.from( row.children[0].children[1].children );

        if ( columns.length ) {
          // const cantidadSize = diferenciaSize / columns.length;
          row.children[0].children[1].style.width = '100%';
          // Recorremos cada columna del datatable
          columns.forEach( (column: any, index: number) => {
            column.style.width = `${this.columnSize[index]}%`;
          });
        }

      });

      // Obtenemos el nuevo ancho del div
      this.initialSize = item.offsetWidth;
    }

  }
}