JSFiddle - React, Tailwind, and code Playground

by Ekaterina Klimovich

HTML

<link rel="stylesheet" href="https://ironsummitmedia.github.io/startbootstrap-simple-sidebar/css/bootstrap.min.css">
<link rel="stylesheet" href="https://ironsummitmedia.github.io/startbootstrap-simple-sidebar/css/simple-sidebar.css">
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular-touch.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular-animate.js"></script>
<script src="https://ui-grid.info/docs/grunt-scripts/csv.js"></script>
<script src="https://ui-grid.info/docs/grunt-scripts/vfs_fonts.js"></script>
<script src="https://ui-grid.info/release/ui-grid.js"></script>
<link rel="stylesheet" href="https://ui-grid.info/release/ui-grid.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.0/ui-bootstrap-tpls.min.js"></script>
<body  ng-app="app">
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">Project name</a>
            <div class="nav navbar-nav navbar-right">
                <label class="btn btn-default" for="menu-toggle">
                    <i class="glyphicon glyphicon-th-list"></i></label>
            </div>
        </div>
        <div class="navbar-collapse collapse" style="height: 0.909090876579285px;">
            <ul class="nav...

CSS

#wrapper {
        padding-top: 50px;
        height: 100%;
    }

    .table{
        display: table;
    }
    .table-cell{
        display: table-cell;
    }
    .table-row{
        display: table-row;
    }

    .search-div{
        padding: 10px 0;
        height: 60px;
    }

    html,body{
        height: 100%;
        overflow: hidden;
    }
    .main-window{
        padding: 0;
        background-color: #3F669F;
        height: 100%;
    }
    #page-content-wrapper{
        padding: 0;
        height: 100%;
    }
    .table,
    .container-fluid,
    .container-fluid>div,
    .container-fluid>div>div{
        height: 100%;
    }
#menu-toggle:checked~div#wrapper>#sidebar-wrapper{
    width: 0;
}
#menu-toggle:checked~div#wrapper{
     padding-left: 0;
    width: 100%;
        
}

JavaScript

var app = angular.module('app', ['ngTouch', 'ui.grid']);

app.controller('MainCtrl', ['$scope', '$http', function ($scope, $http) {
    $scope.gridOptions = {
    };

    $scope.gridOptions.columnDefs = [
        {name:'id'},
        {name:'name'},
        {field:'age'}, // showing backwards compatibility with 2.x.  you can use field in place of name
        {name: 'address.city'},
        {name: 'age again', field:'age'}
    ];
    $scope.gridOptions.showHeader = false;
    $scope.gridOptions.enableRowSelection = true;
    $scope.gridOptions.multiSelect = false;
    $scope.gridOptions.noUnselect = true;
    $scope.gridOptions.enableHorizontalScrollbar = false;

$http.get('data.json')
        .success(function(data) {
            $scope.gridOptions.data = data;
        });
}]);