angularangular-materialmaterializengx-datatable

Browser resize distorts ngx-datatable when used with material tabs


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.

Bellow there is a print the page with the defect.

enter image description here


Solution

  • This issue works to me: https://github.com/swimlane/ngx-datatable/issues/1090.

    If you have the same problem, you can search to this session:

    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" ;)

    And you can try this code: https://codesandbox.io/p/sandbox/swimlane-datatable-resize-issue-xf3j99 .