EditableCell.js

import React from 'react';
import { Input, Form } from 'antd';

const FormItem = Form.Item;

export const EditableContext = React.createContext();

export class EditableCell extends React.Component {
  render() {
    const {
      editing,
      dataIndex,
      title,
      renderEditing,
      record,
      rules,
      index,
      ...restProps
    } = this.props;
    return (
      <EditableContext.Consumer>
        {form => {
          const { getFieldDecorator } = form;
          let formItem = null;
          if (editing) {
            if (renderEditing instanceof Function) {
              formItem = renderEditing({ form, dataIndex, record, rules });
            } else {
              formItem = (
                <FormItem style={{ margin: 0 }}>
                  {getFieldDecorator(dataIndex, {
                    rules,
                    initialValue: record[dataIndex],
                  })(<Input />)}
                </FormItem>
              );
            }
          }
          return <td {...restProps}>{editing ? formItem : restProps.children}</td>;
        }}
      </EditableContext.Consumer>
    );
  }
}