How to get data from table row click using Semantic's React Table Component

Question

I am trying to get a value on click from a table that I render using Semantic UI with React. I generate my row using an immutable list and I want an onclick that gives access to a unique id value. When I log my attempt to extract the value in my callback, I get:

'bff3a3e9-489e-0e19-c27b-84c10db2432b' wrapped in a td tag

Relevant code:

  handleRowClick = (scen) => {
    console.log(Object.keys(scen.target));
    console.log(scen.target.);
  }

  mapScenarios = () => {
      return ((scen, i) => {
        return(
          <Table.Row key = {scen.get('id')} onClick = {this.handleRowClick}>
            <Table.Cell
              children={scen.get('id') || '(No ID)'}
            />
            <Table.Cell
              children={scen.get('name') || '(No Name)'}
            />
            <Table.Cell
              children={scen.get('actions').size === 0 ? 'none' : `${scen.get('actions').size} action(s)`}
            />
          </Table.Row>
        )
      })
  }

Tzvetlin Velev · Accepted Answer · 2017-09-14 19:46:40Z

1

With semantic ui for react, the row click is not implemented well. On row click you actually get the value of the CELL from that row which is not what I wanted but I thought it worked because I was clicking on the cell that contained the Id. Here is the workaround.

  <Table.Row key = {scen.get('id')} onClick={() => this.props.tableRowClickFunc(scen.get('id'))}>

edited Sep 14, 2017 at 19:46

answered Sep 14, 2017 at 16:18

Tzvetlin Velev

2,0352 gold badges21 silver badges35 bronze badges

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

Comments

Matt Ke · Accepted Answer · 2020-06-23 13:27:40Z

1

This is how i got the row to work as a react-router link:

const RowClickable = React.forwardRef((props, ref) => (
    <Table.Row ref={ref} onClick={props.navigate}>{props.children}</Table.Row>
))

const RowItem = ({id, name}) => (
    <Link to={`/item/${id}/`} component={RowClickable}>
        <Table.Cell>
            <Header as="h4">{name}</Header>
        </Table.Cell>
    </Link>
)

edited Jun 23, 2020 at 13:27

Matt Ke

3,77912 gold badges35 silver badges53 bronze badges

answered Jun 23, 2020 at 12:50

mic159

111 silver badge2 bronze badges

Collectives™ on Stack Overflow

How to get data from table row click using Semantic's React Table Component

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related