React semantic ui table.row set row active onclick

Question

How can i set a row with prop active={true} on click Table.Row React semantic UI

Sounds simple but I didn't find a way to do it. in the documentation I found nothing talking about.

I tried that way, but not worked,

      selectRow(key){
         let rowStatus = this.state.rowStatus[];
         for(let i in rowStatus){
           rowStatus[i] = false;
         }

         rowStatus[key] = true;
         this.setState({rowStatus:rowStatus});

      }

      renderRowTable(data){
        let row = [];
        let rowStatus = [];

        for(let i in data){

          rowStatus.push(false);

          row.push(
            <Table.Row key={i} active={this.state.rowStatus[i]} onClick={()=>{this.selectRow(i)}}>
              <Table.Cell title={data[i].code}>{data[i].code}</Table.Cell>
              <Table.Cell title={data[i].date}>{data[i].date}</Table.Cell>
            </Table.Row>
          );
        }

        this.setState({
          row:row,
          rowStatus:rowStatus
        });

      }

  render() {

    return (
      <div>
       <Table celled fixed singleLine compact size="small" sortable selectable>
            <Table.Header>
              <Table.Row>
                <Table.HeaderCell>Code</Table.HeaderCell>
                <Table.HeaderCell>Date</Table.HeaderCell>
              </Table.Row>
           </Table.Header>
           <Table.Body>{this.state.row}</Table.Body>
      </div>
    )
  }

SuleymanSah · Accepted Answer · 2019-12-13 19:52:51Z

You can keep the activeRowId in the state, and change its value on the row onClick. And while looping the rows, you can set the active property to true if the item's id is equal to activeRowId.

I heavily refactored your code like this:

import React, { Component } from "react";
import { Table } from "semantic-ui-react";

class App extends Component {
  state = {
    data: [
      { id: 1, code: "code1", date: "date1" },
      { id: 2, code: "code2", date: "date2" },
      { id: 3, code: "code3", date: "date3" }
    ],
    activeRowId: null
  };

  setActiveRow(id) {
    this.setState({
      activeRowId: id
    });
  }

  renderRowTable() {
    let rows = this.state.data.map(item => {
      return (
        <Table.Row
          key={item.id}
          active={item.id === this.state.activeRowId}
          onClick={() => {
            this.setActiveRow(item.id);
          }}
        >
          <Table.Cell title={item.code}>{item.code}</Table.Cell>
          <Table.Cell title={item.date}>{item.date}</Table.Cell>
        </Table.Row>
      );
    });

    return rows;
  }

  render() {
    return (
      <div>
        <Table celled fixed singleLine compact size="small" sortable selectable>
          <Table.Header>
            <Table.Row>
              <Table.HeaderCell>Code</Table.HeaderCell>
              <Table.HeaderCell>Date</Table.HeaderCell>
            </Table.Row>
          </Table.Header>
          <Table.Body>{this.renderRowTable()}</Table.Body>
        </Table>
      </div>
    );
  }
}

export default App;

Codesandbox

Collectives™ on Stack Overflow

React semantic ui table.row set row active onclick

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related