I have a bootstrap table with overflowing set to auto within its container, along with a locked first column. While a horizontal scroll bar allows for viewing additional data, I am looking to incorporate buttons for navigation as well. Users should have the option to navigate horizontally in the table using their mouse, the scrollbar, or the buttons.
What steps should I take to implement this functionality?
I have managed to make it work with a div (https://codepen.io/gregbarbosa/pen/axjKbL), but not with the table (https://codepen.io/gregbarbosa/pen/eojbrJ). Could it be that the JS animate function does not work with tables?
$("#right-button").click(function() {
event.preventDefault();
$("#content").animate(
{
scrollLeft: "+=300px"
},
"slow"
);
});
$("#left-button").click(function() {
event.preventDefault();
$("#content").animate(
{
scrollLeft: "-=300px"
},
"slow"
);
});