Data Table from 
This data table library is framework-agnostic and easy to implement using plain javascript, html, and css. The Community edition is open-source. It can be dropped directly into any static web site or web application's ui. You don't need a lot of experience to implement this table. It's just copy paste, with 1 minor technical aspect (example provided) you need to craft yourself. Compare features side-by-side vs Enterprise Edition
Community Edition
- check_circle Top level filter only
- check_circle Up to 2 theme colors
- check_circle Functional Reset Button
- check_circle Sorting of data by multiple columns simultaneously - sort priority indicated beside sort arrow
- check_circle Pagination of rows - the table can handle as much data as your hardware can process
Test the Community Edition Sample
Integrate the data table by following the instructions
In your html file, insert this code where you want the data table to appear:
<input type="text" id="topLevelDataFilter" name="topLevelDataFilter" placeholder="Search" />
<button id="btnReset" class="btn-reset" >Reset</button>
<div id="dataTable" class="data-table">
<div id="dataTableHeaders" class="data-table-headers"></div>
<div id="dataTableBody"></div>
</div>
<div id="tableFooter" class="hide">
<div class="right paginator">
<div class="paginator-half-wid">
<label for="paginator">Rows per page</label>
<select name="paginator" id="paginator">
<option value="25" selected>25</option>
<option value="50">50</option>
<option value="100">100</option>
</select> • <span id="paginatorTracker">1-25</span> of <span id="totalRows" class="heavy"></span>
</div><div class="paginator-half-wid">
<button type="button" id="btnPageFirst" class="no-btn"><i class="material-icons" aria-hidden="false">first_page</i></button>
<button type="button" id="btnPageBack" class="no-btn"><i class="material-icons" aria-hidden="false">arrow_back_ios</i></button> <span id="currPage">
Page 1</span> <button type="button" id="btnPageForward" class="no-btn"><i class="material-icons" aria-hidden="false">arrow_forward_ios</i></button>
<button type="button" id="btnPageLast" class="no-btn"><i class="material-icons" aria-hidden="false">last_page</i></button>
<label class="skip-lbl" for="skipTo">Skip To</label> <div class="skip-to-contain"><input type="number" min="1"
name="skipTo" id="skipTo" placeholder="Skip to" /><div id="skipToOptions" class="skip-to-options-hide"></div></div>
</div>
</div>
</div>
To initialize the table, apply the short piece of code below after the js file reference in your project's appropriate javascript or html file in a script tag. You simply need to replace the data variable assignment with your own list of data you want to display:
<!-- where data is an array of objects e.g. [ { name: "dave" }, {name: "amy" } ] -->
var data = [ { name: "Dave", salary: 80000, title: "CEO" }, {name: "Amy", salary: 75000, title: "CIO" },
{name: "Ted", salary: 60000, title: "QA Engineer" }, {name: "Sarah", salary: 75000, title: "Engineer" } ];
data = deebo.methods.convertNeededCols(data)
dataTableService.methods.mainData = data.filter( function(d) { return true })
dataTableService.methods.currFilData = data.filter( function(d) { return true })
dataTableService.methods.mainDataLen = dataTableService.methods.mainData.length
deebo.methods.buildInitUiDataTable(data, "black", "skyblue")//any 2 css colors
