20 Useful Javascript Data Table Libraries

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.

Clusterize.js

Clusterize.js

Tiny plugin to display large data sets easily

Source

DataTables

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.

Source

FooTable

FooTable

A responsive table plugin built on jQuery and made for Bootstrap. Fear not, it also works without Bootstrap!

Source

React-virtualized

react-virtualized

React components for efficiently rendering large lists and tabular data.

Source

Sheetsee.js

Sheetsee.js

It is a client-side library for connecting Google Spreadsheets to a website and visualizing the information with tables and charts.

Source

Datasette

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.

Source

Recline

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.

Source

Material Design Data Table

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.

Source

ngx-datatable

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.

Source

Angular DataTables

Angular DataTables

DataTables using angular directives.

Source

Frappe

Frappe

A simple, modern and interactive datatable library for the web.

Source

Vuetable

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

Source

Handsontable

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.

Source

jTable

jTable

A JQuery plugin to create AJAX based CRUD tables.

Source

Tabulator

Tabulator

It allows you to create interactive tables in seconds from any HTML Table, JavaScript Array, AJAX data source or JSON formatted data.

Source

Ember Table

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.

Source

StreamTable.js

StreamTable.js

It streams data for tables in the background, updates and renders them using templating frameworks like Mustache.js, HandleBars.js

Source

SlickGrid

SlickGrid

It is an advanced JavaScript grid/spreadsheet component.

Source

Vanilla-DataTables

Vanilla-DataTables

A lightweight, extendable, dependency-free javascript HTML table plugin. Similar to jQuery DataTables, but without the dependencies.

Source

Cheetah Grid

Cheetah Grid

It is the fastest open-source data table for web.

Source

8 Comments

  1. Joshsays:

    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);

        • Nick Ardeckysays:

          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?

      • Nick Ardeckysays:

        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?

        • J. Exoticsays:

          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.

  2. Paulsays:

    Definetely missing jExcel
    https://bossanova.uk/jexcel

  3. Kristijansays:

    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.

Leave a comment

Please be polite. We appreciate that. Your email address will not be published and required fields are marked

This site uses Akismet to reduce spam. Learn how your comment data is processed.