12 Table jQuery Fantasy
Table is one of the oldest elements in HTML. There was a time when tables were widely used for both content and web layout. Thankfully, the table layout is almost dead (with the exception of HTML email), and today, when you need a table, it is only for the purpose of creating them right from the beginning: showing data in tables .
The table, as an aging part of the HTML complex, should not be too suitable for mobile-oriented designs, nor does it bring any new advanced features. The table simply displays the data you have, and for some other pragmatic cases.
However, often you will want the Table to become more modern, possibly by fully supporting the mobile ecosystem with responsive layout or providing advanced features such as searching, filtering, sorting or counting. Other high-level abilities.
In this article, we will explore a series of plugins supported by jQuery to create, expand or enhance your Tables. These plugins vary from the ability to change the display type gently, to the complex solutions full of features.
Dynatable
Dynatable is an extremely powerful and intensive plugin table with featured features like filtering, sorting and page breaks. Dynatable is designed with a rather specialized interface for programmers, allowing you to control how rendering, filtering and searching is done by the Table. This is a highly customizable solution.
If you are looking for a plugin that allows you to control how things work, this is the right choice. While the customization is a bit complicated for newbies, the default configuration still works quite "standard" with common tasks.
Surprisingly, this plugin is quite old (the last big commit is 2014). Although there have been a few commits since then, and contributions from the community, we are still not sure if this plugin really has serious investment interest. Overall, this is a great plugin and brings a lot of features that fit the majority of websites.
Bootstrap Table
CSS frameworks are still popular, and Bootstrap is equally popular. Bootstrap Table plugin is a feature-rich table plugin, which is still very compact, bringing all the features you need and meeting your installation effort.
The power and scope of this plugin is quite impressive. You can use it to restyle the Table to make it more beautiful and responsive (flexible). The tool has features to filter, search, display columns by condition (for example, you can hide the column to be simpler) along with other interesting little features like export to CSV and JSON.
The example page here demonstrates how to install these elements . You will have to spend a lot of time to familiarize yourself with the document, but it is also worth it when you make a great table full of features like that.
You need to be running a Bootstrap project or optionally add Bootstrap CSS and JS files to your project. The plugin works via standard HTML data attributes on your Table or through more traditional JS methods. If you have been executing poject with Bootstrap, this will be a great start. If you are working with another Bootstrap tool, you will need to weigh the loss.
Plugin is an open source project that is constantly updated with dozens of contributors and thousands of commits. It is difficult to predict whether we will see Bootstrap 4 (because Bootstrap requires 2/3 more) but with the current situation, Bootstrap seems to be still stable.
If you are looking for a stable and stable support plugin, this is quite a suitable tool. You can also try some "expansion packs" developed by some developers here .
Fixed Header Table
Fixed Header Table performs the task exactly as the name suggests: displaying a fixed heading right on the Table, so you won't lose the column mark when you scroll.
This plugin works with standard HTML table markup. The tool uses <thead> or sometimes <tfoot> to create a fixed header for the Table. You also have a number of other options, such as clone header to footer and show / hide Table as you like. In general, the purpose of this plugin is quite simple, and only with a few elements, to reduce complexity. Styling and functionality will have to be added manually if you need to.
If you are looking for solutions with more general functions, then other libraries seem more appropriate. Moreover, remember that this is a pretty old plugin (since 2011), so maybe we won't get much updates.
DataTables
This super-flexible jQuery table aims to expand the basic HTML Table, making them more intuitive and useful.
DataTables is a comprehensive plugin that provides enhanced table features like sorting, filtering, page breaks and custom themes.
The plugin works very simply, but it also comes with a considerable amount of documents so you can control the display, shipping, and operation of the Table.
This is a very "friendly" extension for the developer because of the wide range of features and customization it offers.
The ability to integrate with CSS frameworks to change plugin styling is also quite impressive. The tool is compatible with Bootstrap, Foundation, jQuery UI, etc. Other aspects like Events accessibility, API system and dynamic data via AJAX make DataTables a solid choice.
If you want to integrate DataTables into some important enterprise system or department, you can buy a copy of enterprises license to get support from teeth dev team and increase feature requirements.
jQuery HighchartTable
HighchartTable is a useful plugin that works by creating (dymamic) an interactive Highcharts chart from your Table data.
This plugin puts a series of data attributes on the elements in the Table, enabling the Highchart to render your table data into a dynamic / interactive chart.
The tool's website specifies all options , a simple JSFiddle tutorial for each option helps you clearly see how they work. You can control the types of charts, colors, labels and pretty interactive elements to better suit your needs.
One thing to remember is that this plugin does not actually perform chart transformation. This is the part handled by Highcharts, which means you will also need to add corresponding JS and CSS files.
Moreover, Highcharts is not free for commercial purposes. To use it legally, you need a license (and of course, if you are developing for customers, you need to buy it as a medium). Say anything, Highcharts is quite polished and comes with a myriad of options to help you profit, so having to spend money if used, is understandable.
Tabulator
Tabulator is the jQuery plugin used to create interactive, comprehensive tables from: HTML, JavaScript array, source Ajax data, or JSON data. Tabulator offers a range of features, such as filtering, sorting, adjusting the dynamic width of the column, loading smart data, page breaks and direct input editing.
Tabulator is on this list because of its thorough documentation, diverse features, and flexibility. The tool's website addresses all the features it offers, with easy-to-understand documentation combined with many specific examples.
Comprehensive plugin in which you can customize the Table at will. You can group rows in the table under a header, create simple tooltips to explain data, split pages with content in rows, or combine many cool features to improve the user experience. This is a great tool for programmers.
The Tabulator development team is quite active on GitHub, with updates every few months and a series of commits and bug fixes over the years. Version 2.7 was released in October 2016, so feel free to use it because it seems like the tool is still paying attention.
FancyGrid
FancyGrid gives you standard Table templates with traditional features. Whether you are looking for a lightweight, simple Table creation tool, or a Table with full filtering, sorting and page breaks, FancyGrid has the option to create a great table experience for almost any need.
There are many ways to use Fancy Grid , based on how you want to use the plugin. You can use it to style the Table, to provide new features, or to combine with Highchart to graphize the data.
An interesting point is that there is no GitHub repo open for the plugin. You can download the tool from their website for personal use, but with commercial needs, you will need to purchase a license to use. Highcharts (2D version) also need licenses, so you should consider whether to invest in the project or not.
jQuery KingTable
KingTable is a complex, developer-oriented Table solution, which you can take advantage of to create complex, perfect search / filter conditions for accounts, project management, and other data-driven operations.
Unlike some of our other plugins, KingTable is fully documented on GitHub, with a separate Wiki page that details all settings and use cases for the plugin.
In terms of features, the included plugin supports themes, and some filters and events that you can use to make data management easier. Moreover, in order to effectively use this tool, you must be familiar with how to create custom filters and data mechanisms . If you are looking for a plugin that provides basic installation, then you should probably use other more suitable solutions.
Mobile adaptability is also a consideration. The plugin itself is completely unconcerned with the table's responsive, mobile content (it is necessary to scroll on either side or columns will stick to each other). You can adjust it yourself, but the plugin won't care.
Stackable.js
Stackable.js is a mobile jQuery jQuery plugin to produce a mobile-friendly Table by adjusting the layout for smaller devices.
Unlike other plugins that add extra features, stackable.js is used only for your Table to work well on mobile.
JQuery ReStable
This plugin makes your Table more responsive on mobile, converting each line item into a series of li to improve layout and scrolling capabilities.
Similar to stackable.JavaScript, this plugin makes your table more mobile-friendly. The plugin works by adjusting the layout of each row when displayed on a small size screen. The tool aligns stacked columns and separates each row, making it easier for mobile users to read.
The plugin itself only provides the ability to tweak on mobile without adding features or too many other settings. So as long as you implement the correct HTML markup and add some basic jQuery, the plugin will work right away.
FooTable
FooTable is Bootstrap Original Table extension plugin that provides search, filtering, and many interesting features to enhance your Table.
The FooTable in the same may be similar to the previous Bootstrap table, but the difference with FooTable is that it works both with and without Bootstrap, meaning there is no need to add any bootstrap files.
Plugin supports filtering, page breaks, sorting and editing directly. The website has a lot of settings that you can test, and you can find all the information you need with a separate document for FooTable . Moreover, the document is aimed at the programmer and will assume you are quite familiar with events, settings and other advanced elements. This is the tool for those who are looking for plugins that can be used immediately, and are customizable.
Tabella.js
Tabella is a Dynamic Table creation plugin that focuses on touch / swipe to easily scroll long / complex Tables.
Unlike other plugins, you can use Tabella to create a Table. You will select the word sections you want to use as a container for the Table and then provide the data as an object (specify the title and column values). This will be a great plugin if you can use pure JSON data to create table edits, but it is still pretty good, giving you a mobile-friendly interface.
If your main goal is a long and responsive Table, then this is a simple and highly interactive solution.
Epilogue
These are just some of the plugins that you can use in the project to expand and improve the features and images of the Table. The suggestions above are solutions from free to paid, from simple to complex, hoping to help you choose the tool that best suits your needs.