JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/list.js/1.1.1/list.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/list.pagination.js/0.1.1/list.pagination.min.js"></script>
<div class="row" id="dap_list">
  <div class="row">
    <div class="col-sm-2">
      <label>Filter:</label>
    </div>
    <div class="col-sm-10">
      <input class="form-control search" placeholder="Search Criteria" value="effluent" />
    </div>
  </div>
  <div class="row">
    <div class="col-sm-2">
      <label>DAP Status:</label>
    </div>
    <div class="col-sm-10">
      <label class="radio-inline">
        <input type="radio" class="search" name="search_radio" id="search_radio" value="Awaiting Approval">Awaiting Approval
      </label>
      <label class="radio-inline">
        <input type="radio" class="search" name="search_radio" id="search_radio" value="Needs Further Review">Needs Further Review
      </label>
      <label class="radio-inline">
        <input type="radio" class="search" name="search_radio" id="search_radio" value="Approved">Approved
      </label>
    </div>
  </div>

  <table class="table table-striped table-responsive">
    <thead>
      <th class="sort asc desc" data-sort="waste_name">Waste</th>
      <th class="sort asc desc" data-sort="client_name">Client</th>
      <th class="sort asc desc" data-sort="created_by">Added By</th>
      <th class="sort asc desc" data-sort="timestamp">Date Added</th>
      <th class="sort asc desc" data-sort="dap_status">DAP Status</th>
    </thead>
    <tbody class="list">

      <tr>
        <td class="waste_name">Industrial Effluent</td>
        <td class="client_name">Organization2</td>
        <td class="created_by">No session</td>
        <td class="timestamp">2016-01-14 15:24:32</td>
        <td class="dap_status">Needs Further Review</td>
      </tr>
      <tr>
        <td class="waste_name">Oily Water</td>
        <td class="client_name">Test1</td>
        <td class="created_by">Nick</td>
     ...

JavaScript

var dap_list = new List('dap_list', {
		  valueNames: ['waste_name', 'client_name', 'created_by', 'timestamp', 'dap_status'],
		  page: 8,
		  plugins: [
		    ListPagination({})
		  ]
		});

		$$(':radio[name=search_radio]').change(function () {
    var selection = this.value;

    dap_list.filter(function (item) {
        return item.values().dap_status == selection;
    });

		});