AngularJS ui-grid

var app = angular.module('app', ['ngTouch', 'ui.grid', 'ui.grid.autoResize', 'ui.grid.selection', 'ui.grid.pagination']);

app.controller('MainCtrl', ['$scope', '$http', '$log', 'uiGridConstants', function ($scope, $http, $log, uiGridConstants) {
  $scope.gridOptions = {
            enableColumnMenus: false, // this setting displays a column menu within each column
            enableHorizontalScrollbar: uiGridConstants.scrollbars.NEVER,
            enableVerticalScrollbar: uiGridConstants.scrollbars.NEVER,
            paginationPageSize: 25, // page size, defaults to the first item in paginationPageSizes
            paginationPageSizes: [15, 25, 50, 100], // array of page sizes
            rowHeight: 65,
            headerRowHeight: 40,
            enableRowSelection: true,
            enableSelectAll: true,
            headerTemplate: "headerTemplate.html",
            headerCellTemplate: "headerCellTemplate.html",
            rowTemplate: "rowTemplate.html",
            columnDefs: [
                {
                    field: "positionId",
                    displayName: "POS",
                    cellTemplate: "positionTemplate.html",
                    maxWidth: 48
                },
                {
                    field: "venue",
                    displayName: "VENUE",
                    cellTemplate: "venueTemplate.html"
                },
                {
                    field: "sportDayPart",
                    displayName: "SPORT/DAYPART",
                    cellTemplate: "sportDaypart.html"
                },
                {
                    field: "department",
                    displayName: "Department",
                    cellTemplate: "departmentTemplate.html"
                },
                {
                    field: "positionFunction",
                    displayName: "POSITION FUNCTION",
                    cellTemplate: "positionFunctionTemplate.html"
                },
                {
                    field: "jobTitleDetail",
                    displayName: "JOB TITLE/DETAIL",
                    cellTemplate: "jobTitleTemplate.html"
                },
                {
                    field: "assignment",
                    displayName: "CONTACT",
                    cellTemplate: "contactTemplate.html"
                },
                {
                    field: "employeeTypeRate",
                    displayName: "EMPLOYEE TYPE/RATE",
                    cellTemplate: "employeeTemplate.html"
                },
                {
                    field: "travelIn",
                    displayName: "TVL IN",
                    cellTemplate: "tvlIn.html",
                    maxWidth: 50
                },
                {
                    field: "venueIn",
                    displayName: "VEN IN",
                    cellTemplate: "venIn.html",
                    maxWidth: 50
                },
                {
                    field: "venueOut",
                    displayName: "VEN OUT",
                    cellTemplate: "venOut.html",
                    maxWidth: 50
                },
                {
                    field: "travelOut",
                    displayName: "TVL OUT",
                    cellTemplate: "tvlOut.html",
                    maxWidth: 50
                },
                {
                    field: "assignment",
                    displayName: "",
                    cellTemplate: "initials.html",
                    maxWidth: 50
                }
            ]
        };

 var init = function(){
  $http.get('https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/500_complex.json')
    .success(function(data) {
      $scope.gridOptions.data = data;
      $scope.gridOptions.data = [{
        "uid": 234243,
        "currentPage": 1,
        "pageSize": 5,
        "totalRecords": 50,
        "positionId": 13,
        "splitted": true,
        "status": [
            {
                "id": 1,
                "name": "assigned"
            },
            {
                "id": 2,
                "name": "disco"
            }
        ],
        "assignmentDateRange": {
            "affirmative": true,
            "negative": false
        },

        "venue": {
            "name": "Metropolis",
            "type": {
                "id": 1,
                "description": "Olympic"
            }
        },
        "sportDayPart": {
            "id": 3,
            "name": "Synch Swim",
            "imageId": 3,
            "isDayPart": true
        },
        "department": {
            "id": 3,
            "description": "Operations"
        },
        "positionFunction": {
            "id": 1,
            "description": "Crew"
        },
        "jobTitleDetail": { 
            "jobTitle": {
                "id": 1,
                "description": "A2"
            },
            "jobDetail": {
                "id": 1,
                "description": "Camera Woman"
            }
        },
        "assignment": {
            "contact": {
                "id": 1,
                "imageId": 0
            },
            "hiringManager": {
                "id": 2,
                "firstName": "Kay",
                "lastName": "Allison",
                "initials": "K.A."
            }
        },
        "employeeTypeRate": "",
        "travelIn": "Aug 5",
        "venueIn": "Aug 7",
        "venueOut": "Aug 14",
        "travelOut": "Aug 16",

        "employeeType": [ "director" ],
        "shepherd": ["yahoo"],
        "requiresVisa": {
            "affirmative": true,
            "negative": false
        },
        "isFastTracked": {
            "affirmative": true,
            "negative": false
        },
        "isWorkingParalympics": {
            "affirmative": true,
            "negative": true
        },
        "contactName": "Yoda Norris"
        
    },
    {
        "uid": 13343,
        "currentPage": 1,
        "pageSize": 5,
        "totalRecords": 50,
        "positionId": 13,
        "splitted": false,
        "status": [
            {
                "id": 1,
                "name": "assigned"
            },
            {
                "id": 2,
                "name": "disco"
            }
        ],
        "assignmentDateRange": {
            "affirmative": true,
            "negative": false
        },

        "venue": {
            "name": "Metropolis",
            "type": {
                "id": 1,
                "description": "Olympic"
            }
        },
        "sportDayPart": {
            "id": 3,
            "name": "Synch Swim",
            "imageId": 3,
            "isDayPart": true
        },
        "department": {
            "id": 3,
            "description": "Operations"
        },
        "positionFunction": {
            "id": 1,
            "description": "Crew"
        },
        "jobTitleDetail": { 
            "jobTitle": {
                "id": 1,
                "description": "A2"
            },
            "jobDetail": {
                "id": 1,
                "description": "Camera Woman"
            }
        },
        "assignment": {
            "contact": {
                "id": 1,
                "imageId": 0
            },
            "hiringManager": {
                "id": 2,
                "firstName": "Kay",
                "lastName": "Allison",
                "initials": "K.A."
            }
        },
        "employeeTypeRate": "",
        "travelIn": "Aug 5",
        "venueIn": "Aug 7",
        "venueOut": "Aug 14",
        "travelOut": "Aug 16",

        "employeeType": [ "director" ],
        "shepherd": ["yahoo"],
        "requiresVisa": {
            "affirmative": true,
            "negative": false
        },
        "isFastTracked": {
            "affirmative": true,
            "negative": false
        },
        "isWorkingParalympics": {
            "affirmative": true,
            "negative": true
        },
        "contactName": "Yoda Norris"
        
    }]
    });
 }();
  
}]);


