How to have a scroll bar at top and bottom of angular md bootstrap table?

Question

I have an angular MD bootstrap table where I want to have a horizontal scrollbar at the top and bottom of the table.

Following is the code,

<div layout="column" layout-align="center stretch" flex>
                <div layout="row" style="margin: 20px;">
                    <div flex></div>
                </div>
                <md-table-container flex>
                    <table md-progress="vm.searchTablePromise" md-table single>
                        <thead md-sticky
                               style="background-color:#00a9da;"
                               md-head md-order="vm.query.order">
                            <tr md-row>
                                <th style="color: white;" md-column md-order-by="name">
                                     Name
                                </th>
                                <th style="color: white;" md-column md-order-by="id">
                                     ID
                                </th>
                                <th style="color: white;" md-column md-order-by="ein">
                                    EIN
                                </th>
                                <th style="color: white;" md-column md-order-by="phNumber">
                                    Ph. Number
                                </th>
                                
                            </tr>
                        </thead>
                        <tbody md-body>
                            <tr md-row ng-repeat="item in vm.data">
                                <td md-cell>
                                    <div style="min-width: 200px;">{{item.name}}</div>
                                </td>
                                <td md-cell>
                                    {{item.id}}
                                </td>
                                <td md-cell>
                                    <div style="min-width: 80px;">{{item.ein}}</div>
                                </td>
                                <td md-cell>
                                    {{item.phNumber}}
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </md-table-container>
            </div>

Now, I have a horizontal scroll at the bottom, I also want to have it at the top.

This link provides a solution here but I don't want to have a JS related code for scrolling.

Any help is much appreciated.

Answer 1

Unforunately, there is no way without javascript to have both a scrollbar on top and at the bottom.

It is possible to have a scroll bar on top with css, but that is still only one scrollbar:

md-table-container{
    width: 100%;
    overflow: scroll;
    display: block;
    transform: rotate(180deg) scaleX(-1);
}
table{
    transform: rotate(180deg) scaleX(-1);
}

The only way to go is to use javascript. And the easiest way to implement it is to use the jQuery Doublescroll plugin

Download the file and include it as ds.js in your html. Here is a full example:

<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="ds.js"></script>
<script>
$(function(){
    $('#the-table').doubleScroll();
});

</script>
<div layout="column" layout-align="center stretch" style="width:100%; overflow:hidden" flex>
    <div layout="row" style="margin: 20px;">
        <div flex></div>
    </div>
    <md-table-container id="the-table" style="width:100%; overflow:scroll; display:block" flex>
        <table  style="width:100%" md-progress="vm.searchTablePromise" md-table single>
            <thead md-sticky
                   style="background-color:#00a9da;"
                   md-head md-order="vm.query.order">
                <tr md-row>
                    <th style="color: white;" md-column md-order-by="name">
                         Name
                    </th>
                    <th style="color: white;" md-column md-order-by="id">
                         ID
                    </th>
                    <th style="color: white;" md-column md-order-by="ein">
                        EIN
                    </th>
                    <th style="color: white;" md-column md-order-by="phNumber">
                        Ph. Number
                    </th>
                    
                </tr>
            </thead>
            <tbody md-body>
                <tr md-row ng-repeat="item in vm.data">
                    <td md-cell>
                        <div style="min-width: 200px;">{{item.name}}</div>
                    </td>
                    <td md-cell>
                        {{item.id}}
                    </td>
                    <td md-cell>
                        <div style="min-width: 80px;">{{item.ein}}</div>
                    </td>
                    <td md-cell>
                        {{item.phNumber}}
                    </td>
                </tr>
            </tbody>
        </table>
    </md-table-container>
</div>