Multi-Line DataTable Header is Center Aligned

[griffindvs]

What package(s) are you using?

• carbon-components: 10.40.0
• carbon-components-react 7.40.0

Detailed description

Describe in detail the issue you're having.

In the DataTable component, when header text is provided on a sortable column that exceeds the column width (leading to a multi-line header), the text becomes center aligned instead of left aligned.

Is this issue related to a specific component?

This is related to the TableHeader component within the DataTable with the isSortable prop set to true.

What did you expect to happen? What happened instead? What would you like to see changed?

I expected the header text to remain left aligned at any screen size, even with multi-line header text. Instead, the text became center aligned at a reduced screen size that led to a multi-line header. I would like this to be changed to ensure the header text is always left aligned.

What browser are you working in?

Chrome 91

What version of the Carbon Design System are you using?

10.40.0

What offering/product do you work on? Any pressing ship or release dates we should be aware of?

I work on the WebSphere Automation product. This is not a high priority issue.

Steps to reproduce the issue

1. Create a DataTable with the corresponding subcomponents to create a table (TableContainer, Table, TableHead, TableRow, TableHeader)
2. Create the row and header arrays and pass them into the table
3. Add the isSortable prop to TableHeader to set this value to true
4. Add a header that is a long string of text
5. Shrink the screen size until the header text splits to multiple lines

Please create a reduced test case in CodeSandbox

https://codesandbox.io/s/carbon-datatable-alignment-issue-7blxj?file=/src/index.js

Additional information

Screenshot: