Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
January 31, 2022 05:51 am

Best Free and Open-Source JavaScript Table Libraries


Tables are one of the easiest ways to show a lot of information in a relatively small space. And of course HTML has a built-in table element. However, there are some things that can be improved about tables to make them even more useful and impressive. This can include things like the ability to sort data inside the columns of a table, add more data to a table dynamically, or make a table much more responsive than what is allowed by the default layout and styling.


In this post, I will review some of the best free and open-source JavaScript plugins and libraries that you can use to supercharge all your HTML tables.


tablesorter


The tablesorter plugin adds a lot of great features to your existing standard HTML tables. It is actually a jQuery plugin, so make sure that you have already included jQuery in your webpage. Other than that, you just have to create tables with tbody and thead tags.



Pen by Jake's Tuts.


The plugin can easily parse and sort different types of data. It has parsers for sorting text, numbers, currency, IP addresses, URIs, and dates as well as times. You can even add your own parser.


Sorting data in a single column or by a single criterion might not be enough sometimes, but don't worry—tablesorter has you covered. It comes with the option to perform multi-column sorting or secondary sorting, where you sort the data by two different criteria like a regular alphabetical sort combined with something else.


Another advantage of using the tablesorter plugin is that it comes with a lot of widgets that further extend its functionality. Let's say you want some functionality that is not built into the core plugin and isn't available with any widget extension either—you can then write your own widget extension to add that functionality.


The detailed documentation of the plugin will help you out whenever you get stuck. It has a getting started guide, a lot of working examples, and information about different methods and events.


Tablesaw


One possible drawback of tables is that they usually don't look great on very small screen sizes. This is simply due to the fact that mobile devices have very little horizontal space to properly accommodate all the columns of a table. The tablesaw plugin solves this problem for you.



Pen by paul bradshaw.


It has two different variants. You can either use the no-dependency version or the jQuery plugin. Once you have added the relevant CSS and JavaScript files, all you need to do is add some HTML classes and attributes to your table. The Getting Started guide asks you to load a JavaScript file for initializing the plugin, but you can skip that and initialize the plugin for specific tables manually.


The plugin uses a number of techniques to help you fit your table in tight vertical spaces. You can use the basic stack mode to create a two-column layout with headers on the left and information on the right. There is also a column toggle mode, where users can just turn off columns selectively to hide them from view. A third option gives you the choice to make the columns swipeable so that users can click on buttons to navigate through the columns.


What if you only want to use the stack mode from the library? You can simply include a smaller dedicated file that only implements the stack mode, without any additional functionality. Check out the fully featured demo to see if the plugin offers all the features that you want.


Tabulator


The tabulator JavaScript library does a great job at creating interactive tables. The data for the library can come from an existing HTML table, JavaScript array, or JSON formatted data. One of the best things about this library is that you can use it alongside all your favorite libraries and frameworks like Angular, React, or Vue. Just include the JavaScript and CSS file for the library, and you will be good to go.


TabulatorTabulatorTabulator

The library offers a lot of useful features. You can sort the data however you like and also use filters to only display the necessary information. It also allows you to load data asynchronously into your table using AJAX requests. You have full control over the data that enters or leaves the table.


Data can also be downloaded directly from the table in either CSV or XLSX format. A variety of callback functions allow you to add custom interaction behavior to the tables.


Features like persistent layout based on selected user preferences across multiple visits and recorded user interactions for undo and redo functionality make the library very user-friendly. The list of features does not end here, and you can see them all in action on the library website.


Tablesort


The tablesort library is a great lightweight alternative to the jQuery Tablesorter plugin. It is ideal for people who just want some basic sorting functionality for their tables and prefer to use a standalone library.


The functionality of the library is divided into a main file and some other smaller files. The smaller files are used to provide additional sorting capability to sort dates, month names, file sizes, etc.


The library has two different event listeners called beforeSort and afterSort to help you implement your own functionality in addition to the sorting of the data. There is a refresh() method which allows you to automatically sort items once new data is added to the table via AJAX requests.


Some other features of the library include the ability to exclude rows and columns from sorting. You can also use custom attributes to specify the sorting method the library should use for a particular column or to provide sanitized data for sorting a column.


