I want to display 2 button in a column like below shown pic

column = [
 {
            title: 'operation',
            dataIndex: 'operation',
            render: (_, record) =>
            const editable = isEditing(record); 
            return editable ? (
                <span>
                    <a onClick={cancel} >Cancel</a>
                </span>
            ) : (
                <Typography.Link onClick={() => edit(record)}>
                    Edit
                </Typography.Link>
            );
                state.dataSource.length >= 1 ? (
                    <Popconfirm title="Sure want to remove?" onConfirm={() => handleDelete(record.key)}>
                        <a>Remove</a>
                    </Popconfirm>
                ) : null,
            
        },]

I'm tried to do it.. But error in code itself.. How to show 2 buttons? Iam using ant Table

CodePudding user response：

basically what you return inside the 'render' property of the column object will render in the table's column.

column = [
   {
      title: 'operation',
      dataIndex: 'operation',
      render: (_, record) => {  //---------------------> missing { in your code
            const editable = isEditing(record); 
            return editable ? (
                <span>
                    <a onClick={cancel} >Cancel</a>
                </span>
            ) : (
                <div> 
                    <Typography.Link onClick={() => edit(record)}>
                      Edit
                    </Typography.Link>
                    <Typography.Link onClick={() => delete(record)}>  //---> here you put delete btn
                      Delete
                    </Typography.Link>
                </div>
            );
            }
        },]