JSFiddle - React, Tailwind, and code Playground

by kougiland

HTML

<input placeholder="Search…" type="search" name="q" data-bind="value: query, valueUpdate: 'keyup'" autocomplete="off" /> 

<table>
    <thead>
        <tr>
            <th>Title</th><th>URL</th><th>Sites</th><th>Topics</th><th>Tagged</th>
        </tr>
    </thead>
    <tbody data-bind="foreach: computedPageLinks">
        <tr>
            <td data-bind="text: title"></td>
            <td data-bind="text: url"></td>
            <td data-bind="text: sites"></td>
            <td data-bind="text: topics"></td>
            <td><input type="checkbox" data-bind="checked: tagged" /></td>
        </tr>
     </tbody>
</table>

JavaScript

function PageLink(data) {
    this.URL = data.url;
    this.title = data.title;
    this.topics = data.topics;
    this.sites = data.sites;
    this.tagged = ko.observable(data.tagged);
}

function PageLinkViewModel() {
    self = this;
    self.query = ko.observable('benefits');
    self.samplesharepoint = [
        { title: "benefits", url: "www.benefits.com", sites: "branchburg, branford", topics: "benefits", tagged: "false" },
        { title: "health", url: "www.health.com", sites: "indy, laval", topics: "health", tagged: "false"},
        { title: "benefits", url: "www.benefits.com", sites: "ponce, genentech", topics: "benefits", tagged: "false"}
        ];
    debugger;
    self.pageLinks = ko.observableArray(self.samplesharepoint);
    self.computedPageLinks = ko.computed(function() {
        return ko.utils.arrayFilter(self.pageLinks(), function(item) {
            return item.title.toLowerCase().indexOf(self.query().toLowerCase()) >= 0;
        });
    });
}
/*
    $().SPServices({
    operation: "GetListItems",
    async: false,
    listName: "Links",
    CAMLViewFields: "<ViewFields><FieldRef Name='URL' /><FieldRef Name='Sites' /><FieldRef Name='Topics' /></ViewFields>",
    completefunc: function (xData, Status) {
      $(xData.responseXML).SPFilterNode("z:row").each(function() {
        var liHtml = "<li>" + $(this).attr("ows_Title") + "</li>";
        $("#tasksUL").append(liHtml);
      });
    }
  });    
 */
   
ko.applyBindings(new PageLinkViewModel());