Edit in JSFiddle

requirejs.config({
  // Path mappings for the logical module names
  paths: {
    'knockout': '//cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min',
    'jquery': '//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min',
    "jqueryui": "//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui",
    "jqueryui-amd": "//cdn.rawgit.com/jquery/jquery-ui/1-11-stable/ui",

    "promise": "//cdn.rawgit.com/components/es6-promise/c95149ffaa2e8162601c57d4282362eac84f929b/promise.min",
    "hammerjs": "//cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.4/hammer.min",
    // 2.0.1: 49fcbbde7c8e178a3a21625d44485536e3ad1aaf
    "ojdnd": "//cdn.rawgit.com/oracle/oraclejet/2.0.1/dist/js/libs/dnd-polyfill/dnd-polyfill-1.0.0.min",
    "ojs": "//cdn.rawgit.com/oracle/oraclejet/2.0.1/dist/js/libs/oj/debug",
    "ojL10n": "//cdn.rawgit.com/oracle/oraclejet/2.0.1/dist/js/libs/oj/ojL10n",
    "ojtranslations": "//cdn.rawgit.com/oracle/oraclejet/2.0.1/dist/js/libs/oj/resources",
    "text": "//cdnjs.cloudflare.com/ajax/libs/require-text/2.0.12/text.min",
    "signals": "//cdnjs.cloudflare.com/ajax/libs/js-signals/1.0.0/js-signals.min",

    // non-jet libraries
    // Lazy is not necessarily necessary, but it makes for a nice polyfill
    "lazy": "//cdnjs.cloudflare.com/ajax/libs/lazy.js/0.4.2/lazy.min"
  },
  // Shim configurations for modules that do not expose AMD
  shim: {
    'jqueryui-amd': {
      exports: "$",
      deps: ['jquery']
    },
    'jquery': {
      exports: ['jQuery', '$']
    }
  },
  config: {
    ojL10n: {
      merge: {
        //'ojtranslations/nls/ojtranslations': 'resources/nls/menu'
        // The following addes en-US to the r.js bundle
        //'ojtranslations/nls/ojtranslations': '../../oj/resources/nls/en-US/localeElements'
      }
    }
  }
});

require(['knockout',
  'lazy',
  'ojs/ojcore',
  'ojs/ojknockout',
  'ojs/ojinputtext',
  'ojs/ojtable',
  'ojs/ojarraytabledatasource',
  'promise'
], function(ko, lazy, oj) {
  'use strict';

  // hard coded data -- normally loaded via ajax
  var employees = [
    {id: 101, name: "Beauregard Duke"},
    {id: 102, name: "Lucas Duke"},
    {id: 103, name: "Daisy Duke"},
    {id: 201, name: "Cooter Davenport"},
    {id: 301, name: "Jefferson Davis Hogg"},
    {id: 302, name: "Lulu Coltrane Hogg"},
    {id: 401, name: "Rosco P Coltrane"}
  ];

  var ViewModel = function() {

    var self = this;

    self.datasource = new oj.ArrayTableDataSource(
      employees, {
        idAttribute: 'id'
      });

    self.nameSearch = ko.observable();

    ko.pureComputed(self.nameSearch)
      .extend({
        rateLimit: {
          timeout: 250,
          method: "notifyWhenChangesStop"
        }
      })
      .subscribe(function(newValue) {
        self.datasource.reset(
          filteredEmployees(newValue)
        );
      });

    var filteredEmployees = function(search) {

      if (!search) {
        // no filter criteria so return all employees
        return employees;
      }

      var findByName = function(empl) {
        return lazy(empl.name)
          .contains(search);
      };

      var result = lazy(employees)
        .filter(findByName)
        .value();

      return result;
    };
  };

  ko.applyBindings(new ViewModel());
});
  <div class="content-container">
    <div class="inline-form">
      <label for="search">Search</label>
      <input id="search" name="search" data-bind="ojComponent: {
          component: 'ojInputText', rawValue: nameSearch}"
          placeholder="Search by name"/>
    </div>
    <table id="table" summary="Department List" aria-label="Departments Table"
         data-bind="ojComponent: {component: 'ojTable',
                                  data: datasource,
                                  columnsDefault: {sortable: 'none'},
                                  columns: [{headerText: 'Employee Id',
                                             field: 'id'},
                                            {headerText: 'Employee Name',
                                             field: 'name'}]}">
    </table>
  </div>
@import url('//cdn.rawgit.com/oracle/oraclejet/2.0.1/dist/css/alta/oj-alta.css');

.content-container {
  margin: 10px;
}

.inline-form {
    display: flex;
    align-items: center;
}
.inline-form > .oj-label {
    margin-right: 1em;
}