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.
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
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.
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.
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.
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.
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
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.
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.
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.
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.
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.
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.
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.
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.
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.