JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
        <table class="table table-hover">
            <thead>
                <tr>
                    <th>Tag ID</th>
                    <th>Tag name</th>
                    <th>Task ID</th>
                    <th>Task name</th>
                </tr>
            </thead>
            <tbody>
                <!-- ko foreach: filteredtagMappings -->
                <tr>
                    <td class="ui-state-default" data-bind="text: TagID"></td>
                    <td class="ui-state-default" data-bind="text: TagName"></td>
                    <td></td>
                </tr>
                <!-- /ko -->         
            </tbody>
        </table>
        
 <hr />
 
         <table class="table table-hover">
            <thead>
                <tr>
                    <th>Tag ID</th>
                    <th>Tag name</th>
                    <th>Task ID</th>
                    <th>Task name</th>
                </tr>
            </thead>
            <tbody>                
                <!-- ko foreach: filteredtagMappings2 -->
                <tr>
                    <td></td>
                    <td class="ui-state-default" data-bind="text: $data"></td>
                    <td></td>
                </tr>
                <!-- /ko -->                
            </tbody>
        </table>

JavaScript

var viewModel = function(data) {
    var self = this;
   
    self.tagTaskMappings = ko.observableArray([
   	{TagID: 2, TagName: "A", TaskID: 1, TaskName: "ManualItems"},
    {TagID: 2, TagName: "A", TaskID: 2, TaskName: "Trades"},
    {TagID: 3, TagName: "B", TaskID: 1, TaskName: "ManualItems"},
    {TagID: 3, TagName: "B", TaskID: 2, TaskName: "Trades"},
    {TagID: 3, TagName: "B", TaskID: 3, TaskName: "Cash"},
    {TagID: 3, TagName: "B", TaskID: 4, TaskName: "ReportA"}
    ]); 
    
    self.filteredtagMappings = ko.computed(function () {
        var types = ko.utils.arrayMap(self.tagTaskMappings(), function (item) {
            return { TagID: item.TagID, TagName: item.TagName, IsTagActive: item.IsTagActive};
        });        
        return ko.utils.arrayGetDistinctValues(types).sort();
    }, this);
    
    self.filteredtagMappings2 = ko.computed(function () {
        var types = ko.utils.arrayMap(self.tagTaskMappings(), function (item) {
            return item.TagName;
        });        
        return ko.utils.arrayGetDistinctValues(types).sort();
    }, this);    
   
};

ko.applyBindings(new viewModel());