JSFiddle - React, Tailwind, and code Playground

Datagrid for Ubigreen

by Zonedark

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<div ng-controller="MyCtrl">
   <div style="width:1800px;height:800px;background:rgb(238, 238, 238);overflow: auto">
      <div class="container">
         <div>
            <input class="searchbox" ng-model="searchText" />
            <h3>
            Title here
        </h3>
         </div>
         <table class="datagrid">
            <th>
            </th>
            <th ng-repeat="column in Columns">
				
               {{column.Title}}
					 <i class="fa fa-sort-desc" ng-click="applysorting(column.PropertyName, true); Order = false" style="cursor:pointer" ng-init="Order = true" ng-show="Order == true"></i>
				 <i class="fa fa-sort-asc" ng-click="applysorting(column.PropertyName, false); Order = true" style="cursor:pointer" ng-show="Order == false"></i>
            </th>
            <tr ng-init="Selected = false" ng-repeat="template in PagedTemplates[CurrentPage]" ng-click="Selected = !Selected" ng-class="{Selected:Selected}">
               <td>
                  <input type="checkbox" style="text-align:middle" ng-init="Selected = false" ng-click="Selected = !Selected" ng-class="{Selected:Selected}" ng-model="Selected">
               </td>
               <td ng-repeat="column in Columns">
                  {{template[column.PropertyName]}}
               </td>
            </tr>

         </table>
         <div class="bottomRowTable">
            <div class="bottomTableFooter">
               <div class="piece">
                  Lignes par page : {{ElementPerPage}}
               </div>
               <div class="piece">
                  {{(CurrentPage * ElementPerPage) + 1}} - {{Math.min((CurrentPage+1) * ElementPerPage, FilteredElements.length)}} de...

CSS

.searchbox {
   position: absolute;
   right: 0;
   margin-right: 10px;
}

.bottomTableFooter {
   float: right;
}

.piece {
   display: table-cell;
   padding: 5px 30px 5px 10px;
}

.bottomRowTable {
   border-bottom: solid 1px lightgrey;
   background-color: white;
   width: 100%;
}

.Selected {
   background-color: #66FF99;
}

.datagrid td:first-child,
th:first-child {
   text-align: center;
   border: none;
}

.datagrid td:nth-child(2),
th:nth-child(2) {
   text-align: left;
   border: none;
}

.datagrid td,
th {
   text-align: right;
   padding: 0 12px 0 12px;
}

.datagrid tr {
   border-top: solid 1px lightgrey;
   line-height: 37px;
}

.datagrid td {
   color: rgb(102, 117, 163);
}

.datagrid th {
   font-weight: normal;
   color: rgb(183, 183, 183);
}

.datagrid {
   border-top: solid 2px lightgrey;
   border-bottom: solid 2px lightgrey;
   width: 100%;
   height: 100%;
}

.container h3 {
   padding-left: 30px;
}

.container {
   //border: solid 2px black;
   -moz-box-shadow: 0px 2px 3px 1px #c0c0c0;
   -webkit-box-shadow: 0px 2px 3px 1px #c0c0c0;
   -o-box-shadow: 0px 2px 3px 1px #c0c0c0;
   box-shadow: 0px 2px 3px 1px #c0c0c0;
   filter: progid: DXImageTransform.Microsoft.Shadow(color=#c0c0c0, Direction=180, Strength=3);
   -moz-border-radius: 2px;
   -webkit-border-radius: 2px;
   border-radius: 2px;
   margin-left: 10px;
   margin-top: 10px;
   vertical-align: middle;
   padding-left: 20px;
   background-color: white;
   padding: 0;
   position: relative;
}

JavaScript

var myApp = angular.module('myApp', []);

myApp.controller('MyCtrl', ['$scope', '$filter', function($scope, $filter) {
   //////////////////////////////////////////////////////
   //BELOW : Datagrid properties to initialize
	$scope.Math = window.Math;
   $scope.searchText = "";
   $scope.ElementPerPage = 7;
   $scope.CurrentPage = 0;
   $scope.FilteredElements = undefined;
	$scope.PagedTemplates = undefined;
   $scope.Columns = [{
      Title: "Nom du template",
      PropertyName: "Name"
   }, {
      Title: "Date création",
      PropertyName: "Date"
   }, {
      Title: "Auteur du template",
      PropertyName: "Auteur"
   }];
   /////////////////////////////////////////////////////////
   $scope.Templates = [{
      Name: "Mode électricité générale",
      Date: "19/01/2016",
      Auteur: "Mathieu SENTIS"
   }, {
      Name: "Mode eau générale",
      Date: "19/01/2016",
      Auteur: "Administrator"
   }, {
      Name: "Mode consommation eau",
      Date: "19/01/2016",
      Auteur: "Mathieu LEITAO"
   }, {
      Name: "Mode gestion température",
      Date: "19/01/2016",
      Auteur: "Jan GUNTHER"
   }, {
      Name: "Mode consommation électricité spécifique6",
      Date: "19/01/2016",
      Auteur: "Jean-Marie DUPONT6"
   }, {
      Name: "Mode consommation électricité spécifique5",
      Date: "19/01/2016",
      Auteur: "Jean-Marie DUPONT4"
   }, {
      Name: "Mode consommation électricité spécifique4",
      Date: "19/01/2016",
      Auteur: "Jean-Marie DUPONT3"
   }, {
      Name: "Mode consommation électricité spécifique3",
      Date: "19/01/2016",
      Auteur: "Jean-Marie DUPONT2"
   }, {
      Name: "Mode consommation électricité spécifique2",
      Date: "19/01/2016",
      Auteur: "Jean-Marie DUPONT5"
   }, {
      Name: "Mode consommation électricité spécifique1",
      Date: "19/01/2016",
      Auteur: "Jean-Marie DUPONT1"
   }, ];

   //BELOW : Datagrid functionalities
   $scope.applyfilter = function(newValue) {
     ...