Browser resize distorts ngx-datatable when used with material tabs

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

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

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