<!DOCTYPE html>
<html>
<head>
<link data-require="bootstrap@3.3.5" data-semver="3.3.5" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<link data-require="bootstrap@3.3.5" data-semver="3.3.5" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootswatch/3.3.5/cosmo/bootstrap.min.css" />
<link data-require="bootstrap@3.3.5" data-semver="3.3.5" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" />
<link data-require="ui-grid@3.2.6" data-semver="3.2.6" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-grid/3.2.6/ui-grid.css" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container-fluid" ng-app="shitapp" ng-controller="tableController as tc">
<div class="row">
<div class="col-sm-12">
<button ng-click="tc.changeStuff()">change</button> v3.2.6
<button ng-click="tc.addStuff()">add</button>
<div ui-grid="tc.gridOptions" class="myGrid table" ui-grid-move-columns ui-grid-resize-columns ui-grid-pinning ui-grid-selection ui-grid-cellnav></div>
</div>
<div class="row">
<button class="btn btn-default" context-menu="contextMenuOptions(null)">hello</button>
</div>
</div>
<p id="demo"></p>
</div>
<script data-require="jquery@2.2.0" data-semver="2.2.0" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script data-require="bootstrap@3.3.5" data-semver="3.3.5" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script data-require="angular.js@1.5.7" data-semver="1.5.7" src="https://code.angularjs.org/1.5.7/angular.js"></script>
<script data-require="ui-grid@3.2.6" data-semver="3.2.6" src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-grid/3.2.6/ui-grid.js"></script>
<script src="script.js"></script>
<script src="tableController.js"></script>
</body>
</html>
var app = angular.module("shitapp", [
'ui.grid',
'ui.grid.resizeColumns',
'ui.grid.moveColumns',
'ui.grid.pinning',
'ui.grid.selection',
'ui.grid.cellNav']);
/* Styles go here */
.myGrid {
width: 100%;
height: 550px;
}
.status-delayed{
background-color:red !important;
color:white;
}
.headerInbound{
background-color:yellow;
}
.headerOutbound{
background-color:blue ;
color:white;
}
.headerCombined{
background-color:greenyellow;
}
<div
context-menu="grid.appScope.contextMenuOptions(row.entity)" model="row.entity"
onkeydown="grid.appScope.keyPress(event)" ng-keydown="grid.appScope.keyPress()"
ng-repeat="(colRenderIndex, col) in colContainer.renderedColumns track by col.uid"
ui-grid-one-bind-id-grid="rowRenderIndex + '-' + col.uid + '-cell'"
class="ui-grid-cell"
ng-class="{ 'ui-grid-row-header-cell': col.isRowHeader }"
role="{{col.isRowHeader ? 'rowheader' : 'gridcell'}}"
ui-grid-cell
>
</div>
<div class="ui-grid-cell-contents">{{grid.getCellValue(row, col)}}</div>
var tableController = function ($scope, $q, $filter, $templateCache, uiGridConstants, uiGridPinningConstants) {
var self = this;
this.gridApi = {};
this.cellClass = function (grid, row, col, rowRenderIndex, colRenderIndex) {
//can be used to determine what css class an cell should have
//console.log("cellClass", row, col, rowRenderIndex, colRenderIndex);
if (col.colDef.field === 'status') {
var status = grid.getCellValue(row, col);
if (status.indexOf("9randomdata") >= 0)
{
return "status-delayed";
}
}
};
//can also have cellTemplate
this.tableColumns = [
{ name: 'aircraft', field: 'id', displayName: 'id', minWith: 20, width: 50, visible: true, cellClass: self.cellClass, cellTemplate: 'gridcelltemplate.html', inbound: true, outbound: false },
{ name: 'type', field: 'product', displayName: 'product', minWith: 20, width: 100, visible: true, cellClass: self.cellClass, cellTemplate: 'gridcelltemplate.html', inbound: true, outbound: false },
{ name: 'airline', field: 'manufac', displayName: 'manufac', minWith: 20, width: 50, visible: true, cellClass: self.cellClass, cellTemplate: 'gridcelltemplate.html', inbound: true, outbound: false },
{ name: 'date', field: 'date', displayName: 'date', minWith: 20, width: 50, visible: true, cellClass: self.cellClass, cellTemplate: 'gridcelltemplate.html', inbound: true, outbound: false },
{ name: 'time', field: 'time', displayName: 'time', minWith: 20, width: 50, visible: true, cellClass: self.cellClass, cellTemplate: 'gridcelltemplate.html', inbound: true, outbound: false },
{ name: 'id', field: 'source', displayName: 'source', minWith: 20, width: 100, visible: true, cellClass: self.cellClass, cellTemplate: 'gridcelltemplate.html', inbound: true, outbound: false },
{ name: 'package', field: 'package', displayName: 'package', minWith: 20, width: 50, visible: true, cellClass: self.cellClass, cellTemplate: 'gridcelltemplate.html', inbound: true, outbound: false },
{ name: 'bagage', field: 'trademark', displayName: 'trademark', minWith: 20, width: 50, visible: true, cellClass: self.cellClass, cellTemplate: 'gridcelltemplate.html', inbound: true, outbound: false },
{ name: 'cargo', field: 'col1', displayName: 'col1', minWith: 20, width: 50, visible: true, cellClass: self.cellClass, cellTemplate: 'gridcelltemplate.html', inbound: true, outbound: true },
{ name: 'passangers', field: 'col2', displayName: 'col2', minWith: 20, width: 50, visible: true, cellClass: self.cellClass, cellTemplate: 'gridcelltemplate.html', inbound: true, outbound: true },
{ name: 'weight', field: 'col3', displayName: 'col3', minWith: 20, width: 50, visible: true, cellClass: self.cellClass, cellTemplate: 'gridcelltemplate.html', inbound: true, outbound: true },
{ name: 'balance', field: 'col4', displayName: 'col4', minWith: 20, width: 100, visible: true, cellClass: self.cellClass, cellTemplate: 'gridcelltemplate.html', inbound: true, outbound: true },
{ name: 'status', field: 'status', displayName: 'status', minWith: 20, width: 100, visible: true, cellClass: self.cellClass, cellTemplate: 'gridcelltemplate.html', inbound: true, outbound: true },
{ name: 'takeofftime', field: 'col5', displayName: 'col5', minWith: 20, width: 50, visible: true, cellClass: self.cellClass, cellTemplate: 'gridcelltemplate.html', inbound: false, outbound: true },
{ name: 'landingTime', field: 'col6', displayName: 'col6', minWith: 20, width: 50, visible: true, cellClass: self.cellClass, cellTemplate: 'gridcelltemplate.html', inbound: false, outbound: true },
{ name: 'special', field: 'col7', displayName: 'col7', minWith: 20, width: 50, visible: true, cellClass: self.cellClass, cellTemplate: 'gridcelltemplate.html', inbound: false, outbound: true },
{ name: '1aircraft', field: '1id', displayName: '1id', minWith: 20, width: 50, visible: true, cellClass: self.cellClass, cellTemplate: 'gridcelltemplate.html', inbound: false, outbound: true },
{ name: '1type', field: '1product', displayName: '1product', minWith: 20, width: 100, visible: true, cellClass: self.cellClass, cellTemplate: 'gridcelltemplate.html', inbound: false, outbound: true },
{ name: '1airline', field: '1manufac', displayName: '1manufac', minWith: 20, width: 50, visible: true, cellClass: self.cellClass, cellTemplate: 'gridcelltemplate.html', inbound: false, outbound: true },
{ name: '1date', field: '1date', displayName: '1date', minWith: 20, width: 50, visible: true, cellClass: self.cellClass, cellTemplate: 'gridcelltemplate.html', inbound: false, outbound: true },
{ name: '1time', field: '1time', displayName: '1time', minWith: 20, width: 50, visible: true, cellClass: self.cellClass, cellTemplate: 'gridcelltemplate.html', inbound: false, outbound: true },
{ name: '1id', field: '1trademark', displayName: '1trademark', minWith: 20, width: 100, visible: true, cellClass: self.cellClass, cellTemplate: 'gridcelltemplate.html', inbound: false, outbound: true },
{ name: '1package', field: '1package', displayName: '1package', minWith: 20, width: 50, visible: true, cellClass: self.cellClass, cellTemplate: 'gridcelltemplate.html', inbound: false, outbound: true },
{ name: '1bagage', field: '1col1', displayName: '1col1', minWith: 20, width: 50, visible: true, cellClass: self.cellClass, cellTemplate: 'gridcelltemplate.html', inbound: false, outbound: true },
{ name: '1cargo', field: '1col2', displayName: '1col2', minWith: 20, width: 50, visible: true, cellClass: self.cellClass, cellTemplate: 'gridcelltemplate.html', inbound: false, outbound: true },
{ name: '1passangers', field: '1col3', displayName: '1col3', minWith: 20, width: 100, visible: true, cellClass: self.cellClass, cellTemplate: 'gridcelltemplate.html', inbound: false, outbound: true },
{ name: '1weight', field: '1col4', displayName: '1col4', minWith: 20, width: 50, visible: true, cellClass: self.cellClass, cellTemplate: 'gridcelltemplate.html', inbound: false, outbound: true },
];
this.builddata = function () {
var someData = [];
for (var i = 0; i < 1000; i++) {
var item = {};
for (var x in self.tableColumns) {
item[self.tableColumns[x].field] = x + i + "randomdata";
}
someData.push(item);
}
setInterval(function(){
console.log("adding new");
var newRow = {};
for (var x in self.tableColumns) {
newRow[self.tableColumns[x].field] = (x + 1000) + "randomdata";
}
var min = 0;
var max = 2000;
// and the formula is:
var random = Math.floor(Math.random() * (max - min + 1)) + min;
if(self.data.length > random){
self.data[random] = newRow;
}
else{
self.data.push(newRow);
}
self.gridOptions.data = self.data; //set to update
$scope.$digest();
}, 500);
return someData;
}
this.data = self.builddata();
this.registerApi = function (gridApi) {
self.gridApi = gridApi;
};
this.gridOptions = {
data: self.data,
//virtualizationThreshold: self.data.length,//this could turn off the lazy loading, but makes it very slow.
columnDefs: self.tableColumns,
enableColumnResizing: true,
enableColumnMenus: false,
enableSorting : false,
rowTemplate: 'rowtemplate.html',
headerTemplate: 'headertemplate.html',
onRegisterApi: self.registerApi,
multiSelect: false,
enableRowHeaderSelection :false
};
};
angular.module('shitapp').controller('tableController', ['$scope', '$q', '$filter', '$templateCache', 'uiGridConstants', 'uiGridPinningConstants', tableController]);
<div role="rowgroup"
class="ui-grid-header">
<!-- theader -->
<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 role="row"
class="ui-grid-header-cell-row">
<div class="ui-grid-header-cell ui-grid-clearfix" context-menu="grid.appScope.contextHeaderMenuOptions(col)"
ng-class="{headerCombined : col.colDef.inbound && col.colDef.outbound,
headerInbound : col.colDef.inbound && !col.colDef.outbound,
headerOutbound : !col.colDef.inbound && col.colDef.outbound }"
ng-repeat="col in colContainer.renderedColumns track by col.uid"
ui-grid-header-cell
col="col"
render-index="$index">
</div>
</div>
</div>
</div>
</div>
</div>
</div>