OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

Use 'custom' dialog in MRT Edit row

  • Thread starter Thread starter Ricardo
  • Start date Start date
R

Ricardo

Guest
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:

Code:
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:

Code:
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:

Code:
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.

<p>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.</p>
<p>From the (disappointingly incomplete and sometimes horribly misleading) documentation, we gather that we can have multiple edit modes:</p>
<pre class="lang-js prettyprint-override"><code>editDisplayMode: 'modal' | 'cell' | 'row' | 'table' | 'custom'
</code></pre>
<p>For all the "internal" modes, a profusion of documentation and examples are prvided. When it comes to the exact feature I need — <code>'custom'</code> — the <a href="https://www.material-react-table.com/docs/guides/editing#custom-edit-display-mode" rel="nofollow noreferrer">documentation</a> says:</p>
<blockquote>
<h3>Custom Edit Display Mode</h3>
<p>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 <code>"custom"</code> editDisplayMode. This will give you access to the <code>editingCell</code>, <code>editingRow</code>, and <code>creatingRow</code> state options, but MRT will not render any editing UI for you. This is common for rendering a form in a sidebar or similar.</p>
</blockquote>
<p>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.</p>
<p>When I search the documentation for <code>editingCell</code> or <code>editingRow</code>, the only matching result is precisely the part transcribed above.</p>
<h2>Custom modal</h2>
<p>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.</p>
<p>I tried this:</p>
<pre class="lang-js prettyprint-override"><code>const table = useMaterialReactTable({
enableEditing: true,
editDisplayMode: 'modal',
renderEditRowDialogContent: ({ internalEditComponents, row, table }) => {
return <MyComponent id={row.original.id} />
},
})
</code></pre>
<p>This resulted in my component ending up completely crammed inside MRT's own Edit modal.</p>
<p>When I tried this:</p>
<pre class="lang-js prettyprint-override"><code>const table = useMaterialReactTable({
enableEditing: true,
editDisplayMode: 'custom', // <==
renderEditRowDialogContent: ({ internalEditComponents, row, table }) => {
return <MyComponent id={row.original.id} />
},
})
</code></pre>
<p>absolutely nothing ever gets rendered.</p>
<p>Could anyone please provide some guidance on the following?</p>
<ul>
<li>render custom edit form;</li>
<li>notify MRT of a change, so it can refetch and refresh.</li>
</ul>
 

Latest posts

Top