Breaking Responsive Table Changes in PrimeNG 12.1

UI Components for Angular
Post Reply
Keith.Gillette
Posts: 18
Joined: 01 Mar 2017, 18:24

12 Oct 2021, 16:28

"New Table Responsive layout" tracking issue #10495 flags the enhancement as a breaking-change even though the change log for release 12.1.0-rc.1 notes "New Table Responsive layout" as merely a New/Feature Enhancement and it's not mentioned as breaking in the 12.1.0 Migration Guide. As far as I can tell, however #10495 is a breaking change, as:
  1. While the [responsive]=true binding, which previous stacked the layout, is still present in the API, it appears to have no effect.
  2. The new equivalent to that behavior, responsiveLayout="stack" is no longer compatible with [scrollable]="true". This is hinted at, but not explicit in the Responsive section of the Table Documentation: "Scrollable tables use the scroll layout approach internally and do not require additional configuration."

Can anyone verify these breaking behavior changes?
Should [responsive]="true" now be deprecated/removed from the Table API?

yigitfindikli
Posts: 449
Joined: 08 Aug 2018, 14:09

15 Oct 2021, 13:06

Keith.Gillette wrote:
12 Oct 2021, 16:28
"New Table Responsive layout" tracking issue #10495 flags the enhancement as a breaking-change even though the change log for release 12.1.0-rc.1 notes "New Table Responsive layout" as merely a New/Feature Enhancement and it's not mentioned as breaking in the 12.1.0 Migration Guide. As far as I can tell, however #10495 is a breaking change, as:
  1. While the [responsive]=true binding, which previous stacked the layout, is still present in the API, it appears to have no effect.
  2. The new equivalent to that behavior, responsiveLayout="stack" is no longer compatible with [scrollable]="true". This is hinted at, but not explicit in the Responsive section of the Table Documentation: "Scrollable tables use the scroll layout approach internally and do not require additional configuration."

Can anyone verify these breaking behavior changes?
Should [responsive]="true" now be deprecated/removed from the Table API?
Hi,

responsive property deprecated. You can use responsiveLayout="scroll" or responsiveLayout="stacked". you can find detailed examples at https://primefaces.org/primeng/showcase ... responsive. Thanks for the report we'll remove the responsive property from docs.

Keith.Gillette
Posts: 18
Joined: 01 Mar 2017, 18:24

15 Oct 2021, 14:55

Thanks, @yigitfindikli.

Since the component API has been altered, I'd also recommend listing this as a breaking change for release 12.1.0(-rc.1) in the migration guide & release notes.

Is there a way to combine the stacking/scrolling behaviors? On standard viewports, we want the table in column mode to scroll overflow vertically, but in mobile viewports where there's not enough horizontal space to accommodate all the columns, we want the layout to stack.

lbroker
Posts: 30
Joined: 26 Jun 2014, 02:39
Location: Lithuania

12 Nov 2021, 00:55

Why with these changes for table are available only responsive scroll and stack functionality?
But not hiding of the columns functionality? Is no one interested in this functionality?

UI-Team
Posts: 3
Joined: 12 Jan 2021, 11:38

16 Dec 2021, 10:40

Keith.Gillette wrote:
15 Oct 2021, 14:55
Thanks, @yigitfindikli.

Since the component API has been altered, I'd also recommend listing this as a breaking change for release 12.1.0(-rc.1) in the migration guide & release notes.

Is there a way to combine the stacking/scrolling behaviors? On standard viewports, we want the table in column mode to scroll overflow vertically, but in mobile viewports where there's not enough horizontal space to accommodate all the columns, we want the layout to stack.
Do you have a solution for the combination of stacking and scrolling? I have now the same requirement and don't find a solution in the documentation of PrimeNG or somewhere else in this forum.

Keith.Gillette
Posts: 18
Joined: 01 Mar 2017, 18:24

16 Dec 2021, 15:39

Hi, @UI-Team:

Our work-around is binding [scrollable] so that it evaluates to false on small viewports while also setting responsiveLayout="stack". The Table component doesn't respond to a change in the scrollable input during the component lifecycle, only at initialization, so this doesn't lead to dynamically responsive behavior but it does work.

In the following template excerpt, viewPortService is a service class injected into the component controller that maps changes from a global event listener on 'window' for 'resize' to a ReplaySubject<number>(1) and viewPortSizeClassOptions is an enum property with Small = 576.

Code: Select all

<p-table
	responsiveLayout="stack"
	[scrollable]="(viewPortService.viewPortSizeClass | async) > viewPortService.viewPortSizeClassOptions.Small"
	scrollHeight="flex">

robertmayy
Posts: 4
Joined: 19 May 2022, 11:12

05 Sep 2022, 10:50

lbroker wrote:
12 Nov 2021, 00:55
Why with these changes for table are available only responsive scroll and stack functionality?trap the cat
But not hiding of the columns functionality? Is no one interested in this functionality?
it seems this function was not taken care of.

trademanager
Posts: 5
Joined: 16 Mar 2023, 05:46

27 Mar 2023, 17:07

lbroker wrote:
12 Nov 2021, 00:55
Why with these changes for table are available only responsive scroll andcoreball stack functionality?
But not hiding of the columns functionality? Is no one interested in this functionality?
I also noticed this error. I have submitted a repair request but have yet to receive a response.

Post Reply

Return to “PrimeNG”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 8 guests