tabulator

Scrolling Not Working with Long Content in Tabulator


I have noticed that when I have cells with a lot of text, the table will not scroll vertically. As I scroll down, the table jumps back to the top. The behavior is a function of the amount of content and the width of the column. A wider column can handle more content before this behavior is seen.

I thought this was due to my own custom formatter, but it also happens for the textarea and html formatters.


Solution

  • This can happen if the row content is significantly longer than the height of the table.

    In this case you can improve the scroll stability by increasing the size of the virtual dom render buffer on the table. this is the amount of space that the table renders above and below the table to allow smooth scrolling.

    It is be default set to 2 times the height of the table. You should make sure it is at least 5 times the height of your tallest row.

    This can be done using the virtualDomBuffer option in the table constructor:

    var table = new Tabulator("#example-table", {
        virtualDomBuffer:300, //set virtual DOM buffer to 300px
    });
    

    More information on this can be found in the Virtual DOM Documentation

    Though from a user experience perspective i would query whether a table is the best way to layout data if it takes up a large vertical space. It would probably be clearer to display summary information in rows, and then use either a rowFormatter to toggle a details section under the row, or a modal to show more detail