ng-grid/src/templates/gridTemplate.html

__Contributors:__

<div class="ngTopPanel" ng-class="{'ui-widget-header':jqueryUITheme, 'ui-corner-top': jqueryUITheme}" ng-style="topPanelStyle()">
    <div class="ngGroupPanel" ng-show="showGroupPanel()" ng-style="groupPanelStyle()">
        <div class="ngGroupPanelDescription" ng-show="configGroups.length == 0">{{i18n.ngGroupPanelDescription}}</div>
        <ul ng-show="configGroups.length > 0" class="ngGroupList">
            <li class="ngGroupItem" ng-repeat="group in configGroups">
                <span class="ngGroupElement">
                    <span class="ngGroupName">{{group.displayName}}
                        <span ng-click="removeGroup($index)" class="ngRemoveGroup">x</span>
                    </span>
                    <span ng-hide="$last" class="ngGroupArrow"></span>
                </span>
            </li>
        </ul>
    </div>
    <div class="ngHeaderContainer" ng-style="headerStyle()">
        <div class="ngHeaderScroller" ng-style="headerScrollerStyle()" ng-header-row></div>
    </div>
    <div class="ngHeaderButton" ng-show="showColumnMenu || showFilter" ng-click="toggleShowMenu()">
        <div class="ngHeaderButtonArrow" ng-click=""></div>
    </div>
    <div ng-show="showMenu" class="ngColMenu">
        <div ng-show="showFilter">
            <input placeholder="{{i18n.ngSearchPlaceHolder}}" type="text" ng-model="filterText"/>
        </div>
        <div ng-show="showColumnMenu">
            <span class="ngMenuText">{{i18n.ngMenuText}}</span>
            <ul class="ngColList">
                <li class="ngColListItem" ng-repeat="col in columns | ngColumns">
                    <label><input ng-disabled="col.pinned" type="checkbox" class="ngColListCheckbox" ng-model="col.visible"/>{{col.displayName}}</label>
					<a title="Group By" ng-class="col.groupedByClass()" ng-show="col.groupable && col.visible" ng-click="groupBy(col)"></a>
					<span class="ngGroupingNumber" ng-show="col.groupIndex > 0">{{col.groupIndex}}</span>          
                </li>
            </ul>
        </div>
    </div>
</div>
<div class="ngViewport" unselectable="on" ng-viewport ng-class="{'ui-widget-content': jqueryUITheme}" ng-style="viewportStyle()">
    <div class="ngCanvas" ng-style="canvasStyle()">
        <div ng-style="rowStyle(row)" ng-repeat="row in renderedRows" ng-click="row.toggleSelected($event)" class="ngRow" ng-class="row.alternatingRowClass()" ng-row></div>
    </div>
</div>
<div class="ngFooterPanel" ng-class="{'ui-widget-content': jqueryUITheme, 'ui-corner-bottom': jqueryUITheme}" ng-style="footerStyle()">
    <div class="ngTotalSelectContainer" ng-show="showFooter">
        <div class="ngFooterTotalItems" ng-class="{'ngNoMultiSelect': !multiSelect}" >
            <span class="ngLabel">{{i18n.ngTotalItemsLabel}} {{maxRows()}}</span><span ng-show="filterText.length > 0" class="ngLabel">({{i18n.ngShowingItemsLabel}} {{totalFilteredItemsLength()}})</span>
        </div>
        <div class="ngFooterSelectedItems" ng-show="multiSelect">
            <span class="ngLabel">{{i18n.ngSelectedItemsLabel}} {{selectedItems.length}}</span>
        </div>
    </div>
    <div class="ngPagerContainer" style="float: right; margin-top: 10px;" ng-show="showFooter && enablePaging" ng-class="{'ngNoMultiSelect': !multiSelect}">
        <div style="float:left; margin-right: 10px;" class="ngRowCountPicker">
            <span style="float: left; margin-top: 3px;" class="ngLabel">{{i18n.ngPageSizeLabel}}</span>
            <select style="float: left;height: 27px; width: 100px" ng-model="pagingOptions.pageSize" >
                <option ng-repeat="size in pagingOptions.pageSizes">{{size}}</option>
            </select>
        </div>
        <div style="float:left; margin-right: 10px; line-height:25px;" class="ngPagerControl" style="float: left; min-width: 135px;">
            <button class="ngPagerButton" ng-click="pageToFirst()" ng-disabled="cantPageBackward()" title="{{i18n.ngPagerFirstTitle}}"><div class="ngPagerFirstTriangle"><div class="ngPagerFirstBar"></div></div></button>
            <button class="ngPagerButton" ng-click="pageBackward()" ng-disabled="cantPageBackward()" title="{{i18n.ngPagerPrevTitle}}"><div class="ngPagerFirstTriangle ngPagerPrevTriangle"></div></button>
            <input class="ngPagerCurrent" type="number" style="width:50px; height: 24px; margin-top: 1px; padding: 0px 4px;" ng-model="pagingOptions.currentPage"/>
            <button class="ngPagerButton" ng-click="pageForward()" ng-disabled="cantPageForward()" title="{{i18n.ngPagerNextTitle}}"><div class="ngPagerLastTriangle ngPagerNextTriangle"></div></button>
            <button class="ngPagerButton" ng-click="pageToLast()" ng-disabled="cantPageToLast()" title="{{i18n.ngPagerLastTitle}}"><div class="ngPagerLastTriangle"><div class="ngPagerLastBar"></div></div></button>
        </div>
    </div>
</div>