Here’s why you should use a JavaScript library for tables. You might be working on frontend when you realized that inbuilt table or even a basic bootstrap table is way too boring. I mean they really are! You need to write a function for each function like sorting, searching, grouping etc. So it just consumes too much of your time in writing those small function you need to work on CSS as well. Now when you’re about to complete the tables it starts to break. This is the time when you should start looking for JavaScript library for tables.

To save your time and hard work we have compiled a huge list of JavaScript library for tables. They are being used and trusted by many big companies as well as coders. They not only look good but also comes with handy functionalities like grouping, sorting, etc and they’re responsive as well. That means it’ll not break on devices like tablet and mobile both.

  1. Datatables.net: It is a very powerful plugin for creating tables using jQuery. It comes with functionality like sorting, searching and pagination without any configuration. The data table can work with data coming from a variety of different sources like plain HTML, or a custom array before initialization, any server-side data or even data from coming from Ajax. One of the best functionality the I personally like is when there is no data from the source, it automatically shows “No data available” instead of breaking. Datatables library provides a lot of configuration and its simple API makes it work flawlessly. You have both the options, you can use their CDN or directly download the library and integrated into your code. Since data tables is an open-source library you can also modify the code as per your needs.

  2. Clusturize.js: So you have a large amount of data like 10,000 rows with X amount of columns. If you render this data in a normal <table> tag, you’ll notice that scrolling is not as smooth as it used to be when working with small data. Is this situation clusturize.js will help you. Clusturize.js actually loads only a certain amount of data or you can say the data which is visible in viewport and renders the remaining data when needed. This not only helps in making the scrolling smooth but also helps in increasing load time faster. But how does it work? So basically it converts the whole table into a container and only the visible part is generated in the container. It divides the content into small clusters and loads them when needed, that’s it is named as clusturize.js. So when someone scrolls in the container it automatically loads the remaining data which can fir the container. By default, it loads only 50 rows but it can be changed as per the requirements. Again like data tables, crulturize.js is also open source and hence you can modify the code. It also comes with CDN as well as full source code download.

  3. FooTable: Footable is another jQuery table plugin and its best part is it doesn’t use bootstrap. That means you don’t need to include bootstrap along with this plugin. It works on two principles first, is to hide certain columns at the breakpoint in the CSS while the second is to add rows that can easily become expandable to show the data which was hidden at the breakpoint.  The different device has a different breakpoint, for example, mobile has by default 480px, the tablet has 1024 and so on. Hence on mobile devices, it hides some column while in the tablet, it’ll show all of them if it can fit under the breakpoint.

  4. React-virtualized: It is more a method to display a list than a table tag. React virtualized works on an array of objects rather than any other data type. It basically created a window in which there is a large list of `div`. Again it is also based on the same fact that the table should only render the visible part rather than loading the full list at once. Apart from the table, it has many other applications like comment section, grid display, scroll sync, collections etc. It also needs node js for installation.

    In react-virtualized you also need to define the height and width of the window, and under this dimension, your data will be rendered. You can count this fact under advantage as well as disadvantage also. This is a bit difficult to understand but once you get used to it, react-virtualized becomes the most flexible plugin in the list.  It’s alternative is react-window which is smaller or you can say a lightweight version of react-virtualized.

  5. Sheetsee.js: It is a client-side javascript library to display Google Spreadsheets data on a website. There are comes in four variants namely sheetsee, sheetsee-core, sheetsee-tables, sheetsee-maps. We’re only going to talk about sheetsee-tables. It uses Mustache.js for templating. Sheetsee basically uses a JSON array to display the data in the table. Sheetsee-table also has features like sorting, searching, pagination. To display sheetsee tables you’ll also need to install its dependency that is, Mustache.js, which is its templating engine. Also one of the best advantages of using sheets is that you can directly edit a Google Spreadsheet on the go as it can be connected to spreadsheets as well or if you want to convert the data into the chart you can create that too using Sheetsee.js.

  6. Recline: It is a simple but amazingly powerful data visualization tool completely build on pure JS and HTML. It uses the combination of best libraries like SlickGrid, Flot and D3 to create a different type of views and allows you to display data in different ways. It takes JSON as input and processes them. This library consists of 3 parts which are  Models, Backends and Views. Models are actually the data sets which acts as an input. Backends connect Models to the data source like Google Docs, any local CSV etc. While Views are the UI components where the data is rendered for example graphs, maps, tables, grids or timeline.

  7. Material Design Data Table: It is a bit different from the others and takes some efforts to understand ad implement. They mostly appear in desktop enterprise applications and mostly used to display raw data.

  8. Ngx-datatable: It is an Angular component to render large and complex data set. Ngx-datatable has most of the features that we have discussed so far in this list but in a light package. The table uses virtual DOM to render the data and has features like reordering, vertical as well as horizontal scrolling, sorting, searching etc. The rendered data can also be exported in CSV which makes it a different from the other libraries and also allows to filter columns. Ngx-data table also allows you to include external CSS  as an extension to adapt the styling of the parent div or website. You can also use it as live data display, for example, live scoring etc. By default, it comes with a dark and light theme.

  9. Angular Datatables: As the name suggests it is the combination of Angular Js and datatables.net To use this table you need to have Node js and angular CLI installed. It also comes with functionalities like searching, sorting, pagination. The advantage with angular datatable is that you can use it on server-side as well. Their documentation show exactly what you need to do. Once you’re up and running just run a few sets of commands and you’re ready to start.
    • npm install jquery --save
    • npm install datatables.net --save
    • npm install datatables.net-dt --save
    • npm install angular-datatables --save
    • npm install @types/jquery --save-dev
    • npm install @types/datatables.net --save-dev

  10. Frappe Datatable: It is a simple and interactive table library that uses node js to display data in tabular format. It was originally built for ERPnext which is an alternative for Oracle, Zoho, SAP (I mean that’s what their website suggest). Its developer also maintains a medium blog, so you can easily contact him, just kidding. Well, jokes apart it has features like inline filters, inline editing, copy cells, resize columns, keyboard navigation, mouse selection like an excel sheet etc. Frappe can be used in Angular, Node as well as plain JavaScript. You can switch themes also in frappe dark as well as light theme.

  11. Vuetable-2: Formerly vuetable, currently on version 2.0.0-beta 1. You can pass your own data stream or pass data coming from API. Vuetable also allows you to customize field data using the inbuilt formatting tool if required. To use Vuetable you need to install two dependencies as well that is vue.js and Axios. There are two modes in which you can work with vuetable the first one is API mode, as the name suggests when you’re working with API endpoints you can use this mode. The second mode is Data mode if you’re working with manual or existing data you can use this mode. There are many features that only API mode supports, for example, load data on the start, pass query parameters, append query parameters, sort the incoming data from API.

  12. Handsontable: It is a completely JavaScript/HTML 5 based library to create tables. Its looks like a spreadsheet. You’ll feel like you’re working with Microsoft Excel or Google Sheets. It also allows you to edit inline, export to CSV, sorting, searching, merging columns, filter data, show nested headers, and much more. It comes as paid tool for commercial use while it is free for personal use. You can also use it with View JS, React. JS and Angular JS.

  13. jTable: It is a jQuery plugin which is used to create AJAX based CRUD tables. jTable automatically creates HTML based table from the data coming from the server using the capability of AJAX. It comes with the flexibility of CRUD, which means it can create a new record in the database when the user fills the form. In the same, it can delete, update the data as well. It also comes with predefined colour themes and you can also use your own CSS.

  14. Tabulator: It is used to create complex tables using AJAX, HTML and JavaScript. Like others, tabulator can also take input from formatted JSON or AJAX data source. It uses virtual DOM to render the data. Tabulator has some very special features like you can display graphs or charts in a column itself, column calculations like sum, average, min, max can be calculated, history data etc. It also comes bundled 5 themes out of the box. You can also use it with React JS, Angular JS and Vue JS apart from plain HTML – JS combo.

  15. Ember Table: This table is made for developers who needs a full-fledged, easy to customize, scalable as well as a flexible table for their application. Ember table also has the feature to display data in tree and children form.

  16. StreamTable.js: It can be said that StreamTable is another layer of the table on an existing table. It uses Mustache.js, HandleBars.js to render the data. So you want to render thousands of rows, what StreamTable does is that it loads 20-30 rows initially and renders rest of the data silently in the background and update the data. It helps to load the data faster and also serves it immediately for CRUD operations. Another important point to note that if a user stays on the same page for a longer time, it starts to delay the rendering and complete the user’s task like searching, pagination etc.

  17. SlickGrid: It is a fully open-source JavaScript library for table and is compatible with BootStrap. SlickGrid is capable of taking input from an external component, which means it can take data for a variety of data sources. Some of the highlights are adaptive virtual scrolling, support of million rows, full keyboard navigation, grouping, filtering, sorting etc.

  18. Simple-DataTables: It is based on Vanilla-DataTables, which is a lightweight, dependency-free, extendable JavaScript – HTML library for tables. Simple-DataTables Is very similar to jQuery DataTables but doesn’t use jQuery. Features are also similar to other tables mentioned above but one feature which makes Simple-DataTable different from others is export in SQL.

  19. Cheetah Grid: It is a high-performance JavaScript table which works on HTML canvas. It can display more than a million records in a few seconds. Cheetah Grid comes with 3 themes that are default, basic and material design. It is also an open-source JavaScript library to create tables.

  20. FancyGrid: It is a lightly styled and simple table with functionalities like filtering, searching, sorting functionalities. You can use FancyGrid library to create tables as well as for visualization purpose also, for example, you can use it to create heat maps, graphs, charts and forms as well. You can also edit the data inline as well. FancyGrid also supports several themes like blue, bootstrap, dark, default, grey, extra-grey, dark and sand.

  21. Stackable.js: It is a mobile-focused library that uses jQuery and goals to make the table mobile-friendly by adjusting and optimizing the layout for smaller resolutions. There are not many options available in this library as it focuses more on device compatibility.

  22. Tabella.js: This is a complete pure JavaScript library for tables. Tabella.js focuses more on providing the touch/swipe experience to the user. Since it uses swipe functionality, you can create multiple tables in a single page and swipe the columns. You can manually define the cell breakpoints, swipe threshold, SVG icon for left and right arrow.

  23. DynaTable: It is a very powerful javascript library for tables. DynaTable takes JSON as input and generates a table according to that. It uses the key of the JSON array the header of the table and rest of the data as the row and columns. It can also perform some operations like sorting, querying, pagination, searching, etc.

  24. Zing Grid: It is another JavaScript library for rendering tables and grids. You can use this table to create a full page of the table only as it comes with a complete set of styling. It has inbuilt CRUD functionality, modal support, searching, virtual scrolling, custom buttons, different layouts. You can say Zing Grid is all in one package. ZingGrid can be integrated with Angular, React, Polymer, Vue and jQuery apart from core JavaScript.

  25. Griddle: It is a highly customizable table to react. Like FancyGrid this library can also be used to display maps, display data as a list of cards, nested data etc. It uses state and selectors to render the table.