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="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ng-grid/2.0.11/ng-grid.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ng-grid/2.0.11/ng-grid.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.2/moment.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.10.0/ui-bootstrap.js"></script>
<div ng-app="sampleApp">
  <div ng-controller="sampleController">
    <div class="col-md-12 col-lg-12 col-sm-12 col-xsml-12">
      <label>Search</label>
      <input type="text" class="form-control" ng-model="searchFilter" />
    </div>
    <div class="col-md-12 col-lg-12 col-sm-12 col-xsml-12">
      <div class="col-md-2 col-lg-2 col-sm-2 col-xsml-2">
        <h4>Id</h4>

      </div>
      <div class="col-md-4 col-lg-4 col-sm-4 col-xsml-4">
        <h4>Details</h4>

      </div>
      <div class="col-md-2 col-lg-2 col-sm-2 col-xsml-2 text-right">
        <h4>Quantity</h4>

      </div>
      <div class="col-md-2 col-lg-2 col-sm-2 col-xsml-2 text-right">
        <h4>Price</h4>

      </div>
      <div class="col-md-2 col-lg-2 col-sm-2 col-xsml-2 text-right">
        <h4>Total</h4>

      </div>
      <div ng-repeat="item in items">
        <div class="col-md-2 col-lg-2 col-sm-2 col-xsml-2">{{item.id}}</div>
        <div class="col-md-4 col-lg-4 col-sm-4 col-xsml-4">{{item.details}}</div>
        <div class="col-md-2 col-lg-2 col-sm-2 col-xsml-2 text-right">{{item.quantity}}</div>
        <div class="col-md-2 col-lg-2 col-sm-2 col-xsml-2 text-right">{{item.price}}</div>
        <div class="col-md-2 col-lg-2 col-sm-2 col-xsml-2 text-right">{{item.quantity * item.price}}</div>
      </div>
      <div...

CSS

@media (min-width: 400px) {
  .col-xsml-1,
  .col-xsml-2,
  .col-xsml-3,
  .col-xsml-4,
  .col-xsml-5,
  .col-xsml-6,
  .col-xsml-7,
  .col-xsml-8,
  .col-xsml-9,
  .col-xsml-10,
  .col-xsml-11,
  .col-xsml-12 {
    float: left;
  }
  .col-xsml-12 {
    width: 100%;
  }
  .col-xsml-11 {
    width: 91.66666667%;
  }
  .col-xsml-10 {
    width: 83.33333333%;
  }
  .col-xsml-9 {
    width: 75%;
  }
  .col-xsml-8 {
    width: 66.66666667%;
  }
  .col-xsml-7 {
    width: 58.33333333%;
  }
  .col-xsml-6 {
    width: 50%;
  }
  .col-xsml-5 {
    width: 41.66666667%;
  }
  .col-xsml-4 {
    width: 33.33333333%;
  }
  .col-xsml-3 {
    width: 25%;
  }
  .col-xsml-2 {
    width: 16.66666667%;
  }
  .col-xsml-1 {
    width: 8.33333333%;
  }
}

JavaScript

angular.module("sampleApp", [])
  .filter('sumOfValue', function() {
    return function(data, key) {
      debugger;
      if (angular.isUndefined(data) || angular.isUndefined(key))
        return 0;
      var sum = 0;

      angular.forEach(data, function(v, k) {
        sum = sum + parseInt(v[key]);
      });
      return sum;
    }
  }).filter('totalSumPriceQty', function() {
    return function(data, key1, key2) {
      if (angular.isUndefined(data) || angular.isUndefined(key1) || angular.isUndefined(key2))
        return 0;

      var sum = 0;
      angular.forEach(data, function(v, k) {
        sum = sum + (parseInt(v[key1]) * parseInt(v[key2]));
      });
      return sum;
    }
  }).controller("sampleController", function($scope) {
    $scope.items = [{
      "id": 1,
      "details": "test11",
      "quantity": 2,
      "price": 100
    }, {
      "id": 2,
      "details": "test12",
      "quantity": 5,
      "price": 120
    }, {
      "id": 3,
      "details": "test3",
      "quantity": 6,
      "price": 170
    }, {
      "id": 4,
      "details": "test4",
      "quantity": 8,
      "price": 70
    }, {
      "id": 5,
      "details": "test5",
      "quantity": 2,
      "price": 160
    }, {
      "id": 6,
      "details": "test6",
      "quantity": 9,
      "price": 100
    }]
  });