JSFiddle - React, Tailwind, and code Playground

by origineil

HTML

<script type="text/html" id="read-template">
    <tr>
        <td/>
        <td data-bind="text: Type"></td>
        <td data-bind="text: Volume"></td>
        <td data-bind="text: (typeof Price === 'number') ? Price.toFixed(2) : '' "></td>      
    </tr>
</script>

<table data-bind='foreach: Grades'> 
   <tr>
     <td data-bind="text: $data"></td>
     <td colspan="10"></td>
   </tr>
       
 <tbody data-bind="template: {name: 'read-template', foreach: $root.itemsByGrade($data)}"></tbody>
</table>

JavaScript

var data = [{
    Grade: 'A',
    Type: 'Buy',
    Volume: 1000,
    Price: 10
}, {
    Grade: 'A',
    Type: 'Sell',
    Volume: 1200,
    Price: 10
}, {
    Grade: 'B',
    Type: 'Sell',
    Volume: 100,
    Price: 100
}]


vm = {
    datainput: ko.observableArray(data)
}


vm.itemsByGrade = function (base) {

    var items = ko.utils.arrayFilter(vm.datainput(), function (item) {

        return item.Grade === base
    });
    return items
}

vm.Grades = ko.computed(function () {
    var obj = {};
    var grades = ko.utils.arrayForEach(vm.datainput(), function (item) {
        obj[item.Grade] = ''
    })
    return Object.keys(obj)
});

ko.applyBindings(vm)