Row separator should be customizable or at least not that bright on dark mode

[italodeandra]

These guys here:

I would like to have them not that bright on the dark mode. Maybe they should have the same contrast the light mode has, or they could just be easily customizable.

What do you think?

[icflorescu]

Thank you for your suggestion. The color is actually inherited from Mantine's core Table; I'm not overriding it anywhere.

Initially I thought the entire Mantine default dark theme was a bit too bright (or too high-contrasting), but other people didn't share my opinion and somehow I kind of got used to it. Too bright or too dark are kind of subjective notions and I've noticed the perception also depends on the type of screen you're using.

That being said, I think it would be a good idea to make it customizable, maybe with a function receiving theme as its argument (in good Mantine practice), so one could use it like so:

<DataTable
  borderColor={(theme) => theme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[3]}
>
  {/* ... */}
</DataTable>

There's also the question: do we want to be able to separately customize the colors for the "row" border (i.e. the borders between the data rows) and the "table + header" border?
That would allow you to have, for instance, a higher-contrast border around the table and a more subdued color for the row dividers...
So we could write something like this:

<DataTable
  borderColor={(theme) => theme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[3]}
  rowBorderColor={(theme) => theme.colorScheme === 'dark' ? theme.colors.dark[5] : theme.colors.gray[4]}
>
  {/* ... */}
</DataTable>

What do you think?

[italodeandra]

I really liked your approach. Would the borderColor/rowBorderColor properties also work with the value directly? The same way the properties of sx work?

[icflorescu]

I think we could make it work like that. We could check whether what you're passing is a string, then more specifically a MantineColor, then a function. I'll have a look at how they're doing it in Mantine's sx I'm not sure I'll be up to this today, but I'd sure like to give it a try tomorrow in the afternoon. Same goes for replacing the lodash functions (btw, thanks again for your help with that).

…

On Mon, Sep 5, 2022, 3:25 PM Ítalo Andrade ***@***.***> wrote: I really liked your approach. Would the borderColor/rowBorderColor properties also work with the value directly? The same way the properties of sx work? — Reply to this email directly, view it on GitHub <#10 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAEOC33ATWPAX5AWPMMTGMLV4XRDTANCNFSM6AAAAAAQESCGFU> . You are receiving this because you commented.Message ID: ***@***.*** com>

[italodeandra]

btw, thanks again for your help with that

My pleasure. I'm also taking advantage of the lib, the least I can do is to help you 😂

I'll have a look at how they're doing it in Mantine's sx

I think sx property works differently. They just transport the styles to emotion do their trick.

But your idea to use Mantine's color property idea is even better.

[icflorescu]

It works like this, starting with v.1.2.1: https://icflorescu.github.io/mantine-datatable/examples/customizing-border-colors
Basically you'll have to provide a color string or a function receiving theme: MantineTheme as an argument and returning a string.
But in your case maybe it will be good enough out-of-the-box, because I've slightly changed the defaults and made them them less contrasting.