Browser resize distorts ngx-datatable when used with material tabs

[lokeshdaiya]

[x] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here, post on Stackoverflow or Gitter

Current behavior I have added multiple grids in material tabs. Initially it load correctly but after resizing, page gets distorted.

Expected behavior Data table should render properly on browser resize.

Reproduction of the problem I have created below stackblitz open this and resize the browser back and forth and see the tabs again. https://angular-ngx-datatable-resize-issue.stackblitz.io/

https://stackblitz.com/edit/angular-ngx-datatable-resize-issue

What is the motivation / use case for changing the behavior? Better user interface

Please tell us about your environment: Operating: system: Windows 7 package manager: npm

• Table version: 0.8.x 11.2.0

• Angular version: 2.0.x 5.2.x

• 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 ] Chrome

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

[MichalK6677]

I have the same issue. Is there any workaround? Table version: 11.3.2 Angular version: 5.2.10 Material version: 5.2.5

[PLopezD]

+1

[arturtupiassu]

I have a very similar issue, with a ngx-datatable inside a bootstrap tab. The columns get all condensed/shrinked at the beginning of the table. If I simply resize de browser window, the table show correctly again. Problem Doesn't happen outside of tabs.

[pwinstead]

Anyone find a work around for this? I'm also hitting this issue using bootstrap tabs.

[Moulde]

Not really a solution, but a quick hack to fix that could be to send a resize event on the window instance once data is loaded.

[sheiidan]

My PR #1561 should fix this issue

[adamkasztenny]

I think I'm running into the same problem. I'm using Material tabs. My table is selectable with checkboxes as well and highlights rows on mouseover. There seems to be flickering on mouseover at some points as well.

Table version: 14.0.0 Angular version: 6.1.2 Material version: 6.4.5

[Moulde]

When you have two tabs, each with a table inside it, and you resize the window, the visible table is recalculated, and is correctly rendered, but the non-visible one in the other tab, is also recalculated but the width of the columns is completely squashed. Then you switch tabs, resize again, which makes the incorrect table show correctly, but now the other table is squashed, etc..

#1561 should really, really be merged.

[seawave23]

Same for me... I'm subscribing to a hierarchical parent object on a "smart component" and passing the parent's data partially to the table as "dumb component". So it is quite possible that the table recalculates during another mat tab is displayed. When returning to the table tab, the table is empty (really empty, also no messages) until I zoom or somehow else make it rerender.

[sakib0hasan]

Hi guys, with help of @Moulde's idea, I believe I have a hacky solution! First, you need to listen for the selectedTabChange event. Like this:

<mat-tab-group (selectedTabChange)="onTabChange($event)">

Then, on the onTabChange function, you need to fire the Window Resize event forcefully.

onTabChange(event: MatTabChangeEvent) {
        window.dispatchEvent(new Event('resize'));
}

And voilà! Its working fine for me!

[Moulde]

While that hack works, it causes the table to "twitch", every time you switch to the tab, instead of only when necessary, but I do agree that a little twitching every time may be better than a broken table sometimes.

Additionally, the above hack could be further extended to only fire the resize event on tab change IF the data has been reloaded while away from the tab, as, the reload of data for a table while the table is hidden, is what triggers the issue, at least in my case.

[farajfarook]

Any planned date on getting this fixed in ngx-datatables. Even though the hack works. I don't want to keep it as a permanent solution.

[reshmiram]

+1

[farajfarook]

I migrate application to use mat-table . Now it works 💯

[Arti3DPlayer]

Any other solution. Resize on tab change not working well, sometimes table size is not correct

[lrochaoliveira]

Hi folks!

I need some help! I'm using a ngx-datatable 19.0.0, Angular version 11.1.0 and Material version 11.2.13.

When I using props [columnMode]="'force'" directly in ngx-datatable, the page load correctelly and the columns fill the screen correctly. But if I resize the page anyway, the column does not fit and if I maximize the screen or return to the size the screen was initially and the column does not fit the page.

If I use props [columnMode]="'standard'" the size remains unchanged at any page size, but it does not fill the entire page, which is how [columnMode]="'force'" does correctly.

I applied all solucions in this issue and any works to me. Bellow there is a print the page with the defect:

I'll appreciate any helps! @amcdnl