Reactjs Antd Table onRow outside click?

Question

as the title describe, i want to listen a event outside click, how can i do that ?

ref to https://ant.design/components/table#components-table-demo-edit-row

I want to make a editable table. But instead click on edit button, i want user can edit through double click on a row. Luckily Antd support onRow - onDoubleClick method.

Everythings worked fine so far. But i want when user click outside the row, like: another row, table, modal,... what ever except the row which user is editing, then stop editing process.

For easier imaging, the thing i want exactly like this : https://mui.com/x/react-data-grid/editing/#row-editing.

How can i get this ? Thanks for your reading.

The code was like

    <Form form={form} component={false}>
      <Table
        rowSelection={true}
        columns={isEditable ? mergedColumns : columns}
        dataSource={dataSource}
        onChange={onChange}
        pagination={{
          ...paginationProps,
        }}
        loading={loading}
        className={className}
        footer={null}
        scroll={scroll}
        components={{
                      body: {
                        cell: EditableCell,
                      },
                    }}
        onRow={()=>{
                onDoubleClick:()=>setEditAble(true)
                }}
      />
    </Form>

Tried everything and nothing work like i wish