ngx-datatable: Datatable width resize problem. datatable-scroller and datatable-header-inner does not resize after initial load

Adding a simple css rule for .datatable-scroll display: inherit !important; works for me

@webmatrixxxl Hi i have simple solution for this. You just need to trigger window resize event.

window.dispatchEvent(new Event('resize'));

I have also encountered this. Some things I’ve tried is to trigger recalculate table but that does not fix the problem.

Well

It seems that the scroller width is calculated in the body.component.ts file

@Input() set columns(val: any[]) {
    this._columns = val;
    const colsByPin = columnsByPin(val);
    this.columnGroupWidths = columnGroupWidths(colsByPin, val);
  }

Now this.columnGroupWidths dictates the width of the scroller and this is sadly not recalculated on ngxDatatable.recalculate(); function.

What I did is every time I want to recalculate I firstly reset the columns pointer in the datatable and then recalculate. Seemed to fix the issue for me!

component.ts

class X {
@ViewChild(DatatableComponent) ngxDatatable: DatatableComponent;

recalculate() {
        this.columns = [...this.columns]; //This is input into <ngx-datatable>
        this.ngxDatatable.recalculate(); //ngx-datatable reference
    }
...
}

component.html

<ngx-datatable
        [columns]="columns"
        [rows]="rows">
</ngx-datatable>

Same here. After ngShow/ngIf the table didn’t recalculate columns width until viewport resize event is manually triggered.

@webmatrixxxl Hi i have simple solution for this. You just need to trigger window resize event.

window.dispatchEvent(new Event('resize'));

ngAfterViewChecked():void{ window.dispatchEvent(new Event(‘resize’)); }

it works!

Is this still an open issue for everyone? I am running into a similar issue with the latest release and was wondering what the recommended workaround is or if anyone has a fork that fixes up the issue. (cc @marjan-georgiev in case there is a fix already in place from another issue)

These classes worked for me without adding any hooks or resize method.

.datatable-header-inner{ width: 100% !important; }

.datatable-scroll{ display: inherit !important; }

.datatable-row-center{ width: 100% !important; }

.datatable-body-row{ width: 100% !important; }

window.dispatchEvent(new Event(‘resize’));

this one work with me many thanks

@webmatrixxxl Hi i have simple solution for this. You just need to trigger window resize event.

window.dispatchEvent(new Event('resize'));

I have made so many try but this things works for me. Thank you.

Here’s a hack I implemented in the component containing the datatable:

    this.cd.markForCheck();
    setTimeout(() => {
        document.body.style.width = window.innerWidth - 1 + 'px';
        this.table.recalculate();
        this.table['cd'].markForCheck();
        document.body.style.width = 'auto';
    }, 0);