Title says it all, but basically the issue is that applying the combination of a custom selectableRowsComponent and a fixedHeader causes the select all rows functionality to fail when
To Reproduce
Steps to reproduce the behavior:
Apply a custom selectableRowsComponent as well as the fixedHeader property
Display enough rows per page to allow for scrolling
Scroll down enough in the table so that one of the underlying row checkboxes overlaps with the header
Attempt to use select all button
Current behavior
The select all button should successfully select all records.
Expected behavior
The select all button only selects 1 record (the record that exists "behind/underneath" the fixed header).
In the image below you'll notice that you can see the row underneath the fixed header, and after clicking select all it only selects that underlying row:
Versions (please complete the following information)
React: 18.2.0
Styled Components: 5.3.11
OS: Windows
Browser: Chrome
Additional context
As stated, the select all button only selects 1 record the record that exists "behind/underneath" the fixed header. This seems to be the record that is "behind/underneath" the fixed header, suggesting that the table rows are taking precedence over the fixed header itself, and so clicking on the select all actually results in clicking on the row that exists underneath.
This issue is rather inconvenient because it means that you cannot use a custom selectableRowsComponent and fixed header without encountering this bug, and therefore have to utilize the default component.
Describe the bug
Title says it all, but basically the issue is that applying the combination of a custom selectableRowsComponent and a fixedHeader causes the select all rows functionality to fail when
To Reproduce
Steps to reproduce the behavior:
Current behavior
The select all button should successfully select all records.
Expected behavior
The select all button only selects 1 record (the record that exists "behind/underneath" the fixed header).
Code Sandbox, Screenshots, or Relevant Code
For the code sandbox below, simply increase the rows per page and then proceed with the repro steps: (https://codesandbox.io/s/react-data-table-materialui-forked-vhflyy)
In the image below you'll notice that you can see the row underneath the fixed header, and after clicking select all it only selects that underlying row:
Versions (please complete the following information)
Additional context
As stated, the select all button only selects 1 record the record that exists "behind/underneath" the fixed header. This seems to be the record that is "behind/underneath" the fixed header, suggesting that the table rows are taking precedence over the fixed header itself, and so clicking on the select all actually results in clicking on the row that exists underneath.
This issue is rather inconvenient because it means that you cannot use a custom selectableRowsComponent and fixed header without encountering this bug, and therefore have to utilize the default component.