jTable


The jTable library is a free jQuery plugin to create AJAX-based CRUD tables. The plugin will automatically create tables without you needing to write any HTML or JavaScript.


jTablejTablejTable

The plugin allows you to create, update, and delete a record from the server when users make any changes to the table on the front end. It also supports server-side pagination and sorting of the table data.


There are multiple predefined color schemes based on jQuery UI or Metro UI styling. You can also provide your own custom CSS files to create a unique theme that blends with your website.


Users have the ability to show, hide, or resize the columns. They can also select multiple rows at a time to delete them in bulk. You can hook your own custom code to a large list of event listeners in order to implement any additional functionality. For example, there is a selectionChanged event that fires whenever users select a row from the table.


You can see all the working demos for this plugin on its official website, which also contains detailed documentation and a quick getting started guide.


Bootstrap Table


The Bootstrap Table library was initially meant to provide additional functionality for regular tables within the Bootstrap framework. However, it also supports many other CSS frameworks like Semantic UI and Bulma.


Bootstrap TableBootstrap TableBootstrap Table

Some basic features of the library include the ability to show or hide the header, footer, or columns in any table. You can also make a table scrollable while keeping its headers and footers fixed.


The data inside the table to populate different rows and columns can come from regular HTML, or it can come from inside JavaScript or remote URLs. The library gives you the ability to group multiple columns or load large amounts of data in a table.


There are many more attributes that you can use to control how users look for information within the table and how it is displayed to them. You can add scrolling functionality to take users to a particular row. The contents of the table can be exported in a variety of formats like JSON, XML, CSV, and plain text.


I have barely scratched the surface of the capabilities that the Bootstrap table plugin provides. Take a look at the examples page to see all its features in action.


React Table


Are you using React in your project? The React Table library provides you with hooks for creating your own fast and lightweight tables within the framework. One unique feature of the library is that it gives you full control over the markup and styling of the tables.


React TableReact TableReact Table

The library comes with a lot of useful functionality. This includes the ability to sort and filter the data inside the table to only show specific information. You can also group columns together or add a footer to your tables. Row selection is supported with and without pagination. Users will also be able to drag and drop rows to different positions inside the table.


The library also has its own plugin system that allows you to extend or override almost everything that happens with the table you create. There are quite a few examples on the official website which show you how to create anything from the most basic to advanced tables using the library.


Vue Good Table


The Vue Good Table library is a great choice for people who want to create tables that can integrate seamlessly with the VueJS framework.


Some notable features of the library include the ability to search across all the columns within the table. You can also sort the data inside the table, enable multi-column sorting, or disable sorting altogether. The library also implements column filtering as well as pagination.


Vue Good TableVue Good TableVue Good Table

You can also create tables with grouped rows. Operations such as sorting will work within their own row groups after that. Vue Good Table gives you the option to make the rows collapsible or to customize the headers to alter their appearance and add some additional elements.


It takes very little time to create feature-rich tables that support sorting, column filtering, and pagination using this library. The library also allows you to do all this on the server side instead of the client side if any such need arises.


While Vue Good Table is meant for use with Vue 2, there is another plugin called Vue Good Table Next for those who are using Vue 3.


Final Thoughts


In this post, we saw some of the best free and useful JavaScript table libraries that can add features to your plain HTML tables in no time.


You can use the jQuery Tablesorter plugin to add advanced sorting capabilities to your tables or go with the standalone library Tablesort. The Tablesaw plugin does an excellent job of making your tables super responsive so that they look great on all screen sizes.


We tried to cover all the important functionality that you could want in a table, while also listing libraries that are designed specifically with some particular frameworks in mind. Still can't find what you are looking for? Try searching for a JavaScript table library on GitHub.



Original Link: https://code.tutsplus.com/articles/best-free-and-open-source-javascript-table-libraries--cms-38436

Share this article:    Share on Facebook
View Full Article

TutsPlus - Code

Tuts+ is a site aimed at web developers and designers offering tutorials and articles on technologies, skills and techniques to improve how you design and build websites.

More About this Source Visit TutsPlus - Code