Vue-tables-2: Feature Request: body scrolling

[richardtallent]

I'm currently looking for a table component for a new project, and this one is great, but I haven't seen any indication yet that it allows scrolling (vertical and horizontal) of tbody. I'm not thinking so much about infinite vertical scrolling (pagination is fine), just being sure that the table fits the window neatly and that, as the user scrolls, the header doesn't disappear from view (but does stay in alignment with horizontal scroll.

Since I don't see any mention of this in the options, I'm guessing that tbody scrolling isn't part of the current functionality?

I've actually implemented this before partially in my own flexbox-based table component -- vertical scrolling was straightforward CSS, but I never completed the work of doing horizontal scrolling (which seemed impossible to do with just CSS, since something needs to keep the header and body in sync), so I know it's a relatively complicated feature to request.

Even more awesome would be the ability to "freeze" a few columns on the left or right so only a portion of the tbody scrolls, but I know that's even more difficult to pull off.

[acgentry]

So I found this very nice repo, would be great to merge these two repositories! :)

[richardtallent]

Thanks @acgentry... I did end up rolling something of my own since I had a short-term need, glad you liked it! I kinda went the other direction, creating something that is more of a scaffold for tables that only does one thing (flex sizing and scrolling) rather than trying to robust features in vue-tables-2. And it does have some real caveats--column widths must be fixed, for example. But if Mat finds anything worth borrowing for this component, I'm all for it!

[acgentry]

Hi @richardtallent, yeah, ideally the columns would be dynamic, but its a great start! So here is my hack, open to any feedback, but it takes a stripped down version of your code without options.

@matfish2 if I put together a PR, would you entertain a new scrollable template?

New Template:

<thead ref="scrollingHeader">
  <tr>
    {modules.headings(classes.right)}
  </tr>
  {slots.beforeFilters}  
  {modules.columnFilters(classes)}
  {slots.afterFilters}  
</thead>
{footerHeadings}
{slots.beforeBody}    
<tbody ref="scrollingBody" onScroll={this.scrolling.bind(this)}>

New scrolling.js Method File:

module.exports = function() {
    const body = this.$refs.scrollingBody
    const scrollLeft = body.scrollLeft
    const thead = this.$refs.scrollingHeader
    if (thead.scrollLeft !== scrollLeft) {
        thead.scrollLeft = scrollLeft
    }
    const tfoot = this.$refs.scrollingFooter
    if (tfoot.scrollLeft !== scrollLeft) {
        tfoot.scrollLeft = scrollLeft
    }
}

[matfish2]

@acgentry, you are welcome to send a PR

[kdar]

@acgentry Any progress on the PR? I would definitely be interested in something like this.

[richardtallent]

I started working on a possible way for my wrapper component to freeze columns as well, but it’s just a proof of concept at this point and has a few caveats on top of the ones added by just scrolling. But if anyone is looking for some ideas how to do that with this component, you can check out the issue on the vue-scrolling-table repo.

[vesper8]

My app is also in dire need of an infinite scrolling solution.. it doesn't have to be automatic (upon detecting a scrolled-to position), it could work when you click a button. But it needs to append the results at the bottom rather than replace the current page

@matfish2 any chance this has been on your back burner and you're thinking of adding it soon?

[FlorianChretien]

Hello, I would also be very interested in this improvement. Thank you !

[matfish2]

@vesper8:

My app is also in dire need of an infinite scrolling solution..

This issue is not about infinite scrolling (i.e pagination). It relates to fixing or "freezing" the thead or/and specific columns.

As for the issue itself, @acgentry, did you make any progress beyond a POC or should I start implementing it myself?

[richardtallent]

Just an FYI, while my vue-scrolling-table handles the body scrolling (x and y) without issue, my own attempts to use pure CSS or CSS and minimal JS to freeze columns weren't successful -- too many weird little bugs, even in Chrome (for example, while you can fix column contents, the cell borders still scroll!).

I did end up with a working proof of concept I might use in a future version of my component, basically it renders two tables next to each other and synchronizes vertical scrolling, so the end effect is that you can have frozen columns. The disadvantage is that each row needs to have a predetermined height. Here's the code, hope it might somehow be useful for your own implementation:

https://codepen.io/richardtallent/pen/ZrWBeG

[FlorianChretien]

Thank you for your reply. I just want to report an error on line 17 in the JS. "The t == sb comparison can cause unexplained coercion". I'm trying to find a solution! :)

[mukeshghodela-easternts]

@matfish2 Any update for the freezing Thead?

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 7 days if no further activity occurs. Thank you for your contributions.