DataTable: Allow resizable columns + frozen columns

ruben-ilciuc commented 2 years ago

Describe the bug

I faced an issue with the DataTable when setting the table to be resizableColumns={true} along with scrollable={true}.

When you freeze a column the header won't move on horizontal scroll along with the frozen column
If you freeze another column in the middle of the table the header moves to the previous column and also not moving along with the frozen column.

See the Steps to reproduce the behavior for both cases.

Reproducer

https://codesandbox.io/s/reverent-hodgkin-glb40y?file=/src/demo/DataTableScrollDemo.js

PrimeReact version

8.6.1

React version

18.x

Language

TypeScript

Build / Runtime

Create React App (CRA)

Browser(s)

No response

Steps to reproduce the behavior

First

Go to CodeSandbox
Scroll to the right and left
See error: The header for the frozen column is not moving along with the column (Balance column)

Second

Go to CodeSandbox
Click on Freeze Activity button
Scroll to the right and left
See error:
- The header of the Activity column moved over the previous column, and still not moving along with the column on horizontal scroll,
- There is a gap between the Balance frozen column and the Activity frozen column.

Expected behavior

First I would love to see that both the content of the column and the header are moving along on horizontal scroll. (As you see on the table without the resizableColumns property set.)

Second The same as for the first case + the gap shouldn't be there between the columns. (This is reproducible for both cases: resizableColumns set to true and false)