Datagrid column headers vertically misaligned when some are sortable

[wkeese]

Package

Carbon for IBM Products

Description

With the combination of rowSize="xl" and a table where some of the columns are sortable, the headers are not vertically aligned:

There's a similar problem for rowsize=md, so that needs to be fixed too.

This used to be a generic problem with Carbon, see carbon-design-system/carbon#9311, but it was fixed in 2022, so presumably this is a @carbon/ibm-products bug.

I see that @carbon/ibm-products' markup is very different than plain carbon. See https://react.carbondesignsystem.com/?path=/story/components-datatable-sorting--playground for comparison. For example, @carbon/ibm-products doesn't use the cds--table-sort__header class.

Component(s) impacted

Datagrid

Browser

Chrome

@carbon/ibm-products (previously @carbon/ibm-cloud-cognitive) version

2.46

Suggested Severity

None

Product/offering

IKC

CodeSandbox or Stackblitz example

https://stackblitz.com/edit/github-qcefwb?file=src%2FExample%2FExample.jsx

Steps to reproduce the issue (if applicable)

No response

Release date (if applicable)

No response

Code of Conduct

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