DataTable: responsiveLayout="stack" and scrollable not working together

[rschyboll]

Describe the bug

The DataTable component does not change to stack layout, after the window width reaches it's breakpoint, if the scrollable property is set to true, even if the responsiveLayout property is set explicitly to stack.

Reproducer

https://codesandbox.io/s/xenodochial-joliot-oh2wun?file=/src/demo/DataTableResponsiveDemo.js

PrimeReact version

8.7.2

React version

18.x

Language

TypeScript

Build / Runtime

Vite

Browser(s)

Chrome 90

Steps to reproduce the behavior

1. Set the responsiveLayout property to stack.
2. Set the scrollable property to true.
3. Set the breakpoint value to some expected width.
4. Change the window size to lower than the breakpoint.

Expected behavior

I think that the datatable should still respect the responsiveLayout property, even if the scrollable property is set to true. The table should change it's layout from scroll, to stack, if the window is smaller than the breakpoint.

[melloware]

Related to: #2479

[ghost]

@melloware any progress on that? i'm having this issue as well and its a key functionality for my data-tables

[melloware]

I will see if I can look at it over the next couple of days. I think this is a valuable feature.

[melloware]

I put together a PR and I tested it and it works perfectly. IT dynamically switches the scrollable state based on the breakpoint value if using responsiveLayout="stack"

[rschyboll]

I performed a quick test and it appears to be working. I am looking forward to it being merged.

[melloware]

Thanks for testing!

[mertsincan]

Hi all,

Due to technical limitations, stack mode is deprecated in the new version. Please use responsiveLayout="scroll". #4078

Best Regards,

[melloware]

@mertsincan i think a lot of people use Stack for responsive tables!

[franmc01]

Why does the stack mode not appear in the documentation?

Friends do not go to make the little house to remove this responsive mode, one of my products uses this mode because first of all it is quite accessible and the information is super clean. I was going to upgrade to the latest version of the library but I cannot do it anymore :(

[Exodiel]

Please reconsider this issue, its posible work with stack mode just using a simple media query