Change React-Table default styling

Question

I have a react-table, each row has the arrow that when clicked expands into a sub-component of another react-table.

I want to change the color of that arrow as well as move it to the right side of the column if possible. Does anyone know if that's possible and how to go about doing that. I've attached a pic of the code for the table as well as how it looks rendered currently. Thanks for any help!

Code example

Answer 1

It's possible by using a Custom Expander. You can just define your column like this:

columns: [
  // other columns...,
  {
    expander: true,
    Header: () => <strong>More</strong>,
    width: 65,
    Expander: ({ isExpanded, ...rest }) =>
      <div>
        {isExpanded
          ? <span>&#x2299;</span>
          : <span>&#x2295;</span>}
      </div>,
    style: {
      cursor: "pointer",
      fontSize: 25,
      padding: "0",
      textAlign: "center",
      userSelect: "none",
      color: "green"
    },
    Footer: () => <span>&hearts;</span>
  }
]