How to use onClick in antd table to get target value?

Question

I have an antd table, where there is an expandable row. I want to render data based on the row that I click as each row has a unique code. How do I get the target value of the row so as to filter data accordingly?

<Table
  components={components}
  bordered
  dataSource={dataSource}
  columns={tableColumns}
  expandable={{ expandedRowRender,
  onClick: (e) =>findId(+e.target.value),
}}

Do I use onRow? Not sure how onClick is used in antD table or an expandable table. I've also got

expandRowByClick: true,

enabled in the expandable. So I have two questions

How can I expand the table by clicking only one particular cell
When expanded, how can I capture the clicked row so that I can render data accordingly to the expanded table?

Samira · Answer 1 · 2021-11-17T08:22:21.437

3

Same as onRow, onHeaderRow, onCell, onHeaderCell

   <Table
  onRow={(record, rowIndex) => {
    return {
      onClick: event => { 
         console.log(record)
      }, // click row
      onDoubleClick: event => {}, // double click row
      onContextMenu: event => {}, // right button click row
      onMouseEnter: event => {}, // mouse enter row
      onMouseLeave: event => {}, // mouse leave row
    };
  }}
  onHeaderRow={(columns, index) => {
    return {
      onClick: () => {}, // click header row
    };
  }}
/>

if you want to click a button :

<Column
        title="title"
        dataIndex="cdcName"
        key="cdcName"
        render={(text, record)=><button onClick={(e)=> console.log(e)}>{record?.cdcName}</button>}
    />

in onExpand :

 <Table
       
        onExpandedRowsChange={(expandedRows)=>{ }}
        expandedRowRender={row => <span>hello</span>}
        expandRowByClick
        onExpand={(expanded, record)=>{
        var keys = [];
        if(expanded){
            keys.push(record.id); // I have set my record.id as row key. Check the documentation for more details.
        }
    
        this.setState({expandedRowKeys: keys});
    }}
    />

edited Nov 17 '21 at 08:22

answered Nov 16 '21 at 11:52

Samira

2,361
1
12
21

I tried this, but somehow I'm not receiving the target value on the onClick? – Kashyap Nov 16 '21 at 12:19
could 'nt you get the record? – Samira Nov 16 '21 at 12:30
No, I'm not able to. Could you kindly help? I'm new to react – Kashyap Nov 16 '21 at 12:34
I don't know why you can not get the recorded of a row – Samira Nov 16 '21 at 12:41
pay attention you just can get the recorded not the target value – Samira Nov 16 '21 at 12:53
Hi, thank you so much.. it worked, I am able to get the recorded value. I have another question.. can onRow be used inside expandable? Because I am getting an error when I try to pass it to the expandedRowRender method – Kashyap Nov 17 '21 at 08:00
Hi. I edited my answer again and add about onExpandedRowsChange .hope to helps you. – Samira Nov 17 '21 at 08:13
check https://codesandbox.io/embed/2opjp3lnrp?fontsize=14 – Samira Nov 17 '21 at 08:23
Thank you so much for the help. I have one last question, I'd like to set the coloumnWidth of the expandable icon, but I'm not able to set it in expandable={ ) – Kashyap Nov 18 '21 at 08:40

score 0 · Answer 2 · answered Nov 16 '21 at 13:49

you have to set an action to get the record data of a row in a column.

for exemple :

    const tableColumns =  [
          { title: "id", dataIndex: "id", key: "id", sorter: true },
          {
            title: "Description",
            dataIndex: "description",
            key: "description",
            sorter: true
          },
          {
            title: "Action",
            dataIndex: "id",
            key: "id",
            align: "center",
            render: (text, record, index) => {
              return (
                
                  <Button
                    icon={<BsPencil />}
                    id={record.id}
                    onClick={e => console.log(e, record)}
           //record is the row data
                    size="large"
                    
                  />
    
                 
          
              );
            }
          }
        ];
    
    
    <Table
      components={components}
      // add this
      rowKey={(record) => record.id} 
      bordered
      dataSource={dataSource}
      columns={tableColumns}
      expandable={{ expandedRowRender,
      onClick: (e) =>findId(+e.target.value),
    }}

Hi, in the tag, the onClick goes to findId? I tried doing it this way but there's some issue. If I have to create a separate button inside the table, then how do I add an onClick to that to capture the record details? — Kashyap, Nov 23 '21 at 04:55
you don't add the button inside the table, you add it inside each row of the table so the onClick can get the record of each row — Salah ED, Nov 23 '21 at 08:44

How to use onClick in antd table to get target value?

2 Answers2