JSFiddle - React, Tailwind, and code Playground

by sigibb

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.3.5/knockout.mapping.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div data-bind="with: rows.selectedItem">test <pre data-bind="text: JSON.stringify(ko.toJSON($data))"></pre>

    <input data-bind="value:Id" /> <b>ID:</b>  <span data-bind="text: Id"></span>
 <b>Road Name:</b>  <span data-bind="text:Road_Name"></span>

</div>
<div data-bind="visible: rows.selectedItem == null">No selection was made</div>
<div id="listPlaceholder">
    <table>
        <thead>
            <tr>
                <th>Link</th>
                <!-- ko foreach: $root.visibleColumns -->
                <th data-bind="text: HeaderName, visible: Visible"></th>
                <!-- /ko -->
            </tr>
        </thead>
        <tbody data-bind="foreach: $root.rows">
            <tr data-bind="click: $data.setSelectedItem">
                <td><a href="" data-bind="attr: {href: HrefDetailsPage}">Details</a>

                </td>
                <!-- ko foreach: $root.visibleColumns -->
                <td data-bind="text: $parent[ColumnName()], visible: Visible"></td>
                <!-- /ko -->
            </tr>
        </tbody>
    </table>
</div>

CSS

table {
    border-collapse: collapse;
}
th, td {
    border: 1px solid silver;
}
ul.plain {
    list-style: none;
    padding: 0;
}

JavaScript

var columnDefs = [{
      "$id": "1",
          "ColumnName": "Id",
          "system_type_id": 56,
          "primaryCol": 1
  }, {
      "$id": "2",
          "ColumnName": "Inv_Id",
          "system_type_id": 231,
          "primaryCol": 0
  }, {
      "$id": "3",
          "ColumnName": "ACX_No",
          "system_type_id": 175,
          "primaryCol": 0
  }, {
      "$id": "4",
          "ColumnName": "ACX_Name",
          "system_type_id": 175,
          "primaryCol": 0
  }, {
      "$id": "5",
          "ColumnName": "S_No",
          "system_type_id": 175,
          "primaryCol": 0
  }, {
      "$id": "27",
          "ColumnName": "Acc_Class",
          "system_type_id": 231,
          "primaryCol": 0
  }, {
      "$id": "28",
          "ColumnName": "Direction",
          "system_type_id": 231,
          "primaryCol": 0
  }];

  var rowDefs = [{
      "$id": "1",
          "Id": 1,
          "Inv_Id": "PV0001-1",
          "ACX_No": "6",
          "ACX_Name": "ABC",
          "S_No": "5",
          "Acc_Class": "Local",
          "Direction": "Two-Way"
  }, {
      "$id": "2",
          "Id": 2,
          "Inv_Id": "PV0002-1",
          "ACX_No": "3",
          "ACX_Name": "CKD",
          "S_No": "6",
          "Acc_Class": "Local",
          "Direction": "Two-Way"
  }];

  function HeaderViewModel(data, parent) {
      var self = this,
          nbsp = String.fromCharCode(160);

      // observables
      ko.mapping.fromJS(data, {}, self);
      //self.isVisible = ko.observable(true);

      // computeds
      self.isVisible = ko.computed(function () {
          //console.log('data.ColumnName.indexOf(\'SYS\'):', data.ColumnName.indexOf('SYS'));
          return data.ColumnName.indexOf('SYS') >= 0 ? false : true;
      });
      self.HeaderName = ko.computed(function () {
          return data.ColumnName.replace('_', nbsp);
      });
      self.SystemField = ko.computed(function () {
          return data.ColumnName.indexOf('SYS');
      });
     ...