JSFiddle - React, Tailwind, and code Playground

by KARTHIKEYAN K

HTML

<body ng-controller="MainCtrl">
<!--page header-->
<div class="container-fluid">
    <div class="page-header">
        <h1 style="font-size: 1.75em;font-weight:inherit">Euda portal</h1>
    </div>
</div>
<div class="container-fluid">
    <div class="col-lg-12">
        <div class="row">
            <ol class="breadcrumb">
                <li><a href="#">Home</a></li>
                <li class="active" style="color:#333">View</li>
            </ol>
        </div>
    </div>
</div>

<div class="container-fluid">
    <div class="col-lg-6">
        <div class="row">
            <h2>All Tickets</h2>
            <p>All Tickets that you have permission to view</p>
            <h4 style="padding-top:20px;">
                <span>Search:</span>
                <span><strong>None</strong></span>
                <span>|</span>
                <span class="items"><a href="#">Change Filter</a></span>
                <span class="items"><a href="#">Refresh</a></span>
                <span class="items"><a href="#">Export</a></span>
            </h4>
        </div>
    </div>
    <div class="col-lg-6">
        <div class="row">
            <div class="col-lg-3 pull-right clearfix">
                <div class="well">
                    <h4 ng-bind="grid2data.length"></h4>
                    <h4>Tickets</h4>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="container-fluid">
    <div class="col-lg-12">
        <div class="row">
            <div ui-grid="gridOptions1" ui-grid-pagination class="grid"></div>
        </div>
    </div>
</div>
<!--compiled and  minified javaScript files-->
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="bower_components/angular/angular.min.js"></script>
<script src="bower_components/angular-ui-grid/ui-grid.min.js"></script>
<script...

CSS

.page-header h1 {
    font-size: 24px;
}

.page-header {
    margin-top: 10px;
}

.breadcrumb {
    background-color: white;
    padding: 0px;
    margin-top: -15px;
    font-family: "Segoe UI", "Segoe WP", "Helvetica Neue", sans-serif;
}

.grid {
    width: 100%;
    height: 400px;
    border-radius: 3px;

}

#loading-bar .bar {
    background-color: blue;
}

.cls {
    font-weight: normal;
    border-right: 1px solid inherit;
}

.ui-grid-grid-footer {
    padding-top: 5px;
    float: right;
    width: 100%;
}

.ui-grid-pager-panel {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    padding-top: 3px;
    padding-bottom: 3px;
}

.ui-grid-pager-container {
    position: absolute;
    bottom: 10px;
    right: 0px;

}

.ui-grid-pager-control {
    margin-right: 10px;
    margin-left: 10px;
    min-width: 135px;
    float: left;
}

.breadcrumb > li {
    padding-right: 10px;
}

body {
    font-family: "Segoe UI", "Segoe WP", "Helvetica Neue", sans-serif;
    font-size: 14px;
    color: #333;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-weight: 100;
    font-family: "Segoe UI", "Segoe WP", "Helvetica Neue", sans-serif;

}

.items {
    margin-right: 30px;
}

.well {
    background-color: MediumTurquoise;
    text-align: center;
    height: 140px;
    width: 140px;
    border: none;
    border-radius: 0px;
    color: white;
}

JavaScript

/**
 * Created by USER on 20/05/2017.
 */
var app = angular.module('app', ['ui.grid', 'ui.grid.pagination', 'angular-loading-bar']);

app.controller('MainCtrl', ['$scope', '$http', function ($scope, $http) {
    $scope.gridOptions1 = {
        enableSorting: true,
        enableGridMenu: true,
        showGridFooter: true,
        enableFiltering: true,
        paginationPageSizes: null,
        useCustomPagination: true,
        useExternalPagination: true,
        columnDefs: [{field: 'REF_ID', displayName: 'Id', resizable: false, width: "10%", headerCellClass: 'cls'},
            {field: 'NAME', displayName: 'Name', resizable: false, width: "*", headerCellClass: 'cls'},
            {field: 'REPORTED_BY', displayName: 'Reported By', resizable: false, width: "*", headerCellClass: 'cls'},
            {field: 'SUBMITTED_BY', displayName: 'Submitted By', resizable: false, width: "*", headerCellClass: 'cls'},
            {field: 'STATE', displayName: 'Incident State', resizable: false, width: "*", headerCellClass: 'cls'},
            {field: 'IMPACT', displayName: 'Impact', resizable: false, width: "*", headerCellClass: 'cls'},
            {field: 'URGENCY', displayName: 'Urgency', resizable: false, width: "*", headerCellClass: 'cls'},
            {field: 'PRIORITY', displayName: 'Priority', resizable: false, width: "*", headerCellClass: 'cls'},
            {field: 'ASSIGNED_TO', displayName: 'Assigned To', resizable: false, width: "*", headerCellClass: 'cls'},
            {
                field: 'INCIDENT_CREATED',
                displayName: 'Incident Created',
                resizable: false,
                width: "*",
                headerCellClass: 'cls'
            }],
        onRegisterApi: function (gridApi) {
            gridApi.pagination.on.paginationChanged($scope, function (pageNumber, pageSize) {
                $scope.gridOptions1.data = getPage($scope.grid2data, pageNumber);
            });
        }
    };
   ...