ANT-DESIGN - Edit Cell trong Table

Bạn chú ý đến thuộc tính onCell của column nhé:

    const columns = this.columns.map(col => {
      if (!col.editable) {
        return col;
      }
      return {
        ...col,
        onCell: record => ({
          record,
          editable: col.editable,
          dataIndex: col.dataIndex,
          title: col.title,
          handleSave: this.handleSave
        })
      };
    });

onCell được dùng để pass thêm props vào table cell, cụ thể ở đây là custom component EditableCell để trong EditableCell có thể đọc được các prop editable, dataIndex, title...

• https://github.com/react-component/table/blob/680ef3f06d93d22f9e57fce42d60ad2d9526db38/src/TableCell.js#L44
• https://github.com/react-component/table/blob/680ef3f06d93d22f9e57fce42d60ad2d9526db38/src/TableCell.js#L73
• https://github.com/react-component/table/blob/680ef3f06d93d22f9e57fce42d60ad2d9526db38/src/TableCell.js#L97

=> Updated code đây nhé: https://codesandbox.io/s/exciting-hypatia-vvl8e

Mình move onCell lên phần khai báo columns luôn, bạn có thể sửa lại đoạn const columns = this.columns.map cho nó áp dụng cho cả children

Diff:

-import { Table, Input, Button, Popconfirm, Form } from 'antd';
+import { Table, Input, Button, Form } from 'antd';
 
 const EditableContext = React.createContext();
 
@@ -20,12 +20,16 @@ class EditableCell extends React.Component {
     };
 
     toggleEdit = () => {
-        const editing = !this.state.editing;
-        this.setState({ editing }, () => {
-            if (editing) {
-                this.input.focus();
+        this.setState(
+            (prevState) => ({
+                editing: !prevState.editing,
+            }),
+            () => {
+                if (this.state.editing) {
+                    this.input.focus();
+                }
             }
-        });
+        );
     };
 
     save = (e) => {
@@ -78,19 +82,29 @@ class EditableTable extends React.Component {
         this.columns = [
             {
                 title: 'name',
                dataIndex: 'name',
                 children: [
                     {
                         title: 'First Name',
                         dataIndex: 'firstName',
                         width: 100,
-                        editable: true,
+                        onCell: (record) => ({
+                            record,
+                            editable: true,
+                            title: 'First Name',
+                            dataIndex: 'firstName',
+                            handleSave: this.handleSave,
+                        }),
                     },
                     {
                         title: 'Last Name',
                         dataIndex: 'lastName',
                         width: 100,
-                        editable: true,
+                        onCell: (record) => ({
+                            record,
+                            editable: true,
+                            title: 'Last Name',
+                            dataIndex: 'lastName',
+                            handleSave: this.handleSave,
+                        }),
                     },
                 ],
             },
@@ -149,27 +163,19 @@ class EditableTable extends React.Component {
                 cell: EditableCell,
             },
         };
-        const columns = this.columns.map((col) => {
-            if (!col.editable) {
-                return col;
-            }
-            return {
-                ...col,
-                onCell: (record) => ({
-                    record,
-                    editable: col.editable,
-                    dataIndex: col.dataIndex,
-                    title: col.title,
-                    handleSave: this.handleSave,
-                }),
-            };
-        });
+
         return (
             <div>
                 <Button onClick={this.handleAdd} type="primary" style={{ marginBottom: 16 }}>
                     Add a row
                 </Button>
-                <Table components={components} bordered dataSource={dataSource} columns={columns} />
+                <Table
+                    components={components}
+                    rowClassName={() => 'editable-row'}
+                    bordered
+                    dataSource={dataSource}
+                    columns={this.columns}
+                />
             </div>
         );
     }