Locking columns / fixed panes

[alindsay55661]

Hi,

I'm trying to implement locking columns and having a hard time getting this to work without modifying hyperlist source. Essentially the need is to continue to virtualize row rendering for vertical scrolling, but with the ability to fix some of the rendered elements on the left or the right and allow for horizontal scrolling of the rest of the data.

Is this something you have considered and if so do you have a strategy in mind?

[tbranyen]

Should work just fine, I originally wrote this tool for a use case that required fixing both headers and columns. Without seeing a demo though it's hard to know what is causing a problem.

[alindsay55661]

Do you have an example that illustrates your locking approach?

[tbranyen]

No, but understanding more about where you're stuck should help us help you out.

[alindsay55661]

Sure no problem. Typically this would be handled by setting specific tds to be absolutely positioned. Here is an example: https://codepen.io/gregor/pen/ApKxu. This works because the positioning is relative to the table, not the row that contains the td.

However, hyperlist is not a table and has no concept of columns. Hyperlist uses absolute positioning to render a DOM fragment as you scroll which mean any positioning done in that fragment is relative to the fragment itself, not the container. So the approach above doesn't work if you use hyperlist on a table, for example.

I've tried two other approaches, each with drawbacks. One approach monitors horizontal scroll and uses javascript to reposition the columns that should be locked. This did not produce the smoothest results (ie. there was literal jitter/flashing during repaints), though it was performant as far as scrolling through the dataset goes.

The second approach was to modify hyperlist so that it accepted a layout property and element could be an array of DOM fragments and layout selectors where they should be rendered. Example:

<div class='layout'>
  <table class='left-pane'></table>
  <table class='right-pane'></table>
</div>

...
layout: document.querySelector('.layout'),
generate: index => {
  const lockedEl = document.createElement('tr');
  const el = document.createElement('tr');

  // Add columns, content, etc.

  return {
    element: [
      { selector: '.left-pane', el: lockedEl },
      { selector: '.right-pane', el: el}
    ]
   };
}
...

This worked well and provided a structure that allowed me to position some columns relative to the container but it was not as performant. I could still get through 100k records without significant issue but clearly performing DOM queries (required to render fragments to the correct place in the layout) was slowing things down too much. At the end of the day I thought I would come back to you guys and ask since I am not having the best luck with a smooth and performant solution.

[alindsay55661]

@tbranyen Does this provide enough context for you? Would be great to get some guidance or a solid working example.

[alindsay55661]

@soyuka Any thoughts from you?

[soyuka]

I'd have some kind of grid with my two fixed columns and a fixed width container in the middle for hyperlist.
I don't think that the "fixed" columns should be part of the hyperlist-rendered ones.

Also I'd probably not use tables because they're not flexible enough.

I'd need more time to come up with a solution though :|.

[alindsay55661]

I don't think that the "fixed" columns should be part of the hyperlist-rendered ones.

The problem is that these fixed columns have rows like hyperlist, and need to scroll large amounts of data synced with the hyperlist content. If not part of hyperlist, I would need to hook into hyperlist to know what data is displayed at any given time, and have a means to know the position of every row. Perhaps hyperlist isn't the right tool for this scenario, but I think it probably is and just needs someone smarter than me :|

[soyuka]

So you have multiple hyperlists?

____________________________________________________________
| hyperlist fixed | horizontal hyperlist | hyperlist fixed |
¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯

Which one is vertical/horizontal? Maybe if you can draw it I'd have some more ideas (your example from above is kinda static)!

[alindsay55661]

Ok, let me see if this ascii art clears it up for you:

+------------------------------------------------------------+
|  col1 (fixed)  |  col2 (fixed)  |  col3  |  col4  |  col5  |  col6  |  col7  |  col8...
+------------------------------------------------------------+
|                |                |        |        |        ^
+------------------------------------------------------------║
|                |                |        |        |        ║
+------------------------------------------------------------║
|                |                |        |        |        v
+---------------------------------<=========================>+

In this example, columns 1 & 2 are fixed, while columns 3, 4, 5, 6, 7, 8, etc. are not. Which means if you scroll horizontally you can bring columns 6, 7 & 8 into view while columns 3, 4 & 5 move to the left and are hidden "under" the fixed columns, 1 & 2. This is what I mean by "fixed" or "locked" columns.

However, the row behavior here is not effected by fixing/locking columns. In other words, the vertical scrollbar will still continue to scroll rows--including content from the fixed/locked columns as well as the other ones (aka, columns 1-8 in this example). So, I expect to be able to scroll down 100k rows regardless of which columns are fixed/locked and regardless of the position of the horizontal scrollbar.

Does this clear up what I am looking for?

[alindsay55661]

Hi @soyuka, I'm revisiting the project with this requirement and wondering if you had any insights on a solution? Many thanks in advance.