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.
