JavaScript Library For Easy Table Selection – SelectionTable

Preview:

Description:

SelectionTable is a lightweight JavaScript table library which allows you to select single or multiple table rows with checkboxes and display selected items in a new container.

Also provides a client side search functionality to filter out table rows based on user input.

How to use it:

Add the userstable.css and usertables.js to your webpage.

<link rel="stylesheet" href="userstable.css">
<script src="usertables.js"></script>

Markup html structure.

<div class="selection-table">
  <div class="elements-section cw">
    <input type="text" class="elements-filter" placeholder="Search" onkeyup="FilterElements(this)">
    <div>
      <table class="elements-header">
        <tr>
          <td><input type="checkbox" id="all" onclick="SelectAll(this)"></td>
          <td>User Name</td>
        </tr>
      </table>
    </div>
    <div id="elements-contents" class="elements-contents ch">
      <table id="elements" class="elements">
      </table>
    </div>
  </div>
  <div id="selected-elements" class="selected-elements cw">
    <div id="editedusers" class="selected-elements-contents"> </div>
  </div>
</div>

Replace table data with yours.

 var allUsers = [{id:'1', name:'Monica Anderson'},...];