I am using Antd Editable Rows table in typescript(Ref:https://beta.ant.design/components/table/#components-table-demo-edit-row) I have included checkbox column as well for the table. Now my requirement is, if any one of the checkbox is checked, then Edit hyperlink( tag with id ='anchorEdit') will be enabled. If more than one checkbox is checked, then Edit hyperlink will be disabled/ hidden. Code to display the Edit hyperlink is as below:
this.columns = [{
title: 'name',
dataIndex: 'name',
width: '25%',
}, {
title: 'age',
dataIndex: 'age',
width: '15%',
}, {
title: 'address',
dataIndex: 'address',
width: '40%',
}, {
title: 'operation',
dataIndex: 'operation',
render: (text, record) => {
//let anchorID = 'anchorEdit'+record.ID;
const { editingKey } = this.state;
const editable = this.isEditing(record);
return editable ? (
<span>
<EditableContext.Consumer>
{form => (
<a
onClick={() => this.save(form, record.ID)}
style={{ marginRight: 8 }}
>
Save
</a>
)}
</EditableContext.Consumer>
<Popconfirm title="Sure to cancel?" onConfirm={() => this.cancel(record.ID)}>
<a>Cancel</a>
</Popconfirm>
</span>
) : (<a className='display' id='anchorEdit' onClick={() => this.edit(record.ID)}>Edit</a>);
);
},
}];
please help to do the changes? Thanks in Advance!