.vertical-align {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
}
.crop-text {
  overflow: hidden;
  -o-text-overflow: ellipsis;
  -ms-text-overflow: ellipsis;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.grid-wrapper {
  padding-top: 50px;
  position: relative;
}
/** 
 * Styling ui-grid
 * Base ui-grid style Scripts/app/modified/ui-grid.css
*/
.ui-grid {
  border: none;
  width: 100%;
  height: 400px;
}
.ui-grid .ui-grid-header-cell {
  vertical-align: middle;
  background: #606060;
  color: #dddddd;
  text-transform: uppercase;
  font-weight: normal;
  font-family: 'Open Sans Bold';
  font-size: 11px;
  padding: 0 5px;
  text-align: left;
  line-height: 14px;
  border-right: none;
  height: 40px;
}
.ui-grid .ui-grid-header-cell.hdr-grid-col-hlight {
  background-color: #28a8e0;
  color: #ffffff;
  border-right: 1px solid #ffffff;
}
.ui-grid .ui-grid-header-cell:last-child {
  border-right: none;
}
.ui-grid .ui-grid-header-cell .ui-grid-selection-row-header-buttons {
  opacity: 1;
  margin-left: -1px;
}
.ui-grid .ui-grid-canvas {
  padding: 0;
}
.ui-grid .ui-grid-row:nth-child(odd),
.ui-grid .ui-grid-row:nth-child(even) {
  margin-top: 2px;
}
.ui-grid .ui-grid-row:nth-child(odd).splitted,
.ui-grid .ui-grid-row:nth-child(even).splitted,
.ui-grid .ui-grid-row:nth-child(odd).splitted .ui-grid-cell,
.ui-grid .ui-grid-row:nth-child(even).splitted .ui-grid-cell {
  height: 130px;
}
.ui-grid .ui-grid-row:nth-child(odd) .ui-grid-cell,
.ui-grid .ui-grid-row:nth-child(even) .ui-grid-cell {
  border-right-width: 0;
  border: 1px solid #e9e9e9;
  border-left-width: 0;
  background-color: #ffffff;
  font-size: 12px;
}
.ui-grid .ui-grid-row:nth-child(odd) .ui-grid-cell .ui-grid-selection-row-header-buttons,
.ui-grid .ui-grid-row:nth-child(even) .ui-grid-cell .ui-grid-selection-row-header-buttons {
  opacity: 1;
}
.ui-grid .ui-grid-row:nth-child(odd) .ui-grid-cell input[type='checkbox'],
.ui-grid .ui-grid-row:nth-child(even) .ui-grid-cell input[type='checkbox'] {
  margin: 20px 5px 5px 3px;
}
.ui-grid .ui-grid-row:nth-child(odd) .ui-grid-cell .ui-grid-cell-contents.center,
.ui-grid .ui-grid-row:nth-child(even) .ui-grid-cell .ui-grid-cell-contents.center {
  text-align: center;
}
.ui-grid .ui-grid-row:nth-child(odd) .ui-grid-cell .ui-grid-cell-contents.left,
.ui-grid .ui-grid-row:nth-child(even) .ui-grid-cell .ui-grid-cell-contents.left {
  text-align: left;
}
.ui-grid .ui-grid-row:nth-child(odd) .ui-grid-cell .ui-grid-cell-contents .pos-middle,
.ui-grid .ui-grid-row:nth-child(even) .ui-grid-cell .ui-grid-cell-contents .pos-middle {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
}
.ui-grid .ui-grid-row:nth-child(odd) .ui-grid-cell .ui-grid-cell-contents .crop-text,
.ui-grid .ui-grid-row:nth-child(even) .ui-grid-cell .ui-grid-cell-contents .crop-text {
  overflow: hidden;
  -o-text-overflow: ellipsis;
  -ms-text-overflow: ellipsis;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ui-grid .ui-grid-row:nth-child(odd) .ui-grid-cell .ui-grid-cell-contents .grid-dtl-text,
.ui-grid .ui-grid-row:nth-child(even) .ui-grid-cell .ui-grid-cell-contents .grid-dtl-text {
  color: #808080;
}
.ui-grid .ui-grid-row:nth-child(odd) .ui-grid-cell .ui-grid-cell-contents.bg-alabaster,
.ui-grid .ui-grid-row:nth-child(even) .ui-grid-cell .ui-grid-cell-contents.bg-alabaster {
  background-color: #f9f9f9;
}
.ui-grid .ui-grid-row:nth-child(odd) .ui-grid-cell .ui-grid-cell-contents .grid-cell-sidebar,
.ui-grid .ui-grid-row:nth-child(even) .ui-grid-cell .ui-grid-cell-contents .grid-cell-sidebar {
  width: 20px;
  float: right;
}
.ui-grid .ui-grid-row:last-child .ui-grid-cell {
  border-bottom-width: 1px !important;
}
.ui-grid .ui-grid-row-selected > [ui-grid-row] > .ui-grid-cell {
  background-color: transparent !important;
}
.ui-grid .ui-grid-pinned-container.ui-grid-pinned-container-left .ui-grid-header-cell:last-child {
  border-right: none;
}
.ui-grid .ui-grid-pinned-container.ui-grid-pinned-container-left .ui-grid-cell:last-child {
  border: 1px solid #e9e9e9;
}

<!doctype html>
<html ng-app="app">
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular-touch.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular-animate.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/csv.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/pdfmake.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/vfs_fonts.js"></script>
    <script src="http://ui-grid.info/release/ui-grid-unstable.js"></script>
    <link rel="stylesheet" href="http://ui-grid.info/release/ui-grid-unstable.css" type="text/css">
    <link rel="stylesheet" href="main.css" type="text/css">
  </head>
  <body>

<div ng-controller="MainCtrl">
  <div ui-grid="gridOptions" class="grid" ui-grid-selection ui-grid-pagination ui-grid-auto-resize></div>
</div>
    <script src="app.js"></script>
  </body>
</html>

<div class="ui-grid-header">
    <div class="ui-grid-top-panel">
        <div class="ui-grid-header-viewport">
            <div class="ui-grid-header-canvas">
                <div class="ui-grid-header-cell-wrapper" ng-style="colContainer.headerCellWrapperStyle()">
                    <div class="ui-grid-header-cell-row">
                        <div class="ui-grid-header-cell ui-grid-clearfix" ng-class="$index > 7 ? 'hdr-grid-col-hlight' : ''" ng-repeat="col in colContainer.renderedColumns track by col.colDef.name" ui-grid-header-cell col="col" render-index="$index"></div>
                    </div>
                </div>
            </div>
        </div>
        <div ui-grid-menu></div>
    </div>
</div>

<div ng-class="{ 'sortable': sortable }">
    <!-- <div class="ui-grid-vertical-bar">&nbsp;</div> -->
    <div class="ui-grid-cell-contents" col-index="renderIndex">
        <span>{{ col.displayName CUSTOM_FILTERS }}</span>

        <span ui-grid-visible="col.sort.direction" ng-class="{ 'ui-grid-icon-up-dir': col.sort.direction == asc, 'ui-grid-icon-down-dir': col.sort.direction == desc, 'ui-grid-icon-blank': !col.sort.direction }">
            &nbsp;
        </span>
    </div>

    <div class="ui-grid-column-menu-button" ng-if="grid.options.enableColumnMenus && !col.isRowHeader  && col.colDef.enableColumnMenu !== false" ng-click="toggleMenu($event)" ng-class="{'ui-grid-column-menu-button-last-col': isLastCol}">
        <i class="ui-grid-icon-angle-down">&nbsp;</i>
    </div>

    <div ng-if="filterable" class="ui-grid-filter-container" ng-repeat="colFilter in col.filters">
        <div ng-if="colFilter.type !== 'select'">
            <input type="text" class="ui-grid-filter-input" ng-model="colFilter.term" ng-attr-placeholder="{{colFilter.placeholder || ''}}"/>

            <div class="ui-grid-filter-button" ng-click="colFilter.term = null">
                <i class="ui-grid-icon-cancel" ng-show="!!colFilter.term">&nbsp;</i> <!-- use !! because angular interprets 'f' as false -->
            </div>
        </div>

        <div ng-if="colFilter.type === 'select'">
            <select class="ui-grid-filter-select" ng-model="colFilter.term" ng-attr-placeholder="{{colFilter.placeholder || ''}}" ng-options="option.value as option.label for option in colFilter.selectOptions"></select>

            <div class="ui-grid-filter-button-select" ng-click="colFilter.term = null">
                <i class="ui-grid-icon-cancel" ng-show="!!colFilter.term">&nbsp;</i> <!-- use !! because angular interprets 'f' as false -->
            </div>
        </div>

    </div>
</div>

<div ng-click="" ng-repeat="col in colContainer.renderedColumns track by col.colDef.name" class="ui-grid-cell" ui-grid-cell></div>

<div class="ui-grid-cell-contents bg-alabaster center" title="TOOLTIP">
    <div class="pos-middle crop-text">{{COL_FIELD CUSTOM_FILTERS}}</div>
</div>

<div class="ui-grid-cell-contents bg-alabaster left" title="TOOLTIP">
    <div class="pos-middle crop-text" tooltip="{{COL_FIELD.name}}" tooltip-placement="center">
        <img ng-src="/Content/app/images/icon-{{COL_FIELD.type.description | lowercase}}.png" width="20" height="20" />
        {{COL_FIELD.name CUSTOM_FILTERS}}
    </div>
</div>

<div class="ui-grid-cell-contents bg-alabaster left" title="TOOLTIP">
    <div class="pos-middle crop-text" tooltip="{{COL_FIELD.name}}" tooltip-placement="center">
        <img ng-src="{{COL_FIELD.isDayPart ? '/Content/app/images/icon-olympic-event-running.png' : '/assets/image/olympics/sportdaypart/' + COL_FIELD.imageId}}" width="20" height="20" />
        {{COL_FIELD.name CUSTOM_FILTERS}}
    </div>
</div>

<div class="ui-grid-cell-contents bg-alabaster left" title="TOOLTIP">
    <div class="pos-middle crop-text" tooltip="{{COL_FIELD.description}}" tooltip-placement="center">
        {{COL_FIELD.description CUSTOM_FILTERS}}
    </div>
</div>

<div class="ui-grid-cell-contents bg-alabaster left" title="TOOLTIP">
    <div class="pos-middle crop-text">
        {{COL_FIELD.description CUSTOM_FILTERS}}
    </div>
</div>

<div class="ui-grid-cell-contents bg-alabaster" title="TOOLTIP">
    <div class="pos-middle crop-text">
        <strong>{{COL_FIELD.jobTitle.description CUSTOM_FILTERS}}</strong><br />
        <span class="grid-dtl-text">{{COL_FIELD.jobDetail.description CUSTOM_FILTERS}}</span>
    </div>
</div>

<div class="ui-grid-cell-contents" title="TOOLTIP">
    <div class="pos-middle">
        <img ng-src="/assets/image/contact/{{COL_FIELD.contact.imageId || 0}}" width="30" height="30" class="grid-col-profile-tmb" />
        {{COL_FIELD.hiringManager.firstName CUSTOM_FILTERS}} {{COL_FIELD.hiringManager.lastName CUSTOM_FILTERS}}
    </div>
</div>

<div class="ui-grid-cell-contents" title="TOOLTIP">
    <select ng-options=""></select>
    {{COL_FIELD CUSTOM_FILTERS}}
</div>

<div class="ui-grid-cell-contents center" title="TOOLTIP">
    <div class="pos-middle crop-text">{{COL_FIELD CUSTOM_FILTERS}}</div>
</div>

<div class="ui-grid-cell-contents center" title="TOOLTIP">
    <div class="pos-middle crop-text">{{COL_FIELD CUSTOM_FILTERS}}</div>
</div>

<div ng-if="true" class="ui-grid-cell-contents center" title="TOOLTIP">
    <div class="pos-middle crop-text">{{COL_FIELD CUSTOM_FILTERS}}</div>
    <div class="pos-middle crop-text">{{COL_FIELD CUSTOM_FILTERS}}</div>
</div>

<div class="ui-grid-cell-contents center" title="TOOLTIP">
    <div class="pos-middle crop-text">{{COL_FIELD CUSTOM_FILTERS}}</div>
</div>

<div class="ui-grid-cell-contents" title="TOOLTIP">
    <div class="grid-circle-icon pos-middle" tooltip="{{COL_FIELD.hiringManager.initials}}" tooltip-placement="left">
        {{COL_FIELD.hiringManager.initials CUSTOM_FILTERS}}
    </div>
</div>