search

WJSoftware / wjfe-dataview

Svelte v5 table component suitable for examination of extensive tabular data.
https://wjsoftware.github.io/wjfe-dataview/
MIT License
7 stars 0 forks source link

Auto-stick expanded rows #89

Open webJose opened 3 months ago

webJose commented 3 months ago

Description

Right now, drilldown dataview components, by virtue of the noViewport property, can conveniently overlap the header row of the parent dataview when scrolling down, which is a very nice thing to have as users can always have the correct headers depending on which dataview they are currently examining.

However, it may also be desirable to have handy (visible) the parent data row. As a minimum, conserving the parent data row conserves the control column, which is the usual place where the "expand" button is placed, allowing users to collapse without having to scroll all the way up.

Proposal

Add a new property autoStickExpandedRows that would turn row auto-sticking on and off. Auto-sticking would require the owner of the viewport to keep track of all sticky rows, including child header rows of dataview components with their noViewport property set to true. In other words, the owner of the viewport will require a mechanism to build and reactively maintain a hierarchical data structure of all child dataview components that have no viewport, and its stuck rows.

Pseudo-Algorithm

  1. On initialization, use context to discover the viewport owner and its immediate parent ID.
  2. Register itself with the viewport owner by passing its unique control ID, plus its immediate parent ID.
  3. The above information is immediately used by the viewport owner to update its hierarchical data structure.
  4. Report to the viewport owner the height of the header row, which contains the header row but also the dataview's caption.

At this point, monitor the rows' wjdv.expanded property:

  1. When a row is expanded, measure the height of the data row and report it to the viewport owner. Monitor the height reactively.
  2. Also make the expanded data row sticky by changing its position CSS property, and by setting its top CSS property. The value of the latter must be provided by the viewport owner.
  3. When a row is collapsed, tell the viewport owner to remove the row, and stop monitoring its height.