Tables (with Divs) angularjs-ux-datagrid example

How to make the datagrid perform like tables.

by Wes Jones

HTML

<script src="https://rawgithub.com/webux/ux-angularjs-datagrid/master/build/latest/angular-ux-datagrid.js"></script>
<div ng-controller="simpleArray" class="layout">
    <div class="datagridHeader group">
        <div class="col col1">Path</div>
        <div class="col col2">ID</div>
        <div class="col col4">CT</div>
        <div class="col col3">Height</div>
        <div class="col col5">Input</div>
    </div>
    <div ux-datagrid="items" class="datagrid" data-grouped="'children'">
        <script type="template/html" data-template-name="group" data-template-item="item">
            <div class="group {{fake}}">
                <div class="col col1">{{item.id}}</div>
                <div class="col col2">{{$id}}</div>
                <div class="col col4">{{counter}}</div>
                <div class="col col3">height 20px</div>
                <div class="col col5"></div>
            </div>
        </script>
        <script type="template/html" data-template-name="default" data-template-item="item">
            <div class="row {{fake}}">
                <div class="col col1">{{item.id}}</div>
                <div class="col col2">{{$id}}</div>
                <div class="col col4">{{counter}}</div>
                <div class="col col3">height 40px</div>
                <div class="col col5"><input type="text"></div>
             </div>
         </script>
         <script type="template/html" data-template-name="sub" data-template-item="item">
             <div class="sub {{fake}}">
                 <div class="col col1">{{item.id}}</div>
                 <div class="col col2">{{$id}}</div>
                 <div class="col col4">{{counter}}</div>
                 <div class="col col3">height 30px</div>
                 <div class="col col5"><input type="text"></div>
              </div>
          </script>
     </div>
 </div>

CSS

html, body {
    margin: 0px;
    padding: 0px;
    width: 100%;
    height: 100%;
}
/**************** LAYOUT ****************************/
.layout {
    position: absolute;
    top: 20px;
    left: 20px;
    right: 20px;
    bottom: 20px;
    margin: auto;
    border: 1px solid #336699;
}

/**************** Datagrid Header *******************/
.datagridHeader {
    width: 100%;
    height: 20px;
}

/**************** Standard Datagrid CSS *************/
.datagrid {
    position: absolute;
    top: 20px;
    left: 0px;
    right: 0px;
    bottom: 0px;
}
.row {
    height: 16px;
    background-color: #FFFFFF;
    border-bottom: 1px solid #000000;
}

/****************** Row Colors and Heights **********/
.group {
    background-color:#333333;
    height: 20px;
    font-size: 12px;
    font-weight: bold;
    color: #FFFFFF;
    line-height: 20px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.overlay {
    position: absolute;
    top: 0px;
    left: 0px;
    background-color: #FFFFFF;
    width: 100%;
    height: 100%;
}

.row {
    background-color:#efefef;
    height: 40px;
    line-height: 40px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
.row:nth-child(odd) {
    background-color:#dfdfdf;
}

.row > div {
    /*display: inline-block;*/
}

.sub {
    background-color:#99CCFF;
    height: 30px;
    line-height: 30px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
.sub:nth-child(odd) {
    background-color:#AADDFF;
}

.sub > div {
    /*display: inline-block;*/
}

/****************** CSS FOR FADING IN ROWS AND CHUNKS and hiding them when they are not yet compiled **********/
.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:...

JavaScript

function createGroupedList(len) {
    var i = 0, group, rand, items = [];
    len = len || records;
    while (i < len) {
        rand = Math.random();
        rand = rand >= 0.8 ? rand : 0;
        if (!group || Math.round(rand)) {
            items.push(group = {
                id: (items.length + 1) + '',
                name: 'Group ' + (items.length + 1),
                _template: 'group',
                children: []
            });
        }
        group.children.push({id: group.id + '.' + group.children.length, children: [], _template: Math.round(Math.random()) ? 'sub' : 'default'});
        i += 1;
    }
    return items;
}

window.simpleArray = function ($scope) {
    var i = 0, records = 100;
    $scope.items = createGroupedList(200);
};

angular.module('ux').factory('overrides', function () {
    // the datagrid instance is passed to every addon
    return function (dg) {
        // override the default dg.templateModel.getTemplate which looks for an _template property
        // on each item to determine it's template. Replace it with ours that will make odd numbers
        // have the alternate template.
        dg.templateModel.getTemplate = function (item) {
            var name = 'default';
            if (item.id % 2) {
                name = 'alternate';
            }
            return dg.templateModel.getTemplateByName(name);
        };
    }
});

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