Simple angularjs-ux-datagrid example

by Wes Jones

HTML

<script src="https://rawgithub.com/webux/ux-angularjs-datagrid/master/build/latest/angular-ux-datagrid.js"></script>
<div data-ng-controller="simpleArray" data-ux-datagrid="items" class="datagrid">
    <script type="template/html" data-template-name="default" data-template-item="item">
        <div class="row"><span>{{item.id}}</span></div>
    </script>
</div>

CSS

html, body {
    margin: 0px;
    padding: 0px;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.datagrid {
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    bottom: 10px;
    overflow: auto;
    border:1px solid #000000;
}

.datagrid-content {
    height: auto;
}

.datagrid-row > * {
    -webkit-transition: opacity 0.5s ease-out;
    -moz-transition: opacity 0.5s ease-out;
    -ms-transition: opacity 0.5s ease-out;
    -o-transition: opacity 0.5s ease-out;
    transition: opacity 0.5s ease-out;
}

.uncompiled > * {
    visibility: hidden;
    opacity: 0;
}

.compiled > * {
    opacity: 1;
}

.datagrid-chunk {
    opacity: 0;
    -webkit-transition: opacity 0.5s ease-out;
    -moz-transition: opacity 0.5s ease-out;
    -ms-transition: opacity 0.5s ease-out;
    -o-transition: opacity 0.5s ease-out;
    transition: opacity 0.5s ease-out;
}

.datagrid-chunk-ready {
    opacity: 1;
}

/*The rows above are standard use of the grid, now below we can style the rows in the grid */
.row {
    background-color:#FFF;
    height: 20px;
    line-height: 20px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
.row:nth-child(odd) {
    background-color:#F6F6F6;
}

JavaScript

window.simpleArray = function ($scope) {
    var i = 0, records = 100;
    $scope.items = [];
    while (i < records) {
        $scope.items.push({id: i});
        i += 1;
    }
};

angular.module('app', ['ng', 'ux']);
angular.bootstrap(document, ['app']);