Broken centered header

[VaRusLAN]

mantine-react-table version

2.0.0-beta.6

react & react-dom versions

18.3.3

Describe the bug and the steps to reproduce it

I am trying to get a clean centered header and body, without sorting and action buttons. I found out that it can be done by setting props to columns

mantineTableHeadCellProps: {
  align: "center",
},
mantineTableBodyCellProps: {
  align: "center",
},

It works for the body, but not for the header. The header is always padded by 1.75. The only line that contains such number is this. It seems that there's something wrong with conditions. Setting "enableHeaderActionsHoverReveal" to "true" resolves the issue, until someone hovers over the header and then it's broken again.

Minimal, Reproducible Example - (Optional, but Recommended)

https://codesandbox.io/p/devbox/laughing-wave-7zm749?workspaceId=55c06326-b743-49a1-aca3-3feb22fee983

Screenshots or Videos (Optional)

Screencast_20240923_162325.webm

Do you intend to try to help solve this bug with your own PR?

No, because I do not know how

Terms

• [X] I understand that if my bug cannot be reliably reproduced in a debuggable environment, it will probably not be fixed and this issue may even be closed.

[VaRusLAN]

There's no issue with version 2.0.0-beta.4

[rhyek]

I'm on 2.0.0-beta.6 and seeing this issue. Edit: Just tried 2.0.0-beta.7 and same thing.

[rhyek]

Actually, in my case it seems the class labels-center is being applied here which defines a left padding

It just looks odd.

[lucerattow]

I have the same problem, when using "center" it looks like this:

I see that there is a style assigned to the div that contains the cell

when i remove it, i see the expected result:

Downloaded the library less than a week ago, my version is: "^2.0.0-beta.7"

[lucerattow]

I solved this problem by adding this in my main css:

/* in my global style.css */
.MRT_TableHeadCell-module_labels-center__MM9q8 {
  padding-left: 0;
}

/* in mantine-react-table/styles.css */
.MRT_TableHeadCell-module_labels-center__MM9q8 {
  padding-left: calc(var(--mrt-table-head-cell-labels-padding-left) * 1rem);
}