How to generate React table with different colored rows?

Question

I’m trying to create a React table in which each row is either gray or white. I am doing this by passing rows the props ‘gray’ or ‘white’ upon their creation, but in my MyRow class I’m not sure how to take this prop and convert it to a style.

Relevant code in MyTable.js:

    this.props.items.forEach(function(item) {
        if (i % 2 === 0) {
            rows.push(<MyRow item={item} key={item.name} color={'gray'} />);
        } else {
            rows.push(<MyRow item={item} key={item.name} color={'white'} />);
        }
        i++;
    }.bind(this));

MyRow.js render function:

render() {
    const color = this.props.color;

    const rowColor = {styles.color}; //?? I’m not sure how to do this—how to get color to take on either gray or white?

    return (
        <tr className={styles.rowColor}>
            <td className={styles.td}>{this.props.item.name}</td>
            <td className={styles.editButton}> <Button
                    onClick={this.handleEditButtonClicked}
                />
            </td>
        </tr>
    );
}

MyRow.css:

.td {
    font-weight: 500;
    padding: 0 20px;
}

.gray {
    background-color: #d3d3d3;
}

.white {
    background-color: #fff;
}

If you already have the CSS classes defined, and you are passing the className as a prop, then just do <tr className={rowColor}>. Why are you piping rowColor through another object called styles. Where is styles defined? It's not included in your code. — lux
– lux, Commented Jul 15, 2016 at 18:21

ghost_dad · Accepted Answer · 2016-07-15 16:18:31Z

1

I believe you should be able to pass the prop directly to the row as follows, since it's already defined as a string in MyTable.js file:

render() {
    return (
        <tr className={this.props.color}>
            <td className={styles.td}>{this.props.item.name}</td>
            <td className={styles.editButton}> <Button
                    onClick={this.handleEditButtonClicked}
                />
            </td>
        </tr>
    );
}

Also, from the code you have posted, it's unclear where the styles object is located where you're trying to access these properties. If you wanted to access styles.rowColor, you would need a styles object defined:

const styles = {
    rowColor: color
};

answered Jul 15, 2016 at 16:18

ghost_dad

1,3042 gold badges12 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

user3802348 Over a year ago

My styles are defined in styles.css, and then I import styles into the js file.

user3802348 Over a year ago

I'm trying this now <tr className={styles.this.props.color}>, but getting the error "cannot read props of undefined"

ghost_dad Over a year ago

Remove the styles from the beginning of that className and you shouldn't get any errors. this.props.color. Thanks for the clarification on the styles variables!

user3802348 Over a year ago

Hmm, but then how will I specify to look in the styles file for either gray or white? this.props.color is just pointing to "gray" or "white", which aren't defined in the js file and are rather accessed by styles.gray/styles.white

ghost_dad Over a year ago

It seems like the missing piece from your question / code snippets above is that styles js file. From your original question, it seemed like the styles / className were just being associated with the CSS file posted. If not, provide that styles file instead.

|

Praveen · Accepted Answer · 2021-03-16 17:13:01Z

0

Follow this to change individual row cell color using row.value

{
  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>
  ),
},

answered Mar 16, 2021 at 17:13

Praveen

11 bronze badge

Collectives™ on Stack Overflow

How to generate React table with different colored rows?

2 Answers 2

7 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related