JSFiddle - React, Tailwind, and code Playground

by marco_m_alves

HTML

<script src="http://code.angularjs.org/0.9.19/angular-0.9.19.js" ng:autobind></script>

This grid has a header column
<grid class="grid" headers="column">
    Widgets        | widgets are like new html elements ...
    Markup         | markup is what x is to y ...
    Directives     | directives are orders ...
    Other stuff... | to be defined ...
</grid>

<br/>
<br/>

This grid has a header column and a header row
<grid class="grid" headers="row, column">
    Concept        | Attr 1 | Attr 2 | Attr 3
    Markup         | yes    | no     | no
    Directives     | yes    | no     | no
    Other stuff... | no     | no     | no
</grid>

<br/>
<br/>

This grid should have a 3x3 table with values 1 to 9
<div ng:controller='GridCtrl'>
<grid class="grid">
   {{data[0][0]}} | {{data[0][1]}} | {{data[0][2]}}
   {{data[1][0]}} | {{data[1][1]}} | {{data[1][2]}}
   {{data[2][0]}} | {{data[2][1]}} | {{data[2][2]}}
</grid>
</div>

CSS

.grid { border: thin solid lightgrey;}

.grid tr { border-bottom: thin solid lightgrey;}

.grid td { font-family: Arial; font-size: small; padding: 10px;}

.grid .header { background-color: whitesmoke; }

JavaScript

angular.widget('grid', function(expression, compileElement) {
    var compiler = this;
    this.descend(true);
    this.directives(true);
    
    // style for the table
    var style = compileElement.attr('class');
    
    // determine if is an header row and/or column
    var headers = compileElement.attr('headers');
    var hasHeaderRow = false; 
    var hasHeaderColumn = false; 
    
    if (headers !== undefined) {
        hasHeaderRow = headers.indexOf('row') != -1;
        hasHeaderColumn =  headers.indexOf('column') != -1;
    }
    
    // parse data
    var lines = compileElement.html().split('\n');
    var rows = [];
   
    for (var line in lines) {
        rows[line] = [];
        var cells = lines[line].split('|');
        for (var cell in cells) {
             rows[line].push(cells[cell]);
        }
    }    
    
    //console.log(rows);
    
    return function(linkElement) {
    
        var table = document.createElement("table");
        table.className = style;
        
        //for (var x in table) console.log(x);
        
        for (var row in rows) {
            
            if (row == 0 || row == rows.length - 1) continue;
            
            var tr = document.createElement("tr");
            
            if (row == 1 && hasHeaderRow) tr.className = 'header';
         
            for (var i = 0; i < rows[row].length; i++) {  
                
                var td = document.createElement('td');
                
                var textNode = document.createTextNode(rows[row][i]);
                
                td.appendChild(textNode);
                
                if (i == 0 && hasHeaderColumn) td.className = 'header';
                
                tr.appendChild(td);
                
            }
            
            table.appendChild(tr);
            
            
        }
        
        linkElement.replaceWith(table);
        
    };
});


// Controlls the last grid
function GridCtrl() {
    var scope =...