For an administration UI, I want an interactive table widget with a number of behaviors:
- Collapse / expand (yes, this means the rows are a hierarchy)
- Update of data in a child cell based on a parent cell.
- Hiding or revealing of a row or an entire sub-tree based on a value update.
- Two or more form elements in each row, that may depend on each other. E.g. a checkbox that will mess with the value of a text field in the same row.
- DOM manipulation on newly created rows. E.g. the checkbox might be turned into a more visual kind of widget. Or
In another use case, I have the following additional behaviors:
- Adding and removing rows, manually or automatically.
- Drag and drop of rows. (probably not in combination with the collapse/expand, but who knows)
- Ideally, we want each of these behaviors to be implemented as a separate and independent module / plugin. BUT
- If one behavior changes the DOM, then other behaviors need to know about it. E.g. if you insert a row, then the collapse/expand needs to know, to decide whether the new row should be shown or hidden. And the newly added row needs new event listeners from various other behaviors.
- There might be behaviors that are triggered by the state of other behaviors. E.g. each row might contain a text field, and depending on the value, the row must be moved up or down (drag/drop).
I had to deal with this kind of problem a few times and I generally managed to get it work. However, I always hated the architecture that came out of it.
What I'd like is an approach that allows to create the different behaviors as independent modules, and then somehow plug them together.
Some more specific questions:
- Where should each of the behaviors keep its state information
- What about state information for a specific table row? Should it be stored as a variable on the DOM element? (e.g.
$('tr').isExpanded = true) or rather in a data container in the module itself?
- How can modules know about DOM updates?
- How should modules talk to each other?
- How should the code of each module be structured? What kind of API should it expose?
- How to handle multiple instances of this kind of widget on one page? (In this case, global instances don't work)
Example: https://drupal.org/project/multicrud (sorry, all I have atm is Drupal modules)