DataTable: createResponsiveStyle not called on scrollable property change

[rschyboll]

Describe the bug

As in the title, the DataTable component, does not call internally the createResponsiveStyle function, when changing the scrollable property. As a result, it is not possible to change the DataTable layout from scrollable, to stack.

I encountered this issue when searching for a workaround to this issue #3639.
Currently, the only way to make it working, is to prevent setting scrollable to true on the first render, using some state variable and relasing the lock after a setTimeout(..., 0).

Reproducer

https://codesandbox.io/s/relaxed-snow-gclho9?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. Create a DataTable with the following properties:

  <DataTable
      breakpoint={//Some breakpoint value}
      responsiveLayout="stack"
      scrollable={scrollable}
    >

Where scrollable is some kind of state.
2. The scrollable parameter on the start needs to be set to true.
3. Changing the scrollable parameter when the window is smaller than the breakpoint

Expected behavior

The component should generate the needed style when changing the scrollable property.
After some digging, it seems that there is a useEffect missing, that would react to changes in this property, and generate this style.

[melloware]

Thanks for the report! Please review my PR.