CODEWITHSUNDEEP
reactjsreact-table
Christian Heath
Christian Heath

Reputation: 221

How to do conditional styling (specifically a conditional className) in React-Table?

I am using React-Table and I am trying to set the className of the td element of the column, but React-Table only seems to allow strings and variables for the className and NOT conditional styling.

I am using a ternary statement to select the className depending on whether the value is positive or negative, but React-Table doesn't like my syntax.

{
        Header: "24h Change",
        id: "market_cap_change_percentage_24h",
        className: {coin => coin.market_cap_change_percentage_24h > 0 ? "positive" : "negative"},
        accessor: coin =>
          coin.market_cap_change_percentage_24h == null
            ? coin.market_cap_change_percentage_24h
            : coin.market_cap_change_percentage_24h.toFixed(2) + "%"
      }

I have tried: 

className: {coin.market_cap_change_percentage_24h > 0 ? "positive" : "negative"}

This:

className: {market_cap_change_percentage_24h > 0 ? "positive" : "negative"}

Even this:

className={market_cap_change_percentage_24h > 0 ? "positive" : "negative"}

And many other variations...

It tells me there's a syntax error and doesn't allow me to compile. I think I'm going about it all the wrong way, and after reading through React-Table's documentation I'm still not sure how to solve it. Any help would be much appreciated.

Upvotes: 1

Views: 2257

Answers (1)

Christian Heath
Christian Heath

Reputation: 221

I solved the problem: 

{
        Header: "24h Change",
        id: "market_cap_change_percentage_24h",
        Cell: coin => (
          <span className={coin.value > 0 ? "positive" : "negative"}>
            {coin.value}%
          </span>
        ),
        accessor: coin =>
          coin.market_cap_change_percentage_24h == null
            ? coin.market_cap_change_percentage_24h
            : coin.market_cap_change_percentage_24h.toFixed(2)
      }

Basically I used Cell: instead of className: and then used .value instead of .market_cap_change_percentage_24h and lastly I removed the "%" I had at the end of my accessor and put it in the Cell instead.

The React-Table docs mostly helped, as well as plenty of trial and error. Hopefully this question and answer can help others having this problem in the future.

Upvotes: 5

Related Questions