CODEWITHSUNDEEP
javascriptcssreactjsreact-bootstrapreact-table
ABC
ABC

Reputation: 763

How to change the border color of a single row in react-table

I know how to change the background color of a row in a ReactTable object (code below).

How do I change the color of the border of the row (not the border of the entire table)? I have tried replacing background in the below code to border-color, or borderColor, or border, and none of these options work - either, I get an error or nothing at all happens when it's compiled.

getTrProps={(state, rowInfo, column) => {
    if(rowInfo) {
        return {
            style: {
                background: "blue"
            }
        };
    }
    return {}; 
}

Upvotes: 1

Views: 6997

Answers (2)

Praveen
Praveen

Reputation: 1

Follow this to change individual cell color based on row.value condition

{
  Header: () => <div className="text-center font-weight-bold">Status</div>,
  accessor: "selectedstatus",
  className: "font",
  width: 140,
  Cell: (row) => (
    <div
      className="text-center h-6"
      style={{ background: row.value === "Selected" ? "green" : "red" }}
    >
      {row.value}
    </div>
  ),
},

Upvotes: 0

Oleg Levin
Oleg Levin

Reputation: 3621

Like this:

getTrProps = (state, rowInfo, instance) => {
    if (rowInfo) {
      return {
        style: {
          border: rowInfo
            ? rowInfo.row.age >= 20
              ? "solid 1px black"
              : "none"
            : "none"
        }
      };
    }
    return {};
  };

Working Example: https://codesandbox.io/s/react-table-gettrprops-ijgzy

Upvotes: 1

Related Questions