DataTable: Allow resizable columns + frozen columns

Describe the bug

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

1. When you freeze a column the header won't move on horizontal scroll along with the frozen column
2. 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

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

Second

1. Go to CodeSandbox
2. Click on Freeze Activity button
3. Scroll to the right and left
4. 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)

Start with the linked CodeSandbox reproducer, especially src/demo/DataTableScrollDemo.js, and compare scrolling with and without resizableColumns. Investigate the DataTable behavior for frozen and resizable columns; done means frozen headers and columns stay aligned during horizontal scrolling, including when Activity is frozen, with no gap between frozen columns.