[v2] Use Custom Editing Components freezes when clicking the edit row button

[yann-combarnous]

mantine-react-table version

2.0.0-beta.5

react & react-dom versions

18.3.1

Describe the bug and the steps to reproduce it

Steps to reproduce:

When using the custom editing component documented here, I just tried to use the documented example:

      Edit: ({ cell, table }) => (
        <MRT_EditCellTextInput cell={cell} key={cell.id} table={table} />
      ),

Expected behavior:

• when clicking on the row edit button, the edit modal should appear

Actual behavior:

• when clicking on the row edit button, the edit modal does not show up and page freezes without console error

Minimal, Reproducible Example - (Optional, but Recommended)

Reproduced at Code Sandbox

Note that by just removing the column's Edit option in column definition, the edit modal then shows up.

Screenshots or Videos (Optional)

No response

Do you intend to try to help solve this bug with your own PR?

None

Terms

• I understand that if my bug cannot be reliably reproduced in a debuggable environment, it will probably not be fixed and this issue may even be closed.

[KevinVandy]

You didn't give your columns a stable reference

[yann-combarnous]

You didn't give your columns a stable reference

Thanks, I added a stable reference in the sandbox, and still having the same issue.

[alessandrojcm]

@yann-combarnous Your custom edit component returns <MRT_EditCellTextInput/> which internally calls column.Edit, which in turn causes a render loop. Pass a custom component to the Edit prop of your column def and it should work.