#Sticky rows with Mantine Table and TanStack table content overlapping each other on scroll

7 messages · Page 1 of 1 (latest)

teal junco
#

Helloo everyone, I'm trying to implement sticky rows with Mantine Table and TanStack Table and so far things have been working great! The only issue I'm seeing is that Td/Tr background colors are not actually solid? So when scrolling things overlap each other, it's really not nice visually.

I tried setting style={{ backgroundColor: "black" // or something }} and it works, but it basically removes all other styling like striped and highlightOnHover. I was wondering if anybody here could help me figure out what to do here to mantain mantine's core functionality but without the overlapping issue.

Here' s a working sandbox for you to try it out and see the issue: https://codesandbox.io/p/sandbox/react-mantine-tanstack-table-rtf439

And I've attached a video for you to also see visually what's the problem.

Thanks so much!

teal junco
#

bump

teal junco
#

Bump 😅

exotic pendant
#

You just need to change styles a bit

.tr {
  &:where([data-striped="odd"]:nth-of-type(even)) {
    background-color: var(--mantine-color-body);
  }
}

.th {
  background-color: var(--mantine-color-body);
}

.td {
  background-color: inherit;
}

const theme = createTheme({
  components: {
    Table: Table.extend({
      classNames: {
        tr: classes.tr,
        th: classes.th,
        td: classes.td,
      },
    }),
  },
});
teal junco
#

tysm! I'll give this a shot today!

teal junco
#

This worked flawlessly thanks so much!