CODEWITHSUNDEEP
reactjsantd
Walls
Walls

Reputation: 159

how to get a specific data from antd table

im trying to get a specific data from an antd table, lets say im trying to get a name of a person from an antd table, here is how i create the onClick function to be called when i click everywhere in the specified row inside the table

<Table
          columns={this.props.columns}
          dataSource={this.state.dataSource}
          onRow={(r) => ({
            onClick: this.showDetailUser
          })}
          loading={this.state.loading}
          footer={this.props.footer}
        />

i want to print the name of a person from the clicked cell inside the row (not the clicked name), so i can click everywhere inside the cell and still got the name of the person, this method does work, i can click everywhere and the function get called successfully, but i cant find the method to get the data

any help will be appriciated, thanks before

Upvotes: 0

Views: 1847

Answers (1)

prohit
prohit

Reputation: 717

I guess you would have to render your own Table rows/columns. Official Antd documentation on Table shows some examples. You would have to add an onClick listener on the rows/cells.

(extracted from the docs)

<Table dataSource={data}>
    <ColumnGroup title="Name">
      <Column title="First Name" dataIndex="firstName" key="firstName" />
      <Column title="Last Name" dataIndex="lastName" key="lastName" />
    </ColumnGroup>
    <Column title="Age" dataIndex="age" key="age" />
    <Column title="Address" dataIndex="address" key="address" />
    <Column
      title="Tags"
      dataIndex="tags"
      key="tags"
      render={tags => (
        <>
          {/*Here you should add your click handler*/}
          {tags.map(tag => (
            <Tag onClick={} color="blue" key={tag}>
              {tag}
            </Tag>
          ))}
        </>
      )}
    />
    <Column
      title="Action"
      key="action"
      render={(text, record) => (
        {/*Here you should add your click handler*/}
        <Space onClick={} size="middle">
          <a>Invite {record.lastName}</a>
          <a>Delete</a>
        </Space>
      )}
    />
  </Table>

(code not tested)

Upvotes: 1

Related Questions