[DataGrid] Add valueSetter

[m4theushw]

Closes #1726

Preview: https://deploy-preview-2876--material-ui-x.netlify.app/components/data-grid/editing/#saving-nested-structures

[DanailH]

Do we need that entry here when we already have the Saving nested structures? It seems that this only points to the one before it.

Besides that, I think it looks great!

[m4theushw]

The pattern we have been doing is to have one section for cell editing and one for row editing. However, this still not scaling because many features are the same. I think we should rework this page in the future to not duplicate content .

[DanailH]

OK so for now we can keep it as it is. I raised it because it seemed like a duplication. if this was on a different page then it would have made more sence.

[prietojulii]

If anyone needs, I used this patch...
1- Creating Nested Field Access Functions

To address the need for nested fields in DataGrid, two useful functions have been created:
(for example)

function getSubField(params) {
  // The getSubField function extracts the value of a nested field
  const [fieldName, subFieldName] = params?.field?.toString().split('.');
  const field =  params?.row[fieldName];
  return field ? field[subFieldName] : null;
}

function setSubField(subFieldName) {
  // The setSubField function updates a nested field with a new value
  return (params) => {
    const field = { ...params.row.patrimony };
    field[subFieldName] = params.value;
    return { ...params.row, patrimony: field };
  };
}

These functions make it easy to retrieve and update values in nested fields.

2 - Configuring Columns in DataGrid

Next, to set up the DataGrid columns with nested fields, you make use of these functions:
(for example)

{ field: 'patrimony.employment', headerName: 'Employment', width: 180, editable: true,
  valueGetter: getSubField, valueSetter: setSubField('employment'),},
{ field: 'patrimony.salary', headerName: 'Salary', width: 100, editable: true, type: 'number',
  // Other columns with nested fields
}

Here, the valueGetter and valueSetter functions are set for each column, allowing DataGrid to effectively access and update nested fields.

3- Updating Values After Editing (Rendering)

Finally, to ensure that the values of nested fields are correctly set after data editing or updates, you can use a loop:
(for example)

Object.keys(clientRendered.patrimony).forEach(subField => {
  clientRendered[`patrimony.${subField}`] = clientRendered.patrimony[subField];
});

This loop ensures that the values of nested fields are properly reflected in the properties of the clientRendered object with the "patrimony." prefix.

[github-actions]

This pull request has conflicts, please resolve those before we can evaluate the pull request.

[github-actions]

This pull request has conflicts, please resolve those before we can evaluate the pull request.