Tables best practice(s)?

Hi!

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.

Thank you!

Can you share more about the functionalities you would like in your tables? And also different use cases? We’re early in the process of revamping our table and data grid components and would love to get some requirements

Absolutely!

  • Variable number of columns
  • Variable display types (text, different number formats)
  • In-line “new item” row with variable input types
  • Toggle-able edit mode (this is the main reason I’m using a custom table and not datagrid, I need to prevent accidental edits)
  • Dynamic paginator (selectable # of items/page, paginator only appears if collection length is > than specified items/page)

Those are the main ones! For now I’m getting around current limitations by using components as much as possible but leaving the table itself (header, content, input row) not a component for flexibility. It’s not ideal but it’ll get me by. I can share more when I’m done!

EDIT
Here are a few more things:

  • Confirmation modal for entering edit mode
  • Confirmation modal for deleting item(s) (both with the inline button and for a selection of multiple items)
1 Like