Search code examples
reactjsmaterial-uimaterial-table

Check if a material-table row is still in edit mode


I'm using the material-table in a material-ui Stepper and the user tends to click on "next" button even though the table is still in edit mode. This results in a loss of data.

Can I somehow access the table information to check if the table/row is still in edit mode when the user clicks the "next" button?


Solution

  • While there's no directly exposed method that would tell you if the table is editable mode or not (and I think there should be), you can still find it out, but you will have to mess a bit with it's internals. First you will need to grab the ref of the table (find tableRef property) and then the property that will help you is lastEditingRow in the state of the table.

    So, having tableRef that would be: tableRef.current.state.lastEditingRow. For a table in editing mode lastEditingRow will be set to an object describing the row being edited and undefined if table is not in editing mode.

    CodeSandbox with example for you: https://codesandbox.io/s/fancy-waterfall-lg2ri