Enterprise Data Table from 
The Enterprise Data Table library is easy to implement and provides robust out-of-the-box features.
It's framework-agnostic, and developed using plain js, html, and css. Integration support is provided on request. Ongoing support is provided on a
case-by-case basis.
Youtube Tutorial
Enterprise Edition
- check_circle Cell Editing
- check_circle Option to block editing (read-only table)
- check_circle Top level filter
- check_circle Processes Links
- check_circle Auto right-aligning of numbers
- 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 Filter data by multiple columns simultaneously
- check_circle Filter on comparators besides equality e.g. >, <=, before & after dates
- check_circle Auto-populates multi-select column filter where appropriate
- check_circle Pagination of rows - the table can handle as much data as your hardware can process
- check_circle Detects if strings should be coerced into a more appropriate data type
- check_circle Toggle freezing first column
- check_circle Toggle hiding any column
- check_circle Click and drag column resizing on laptop and desktops
- check_circle Click and drag column re-ordering on laptop and desktops
- check_circle Row selection and filtering of selected rows
- check_circle Quick Exports of data to csv, tsv, json, psv
- check_circle Support • Contact Us
- check_circle Bug Fixes - Entitled to new version
Enterprise Data Table End-User License Agreement
Cedar Technologies LLC retains all rights to the proprietary software downloaded to your local computer if/when you complete the payment form on this webpage. By entering into this agreement, you agree that upon successful payment of PER DEVELOPER, PER APPLICATION, and once the javascript file has been downloaded to your local computer, you will not share or distribute any copies of the proprietary software using email, messaging apps, content delivery networks, or public git repositories. You may reference the downloaded js file on your local computer and your website's hosting server(s). You are agreeing that you will not seek remedy by requesting a refund, but rather will seek support from the licensor - Cedar Technologies LLC, who is responsible for the reliability of the software, bug fixes, and adequate support. Buyers of the Enterprise Data Table are entitled to a newly updated file (bound by the same agreement outlined here) upon any and all bug-fix related releases.
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" />
<div class="hidden-cols" ></div>
<div class="controls" >
<button type="button" id="btnXSelRows" disabled class="btn-ctrl-sel-rows hide">Deselect Rows</button>
<button type="button" id="btnTogSelRows" disabled class="btn-ctrl-sel-rows hide">Selected Rows</button>
<button id="btnReset" class="btn-reset" >Reset</button>
</div>
<div id="dataTableChecks" class="relly"></div>
<div id="selFilContainer" class="relly"></div>
<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>
<div id="exportOpts" class="export-opts">
<div class="inline">Export: </div>
<button type="button" id="btnExportCsv" class="btn-export-or-print" >CSV</button>
<button type="button" id="btnExportJson" class="btn-export-or-print" >JSON</button>
<button type="button" id="btnExportPsv" class="btn-export-or-print" >PSV</button>
<button type="button" id="btnExportTsv" class="btn-export-or-print" >TSV</button>
</div>
To initialize the table, apply the short piece of code after the enterprise 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
//deebo.methods.buildInitUiDataTable(data, "black", "skyblue", true)//pass true in 4th arg to block editing
