Mui-datatables: How can I edit a Cell directly from the table ?

[keybraker]

I want to create an editable table but there is no api call to to it.
I have done a somewhat good implementation, with onCellClick, where the user gets a pop up in the middle of the screen to edit and the enter to save it.
But I feel like a more intuitive way would be to change the text to input to that the user can edit it on the spot.

Is there a way ?

[gabrielliwerant]

If I understand you correctly, then no, there isn't. The way this library is moving, it will be aligned with react principles regarding "controlled" components, which essentially means that you are responsible for passing in your application state via props, to the table. This approach allows maximum customizability from those implementing the table.

The library provides all the tools you would need to integrate editing into the table however you wish via customBodyRender. You can see the custom-action-columns example for a simple way in which this might be achieved, but you are free to add whatever buttons you wish and display your fields as text fields, etc.

[keybraker]

So with customBodyRender I can make cells <input> , in order to have an onClick function and send the edited text back to the database? thats perfect, can you link me the example custom-action-columns ?

thank you very much !

[keybraker]

Thank you very much for the swift answer, I will continue my work. _Keep up the great work !_

[gabrielliwerant]

Here you go: https://github.com/gregnb/mui-datatables/blob/master/examples/custom-action-columns/index.js.

Yes, you can do that. What you might want to do is render something that allows you to switch between the states, e.g.

customBodyRender: value => {
  <tr>
    <td>
       <div style={{ display: this.state.isInEditingMode ? 'none' : 'block' }}>{value}</div>
       <input style={{ display: this.state.isInEditingMode ? 'block' : 'none' }} value={value} />
    <td>
  </tr>
}

You can then have a button which triggers editing mode. Note that this is pseudo code that I have not specifically verified to work, but I know this sort of approach is possible as I've done it in one of my own projects using this library.

Best of luck!

[ZhenyuanBo]

I want to create an editable table but there is no api call to to it.
I have done a somewhat good implementation, with onCellClick, where the user gets a pop up in the middle of the screen to edit and the enter to save it.
But I feel like a more intuitive way would be to change the text to input to that the user can edit it on the spot.

Is there a way ?

Hello, can you show me how to use onCellClick to edit the value?