DataTable: resizableColumns with stateStorage will not adjust saved column width after refresh.

[netcan]

Describe the bug

I use stateStorage to save DataTable state, which includes column width/column order etc. if I refresh the page, the column width is reset, it should keep the width before the refresh.

Reproducer

https://codesandbox.io/embed/primereact-demo-forked-khph5t?fontsize=14&hidenavigation=1&theme=dark

PrimeReact version

9.2.2

React version

18.x

Language

TypeScript

Build / Runtime

Create React App (CRA)

Browser(s)

Chrome 111.0.5563.146

Steps to reproduce the behavior

Goto reproducer, adjust the column width and refresh the page.

Expected behavior

after refreshing the page, the column width remains as before.

[netcan]

the code here set the attributeSelectorState:

primereact/components/lib/datatable/DataTable.js

Line 1314 in 16bd9d7

!attributeSelectorState && setAttributeSelectorState(UniqueComponentId());

but recover the column width using attributeSelectorState is null:

primereact/components/lib/datatable/DataTable.js

Line 372 in 16bd9d7

let selector = `.p-datatable[${attributeSelectorState}] > .p-datatable-wrapper ${isVirtualScrollerDisabled() ? '' : '> .p-virtualscroller'} > .p-datatable-table`;

[melloware]

@netcan do you have a proposed fix?

[melloware]

Submitted a PR. it should not have been using a State variable but a ref as setAttributeSelector(xx) is still not in the immediate call afterwards.