Ngx-datatable: Data table doesn't shrink when window is resized

[mcblum]

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

[ 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 rendering the datatable in a view and not absolutely positioned, the initial width is set and making the window larger triggers a resize, but shrinking it does not.

Expected behavior
It would re-render the width for enlarging and shrinking window.

Reproduction of the problem
I'll try to get a plunker up but it's entirely possible that there something else causing this that is specific to my app.

What is the motivation / use case for changing the behavior?

Please tell us about your environment:
Mac, Chrome latest, Webstorm

• Table version: 0.8.x
  Latest

• Angular version: 2.0.x
  4.4

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

[unstephenk]

I am having this issue as well. The table should be responsive.

[Schles]

I had a similar issue, but in conjunction with flexbox and the datatable scrollbars.

Not sure if its relevant, but my problem was the fixed child width of the datatable.

The ngx-datatable calculates a fixed width based on the available space of the parent element (i.e 100% of flexbox, lets say 1000px wide window) and applies an width attribute to the tablewrapper (width:1000px). But the flexbox wraps its content and therefore always includes its child elements (the tablewrapper)

As soon as I increased the window size, the flexbox grew (100% windowsize, i.e. 1200px) and table wrapper recalculates its available space to 1200px, but as I decreased the window size, the flexbox kept its larger width (to wrap the table wrapper) and therefore it didnt forced the shrink on the datatable.

I hot fixed it by adding an arbitrary width to the flexbox (for example width:1px, which gets overridden by the flexbox attributes) and the flexbox shrank accordingly, which let the datatable recalculate its available space accordingly.

[sandrose48]

I am having same issue. adding arbitrary width didn't help

[kuhlschrank]

Same issue here.

[HunterMitchell]

Literally spent 45 minutes trying to figure this out. I am using flexbox and while adding arbitrary width did help out, I would hopefully like to see a fix soon.

[JanLoebel]

Having the same problem, can anybody help me out with some code-example?

[KadeHels]

I found that adding.datatable-row-detail { width: 100vw; } to a css file like main.css fixed the issue!

[vipulpal94]

I am having the same issue with ngx data table. When I expand my browser window, the columns seem to stretch fine, but when I make the browser window smaller, the columns don't spring back with the window. I have been fixing it for more than 2 days now. Any methods to get a work around? Or maybe I am better off with a different data table component?

[mali208]

getting save issue when i collapsed and expand my sidebar menu. width should be shrink and stretch

[sudha1981]

Invoke the below method on sidebar minimizer

(click)="WindowResize($event)"

WindowResize(e) {
setTimeout(() => { window.dispatchEvent(new Event('resize')); }, 250);
}

[mrkarp]

.datatable-row-detail { width: 100vw; }

After 2 hours of trying, this is what did it! Thank you!

[juedizor]

.datatable-row-detail { width: 100vw; }

After 2 hours of trying, this is what did it! Thank you!

I think that, this solution is very, very very heavy to apply in development, if you have differents component where you use the table, the performance about your app can see slow.

[Tecmesh]

I Think i solved the hard way. Just add these Lines in your CSS Rules :

.datatable-header {
    min-width: 100%;
}

.datatable-body {
    min-width: 100%;
}

This will keep the header and body of the table on a good shape. I recommend to wrap the datatable on a div using the .table-responsive class from bootstrap. it will work better for responsive.

[UsmanMajied17]

I found the solution to the issue.

Just use rxjs delay operator in ngOnit to call ngx-datatable's recalculate function.

I implemented this on a button click so when that toggle button is clicked i emit a val ( can be anything) from my navService and subscribe to it in the component in which you are using the datatable. Use the snippet below in ngOnit.

this.navService.testingSubject.pipe(delay(500)).subscribe((val) => {
this.table.recalculate();
});

Thanks

[yesimd]

Hi,

My ngx-datatable doesn't shrink and columns go out of the window when enlarge the browser window. I tried all methods described above. None worked. Because it is told resizing issue fixed, I updated datatable to its last version . But it didn't work as well. Do you have any other idea about how to solve this problem? Thanks.