search

primefaces / primeng

The Most Complete Angular UI Component Library
https://primeng.org
Other
10.17k stars 4.54k forks source link

Add support for setting responsive layout in datatable dynamically #11576

Closed tboehle closed 1 year ago

tboehle commented 2 years ago

I'm submitting a ... 

[ ] bug report => Search github for a similar issue or PR before submitting
[x] feature request => Please check if request is not on the roadmap already https://github.com/primefaces/primeng/wiki/Roadmap
[ ] support request => Please do not submit support request here, instead see http://forum.primefaces.org/viewforum.php?f=35

Current behavior In the PrimeNG documentation for datatables two responsive layout modes ("stack" and "scroll") are described: https://www.primefaces.org/primeng-v11-lts/#/table/responsive)

Additionally, one can provide a breakpoint width when the datatable should display itself in responsive mode.

The problem is, that many web applications are not satisfied with a fixed breakpoint width, because the display width of a datatable can differ from the screen width, e.g. if using the horizontal spinner. (https://www.primefaces.org/primeng/splitter) The width of a datatable can then be changed dynamically while screen size remains untouched.

A hacky solution for this would be to set the breakpoint width dynamically on a observed width. But it seems that the breakpoint property is not under change detection which prevents such a hacky solution.

Wished feature

As a developer it would be nice if there would exist a property responsiveModeEnabled of type boolean. This would give me the opportunity to watch the current width and if the observed width is smaller than my breakpoint width for the table in a splitter panel, I could just set the property responsiveModeEnabled to true. Then the table should change to the responsive Layout mode which was taken over from the property responsiveLayout.

A simple example:

<p-table
  #table
  responsiveLayout="stack"
  breakpoint="0px"
  [responsiveModeEnabled]="responsiveModeEnabled ? true : false"
>
...
</p-table>
mertsincan commented 1 year ago

Hi,

So sorry for the delayed response! Improvements have been made to many components recently, both in terms of performance and enhancement. Therefore, this improvement may have been developed in another issue ticket without realizing it. You can check this in the documentation. If there is no improvement on this, can you reopen the issue so we can include it in our roadmap? Please don't forget to add your feedback as a comment after reopening the issue. These will be taken into account by us and will contribute to the development of this feature. Thanks a lot for your understanding!

Best Regards,