Dispaying grouped data with headers in a datagrid - expandable headers a plus

I would like to diplay information in a datagrid with in line editing capabilities and headers for the different groups. It doen’t have to be expandible, through this would be a plus. See the image below. We have construction estimate information that is typically 100 of rows and we need a way for users to navigate this rather than just having a long list with no formating into headers.

Probably you should try to create your own datagrid component with the specific formatting you want :thinking:
Each line could be a component itself too.

This is doable, I did it, I also have a select for each line, bulk select, and also a bulk select with shift. You’ll need to use a lot of bound arrays tho.

You have a screen shot you could share? I did something similar in bubble with nested tables but am curious what approach you took. I was also able to get the table sections to collapse and expand with some workflows. I was thinking Maybe there is something more elegant solution in WeWeb?

You mean to create a custom component in Vue and then integrate it into weweb? Having each line a component wouldn’t work since each group has a different amount of lines.

You can do this with States

No, I mean nocode component, we now have component creation directly inside the editor, so maybe you can create your own datagrid with reusable line component where you can handle the type, the grouping etc, just an idea

Not sure how that would work . . any tuturials you can direct me too? I thought components were more about handeling CSS styling or data types. Everything in this list would be dynamic, the headers, number of headers, number of line items etc. Nothing repreats so I i need this to be done programatically.

Thanks will take a look. I found this office hour tuturial: (21) WeWeb Office Hours: Grouping Elements of a List, Downloading Files, Handling Failed Loop Iterations - YouTube