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

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.

Invoke the below method on sidebar minimizer

(click)=“WindowResize($event)”

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

I have resolved it by adding overflow: auto; at parent div.

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

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?

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

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

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

@lrochaoliveira please have a look. At least at my side this test grid resizes normally. But you might have a more complex scenario, in this case this code needs to be adjusted. I even don’t remember the details and it was done for some old version of Swimlane Datatable, plus I had a newer Angular than you… Maybe the code needs to be retrofitted now. Anway, let me know if this at least works for you “as is” 😉

@lrochaoliveira ok - i will try to do that today later on.

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.