Horiz scrolled table

by leonsaysHi

HTML

<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.4/underscore-min.js"></script>
<div data-ng-controller="Ctrlr">
    <horiz-table scollersteps="200">
        <table class="table table-striped">
            <thead>
                <tr>
                    <th>Col #1</th>
                    <th>Col #2</th>
                    <th>Col #3</th>
                    <th>Col #4</th>
                    <th>Col #5</th>
                    <th>Col #6</th>
                    <th>Col #7</th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="r in rows">
                    <td>{{r.col1}}</td>
                    <td>{{r.col2}}</td>
                    <td>{{r.col3}}</td>
                    <td>{{r.col4}}</td>
                    <td>{{r.col5}}</td>
                    <td>{{r.col6}}</td>
                    <td>{{r.col7}}</td>
                </tr>
            </tbody>
        </table>
    </horiz-table>
</div>

CSS

@import url('https://getbootstrap.com/dist/css/bootstrap.min.css');
 .horiztable {
    position:relative;
    padding-left:300px;
    background-color:#dedede;
}
.horiztable__btn {
    position:absolute;
    top:0;left:275px;
    width:25px;
}
.horiztable__btn--prev {
    left:250px;
}
.horiztable__dumyscroller {
    overflow-x:auto;
}
.horiztable__dumyscroller__content {
    height:1px;
    width:1000px;
}
.horiztable__wrapper {
    width:auto;
    overflow-x:hidden;
    overflow-y:visible;
}
.horiztable table {
    width:1000px;
    margin-bottom:0;
    background-color:#aeaeae;
}
.horiztable table th:nth-child(1), .horiztable table td:nth-child(1) {
    position:absolute;
    left:0;
    width:150px;
}
.horiztable table th:nth-child(2), .horiztable table td:nth-child(2) {
    position:absolute;
    left:150px;
    width:150px;
}

JavaScript

'use strict';
var App = angular.module('myApp', []);
App.controller('Ctrlr', ['$scope', function ($scope) {
    $scope.rows = [];
    var o, i, j;
    for (i = 0; i < 10; i++) {
        o = {
            id: i
        };
        for (j = 1; j < 8; j++) {
            o['col' + j] = 'test';
        };
        $scope.rows.push(o);
    }
}]);
App.directive('horizTable', function () {
    return {
        restrict: 'E',
        replace: true,
        transclude: true,
        scope: {
        	scollersteps: '='
        },
        template: 
                '<div class="horiztable">'
                +	'<div class="horiztable__btn horiztable__btn--prev" ng-click="scrollBtn(-1)">&lt;</div>'
                +	'<div class="horiztable__btn horiztable__btn--next" ng-click="scrollBtn(1)">&gt;</div>'
                +	'<div class="horiztable__dumyscroller"><div class="horiztable__dumyscroller__content"></div></div>'
                +	'<div class="horiztable__wrapper" ng-transclude></div>'
                +'</div>'
         ,
        link: function (scope, elem, attrs) { 
            var 
            	$elem = $(elem[0]),
            	scollersteps = scope.scollersteps || 100
            ;
        	// behaviors 
        	var $scrolldumy = $elem.find('.horiztable__dumyscroller'),
                $scroll = $elem.find('.horiztable__wrapper');
            $scrolldumy.scroll(function () {
                $scroll.scrollLeft($scrolldumy.scrollLeft());
            });
            scope.scrollBtn = function (w) {
               var n = $scroll.scrollLeft() + (scollersteps*w);
               $scrolldumy.scrollLeft(n);
               $scroll.scrollLeft(n);
            };
        }
    };
});