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

[webmatrixxxl]

I'm submitting a ... (check one with "x")

[x] bug report => search github for a similar issue or PR before submitting

Current behavior
datatable-scroller and datatable-header-inner(also it's children) doesn't resize on width after datatable inital load

Expected behavior
They should resize... https://cl.ly/1U090c3Q0X2S

Reproduction of the problem
You can represent the problem anywhere.

What is the motivation / use case for changing the behavior?
This is a bug.

Please tell us about your environment:
macOS Sierra, Chrome Version 60.0.3112.101

• Table version: 9.3.0, 10.0.5

• Angular version: 4.3.3

• Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]

• Language: [all | TypeScript X.X | ES6/7 | ES5]

[katestearns-suplari]

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

[DavideRoss]

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

[insidewhy]

The ngx-datatable also doesn't recalculate height in the same situation, if data updates while the table is not visible it decides each virtual page can only contain a single row. You get a messed up view until the table is resized through e.g. a browser window resize.

[BBaysinger]

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

[BBaysinger]

The hack in my previous comment isn't actually reliable. The only way to fix this problem is to revert to v10.5.0. Please fix this.

[ahmetacer5]

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

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

[BBaysinger]

@webmatrixxxl I tried that once and it worked, but the last time I tried, didn’t work.

[ArfanMirza]

Here i found a hack for "datatable-scroller" resize issue...

Ngx-Datatable version which i am using right now

"@swimlane/ngx-datatable": "11.1.7",

setTimeout(() => {
                 $('#mainNgxTable .datatable-scroll').width('100%');
}, (500));

mainNgxTable id of ngx-datatable,

it is best if you call this init data/rows for ngx-datatable

I am doing in Angualr 2

this.dataService
                .getData()
                .subscribe(
                    data => {
                            this.rows = data.rows; // init or loading data, came in response of restApi call
                            setTimeout(() => {
                                $('#mainNgxTable .datatable-scroll').width('100%');
                            }, (500));
                    },
                    error => {
                        //handle error
                    }
                );

[karljv]

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>

[GRTO]

columnGroupWidths

can you show us how you did that?, did you create a recalculate function ?

[karljv]

I used the recalculate function on DatatableComponent

@ViewChild(DatatableComponent) datatable: DatatableComponent;

[GevorgGabrielyan]

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

[appagg]

I had similar problem with the table width not changing properly after mobile device screen rotations. @karljv solution works for me. I also use a rotation change host listener to trigger the recalculation:

@HostListener('window:orientationchange', ['$event'])
onOrientationChange(event) {
...
}

[jrodg]

I have tried all possible approaches and end up disabling scrolling and implementing paging ... it worked for me
Ex:
//scrollX: "99.95%",
//scrollY: 300,
paging: true,

[abierbaum]

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)

[leon99adolfo]

This is not a solution that I would like, but to temporarily fix it, what I do is the following:

component.html

<mat-tab-group (selectedIndexChange)="isAnimationDone= false" (animationDone)="isAnimationDone= true;">
    <mat-tab>
        <ngx-datatable class="material" [rows]="licenses"  *ngIf="isAnimationDone">
            ...
            ...
            ...
        </ngx-datatable> 
    </mat-tab>
</mat-tab-group>

component.ts

isAnimationDone: boolean = true;

@HostListener('window:resize', ['$event'])
onResize(event){
    this.isAnimationDone=false;
    setTimeout(() =>this.isAnimationDone=true, 1000);
}

[meenu1]

@ViewChild("table") table: DatatableComponent;

@HostListener('window:resize', ['$event'])
onResize(event) {
this.table.recalculate();
this.table.recalculateColumns();
}

This works for me.

[codingnut]

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

[UsmanMajied17]

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

The problem with this approach is that if you have a filtering table, i.e. a search functionality on the table, the search feature breaks.

[manjeetyadv]

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

[rishi1305]

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

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

This worked for me

[dp1127]

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