Put table in disabled mode when editing a row

[groyee]

I think it would be really cool if the table will be disabled during a row edit except the editing row. Something like that:

[KevinVandy]

You can do something like this

<MaterialReactTable
  muiTableBodyRowProps={({ row, table }) => ({
    hover: !table.getState().editingRow,
    sx: {
      opacity: !table.getState().editingRow || table.getState().editingRow.id === row.id ? 1 : 0.5
    }
  })}
/>

[groyee]

Yep... you right. I did something similar here with pointerEvents as well... not sure if it should be a feature in the core table or not...

#286

[AdityaBhadange]

opacity: // @ts-ignore !table?.getState()?.editingRow || table?.getState()?.editingRow?.id === row?.id ? 1 : 0.3, pointerEvents: // @ts-ignore !table?.getState()?.editingRow || table?.getState()?.editingRow?.id === row?.id ? 'auto' : 'none'

Use this to blur the other rows and also disable mouse click.