React/JS toggle table columns

Question

I'm currently working on a table in React and need to have a select status on a column when clicking the top cell and being able to toggle that between the columns.

At this stage I roughly put together something like this:

const types = {
  one: 'one',
  two: 'two',
}

class Test extends Component {
  constructor(props) {
    super(props)
    this.onOneClick = this.onClick.bind(this, types.one)
    this.onTwoClick = this.onClick.bind(this, types.two)
  }

  onClick = column => {
    this.props.onColumnChange(column)
  }

  render() {
    const { column } = this.props
    const classOne = classnames(styles.one, column === types.one ? styles.active : null)
    const classTwo = classnames(styles.two, column === types.two ? styles.active : null)
    return (
      <section className={styles.columnSelection}>
        <table className={styles.columns}>
          <thead>
            <tr>
              <th>Select column</th>
              <td className={classOne} onClick={this.onOneClick}>one</td>
              <td className={classTwo} onClick={this.onTwoClick}>two</td>
            </tr>
          </thead>
          <tbody>
            <tr>
              <th></th>
              <td className={classOne}>one</td>
              <td className={classTwo}>two</td>
            </tr>
            <tr>
              <th></th>
              <td className={classOne}>one</td>
              <td className={classTwo}>two</td>
            </tr>
          </tbody>
        </table>
      </section>
    )
  }
}

Test.propTypes = {
  column: PropTypes.oneOf(Object.values(types)),
  onColumnChange: PropTypes.func.isRequired,
}

I think this will probably achieve what I want but wondering if there are better ways to do that? also I don't think there is any nth-child selector like in jQuery to help me. There are few different reasons on why I need the table, so I'm not looking to change the HTML structure.

Rohith Murali · Accepted Answer · 2018-05-05 03:55:46Z

Create a css style for '.active' for highlighting the selected column and change the above code like,

 class Test extends Component {
  constructor(props) {
    super(props)
    state={
        activeColumn : 0
    }
  }

  render() {

    return (
      <section className={styles.columnSelection}>
        <table className={styles.columns}>
          <thead>
            <tr>
              <th>Select column</th>
              <td className={this.state.activeColumn===1 ? "active":"" } onClick={()=>this.setState({activeColumn:1})}>one</td>
              <td className={this.state.activeColumn===2 ? "active":"" } onClick={()=>this.setState({activeColumn:2})}>two</td>
            </tr>
          </thead>
          <tbody>
            <tr>
              <th></th>
              <td className={this.state.activeColumn===1 ? "active":"" }>one</td>
              <td className={this.state.activeColumn===2 ? "active":"" }>two</td>
            </tr>
            <tr>
              <th></th>
              <td className={this.state.activeColumn===1 ? "active":"" }>one</td>
              <td className={this.state.activeColumn===2 ? "active":"" }>two</td>
            </tr>
          </tbody>
        </table>
      </section>
    )
  }
}

Nah · Accepted Answer · 2018-05-05 03:35:13Z

You are probably doing it wrong. In React you need to use state in order to maintain the component state. And on click or any other event, you actually updated that component state value. The state is usually initialized in constructor like this.state={columns: 'one'}

Then in render() method, you are using that state using this.state.columns to check and render or output any expression or you then output any JSX/HTML. You can use ternary operation e.g. (this.state.columns=='two' ? 'It is two column' : 'its one column).

Inside your onclick or any event handler you update the state of the component using this.setState().

For more details check this guide: https://medium.freecodecamp.org/learn-react-js-in-5-minutes-526472d292f4

I would really recommend that you first go through its documentation and examples before doing real codding.

Collectives™ on Stack Overflow

React/JS toggle table columns

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related