The app I’m working on relies pretty heavily on tables, and I would like to find an approach that is repeatable/modular enough to ensure uniformity across the app while also allowing the required level of flexibility. For example at a basic level, each table has a different number of columns which can be of different types, but also tables may or may not have inline editing/item creation, etc.
I started exploring components and got pretty far on one “prototype” table, but extending the logic to different tables is proving difficult - the complexity involved quickly became overwhelming. For example, for a table that allows inline editing, handling all the required settings for all the possible input types at the component level seems like a LOT to manage (the sheer number of properties would be comical). Or, for example, displaying pop-up messages/menu based on table actions feels like a lot of work in the context of a component (since to my knowledge modals can only exist outside a component).
I almost feel like I would need an “outer” component with all the common elements across all tables, and an inner “table” component that has the required flexibility to handle any of the collections I’m working with. No idea how to achieve that though, maybe nested components could be a path to at least a partial solution?
I have a hunch the “ultimate” solution to my problem would be to learn Vue and build a custom component but I’m not quite there yet in my dev journey!
Sorry for the rambling post with no clear question but I guess I would just like to hear from other people, particularly those more experienced with WeWeb and perhaps even actual seasoned web devs, how you approach all of this.