Access Table Header Row Key React

Question

I was working with tables and I came across this issue: I want to access the data-row-key attribute (shown in the image below) in the table header row at a child row and I'm stuck. Code:

class App extends React.Component {
  render() {
    const columns = [
      // sample of how the JSON API is read
      {
        title: "Title", dataIndex: "title", key: "title",
      },
      // the one that actually matters. becomes the actions column eventually
      {
        title: "Action", dataIndex: "", key: "x", width: "12%",
        render: () => (
          <Popconfirm
            placement="topRight"
            title="Are you sure to delete this task?"
            // retrieve the data here as a parameter into the confirm(n) call
            onConfirm={() => confirm(43)} okText="Yes" cancelText="No"
          >
            <a>delete</a>
          </Popconfirm>
        )
      }
    ];
    return (
      <Table columns={columns} dataSource={this.state.data}/>
    );
  }
}

Right now I have the actual number (43) in there, but I want it to be dynamic as to be able to retrieve the data from the <tr data-row-key=...> tag, shown in the image below.

As a note, there is not a leading id column at the start of the table. The keys are provided through Django's rest framework -- which is in JSON format, in the very last image. Rendered results:

JSON format:

Can anyone please help me? Thanks in advance.

Raffobaffo · Accepted Answer · 2020-07-22 14:27:01Z

1

You can use the querySelector for it.

let value = document.querySelector('data-row-key')

answered Jul 22, 2020 at 14:27

Raffobaffo

2,90611 silver badges22 bronze badges

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

3 Comments

crimsonpython24 Over a year ago

Where should I put it?

Arnab Over a year ago

You can put in anywhere you need. But that method or function have to called only after the initial rendering.

crimsonpython24 Over a year ago

I used onConfirm={() => confirm(document.querySelector('data-row-key'))} but it turned out to be null, so is document.querySelector('data-row-key')

Pope Francis · Accepted Answer · 2023-06-11 13:42:59Z

0

To get the data-row-key value call the onclick method with this function: e.currentTagart.getAttribute("data-row-key") basically you will have some thing similar to this:

<td><i className="fas fa-edit" data-row-key={order.id} onClick={(e)=>getItemKey(e.currentTarget.getAttribute('data-row-key'))} ></i></td>

answered Jun 11, 2023 at 13:42

Pope Francis

5858 silver badges9 bronze badges

Collectives™ on Stack Overflow

Access Table Header Row Key React

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related