React Table / General

Changing the column dividers style

Changing the column dividers style

React Table / General · June 5, 2018 at 9:34am
Thank you for this library! I'm currently trying to figure out how to change the styling of the column divider to allow it to be easier to differentiate between different columns. How should I go about changing it? I read through the documentation but didn't seem to find anything about it.


June 5, 2018 at 1:07pm

I'm not sure if there's an official way of doing this or not, but it looks like you can override the table CSS fairly easily. For example, to get the column dividers to be red like in your example above, you can add a line to your CSS of:

  • reply
  • like
.ReactTable .rt-tbody .rt-td {
border-right: 1px solid red;
}

  • reply
  • like

You may need to locate it based on the containing view just for CSS specificity issues, but that's where I'd start - good luck!

like-fill
1
  • reply
  • like

June 6, 2018 at 2:05am

It worked great! Thank you :)

  • reply
  • like

June 6, 2018 at 11:46am

Glad to hear it! (:

  • reply
  • like

June 12, 2018 at 1:12pm

Is there a way to implement it to only some columns?

  • reply
  • like

June 16, 2018 at 8:10pm

You could use any of the the columns' getProps callbacks

  • reply
  • like

and return some custom styles

  • reply
  • like

June 17, 2018 at 12:53pm

thanks

  • reply
  • like
Your message here...

*bold*_italic_`code````codeblock```