Data tables are used widely in the web and mobile applications. It is very useful if you want to list data which can be represented in columns and rows. So in this post we`ve collected 20 Useful Javascript Data Table Libraries to enhance your data tables.
Unleash The Power of WordPress Ad
Awesome collection of 11,000+ WordPress Themes, including Bootstrap Templates & Design Assets
Business
WordPress
Blog & Magazine
WordPressCreative Portfolio
WordPressEcommerce
WordPressLanding Page
WordPressRetail
WordPressClusterize.js
Tiny plugin to display large data sets easily
DataTables
It is a plug-in for the jQuery Javascript library. It is a highly flexible tool, build upon the foundations of progressive enhancement, that adds all of these advanced features to any HTML table.
FooTable
A responsive table plugin built on jQuery and made for Bootstrap. Fear not, it also works without Bootstrap!
React-virtualized
React components for efficiently rendering large lists and tabular data.
Sheetsee.js
It is a client-side library for connecting Google Spreadsheets to a website and visualizing the information with tables and charts.
Datasette
It is a tool for exploring and publishing data. It helps people take data of any shape or size and publish that as an interactive, explorable website and accompanying API. This is aimed at data journalists, museum curators, archivists, local governments and anyone else who has data that they wish to share with the world.
Recline
A simple but powerful library for building data applications in pure Javascript and HTML. Recline re-uses best-of-breed presentation libraries like SlickGrid, Leaflet, Flot and D3 to create data ‘Views’ and allows you to connect them with your data in seconds.
Material Design Data Table
This module is an effort to implement Material Design data tables in Angular Material. Data tables are used to present raw data sets and usually appear in desktop enterprise applications. Data tables are particularly useful for visualizing and manipulating large data sets.
ngx-datatable
It is an Angular component for presenting large and complex data. It has all the features you would expect from any other table but in a light package with no external dependencies. The table was designed to be extremely flexible and light; it doesn’t make any assumptions about your data or how you: filter, sort or page it.
Angular DataTables
DataTables using angular directives.
Frappe
A simple, modern and interactive datatable library for the web.
Vuetable
It is a Vue.js component that will automatically request (JSON) data from the server and display them nicely in html table with swappable/extensible pagination sub-component. You can also add buttons to each row and hook an event to it
Handsontable
It is designed to be easy to implement, and as customizable as possible. It includes a comprehensive API, useful tutorials, and both community and commercial support.
jTable
A JQuery plugin to create AJAX based CRUD tables.
Tabulator
It allows you to create interactive tables in seconds from any HTML Table, JavaScript Array, AJAX data source or JSON formatted data.
Ember Table
It is a power table made for users who need a full-fledged, fully-customizable table component for their apps. It is built to be flexible, scalable, and ergonomic for day-to-day use.
StreamTable.js
It streams data for tables in the background, updates and renders them using templating frameworks like Mustache.js, HandleBars.js
SlickGrid
It is an advanced JavaScript grid/spreadsheet component.
Vanilla-DataTables
A lightweight, extendable, dependency-free javascript HTML table plugin. Similar to jQuery DataTables, but without the dependencies.
Cheetah Grid
It is the fastest open-source data table for web.
Portal.js
Pprtal.js is a framework for rapidly building rich data portal frontends using a modern frontend approach. portal.js can be used to present a single dataset or build a full-scale data catalog/portal.
Gridjs
Grid.js is a Free and open-source JavaScript table plugin. It works with most JavaScript frameworks, including React, Angular, Vue and VanillaJs.
I have used a few of these and they are definitely great, I would recommend adding Zinggrid.com to this list. It is what I have been using the last few months and have had a lot of success building out grids and tables. They are also free to use non-commercially and have a web app that lets you create and edit your grids. I would check them out: http://www.zinggrid.com. Hopefully you all find this helpful!
just tried zinggrid with a dataset of 120k rows (created during parsing of a log file using a worker in browser)
guess what..
displaying 100 rows is pain.
displaying 200 takes long.
displaying 1000 crashes that tab.
don’t even dare to advertise zinggrid if it cannot even handle clusters.
and before i forget..
zingrid actually phones home.
due to security related reasons i just don’t allow traffic to third party domains. thus i used this during testing to disable it:
((fetch) => {
window.fetch = (url, …args) => {
if (/zingsoft\.com/.test(url)) {
return new Promise(res => res({text:()=>”0″}));
}
return fetch(url, …args);
}
})(window.fetch);
ZingGrid phones home to check the license server. By default, no license is shown and hence no UI flicker of the license. If you are using the library on localhost there shouldn’t be any penalty either.
ZingGrid is a commercial library but also free to use. Are you using an internal network? Can you explain why this is a security concern for you?
To be fair ZingGrid does not handle big data well because it’s the first commercial web component grid to market. What does that mean? LOTS of nodes. We have many components like zg-body, zg-row, zg-cell… etc. The main problem with the DOM explosion is styles are NOT shared and no browser has implemented shared styles. The inline style sheets in the shadow DOM being spread across 120k zg-cell(s) is not optimized. Until this changes for all browsers, we cant fix a fatal flaw of web components.
Did you test all the other libraries at 120k rows? How did they do?
Did you implement any features when using big data? Server paging? Server search? Server rendering? Infinite scroll? Or did you just throw a huge file over the network and then have the browser parse that and render it?
ZingGrid is a solid data table, data grid and CRUD grid. We do not handle 120k rows but with some of the features mentioned above we are very quick and easy to use.
Before making such a harsh and generalized statement, ask yourself. Did you follow reasonable and best practices? Did you make an equal assumption for all libraries?
Yeah throwing 120k of rows on the wire as a test or in memory is a ridiculous test. Throw 100k of points at HighCharts the most popular charting library and watch it choke particularly on a lower powered devices. Shoot a median Android phone it’ll choke at 10k maybe. Any grid, chart, data, etc. library will choke if you engineer the appropriate type of demo to throw at it. It feels like someone posted this specifically to take that library down a peg or two, if that is a misread it seems a smart thing to do would be to develop a cool benchmark and get all the libs to do it so we can see which excel in which way. That would actually allow people to select the grid library that fits their feature set and situation which likely highly variable as opposed to one library to rule them all.
Definetely missing jExcel
https://bossanova.uk/jexcel
Hello, I do not understand why it says for ngx-datatables that they have no dependecy, when you have to run angular to use them or am I wrong ?
BTW I am very new on this.
That’s a nice collection of Data Grids. If anyone’s looking for a no-nonsense & fast editable data grid with Excel-like controls, have a look at DataGridXL: https://datagridxl.com. (Disclosure: I am the author)
Yes, definetely missing AnyGrids https://anygrids.com