setCellHeaderProps modifies the "th", but not the child "span" which has "flex"

[masaok]

Expected Behavior

setCellHeaderProps should allow centering of the header cell text without breaking the border styling

Current Behavior

setCellHeaderProps allows centering with flex, but misaligns the bottom border

Steps to Reproduce (for bugs)

The highlighted line enables centered text, but causes a misaligned border (border line shifts up a few pixels)

Border misaligned:

However, if you manually set "justify-content: center" on the child "span" tag using dev tools, you get the correct centering without any misaligned border:

Centered without bottom border misalignment:

TL;DR ... final questions...

1. Is there a way to set the style props on the child span within the th?
2. Is there some other way to center the text of a header cell without misaligning the bottom border?

Your Environment

Tech	Version
Material-UI	4.9.10
MUI-datatables	2.14.0
React	16.13.1
browser	Chrome

[mxmlnglt]

Hello, I have the same requirements. How do we center the column titles?

Following the example given for the setCellHeaderProps option, I naively tried something like:

      options: {
        setCellHeaderProps: () => ({ style: { textAlign: 'center' } }),
      }

but (of course) it does nothing.

From my part, the only way I could "fix" it (manually, by tweaking the DOM via Chrome Dev Tools) is by adding display: inline-block for the <span> like:

<th class="MuiTableCell-root MuiTableCell-head MUIDataTableHeadCell-root-335 MUIDataTableHeadCell-fixedHeader-336" scope="col" data-colindex="1" style="text-align: center;">
  <span role="button" class="MUIDataTableHeadCell-toolButton-344" data-testid="headcol-1" tabindex="0" style="display: inline-block;">

... but as said above by @masaok, you can not access/customize this <span>.

[patorjk]

This can be done using setCellHeaderProps with Material UI's makeStyles and JSS to reach the children of the th element. Here's an example:

https://codesandbox.io/s/muidatatables-custom-toolbar-ys183?file=/index.js

I made that real quick just to show it works, so you may want to try edge cases to make sure it centers correctly.

Another way of doing this would be to target MUIDataTableHeadCell-toolButton using a theme orderride. An example of doing something like this is in the customize-styles example.