CODEWITHSUNDEEP
javascriptreactjs
Zecto
Zecto

Reputation: 23

Trying to Adding Select Dropdown in ANT D table

I am a beginner in react and trying to implement dropdown inside table cell using Ant link UI framework.

I have tried to render Dropdown component inside renderCell function but I am stuck.

My implementation: codesandbox

Could anyone help me with this?

Upvotes: 2

Views: 6597

Answers (1)

Keval Bhatt
Keval Bhatt

Reputation: 6322

As per your question, I think you want to have dropdown when you click on a table cell to do editing, correct me if I am wrong?

In your code, I have seen that instead of select or Dropdown component you have used input.

I have forked your sandbox which you have provided and updated the code. https://codesandbox.io/s/pensive-shamir-lxvk3

This is what I have done and it's working.

renderCell = form => {
    this.form = form;
    const { children, dataIndex, record, title } = this.props;
    const { editing } = this.state;
    const menu = (
      <Menu>
        <Menu.Item key="1">1st menu item</Menu.Item>
        <Menu.Item key="2">2nd menu item</Menu.Item>
        <Menu.Item key="3">3rd menu item</Menu.Item>
      </Menu>
    );
    return editing ? (
      <Form.Item style={{ margin: 0 }}>
        {form.getFieldDecorator(dataIndex, {
          rules: [
            {
              required: true,
              message: `${title} is required.`
            }
          ],
          initialValue: record[dataIndex]
        })(
          <Dropdown overlay={menu}>
            <span style={{ userSelect: "none" }}>hover on Me</span>
          </Dropdown>
        )}
      </Form.Item>
    ) : (
      <div className="editable-cell-value-wrap" style={{ paddingRight: 24 }} onClick={this.toggleEdit}>
        {children}
      </div>
    );
  };

If you want Droupdown to be rendered as default then add Dropdown component in else condition

Note: Please hover on the text.

https://codesandbox.io/s/peaceful-haze-k387u

renderCell = form => {
    this.form = form;
    const { children, dataIndex, record, title } = this.props;
    const { editing } = this.state;
    const menu = (
      <Menu>
        <Menu.Item key="1">1st menu item</Menu.Item>
        <Menu.Item key="2">2nd menu item</Menu.Item>
        <Menu.Item key="3">3rd menu item</Menu.Item>
      </Menu>
    );
    return editing ? (
      <Form.Item style={{ margin: 0 }}>
        {form.getFieldDecorator(dataIndex, {
          rules: [
            {
              required: true,
              message: `${title} is required.`
            }
          ],
          initialValue: record[dataIndex]
        })(<Input ref={node => (this.input = node)} onPressEnter={this.save} onBlur={this.save} />)}
      </Form.Item>
    ) : (
      <div className="editable-cell-value-wrap" style={{ paddingRight: 24 }} onClick={this.toggleEdit}>
        <Dropdown overlay={menu}>
          <span style={{ userSelect: "none" }}>{children}</span>
        </Dropdown>
      </div>
    );
  };

Upvotes: 1

Related Questions