JSFiddle - React, Tailwind, and code Playground

by dingen2010

HTML

<!DOCTYPE html>

    <head lang="en">
        <link rel="stylesheet" type="text/css" href="http://angular-ui.github.com/ng-grid/css/ng-grid.css" />
        <style>
            .gridStyle {
                border: 1px solid rgb(212, 212, 212);
                width: 400px;
                height: 300px;
            }
            .ngCellText.right {
                text-align: right;
                background-color: grey;
            }
            .ngCellText.left {
                text-align: left;
                background-color: grey;
            }
            .ngCellText.center, .ngHeaderCell .center {
                text-align: center;
            }
            .green {
                color: green;
            }
        </style>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>

        <script type="text/javascript" src="http://angular-ui.github.com/ng-grid/lib/ng-grid.debug.js"></script>
        <script type="text/javascript" src="main.js">
            
        </script>
    </head>
    
    <body ng-app="myApp" ng-controller="MyCtrl">
        <div class="gridStyle" ng-grid="gridOptions"></div>
    </body>

</html>

JavaScript

var app = angular.module('myApp', ['ngGrid']);
app.controller('MyCtrl', function ($scope) {
    $scope.myData = [{
        codea: "A",
        codeb: 50,
        codec: 11
    }, {
        codea: "B",
        codeb: 43,
        codec: 11
    }, {
        codea: "C",
        codeb: 27,
        codec: 11
    }, {
        codea: "D",
        codeb: 29,
        codec: 11
    }, {
        codea: "E",
        codeb: 34,
        codec: 11
    }];

    //var cellEditableTemplate = "<input ng-class=\"{right: 1==1}\" ng-input=\"COL_FIELD\" ng-model=\"COL_FIELD\" ng-change=\"alert(\"'hi\"')\"/>";
    var cellEditableTemplate = "<input ng-class=\"'colt' + col.index\" ng-input=\"COL_FIELD\" ng-model=\"COL_FIELD\" ng-change=\"updateEntity(row.entity)\"/>";

    $scope.gridOptions = {
        data: 'myData',
        enableCellSelection: true,
        enableCellEditOnFocus: true,
        enableRowSelection: false,
        columnDefs: [{
            field: 'codea',
            editableCellTemplate: cellEditableTemplate
        }, {
            field: 'codeb'
        }, {
            field: 'codec'
        }]
    };

    //console.log($scope.myData);
});