JSFiddle - React, Tailwind, and code Playground

by RajamohanShilpa A

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ng-grid/2.0.11/ng-grid.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/ng-grid/2.0.11/ng-grid.min.css">
    <div ng-app="dynamicGridApp">
        <div ng-controller="dynamicGridCtrl">
            <div ng-grid="ngGridOptions" class="gridStyle"></div>
            <button ng-click="Test(true)">Without button</button>
            <button ng-click="Test(false)">With button</button>
        </div>
    </div>

CSS

/*style.css*/
 .gridStyle {
    border: 1px solid rgb(212, 212, 212);
    width:300px;
    height: 300px;
    float:left;
}
.select-items {
    border:solid #ddd 1px;
    display:inline-block;
    float:left;
    cursor:pointer;
    margin;
    10px;
}
.row-color {
    background-color: #be4c39 !important;
}
.row-selected-blue-green {
    color:#fff;
    background: -webkit-linear-gradient(left, #4472b9 50%, #4ca454 50%) !important;
    background: linear-gradient(left, #4472b9 50%, #4ca454 50%) !important;
    background: -moz-linear-gradient(left, #4472b9 50%, #4ca454 50%) !important;
    background: -o-linear-gradient(left, #4472b9 50%, #4ca454 50%) !important;
}
/*transparent*/
 .row-selected-blue {
    color:#fff;
    background: -webkit-linear-gradient(left, #4472b9 100%, #000000 0%) !important;
    background: linear-gradient(left, #4472b9 100%, #000000 0%) !important;
    background: -moz-linear-gradient(left, #4472b9 100%, #000000 0%) !important;
    background: -o-linear-gradient(left, #4472b9 100%, #000000 0%) !important;
}
.row-selected-green {
    color:#000;
    background: -webkit-linear-gradient(left, #4ca454 100%, #000000 0%) !important;
    background: linear-gradient(left, #4ca454 100%, #000000 0%) !important;
    background: -moz-linear-gradient(left, #4ca454 100%, #000000 0%) !important;
    background: -o-linear-gradient(left, #4ca454 100%, #000000 0%) !important;
}
.row-selected {
    color:#fff;
    background: -webkit-linear-gradient(left, transparent 100%, #000000 0%) !important;
    background: linear-gradient(left, transparent 100%, #000000 0%) !important;
    background: -moz-linear-gradient(left, transparent 100%, #000000 0%) !important;
    background: -o-linear-gradient(left, transparent 100%, #000000 0%) !important;
}

JavaScript

(function(){
    angular.module('dynamicGridApp',['ngGrid'])
    .controller('dynamicGridCtrl',function($scope){

        $scope.test = [{
            "id": 1,
            "date": "01/09/2014T00:00:00",
            "details": "test1"           
        }, {
            "id": 2,
            "date": "02/09/2014T00:00:00",
            "details": "test2"
        }, {
            "id": 3,
            "date": "03/09/2014T00:00:00",
            "details": "test3"
        }, {
            "id": 4,
            "date": "04/09/2014T00:00:00",
            "details": "test4"
        }, {
            "id": 5,
            "date": "05/09/2014T00:00:00",
            "details": "test5"
        }, {
            "id": 6,
            "date": "06/09/2014T00:00:00",
            "details": "test6"        
        }];
        
        $scope.Test=function(val){
            debugger;
            switch(val)
            {
                case true:
                    $scope.configCol=[
                        {field: "id",displayName: "ID"}, 
                        {field: "date",displayName: "Date"}, 
                        {field: "details",displayName: "Details"}];
                    break;
                case false:
            $scope.configCol=[{
                field: "id",
                displayName: "ID",
                width: "50px"                
            }, {
                field: "date",
                displayName: "Date",
                width: "100px"
            }, {
                field: "details",
                displayName: "Details"
                cellTemplate:"<div class='ngCellText' ng-class='col.colIndex()'><span ng-click='detailsClick();'></span></div>"
            }];
                    break;
            }
        };
                
$scope.detailsClick =function(){
        alert('asdasd');
    };
                
        $scope.ngGridOptions = {
            data: 'test',
            multiSelect: false,
            columnDefs: 'configCol'
       ...