Material-table: Material table with a nested table: the edit function doesn't work for the sub table

[cf-232]

Hi, all.
I need some help with the following problems:

• How can I edit the nested table data without effect the main table's data?

  Here is the full code:
  https://codesandbox.io/s/material-table-sub-table-edit-function-iybwu?file=/src/table.js

  When I edit the nested table data, the main table data also changed.
  Is it possible to implement the edit function for sub table without influent the main table data?

• currency convertor changed the data without render on the table?

  the above coding also includes a currency converte function, it works on my local machine,
  the function can change the table data, but the changed data didn't show on the table.

  Can anyone help?
  Thanks in advance.

[VLRTroll]

Hi, @cf-232!

How can I edit the nested table data without effect the main table's data?

When you save the changes in the sub table, the function change the main table's state and this force the main table to re-render.

onRowUpdate: (newData, oldData) =>
  new Promise((resolve, reject) => {
    setTimeout(() => {
      const dataUpdate = [...data];
      const index = oldData.tableData.id;
      dataUpdate[index] = newData;
      setData([...dataUpdate]);   // <--- this force the refresh

      resolve();
    }, 1000);
})

A possible solution is:

onRowUpdate: (newData, oldData) =>
 new Promise((resolve, reject) => {
  setTimeout(() => {
    const index = oldData.tableData.id;
    rowData.subAccounts[index].name = newData.name;

    resolve();
  }, 1000);
 })

currency convertor changed the data without render on the table?

There are two points in the code that are causing it. The first one is is the "handleChange" function in Currency Selector which is using a wrong value.

// The first paramenter sent to it is the event, so to get the value you need to access event.target.value
const handleChange = event => {
    setCurrentCurrency(`${event.target.value}`);
};

And the last one is the missing useEffect in Table component. The component detects the parameter change, but you need to do something with this. To force the Table re-render, use the following inside Table component:

React.useEffect(() => {
    setData(tableData);
},[tableData])

[cf-232]

Thank you so much, @VLRTroll Really appreciate your help.