DataTable: Select all checkbox on header row not working properly when scrollable is true

[skj-skj]

Describe the bug

When scrollable is true with some scrollHeight ex: 150px

select all checkbox won't work properly when there a item in a row just below the header row. apart from updating the select all checkbox it updates the row checkbox which is under the header row.

Reproducer

https://stackblitz.com/edit/vitejs-vite-ca7boz?file=src%2FApp.tsx

System Information

primereact: 10.8.3 => 10.8.3
react: ^18.3.1 => 18.3.1

Steps to reproduce the behavior

1. Create a DataTable table with scrollable true, selectionMode="multiple" and scrollHeight="150px" and put some data more than 3 items.
2. click on header row checkbox
3. scroll down in DataTable until the first row is just below the header row.
4. click on the header row checkbox again.

Expected behavior

after scrolling down and again clicking on the header row checkbox it should uncheck all checkbox in the row

[skj-skj]

workaround to use in version 10.8.3 or below:

by passthrough thead and update the z-index, in the below example I have used primeflex css class.

stackblitz for workaround

<DataTable
    // ...
    selectionMode="multiple"
    scrollable
    scrollHeight="150px"
    pt={{
      thead: { className: 'z-2' }, // workaround
    }}
    // ...
  >
    {/* ... */}
    <Column selectionMode="multiple"></Column>
    <Column field="code" header="Code"></Column>
    {/* ... */}
</DataTable>