score:2

my first suggestion - do not do this. editable grids are quite tough components to implement on your own.

therefore you have some options to choose from:

  1. use existing frameworks with editable grids: kendoui, wijmo, etc. although they are quite pricely and most of them have quite pure support for react as for now.
  2. there are some standalone grids with editing functionality: ag-grid, react data grid etc. some of them are free, other paid.
  3. you can develop your own editable grid based on powerfull components like fixed-data-table, react-virtualized, etc. this approach will still will require some coding to be done but will save you a lot of time.
  4. make your own components as you are trying now.

if you still would like to go with #4 you can do it this way:

4.1. in state store column of the currently edited cell: editingcolumn.

4.2. assign onclick handler on your <td> tags: <td onclick={(ev) => this.oncellclick(ev))}>. in the handler set editingcolumn

4.3. in your render replace

<td>{doc.registrationinfo['registrationtype']}</td>

with

<td>{this.rendercell('columnname')}</td>.

and rendercell will look something like this:

private rendercell(colname)
{
    if(this.state.editingcolumn >= 0 && this.state.editingrow >= 0)
    {
         // render your editing control here
         // assign to its 'onchange' like event and save changes to this.props.registrationinfo[colname];
    }
    else
    {
         return this.props.registrationinfo[colname];
    }
}

this is very rough description but i hope it will help you get on going.


Related Query

More Query from same tag