Question 72684 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Edit table data in react js – Reactjs

I have a table in React. The table gets data from the server. I need to do one thing when clicking on the field in the table. I have to update the information then.

My table looks like this

      <div>
        <MDBTable bordered borderColor="primary">
          <MDBTableBody>
            {tableRows.map((row) => (
              <tr
                key={row.id}
                className={selectedRow === row.id ? "selected" : ""}
                onClick={() => handleRowClick(row.id)}
              >
                <th scope="row">{row.id}</th>
                <td>{row.name}</td>
              </tr>
            ))}
          </MDBTableBody>
        </MDBTable>
      </div>

How to do that? I don’t need a Edit button. I just need to edit when I click in the field.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I solve my problem using Ant design library this code it's work when click to the input field I can Update data

    
    const {
      createRoot
    } = ReactDOM;
    const {
      Button,
      Form,
      Input,
      Popconfirm,
      Table
    } = antd;
    const {
      useContext,
      useEffect,
      useRef,
      useState
    } = React;;
    const EditableContext = React.createContext(null);
    const EditableRow = ({
      index,
      ...props
    }) => {
      const [form] = Form.useForm();
      return ( <
        Form form = {
          form
        }
        component = {
          false
        } >
        <
        EditableContext.Provider value = {
          form
        } >
        <
        tr { ...props
        }
        /> < /
        EditableContext.Provider > <
        /Form>
      );
    };
    const EditableCell = ({
      title,
      editable,
      children,
      dataIndex,
      record,
      handleSave,
      ...restProps
    }) => {
      const [editing, setEditing] = React.useState(false);
      const inputRef = React.useRef(null);
      const form = React.useContext(EditableContext);
      React.useEffect(() => {
        if (editing) {
          inputRef.current.focus();
        }
      }, [editing]);

      const toggleEdit = () => {
        setEditing(!editing);
        form.setFieldsValue({
          [dataIndex]: record[dataIndex],
        });
      };
      const save = async() => {
        try {
          const values = await form.validateFields();
          toggleEdit();
          handleSave({
            ...record,
            ...values,
          });
        } catch (errInfo) {
          console.log('Save failed:', errInfo);
        }
      };
      let childNode = children;
      if (editable) {
        childNode = editing ? ( <
          Form.Item style = {
            {
              margin: 0,
            }
          }
          name = {
            dataIndex
          }
          rules = {
            [{
              required: true,
              message: `${title} is required.`,
            }, ]
          } >
          <
          Input ref = {
            inputRef
          }
          onPressEnter = {
            save
          }
          onBlur = {
            save
          }
          /> < /
          Form.Item >
        ) : ( <
          div className = "editable-cell-value-wrap"
          style = {
            {
              paddingRight: 24,
            }
          }
          onClick = {
            toggleEdit
          } > {
            children
          } <
          /div>
        );
      }
      return <td { ...restProps
      } > {
        childNode
      } < /td>;
    };
    const App = () => {
      const [dataSource, setDataSource] = React.useState([{
          key: '0',
          name: 'Edward King 0',
          age: '32',
          address: 'London, Park Lane no. 0',
        },
        {
          key: '1',
          name: 'Edward King 1',
          age: '32',
          address: 'London, Park Lane no. 1',
        },
      ]);

      const defaultColumns = [{
          title: 'name',
          dataIndex: 'name',
          width: '30%',
          editable: true,
        },
        {
          title: 'age',
          dataIndex: 'age',
          editable: true,
        },
        {
          title: 'address',
          dataIndex: 'address',
          editable: true,
        },
      ];


      const handleSave = (row) => {
        const newData = [...dataSource];
        const index = newData.findIndex((item) => row.key === item.key);
        const item = newData[index];
        newData.splice(index, 1, {
          ...item,
          ...row,
        });
        setDataSource(newData);
      };
      const components = {
        body: {
          row: EditableRow,
          cell: EditableCell,
        },
      };
      const columns = defaultColumns.map((col) => {
        if (!col.editable) {
          return col;
        }
        return {
          ...col,
          onCell: (record) => ({
            record,
            editable: col.editable,
            dataIndex: col.dataIndex,
            title: col.title,
            handleSave,
          }),
        };
      });
      return ( <
        div >
        <
        Table components = {
          components
        }
        rowClassName = {
          () => 'editable-row'
        }
        bordered dataSource = {
          dataSource
        }
        columns = {
          columns
        }
        /> < /
        div >
      );
    };
    const ComponentDemo = App;


    createRoot(mountNode).render( < ComponentDemo / > );

  2. 0

    Get an input field:

    <td><input value={row.name} /></td>

    Initially, keep it disabled and change it on the onClick event.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search