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

2

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.

answered Jan 9, 2018 at 7:03

Sergii Rudenko

2,6841 gold badge24 silver badges25 bronze badges

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

1 Comment

anesthetic Over a year ago

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

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related