Add a scroll bar to the top of your Table

It can be helpful to have a scrollbar at the top of a table component so I will provide some CSS and JavaScript code that will accomplish this.

Here’s how it will look.

First, we’ll need to add a class to the table component by navigating to the Table Components Settings > Design > CSS > Additional CSS Classes. Add a CSS class that is unique to your table.

Now you may add the following to the CSS section of your page.

.top-scroll-wrapper{
    overflow-x: scroll;
    overflow-y: hidden;
    height: 20px;
}
.top-scroll{
    height: 20px;
}

Lastly, add the following to the JavaScript section
Make sure to update the Table class to the one you set on the first line

var TABLE_CLASS = 'CHANGE_ME_TO_THE_TABLE_CLASS_YOU_SET';
var tableHasLoaded = false;
function checkIfTableHasLoaded() {
    if(tableHasLoaded === false) {
        if ($('.'+TABLE_CLASS+' table').width() > 0) {
            tableHasLoaded = true;
        }
      window.setTimeout(checkIfTableHasLoaded, 100);
    } else {
        var customScrollBar = $('<div class="top-scroll-wrapper"><div class="top-scroll"></div></div>');
        $('.'+TABLE_CLASS).prepend(customScrollBar);
        
        var getAndSetWidth = function(){
            var wrapperWidth = $('.'+TABLE_CLASS+' .table-responsive').width() +'px';
            var scrollWidth =  $('.'+TABLE_CLASS+' table').width() +'px';
            console.log(wrapperWidth,scrollWidth);
            $('.'+TABLE_CLASS+' .top-scroll-wrapper').css('width',wrapperWidth);
            $('.'+TABLE_CLASS+' .top-scroll').css('width',scrollWidth);
        };
        getAndSetWidth();
        $(window).on('resize', function(){
            getAndSetWidth();
        });
        $('.'+TABLE_CLASS+' .top-scroll-wrapper').scroll(function(){
            $('.'+TABLE_CLASS+' .table-responsive')
                .scrollLeft($('.'+TABLE_CLASS+' .top-scroll-wrapper').scrollLeft());
        });
        $('.'+TABLE_CLASS+' .table-responsive').scroll(function(){
            $('.'+TABLE_CLASS+' .top-scroll-wrapper')
                .scrollLeft($('.'+TABLE_CLASS+' .table-responsive').scrollLeft());
        });
    }
}
checkIfTableHasLoaded();

Note: If you have a Table Title the scroll bar will be placed on top of it. Instead of using a Table Title, use an HTML component right above the table component so the scrollbar will look like its attached to the table.

5 Likes

@Chem you’re my hero. Took me all of 20 seconds!

Now we just need this for freezing the header or even the first column. I added in the suggestion box.

3 Likes

@Courtney I’m so happy this helped you out! :heart_eyes:

I’ve responded to your other post as well

Thanks chem, saw your post and responded there as well. :heart_eyes: