Potential future enhancement: fixed columns

[richardtallent]

I've been playing with an idea that could allow this component to support fixed columns to the left (or the right) of the scrolled columns. It would have some additional caveats, but might be worth looking into.

Here's a CodePen for reference:
https://codepen.io/richardtallent/pen/ZrWBeG

There are no immediate plans for this, just wanted to get it on the board and see if there's some strong need for this among the community. I may or may not have enough need for it myself to go through with it.

The implementation chosen is similar conceptually to how KendoUI and other table components accomplish this -- essentially rendering two tables side by side. CSS fixed positioning would have been nice to use, but it's buggy in Chrome and absent in other browsers.

The three biggest changes that would be required are:

1. The parent component would have to populate two THEAD and two TBODY slots--one for the fixed rows/columns, the other for the scrolling rows/columns. This would require some additional logic for parent components wishing to use this feature. This is because vue-scrolling-table isn't responsible for your TR/TH/TD content. (The only impact for parent components not using fixed columns might be a slot name change.)

2. The big one -- ALL rows (fixed and scrolling TBODY and THEAD) would need to enforce a specific height (min and max). The height can be different from row to row, but has to be specified, otherwise there's not a good way to ensure that the fixed row and the scrolling row will have the same height. (Again, this would only impact those using the fixed column feature.)

3. TFOOT would have to be re-implemented so it never scrolls and is actually just a div living outside both tables. (This would impact all users, not just those using the fixed column feature.)

[g33klaura]

Thank you for starting to work out this idea! I just came across Scrolling Table today - the project I'm working on has the need for 3 columns to be fixed in a table that needs to scroll horizontally because there could be many, many columns. We were able to achieve this using DataTables, but now using Vue we're unable to use the same jQuery tricks.

We had the same concerns with regards to row heights when they're not all the same. We also need the ability to expand a row when focused on it, to allow for an additional textarea edit. I'll report back if we implement Scroll Table and try this dual table idea out!

[richardtallent]

Hi @g33klaura -- just curious, were you ever able to find a good solution for having horizontal scroll, dynamic row height, and fixed columns all at the same time?