15 Awesome jQuery Table Plugins
Tables are the most preferred way to display data because rows and columns are an easy and straightforward way to display information. Tables are also useful because they include features that make like selecting, sorting, paging and filtering your data very simple, a job that would otherwise drive you nuts! There are many free and ready to use jQuery plugins available for creating tables with ease, and these can generate a table from any kind of data source including JSON, an array, or a CSV file. In this article we’ve compiled a list of jQuery table plugins which are responsive, customizable, easy to style, extendable and allow you to show data in a tabular format supporting various data sets. You can also export table data to JSON or CSV format. These plugins are very easy to integrate and offer high customization. Enjoy!
1. jExcel
jExcel is a very light jQuery plugin that allows you to embed a spreadsheet, compatible with Excel, in your browser. You can load data straight to a jExcel table from a JS array, JSON or even a CSV file. You can copy and paste to/from Excel straight to a jExcel table. You can easily integrate jExcel with other third party jQuery plugins to create your own custom columns, custom editors, and much more. jExcel has plenty of other useful features as well, such as key-value dropdown, CSV loading/exporting and multiple spreadsheets.
2. Tabular
Tabular creates data backed tables with jQuery. It includes sorting, searching, and pagination. Tabular provides a minimalist table layout, providing a flexible groundwork with no concrete or specific styles in mind. Most of the HTML elements generated have CSS classes in them, so you can add your own style and flare, or use styles provided by CSS frameworks like Bootstrap or Foundation. Tabular uses several plugins to create functionality linked by events, so it's easily extensible. It uses jQuery for DOM manipulation and events.
3. tabulator
Tabulator is a lightweight, fully featured, interactive table jQuery plugin. Tabulator allows you to create interactive tables in seconds from any HTML Table, JavaScript Array, AJAX data source or JSON formatted data. It comes with a complete set of CSS classes to make styling your tables a breeze. Tabulator is fully CSS styleable, supports JSON, array or Ajax data loading, has a responsive layout, supports column filtering, grouping of rows, sorting, paging, column freezing and custom data formatting.
4. easyTable
easyTable is a simple and very lightweight (only 4KB) jQuery plugin that supports sorting, filtering and multiple ways of selecting rows either using shift or the crtl key, get the selected data easily and easily customize/extend this plugin. It also works quite well on mobile devices and supports most of the modern browsers.
5. yadtcf (Yet Another DataTables Columns Filler)
This jQuery plug-in allows the user to easily add filter components to table columns, the plug-in works on top of the DataTables jQuery plug-in. It supports various data sources, filtering of data, and selection of inputs.
6. TableExport
TableExport is a simple and easy-to-implement plugin great for exporting HTML tables to xlsx, xls, csv, and txt files. This plugin is also dependent on the FileSaver.js plugin, which implements the saveAs() FileSaver interface in browsers that do not natively support it. Additionally, you can also apply themes via bootstrap. TableExport is supported by all the modern browsers.
7. Table2Json
Table2Json is a simple JQuery library that converts an HTML table to a JSON object. All you need to do is make a call to makeJsonFromTable function and pass the table ID… the plugin will do the rest!
8. getTable
getTable is a simple jQuery Plugin for easily accessing the table cells that are positioned on the horizontal line, the vertical line or both lines that pass through the target cell. It grabs the horizontal line (row) and the vertical line (col) of the table. It also grabs cells that are positioned on those lines. The table is parsed via DOM and those data are cached.
9. resTables
The resTables jQuery plugin allows you to easily make your table responsive. It has been created based on the stacktable.js concept by John Polacek. When the script is initialized, it will create a sibling table, but with a 2-column layout only.
10. Dynamic Table
The Dynamic Table is a table that displays data in a similar way to a spreadsheet but allows the data to be loaded from your backend and provides control over what can be edited and how it is being saved. It allows advanced filtering and sorting as well as interaction with your application. It provides a spreadsheet like feel, can load data via Ajax and has events on select.
jQuery Responsive Table is a lightweight jQuery plugin that allows table mark-up to become fully responsive. It provides a clean list view on devices with small screens. It can work for multiple tables on a single page, as well as with tables that contain various combinations of merged cells. Best of all, it uses pure CSS for the rendering. For small screens, it converts columns into rows.
12. FooTable
FooTable is a responsive table plugin built on jQuery and made for Bootstrap, but it can also work without Bootstrap. It aims to make HTML tables on smaller devices look awesome – no matter how many columns of data you may be presenting. The FooTable jQuery plugin solves this problem by allowing you to hide certain columns on smaller devices, but still allow the user to expand each row to see the columns that were hidden.
13. stacktable.js
stacktable.js is a Responsive Tables jQuery plugin for stacking tables on small screens. The purpose of stacktable.js is to give you an easy way of converting wide tables to a format that will work better on small screens. It creates a copy of the table that is converted into a 2-column key/value format, and it uses media queries to toggle the visibility of the original table and the stacktable table.
14. Columns
Columns is an easy way of turning JSON data into HTML tables that are sortable, searchable, and paginating. All you need is to provide the data… Columns will do the rest!
15. floatThead
floatThead is a floating/locked/sticky/fixed table header plugin that requires no special CSS and supports windows and overflow scrolling. It floats the table header so that the user can always see it and supports tables with inner scroll bars, or window scrolling. It doesn't mess with your styles and doesn't clone the thread - so your events stay bound. It works on any table, requires no special CSS, and comes with lots of options to play with.
To conclude, these jQuery table plugins allows you to display data in tabular format with great customization and improved presentation. Most of these plugins are easy to integrate, all they require is that you download their library and include its reference. These plugins are responsive, support different type of data sources, support Ajax bindings for a better user experience and also allow the export of the table data into various formats like JSON, CSV, XLS or .XLSX. Some of these plugins are also helpful for small screens as they convert the columns into rows for a better fit of data on the screen.
