Container resize column recalculation
See original GitHub issueI’m submitting a … (check one with “x”)
[ ] bug report => search github for a similar issue or PR before submitting
[ x ] feature request
[ ] support request => Please do not submit support request here
Current behavior
It seems from this line that the recalculation of column widths only happen on window resize event.
I have a container for a table which gets smaller if you open a filter section next to it. This does not fire that event and the recalculation does not happen.
Expected behavior
I would ask that we either bind to a resize event of the data table itself if that is possible, or give access to the adjustSizes function so we can call it programmatically to re calculate the column widths.
Reproduction of the problem http://plnkr.co/edit/wLIdtlUA0ZPrJL7nnpec?p=preview
Notice when clicking smaller/larger buttons to resize the container the columns don’t recalculate. If you change the size of the window it will recalculate.
What is the motivation / use case for changing the behavior? Being able to programmatically change the container size of the table, and have the table still render correctly.
- Table version: 0.7.x 0.9.3
- Angular version: 2.0.x 2.0.2
- 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 ] Checked Chrome and FF both had this issue.
- Language: [all | TypeScript X.X | ES6/7 | ES5] TS 2.0.2
I am happy to work on a PR for this if it is something you are open to, but wanted to get feedback first.
Issue Analytics
- State:
- Created 7 years ago
- Comments:78 (12 by maintainers)
Top GitHub Comments
Hello everyone! I had the same problem “refresh if on mouse over” with mat-sidebar today. I spent hours trying to figure this out. Tried to trigger windows resize and even tried the table recalculate method and with any of the above solutions it didn’t work. But I noticed that the table resizes when
‘window:resize’
event happened on browser. Than I addsetTimeout(() => { window.dispatchEvent(new Event(‘resize’)); }, 250)
to 'onMouseLeave ’ and ‘onMouseEnter’ functions of sidebar. And It works for me!Refreshing data works for me this.rows = […this.rows];