JSFiddle - React, Tailwind, and code Playground

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">
<script src="//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="//cdnjs.cloudflare.com/ajax/libs/angular-ui-calendar/0.8.0/calendar.js"></script>
<script src="//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 resultValue=(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...

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) {
        if (typeof (data) === 'undefined' && typeof (key) === 'undefined') {
            return 0;
        }
        var sum = 0;
        for (var i = 0; i < data.length; i++) {
            sum = sum + parseInt(data[i][key]);
        }
        return sum;
    }
})
    .filter('totalSumPriceQty', function () {
    return function (data, key1, key2) {        
        if (typeof (data) === 'undefined' && typeof (key1) === 'undefined' && typeof (key2) === 'undefined') {
            return 0;
        }
        var sum = 0;
        for (var i = 0; i < data.length; i++) {
            sum = sum + (parseInt(data[i][key1]) * parseInt(data[i][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
    }]

});