JavaScript Data Grid from

This JavaScript Data Grid is far easier to implement than competing products and provides robust out-of-the-box features. Developed using HTML, CSS, and plain JavaScript with no third-party dependencies makes it a framework-agnostic solution that can be dropped into any website's UI. The grid meshes seamlessly with any array of objects from your backend apis. It also provides blazing speed for scrolling, charts, and much more including advanced filters and sorting. A license comes with 1 Yr. of support, including bug fixes and upgrades.

Angular Data Gridkeyboard_arrow_right

Javascript Data Gridkeyboard_arrow_right

A high performance, feature-rich Data Grid with more value than competitors

* No 3rd party packages used

Javascript Data Grid Features

• check_circle Virtual Scroll
• check_circle Advanced Column Filters
• check_circle Sort by multiple columns w/ sort order
• check_circle Integrated Charts
• check_circle Cell Editing w/ Validation
• check_circle Processes Links
• check_circle Option to block editing (read-only table)
• check_circle Numbered Rows
• check_circle Top level filter
• check_circle Auto right-aligning of numbers
• check_circle Up to 2 theme colors
• check_circle Functional Reset Button
• check_circle Filter on comparators besides equality e.g. >, <=, before & after dates
• check_circle Auto-populates multi-select column filter where appropriate
• 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 and row 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 1 Yr. of Support, bug fixes, and upgrades • Contact Us
• check_circle   •  7-day money back guarantee

Javascript Data Grid End-User License Agreement

By entering into this agreement with Cedar Technologies LLC, 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 file on your local computer and your website's hosting server(s). The licensor - Cedar Technologies LLC, is responsible for bug fixes, upgrades, & adequate support for 1 Yr. upon purchase. Renew each license after 1 Yr. to receive 1 more Yr. of support per developer. There is a 7-day money back guarantee. Accepted Currencies:

* App Name  

No. of Developers  123 4567 8910

The script can be shared with each developer you're purchasing for

  GET JAVASCRIPT DATA GRID  

* Agree to the EULA above to begin payment. Upon successful payment, the file will automatically download and short final instructions will be appended to the below instructions.

  * We never save your card info.

Change Currency? USD $ Euro € GBP £ AUD $ CAD $

The page will reload if you change currency

PAY

Integrate the data grid by following the instructions

In your html file, insert this code where you want the data grid to appear:

To initialize the grid, 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:

Copy the code file_copy

<!-- 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" } ];
deebo.methods.setLoading()//add an overlay while your backend api is responding
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
//deebo.methods.buildInitUiDataTable(data, "black", "skyblue", true, true)//pass true in 5th arg to hide row numbers

---

To Add Column Symbols (Numeric Columns)

To add symbols to numeric columns, do a ctrl + F in the newly downloaded/purchased javascript file for columnSymbols: on the downloaded script. Then update the code with the appropriate column names and symbols for your data. You can also create a separate script to update the column symbols since the downloaded script is minified and more difficult to read. To reference the columnSymbols object from your separate script, simply say dataTableService.methods.columnSymbols = [{column: ${yourproperty}, symbol: ${yoursymbol}}].

---

To Bolster Performance with Web Workers

Download the following javascript web worker file, then place it in the root of your website:

Copy the code file_copy

https://d2ffvluimla00s.cloudfront.net/worker.js

This file will boost the performance of the data grid. Do a ctrl + F in the newly downloaded/purchased javascript file for workerUrl: and replace the value "http://127.0.0.1:8080/worker.js" with the new location of the file at your website root e.g. "https://example.com/worker.js". That's all you need to do.