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

Question

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?

Answer 1

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

Answer 2

You can use a "useRef callback" and set a state hook, exemple :

// Create a state
const [isTableIsEditMode, setIsTableIsEditMode] = useState(false);
// Create a callback
const editRowRef = useCallback((editRow: React.ReactElement<any>) => setIsTableIsEditMode(!!editRow), []);
// Use the call back as a ref in your table for the Edit Row
// the ref is null if the table is not in edit mode
return <MaterialTable
        components={{
            ...
            EditRow: (props) => {
                return <MTableEditRow {...props} ref={editRowRef} />;
            },
        }}
        ...
    />