Package

carbon-components

Browser

Chrome, Firefox (probably all browsers)

Package version

v10.45.0

Description

The checkbox for the batch actions on the DataTable header is clipped by the next column. This isn't obvious until you add sorting which changes the background color of the next column.

It's very obvious when using the derived @carbon/ibm-security library as the header background is opaque making the checkbox be clearly clipped (without needing sorting.)

The provided codesandbox demonstrates the issue when you sort the column next to the checkbox column (it clips the checkbox) but again its not the sorting that's the issue, the checkbox column is incorrectly sized but its only noticeable using carbon-components when sorting is used.

CodeSandbox example

https://codesandbox.io/s/2lx3v

Steps to reproduce

Add batch actions and isSortable to a DataTable then sort by the column next to the batch action checkbox column - the sorted column header will then partially cover the batch action checkbox.

Or without sorting using the devtools view the width of the checkbox column and the column next to it, you'll see they overlap.

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate problems