I have a MaterialReactTable V2 with JavaScript (no TypeScript!). It works mostly ok for displaying, sorting, filtering and all the announced goodies. However, when it comes to editing, the modal form is highly insufficient. It’s too narrow, all the fields are text by default and my data is just too complex for it.

From the (disappointingly incomplete and sometimes horribly misleading) documentation, we gather that we can have multiple edit modes:

editDisplayMode: 'modal' | 'cell' | 'row' | 'table' | 'custom'

For all the “internal” modes, a profusion of documentation and examples are prvided. When it comes to the exact feature I need — 'custom' — the documentation says:

Custom Edit Display Mode

There is another option if you don’t like any of the built-in editDisplayModes UI. If you want to completely handle your own editing UI, you can use the "custom" editDisplayMode. This will give you access to the editingCell, editingRow, and creatingRow state options, but MRT will not render any editing UI for you. This is common for rendering a form in a sidebar or similar.

There is zero guidance on, for example, how to actually cause a render of the component we wish to use for editing, how to use the state options, or how to notify back the table of the edit upon save, so that it could update.

When I search the documentation for editingCell or editingRow, the only matching result is precisely the part transcribed above.

Custom modal

I have a component for inserting a new entity that will be listed in the table. This is a modal. This component can also be used to edit the same entity. This is too wide for the MRT facility.

I tried this:

const table = useMaterialReactTable({
  enableEditing: true,
  editDisplayMode: 'modal',
  renderEditRowDialogContent: ({ internalEditComponents, row, table }) => {
    return <MyComponent id={row.original.id} />
  },
})

This resulted in my component ending up completely crammed inside MRT’s own Edit modal.

When I tried this:

const table = useMaterialReactTable({
  enableEditing: true,
  editDisplayMode: 'custom', // <==
  renderEditRowDialogContent: ({ internalEditComponents, row, table }) => {
    return <MyComponent id={row.original.id} />
  },
})

absolutely nothing ever gets rendered.

Could anyone please provide some guidance on the following?

• render custom edit form;
• notify MRT of a change, so it can refetch and refresh.