Expand a row to display a custom component

[asa75]

Can you add this feature, I really need a table component who can expand each rows to display an edit form in each expanded content.

[otobot1]

This is also something that I plan to use. If I get to it first, I'll submit a PR :D

[icflorescu]

I'm not 100% sure of how we could integrate this and not break the already existent features.
@otobot1 if you have an idea on how we could make this generic and customizable enough, feel free to try it.

Maybe it's just me, but so far every time I considered using inline-editing with other UI libraries (and I've worked with Ant Design, Material UI, Blueprint.js), in the end the edit form became complex enough that it proved better to just do it in a modal...

[otobot1]

Yeah that makes sense. In my case specifically, I'm not actually looking to do inline editing. I want to be able "expand" a row of my table to show another component with more detailed info about the record. I don't want to use a modal because I have yet another layer of detail and I want that to be in a modal. For some clarification, I attached an old mockup of the page I'm building. I've been poking around and trying to implement a generic version of this.

[otobot1]

I took a stab at implementing this #35 .

[icflorescu]

@asa, you might be interested to learn that the feature finally landed in v1.7.0.
Special thanks to @otobot1 for providing the initial PR.
Have a look at the examples page here: https://icflorescu.github.io/mantine-datatable/examples/expanding-rows

[otobot1]

Have a look at the examples page here: https://icflorescu.github.io/mantine-datatable/examples/expanding-rows

The example page looks really good! The mission statements are great 🤣

[elarens]

@icflorescu
Continuing the discussion here: as I said before, I'm thrilled about your implementation, but I also think it could be important to give users an opportunity to use both the row expansion feature and clickable in-row components. I had a good case for it on one of recent projects where we had a table of events. Expansion allowed to view more information about the event and clickable components allowed to modify or delete event. I used Ant Design library for that. Would it be feasible to achieve the same functionality in mantine-datatable using stopPropagation as you suggested? If yes, what would be the steps?

[icflorescu]

I don't see why not.
I've added an issue referring to this, will update the example page accordingly and I'll let you know as soon as it's done.

[icflorescu]

@elarens, please have a look at Using with clickable components in cells - currently the last section on this example page.

P.S. Make sure to refresh the page; I've just published a new docs website version.

[otobot1]

I added a comment in #62 , but then I realized that I'm not sure if GitHub sends notifications for closed issues so I'm posting here too.

[icflorescu]

@otobot1 Agreed; I'll extract the example to a dedicated page and link to it from other places with potential "gotchas".

[icflorescu]

I'm not sure if GitHub sends notifications for closed issues

It does.