Styling/theming?

[sabattle]

Hey all,

Loving the library so far but unfortunately we won't be able to use it on our dashboard unless we are able to change the theming to match our existing site. Is there any documentation on how to do this (if its supported?) I noticed that the MaterialReactTable component is unable to take sx, for example. Before I attempt a more hacky way to solve this issue, just wondering if there is a preferred way to handle this atm.

[KevinVandy]

Material React Table will 100% respect your Material UI theme that you would have defined in your app root. Though if you have not defined your mui theme yet, it will be pretty easy to set up and connect to any values from other themes.

Take a look at the official MRT docs for theming, and customizing any of the underlying components to use whatever CSS, colors, etc. that you want.

Also, there isn't an sx prop on the root of the table, because they are at least 30+ sx props available to customize all of the internal components on the mui...Props props. That way you can customize almost any component that is within the table.

Again, just really recommend reading that entire docs page above, and I think you'll find that you should be able to customize everything how you need to.

Happy to clarify anything else relating to this

[DoodlePooge]

What about padding? I've been playing with a bunch of different props but I do have some issue figuring out what determines the width/padding for the columns. More specifically I would like to play with less horizontal padding for smaller screens.

Appreciate the time and work put into this!

[KevinVandy]

Column Widths are always a bit tricky with <td>s as they will expand to fill in the empty space horizontally in the table. CSS widths are the 1 property that get's handled in logic behind the scenes. There are size, minSize, and maxSize options on column definitions where the units are in pixels. However, the default behavior for <table>s is for these to be treated more as a suggestion. You can add table-layout: fixed; css to the table to make it pay attention to the widths a bit more. (This is automatically set when column resizing feature is enabled)

<MaterialReactTable
  muiTableProps={{
    sx: {
      tableLayout: 'fixed',
    },
  }}
/>

You might also explore making the table width itself have a smaller maxWidth in mobile screens and see how that works.

[lcao1602]

I'm new to MUI theming, but is there a way to access the table state within the theme. I am trying to override the padding of different density options individually. (i.e. when it's compact I want to remove padding)

[KevinVandy]

Just use the normal muiProps.sx for conditional styling.