Table - Ant Design, onRow DoubleClick
You can handle your requirement by using one Modal
and updating content of modal with double-click on every row, like this:
function App() {
// ...
const [isModalVisible, setIsModalVisible] = useState(false);
const [activeRecord, setActiveRecord] = useState(null);
const closeModal = () => {
setIsModalVisible(false);
};
return (
<>
<Table
columns={columns}
dataSource={data}
onRow={(record) => {
return {
onDoubleClick: () => {
setActiveRecord(record);
setIsModalVisible(true);
},
};
}}
/>
<Modal
title="User info"
visible={isModalVisible}
onCancel={closeModal}
footer={null}
>
{/* render whatever you want based on your record */}
<p>{activeRecord?.name} </p>
</Modal>
</>
);
}
I've implemented an example Here on stackBlitz, you can check it out.