JSFiddle - React, Tailwind, and code Playground

by Diogo Soares

HTML

<script src="http://alasql.org/console/alasql.min.js"></script>
<div ng-app>
<div ng-controller="myCtrl">
    <button ng-click="exportData()">Export</button>
    <br />
    <div id="exportable">
    <table width="100%">
        <thead>
            <tr>
                <th>Name</th>
                <th>Email</th>
                <th>DoB</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="item in items">
                <td>{{item.name}}</td>
                <td>{{item.email}}</td>
                <td>{{item.dob | date:'MM/dd/yy'}}</td>
            </tr>
        </tbody>
    </table>
    </div>
</div>
</div>

JavaScript

function myCtrl($scope) {
    var mystyle = {
        sheetid: 'My Big Table Sheet',
        headers: true,
        caption: {
          title:'My Big Table',
          style:'font-size: 50px; color:blue;' // Sorry, styles do not works
        },
        style:'background:#00FF00',
        column: {
          style:'font-size:30px'
        },
        columns: [
          {columnid:'email'},
          {columnid:'dob', title: 'Birthday', width:300},
          {columnid:'name'},
          {
            columnid:'name',
            title: 'Number of letters in name',
            width: '300px',
            cell: {
              value: function(value){return value.length}
            }
          },
        ],
        row: {
          style: function(sheet,row,rowidx){
            return 'background:'+(rowidx%2?'red':'yellow');
          }
        },
        rows: {
          4:{cell:{style:'background:blue'}}
        },
        cells: {
          2:{
            2:{
              style: 'font-size:45px;background:pink',
              value: function(value){return value.substr(1,3);}
            }
          }
        }
    };

    
    
    $scope.exportData = function () {
        alasql('SELECT * INTO XLS("john.xls",?) FROM ?',[mystyle,$scope.items]);
    };
    
    $scope.items = [{
        name: "John Smith",
        email: "[email protected]",
        dob: "1985-10-10"
    }, {
        name: "Jane Smith",
        email: "[email protected]",
        dob: "1988-12-22"
    }, {
        name: "Jan Smith",
        email: "[email protected]",
        dob: "2010-01-02"
    }, {
        name: "Jake Smith",
        email: "[email protected]",
        dob: "2009-03-21"
    }, {
        name: "Josh Smith",
        email: "[email protected]",
        dob: "2011-12-12"
    }, {
        name: "Josh Smith",
        email: "[email protected]",
        dob: "2011-12-12"
    }, {
        name: "Josh Smith",
        email: "[email protected]",
        dob:...