DataTable Virtual Scroller: Column Resize Not Working

[mmoss128]

Describe the bug

Data table columns are not resizable when utilizing virtual scroller.

Reproducer

https://codesandbox.io/s/primereact-demo-forked-wx492m

PrimeReact version

9.2.0

React version

17.x

Language

TypeScript

Build / Runtime

Create React App (CRA)

Browser(s)

No response

Steps to reproduce the behavior

1. Create a data table with virtual scroller
2. Enable resizable columns with 'resizableColumns'
3. Attempt to resize columns

Expected behavior

No response

[mmoss128]

Issue looks to have been introduced with the fix for #4078. This fix introduced a selector modification which includes .p-datatable-wrapper as seen below:

let selector =`.p-datatable[${attributeSelectorState}] > .p-datatable-wrapper > .p-datatable-table`;

This new selector does not account for when virtual scrollers are enabled as a an additional div with class '.p-virtualscroller' is injected. Possible remediation is to add branching if using a virtual scroller in "/components/lib/datatable/DataTable.js" method "resizeTableCells".

    var selector = (".p-datatable[").concat(attributeSelectorState, "] > .p-datatable-wrapper > .p-datatable-table");
  if(!isVirtualScrollerDisabled()){
      selector = (".p-datatable[").concat(attributeSelectorState, "] > .p-datatable-wrapper > .p-virtualscroller > .p-datatable-table");
    }