CODEWITHSUNDEEP
reactjssemantic-uisemantic-ui-react
Tzvetlin Velev
Tzvetlin Velev

Reputation: 2027

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

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

Upvotes: 2

Views: 6966

Answers (2)

mic159
mic159

Reputation: 11

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>
)

Upvotes: 1

Tzvetlin Velev
Tzvetlin Velev

Reputation: 2027

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'))}>

Upvotes: 1

Related Questions