Ngx-datatable: Table body doesn't resize on fullscreen setup

[ExTheSea]

I'm submitting a ...

[ 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
When using a fullscreen table inside an element with another component that has a dynamic/changeable height the table doesn't resize until the window is resized.

Expected behavior
The table body will dynamically grow to its full height

Reproduction of the problem
http://plnkr.co/edit/brWKmnNmjRxRPcvkSgrZ?p=info
Resize the Preview window so that you can see the bottom scrollbars. Then hover over the element containing "top". The table body will then be pushed down while the surrounding div and the actual ngx-datatable element will resize properly.

What is the motivation / use case for changing the behavior?
When used inside a flex layout with another dynamic element like e.g. a table dynamic filter where search fields can be added dynamically you'd always have to manually call window.dispatchEvent(new Event('resize')); to manually trigger a resize.

Please tell us about your environment:
Windows 7, IntelliJ, npm

• Table version: 9.1.0

• Angular version: 4.1.3

• Browser: Tested on Chrome 58.0.3029.110 and Firefox 53.0.2 though probably affects all Browsers

• Language: Typescript 2.3.2 with es2016 setup

[ExTheSea]

With a little bit of css "hacking" this would be a possible workaround though having it natively supported would be better:

ngx-datatable{
   position: absolute !important;
   height: auto !important;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   width: 100%;
   >div.visible {
     height: 100%;
     display: flex;
     flex-direction: column;
     >datatable-body{
       flex-basis: 100%;
     }
   }
 }

[amcdnl]

I wouldn't really consider this a hack, its common CSS practices.

[ghost]

@ExTheSea baseado na sua solução:

.ngx-datatable{
position: absolute !important;
height: auto !important;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
}

.ngx-datatable.div.visible {
height: 100%;
display: flex;
flex-direction: column;
}

.ngx-datatable.datatable-body{
flex-basis: 100%;
}