Vue-tables-2: table scrolling

Created on 29 Nov 2017 · 4Comments · Source: matfish2/vue-tables-2

This is a feature request.
I would love to see a table that scrolls. while dynamically accessing data from the server.

brainstorming feature request help wanted premium

Source

greenpdx

👍2

Most helpful comment

I need to think of the best UX for such a feature.
So I'll share my thoughts here and everyone is welcome to chip in.

First of all, there is a codependency on styling, i.e the user will have to limit the tbody height and make it scrollable. E.g:

tbody {
    display:block;
    height:200px;
    overflow:auto;
}

thead, tbody tr {
    display:table;
    width:100%;
    table-layout:fixed;/* even columns width , fix width of table too*/
}

thead {
    width: calc( 100% - 1em )/* scrollbar is average 1em/16px width, remove it from thead width */
}

As for the functionality itself I see (at least) two options:

The table will load with only the first page (as defined by the perPage option), and each time the scrollbar hits the bottom it will load the next page and concatenate it to the existing data-set.

The table will load with a scroll bar that represents the total count as returned from the server, and with every scroll action will load only the rows that should be visible to the user, i.e replace the data-set (again, this depends on styling). Here is a react example I found: http://bvaughn.github.io/react-virtualized/#/components/InfiniteLoader

It terms of UX option 2 seems much better because it allows the user to scroll quickly to any point in the dataset, while option 1 requires a sequential page-by-page load. As you can see in the example, option 2 also allows for smooth scrolling, as it uses placeholders until the server returns the actual data. Another advantage is that the DOM isn't continually growing to monstrous proportions.

So, personally I think option 2 is better, although it seems considerably harder to implement...

matfish2 on 9 Dec 2017

👍4

All 4 comments

I need to think of the best UX for such a feature.
So I'll share my thoughts here and everyone is welcome to chip in.

First of all, there is a codependency on styling, i.e the user will have to limit the tbody height and make it scrollable. E.g:

tbody {
    display:block;
    height:200px;
    overflow:auto;
}

thead, tbody tr {
    display:table;
    width:100%;
    table-layout:fixed;/* even columns width , fix width of table too*/
}

thead {
    width: calc( 100% - 1em )/* scrollbar is average 1em/16px width, remove it from thead width */
}

As for the functionality itself I see (at least) two options:

The table will load with only the first page (as defined by the perPage option), and each time the scrollbar hits the bottom it will load the next page and concatenate it to the existing data-set.

The table will load with a scroll bar that represents the total count as returned from the server, and with every scroll action will load only the rows that should be visible to the user, i.e replace the data-set (again, this depends on styling). Here is a react example I found: http://bvaughn.github.io/react-virtualized/#/components/InfiniteLoader

So, personally I think option 2 is better, although it seems considerably harder to implement...

matfish2 on 9 Dec 2017

👍4

for my current use case.. where my "page" consists of a 3x4 grid which is high and wide enough to fill a 1080 page (just 12 items), option #2 sounds like it wouldn't work at all because of the small page size. I also expect my users to do as much scrolling-back-up than scrolling down to new content. Not sure how that would work with ajax loaded content.. anyhow it does sound super nifty for other use cases

It would be great if it was an option.. but I'd be very happy if you could start by adding option #1 since it seems easier and might suit a lot of use cases, it also feels more familiar