Buttons to scroll horizontally

Hi Tobias,

I have an issue that I can’t solve. I have tables with many columns and I can’t flip them. I turned on the hotizontal scroll that works great on desktop, however from mobile users don’t get to see the scroling bar and don’t understand that they can/should scroll horizontally to see all columns. On top of that, I blocked the first column to make the table more readable, but this makes it nearly impossible to scroll horizontally from mobile: one can only scroll swiping on the columns that are not blocked, that from a mobile are a very small share of the screen. In short, the solution is not user friendly from mobile.

I am looking to add buttons to scroll horizontally but I didn’t find the option to do so with any of the tablepress integrations. Is it possible? The idea is to add previous and next buttons, like in pagination, but have them scroll the table horizontally instead.

It should be possible using this code:
————————-
$(“#right-button”).click(function() {
event.preventDefault();
$(“.table-responsive”).animate(
{
scrollLeft: “+=300px”
},
“slow”
);
});

$(“#left-button”).click(function() {
event.preventDefault();
$(“.table-responsive”).animate(
{
scrollLeft: “-=300px”
},
“slow”
);
});
———————–

How can I change the behaviour of the previous and next button that are shown when the pagination option is selected and associate the functions above to the buttons?

Hope you can help!

Thanks,

Mattia

The page I need help with: [log in to see the link]