Handle edition with textEditor for nested json

[Thomas-Lacomblez]

Hello !

I am using a nested json object as in my code below. I used formater in column to print the value, but it doesn't handle the editing with the textEditor provided by react-data-grid. I would like to be able to handle the nested array/objects to be able to edit them. The textEditor use onRowChange method (in my example code it's set with setRows) to handle the edit with nested json and how could I handle as default with setRows() for simple properties and also be able to handle nested properties etc.

import React, { useState } from 'react';
import DataGrid, { textEditor } from 'react-data-grid';
import 'react-data-grid/lib/styles.css';
import {groupBy as rowGrouper} from 'lodash';	
import { SdRounded } from '@mui/icons-material';
const GroupedGridComponent = () => {

  const [rows , setRows] = useState([
    {
      group: 'group1',
      column1: 'Group 1 Row 1',
      column2: 'Group 1 Row 1',
      options: [
        {
          actualName1: 'value1',
          actualName2: 'value2',
          nestedObject: { subItem1: 'subValue1', subItem2: 'subValue2' },
        },
      ],
    },
    { group: 'group2', column1: 'Group 2 Row 1', column2: 'Group 2 Row 1' },
    { group: 'group2', column1: 'Group 2 Row 2', column2: 'Group 2 Row 2', options: [{
        actualName1: 'value1',
        actualName2: 'value2',
        nestedObject: { subItem1: 'subValue1', subItem2: 'subValue2' },
      }]
    },
  ]);

  const columns = [
    { key: 'group', name: 'Group', width: 200 },
    { key: 'column1', name: 'Column 1', width: 200 },
    { key: 'column2', name: 'Column 2', width: 200 },
    {
      key: 'options.actualName1',
      name: 'actualName1',
      width: 200,
      formatter: ({ row }) =>
        row.options && row.options.length > 0 ? (
          <>
            {row.options.map((option, index) => (
              <div>
                {option.actualName1}
              </div>
            ))}
          </>
        ) : null,
      editor: textEditor,
    },
    {
      key: 'nestedObject.subItem1',
      name: 'subItem1',
      width: 200,
      formatter: ({ row }) => 
        row.options.nestedObject ? (
        <>
          {row.options &&
            row.options.length > 0 &&
            row.options.map((option, index) => (
              <div>
                { option.nestedObject.subItem1 }
              </div>
            ))}
        </>
      ): null,
      editor: textEditor,
    },
  ];

  return (
    <DataGrid
      columns={columns}
      rows={rows}
      onRowsChange={setRows}
    />
  );
};

export default GroupedGridComponent;

[godon019]

Not sure what you want to achieve with options property exactly.
but this is how you can show some field and be able to edit some
https://codesandbox.io/s/elated-drake-r4rhcc?file=/src/App.tsx