zeusjs/widgets

<div class="table-fragment-wrap">
    <div class="table-fragment-header" ng-show="extractHeader">
        <img ng-src="{{ headerIcon }}" ng-if="headerIcon"/>
        <h3 class="external-header">{{ heading }}</h3>
        <div class="btn-group fragment-action-group" dropdown ng-show="hidecolumn==='true'">
            <button type="button" class="dropdown-toggle fragment-action" dropdown-toggle>
                <span class="fa fa-ellipsis-v icon"></span>
            </button>

            <ul class="dropdown-menu dropdown-menu-right column-container" ng-if="extractHeader" role="menu">
                    <li ng-repeat="h in headers"
                        ng-click="hideColumn(h.columnNumber, h)"
                        ng-hide="h.allowed_hide">
                        <a>
                            <i class="fa fa-check text-primary pull-right"
                                ng-show="h.selected"></i>
                            {{h.label}}
                        </a>
                    </li>
            </ul>
        </div>
    </div>
    <div class="card has-table table-fragment"
        ng-class="{'no-header': extractHeader}">
        <div class="card-head" ng-if="!extractHeader">
            <span class="fa {{headerIcon}} icon"></span>
            <h4>{{heading}}</h4>
            <div class="btn-group pull-right" dropdown ng-show="hidecolumn==='true'">
                <button type="button" class="dropdown-toggle fragment-action" dropdown-toggle>
                    <span class="fa fa-ellipsis-v icon">&#9776;</span>
                </button>
                <ul class="dropdown-menu column-container" role="menu">
                        <li ng-repeat="h in headers"
                            ng-click="hideColumn(h.columnNumber, h)"
                            ng-hide="h.allowed_hide">
                            <a class="column">
                                <span class="fa fa-check text-primary pull-right"
                                    ng-show="h.selected">
                                    &#10003;
                                </span>
                                {{h.label}}
                            </a>
                        </li>
                </ul>
            </div>
        </div>
        <div class="card-body async-load" data-role="table-holder">
            <div class="load-mask" data-role="load-mask">
                <div class="loading-text">
                    <span class="fa fa-spin fa-circle-o-notch"></span>
                    Updating...
                </div>
            </div>
            <div class="no-record-message" ng-show="loadingStatus === 'failed'">
                Some error occured while loading the data.
            </div>
            <div class="no-record-message" ng-show="loadingStatus === 'empty'">
                There are no records.
            </div>
        </div>
        <div class="loadMore" ng-show="totalRecords>displayLimit">
            <span class="pull-left" ng-show="paginate">
                {{ displayLimit }} per page.
            </span>

<!--             <button type="button" class="btn btn-primary btn-sm pull-right"
                ng-click="showAllRecords()" ng-show="showAll">
                <span ng-hide="toggleShowText">{{ 'TABLE.SHOW_ALL' | translate }}</span>
                <span ng-show="toggleShowText">{{ 'TABLE.PAGINATED' | translate }}</span>
            </button> -->

            <pagination total-items="totalRecords" items-per-page="displayLimit"
                ng-model="currentPage" max-size="5"
                class="pagination-small pull-right" boundary-links="true"
                ng-change="loadPrevNextPage()"
                ng-show="paginate && !paginateMarker">
            </pagination>

            <pager total-items="totalRecords" ng-model="currentPage"
                items-per-page="displayLimit"
                ng-change="loadPrevNextPage()"
                ng-show="paginate && paginateMarker"></pager>

        </div>
    </div>
</div>