Get column name from row mapping with onClick handler

Question

In this reactjs app I have a table with the following body:

 <tbody> {results.map(result => <tr key={result.metric} onClick={this.handleClick}> <td className="inpt-td">{result.t00}</td> <td className="inpt-td">{result.t01}</td> <td className="inpt-td">{result.t02}</td> <td className="inpt-td">{result.t03}</td> <td className="inpt-td">{result.t04}</td> <td className="inpt-td">{result.t05}</td> <td className="inpt-td">{result.t06}</td> <td className="inpt-td">{result.t07}</td> <td className="inpt-td">{result.t08}</td> <td className="inpt-td">{result.t09}</td> <td className="inpt-td">{result.t10}</td> <td className="inpt-td">{result.t11}</td> <td className="inpt-td">{result.t12}</td> <td className="inpt-td">{result.t13}</td> <td className="inpt-td">{result.t14}</td> <td className="inpt-td">{result.t15}</td> <td className="inpt-td">{result.t16}</td> <td className="inpt-td">{result.t17}</td> <td className="inpt-td">{result.t18}</td> <td className="inpt-td">{result.t19}</td> <td className="inpt-td">{result.t20}</td> <td className="inpt-td">{result.t21}</td> <td className="inpt-td">{result.t22}</td> <td className="inpt-td">{result.t23}</td> </tr> )} </tbody>

The header does not exist for this particular table, but I was wondering if there was a way to obtain the column name of a clicked cell. So for example if you clicked on the second cell in a given row, it would return "t01", which is the column name.

My searches online did not provide an efficient way of doing this. Is there a method to retrieve this info?

Sergii Rudenko · Accepted Answer · 2018-01-09 07:03:38Z

In your handleClick you can get access to the event.target property, which is a cell.

After that you can do:

var child = event.target; var parent = child.parentNode; // equivalent of parent.children.indexOf(child) var index = Array.prototype.indexOf.call(parent.children, child); var value = 't' + index // this will be value what you are looking for

If you need information how to use event.target - here is an example.

wow I can't believe I didn't think of that. Glad I named my columns that way to be able to have that kind of solution. Thanks for your help

Collectives™ on Stack Overflow

Get column name from row mapping with onClick handler

1 Answer 1

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Linked

Related