JSFiddle - React, Tailwind, and code Playground

HTML

<table>
  <thead>
    <tr>
      <th>ID</th>
      <th>Title</th>
      <th>Status</th>
      <th>Learning Items</th>
    </tr>
  </thead>
  <tbody data-bind="foreach: learningPaths">
    <tr>
      <td data-bind="text: id"></td>
      <td data-bind="text: title"></td>
      <td data-bind="text: status"></td>
      <td>
        <select data-bind="optionsCaption: 'Select to view details...',
                            options: learingItems,
                            optionsText: 'title',
                            value: selectedLearningItem">
        </select>
      </td>
    </tr>
  </tbody>
</table>

JavaScript

// namespace
var CPT = CPT || {};

// entities
CPT.LearningItem = function (liId, liTitle, liDescription, liType, liUrl) {
  this.id = liId;
  this.title = liTitle;
  this.description = liDescription;
  this.itemType = liType;
  this.url = liUrl;
};

CPT.LearningPath = function (lpId, lpTitle, lpDescription, lpPublishDate, lpPublishedBy) {
  this.id = lpId;
  this.title = lpTitle;
  this.description = lpDescription;
  this.pubDate = lpPublishDate;
  this.pubBy = lpPublishedBy;
  this.status = "";
  this.learingItems = ko.observableArray([new CPT.LearningItem("Test1", "Test1", "Test1"),
                                         new CPT.LearningItem("Test2", "Test2", "Test2")]);
    this.selectedLearningItem = ko.observable();

  if (this.pubDate !== null)
    this.status = "Published";
  else
    this.status = "Unpublished";
};

// view model
CPT.ViewModel = function () {
  
  this.learningPaths = ko.observableArray();
};

var learningPathsViewModel = new CPT.ViewModel();
learningPathsViewModel.learningPaths.push(new CPT.LearningPath("1","1", "Test"));
learningPathsViewModel.learningPaths.push(new CPT.LearningPath("2","2", "Test2"));
ko.applyBindings(learningPathsViewModel);