JSFiddle - React, Tailwind, and code Playground

by KevinABoucher

HTML

<a id="previous-column" href="#">Previous</a>
<a id="next-column" href="#">Next</a>
<div class="table-container">
    <div>
       <table class="sliding-window">
           <tr>               <td>a</td><td>b</td><td>c</td><td>d</td><td>a</td><td>b</td><td>c</td><td>d</td>
           </tr>
                      <tr>               <td>a</td><td>b</td><td>c</td><td>d</td><td>a</td><td>b</td><td>c</td><td>d</td>
           </tr>
        </table>    
    </div>
</div>
<div id="status"></div>

CSS

td { width: 100px; }

.table-container {
    width:456px; /* Total width of visible columns + border widths */
    /*height:300px;*/
    border:solid 1px #000;
    background-color:#eee;
    overflow:hidden;
}

.sliding-window {
    width:760px; /* Total width of all columns in sliding-window + border widths */
   /* height:300px; */
    overflow:hidden;
}

.sliding-window div {
    float:left;
    width:150px;
    height:300px;
    background-color:#aaa;
    border:solid 1px #999;
}

JavaScript

$(document).ready(function() {
    if($('#previous-column').scrollLeft() <= 0) {
      $('#previous-column').hide();
    }
    
    $('#next-column').click(function(event) {
        event.preventDefault();
        $('.table-container').animate({scrollLeft:'+=100'}, 'slow');   
        $('#status').html($('.table-container').scrollLeft());        
    });
    $('#previous-column').click(function(event) {
        event.preventDefault();
        $('.table-container').animate({scrollLeft:'-=100'}, 'slow');  
        $('#status').html($('.table-container').scrollLeft());
        
        if($('#previous-column').scrollLeft() <= 0) {
          $('#previous-column').hide();
        }
    });
});