Can't change background color (+some expected props error when added?)

[veronikaEve]

Hello there,
I have been unable to change the background colour of the table. I am using the styles prop such that:

  const table = useMantineReactTable({
    {...stuff}
    mantineTableProps: {
      style: { color: 'blue' },
    },
    mantinePaperProps: {
      style: { backgroundColor: 'blue' },
    },
    mantineTableBodyProps: {
      style: { background: 'blue' },
    },
  });

  return <MantineReactTable table={table} />;

When I try to add backgroundColor it simply does not apply. color strangely does work, i don't see why backgroundColor doesn't.

Also many of these props expect either of the following "size" | "type" | "data" | "color" | "label" | "ref" | "style" , but when i try to add color or type or size, it errors that it does not exist in the type.

There is also no updated custom components page for v2 - https://v2.mantine-react-table.com/docs/guides/customize-components, so Im not sure where there would be even any examples of v2 tables that update any styling, at least i haven't been able to find any.

I am using v2 and Mantine v7

Thanks!

[KevinVandy]

Yeah there is. There's an entire new styling guide that has been up for the past couple weeks that addresses your exact question.

https://v2.mantine-react-table.com/docs/guides/customize-component-styles

[veronikaEve]

ahhh it's on a different path. Kinda defeats the purpose of being able to switch between v1 and v2 in the header if the documentation endpoints for the same thing differ. The 404 error on the link i posted could have a link here, just a suggestion. (As the link you posted also doesn't seem to come up in google results yet much)

But thank you so much! Much appreciated for the swift response!! :)

[veronikaEve]

@KevinVandy I have one more question - unrelated but didn't want to open a new discussion.

When making a scroll table, if i add the layoutMode: semantic prop to the table, the bottom border of the table disappears. It feels like that's a bug? If i dont have the semantic layout mode then as i scroll the header border stays in place, but then my column sizes aren't dynamic.

Do you happen to know a quick way around the header border staying in place?

edit: it looks like the combination of sticky header with semantic layout mode that removes the header border. So yeah sticky header with non semantic layout is fine. But not with semantic layout