Using Modals within a table row

user_11733892 0
Viewed 151

I'm currently working on a web app that uses Tables to display data, within this table I have a column named actions that has buttons responsible for viewing details of the associated table item, deleting the table item as well as updating the table item. This has been implemented with the use of Modals instead of opening an entirely new page. The issue I'm currently facing is that the modal seems to only capture the last table Item instead of the corresponding table item with which they share the same row.

{
    title: 'Actions',
    key: 'actions',
    render: (_, elm) => (
      <div className="text-right d-flex justify-content-end">
        <Tooltip title="View">
          <Button type="primary" className="mr-2" icon={<EyeOutlined />} onClick={() => {console.log(elm.id)}} size="small"/>
        </Tooltip>
        <Tooltip title='Edit'>
          <Button type="default" className='mr-2' icon={<EditOutlined />} onClick={ () => {console.log(elm.name)} } size="small" />
        </Tooltip>
        <Tooltip title="Delete">
          <Button danger icon={<DeleteOutlined />} onClick={this.showModal} size="small" />
          <Modal
            title="Title"
            visible={visible}
            onOk={() => this.deletePlanType(elm.id)}
            confirmLoading = {confirmLoading}
            onCancel={this.handleCancel}
            okText="Delete"
          >
            <p> Are you sure you would like to delete Plan type <span className='text- 
            primary'>{elm.name}</span>?</p>
          </Modal>
        </Tooltip>
      </div>
      )
 }

How can I get the Modal when opened to have the data of its respective table Item?

antd reactjs
1 Answers

There is a workaround for this which I did when I had to delete a row and shows confirmation modal to the user for deletion of a row.

I don't know exactly the reason behind showing the last row details in Modal. Maybe we can't use antd Modal for each row in the Table.

What we can do is we can use another state variable for maintaining each record in a table. When the delete button is clicked for a particular record, we'll do two thing, first we set the record state and then set the visibility of the modal.

function App() {
  const [tableRecord, setTableRecord] = useState({});
  const [visible, setVisible] = useState(false);

  const showModalAndTableRecord = (record) => {
    setTableRecord(record);
    setVisible(true);
  };

  const dataSource = [
    {
      key: "john",
      name: "john brown",
      age: 25,
    },
    {
      key: "jimgreen",
      name: "Jim Green",
      age: 19,
    },
    {
      key: "joeblack",
      name: "joeBlack",
      age: 23,
    },
  ];

  const columns = [
    {
      title: "Name",
      dataIndex: "name",
    },
    {
      title: "Age",
      dataIndex: "age",
    },
    {
      title: "Button",
      dataIndex: "button",
      render: (text, record) => {
        return (
          <Button onClick={() => showModalAndTableRecord(record)}>
            <div>{record.name}</div>
          </Button>
        );
      },
    },
  ];
  return (
    <>
      <Table dataSource={dataSource} columns={columns} />

      <Modal
        destroyOnClose 
        visible={visible}
        onOk={() => setVisible(false)}
        onCancel={() => setVisible(false)}
      >
        <pre>{JSON.stringify(tableRecord)}</pre>
      </Modal>
    </>
  );
}
user_138476900
Related