The Frontend Company Loves DataTables

At The Frontend Company, we recently worked with Digital Business Card — a platform for creating and sharing virtual business cards. Part of our job was to make navigating large lists of users and cards easy and fast. As expected, we encountered one classic frontend problem: tabular data.

The Problem

In a DBC application, there are many tables of data, such as a company's employee directory and an individual user's list of saved contacts. Digital Business Card users interact with these lists constantly to manage their connections. One popular request they heard was the ability to sort and filter these tables easily. For our client, the top priority was to implement sorting and searching on the contacts list first, so users could quickly find a specific contact or card.

The Solution We Provided

We began developing our own JavaScript functions to add search and filtering capabilities to the tables. However, we quickly realized that there must be a robust tool already available to handle this. After some research and recommendations from fellow developers, we decided to try DataTables - a library known for adding advanced interaction features to HTML tables.

How DataTables Helped Us

We downloaded the default DataTables package and added the required files to our project. Next, we included the two core files, datatables.min.js and datatables.min.css, in the Digital Business Card application. The final step was to initialize our contacts table with a single line of JavaScript:

$('#tblContacts').DataTable();

Instantly, we had a fully functional table with built-in sorting and filtering! The contacts list became searchable and could be sorted by any column in seconds. This immediate result was fantastic and saved us countless hours of coding custom solutions.

The Extras We Didn't Expect

The basic functionality worked great out of the box, but DataTables also provided advanced options that allowed us to shape the table exactly as we wanted. For example, we enabled the stateSave option so that the table remembers its last filter and page, even if a user navigates away or refreshes the page.

Additionally, we took advantage of DataTables' responsive design support, allowing our tables to adapt nicely to mobile devices.

The Frontend Company

User Feedback After Release

Once we rolled out DataTables in the Digital Business Card app, the response from users was overwhelmingly positive. Users found it much easier and faster to locate specific contacts or information by using the new search box and clickable column headers to sort.

In fact, examining usage data revealed a significant number of users actively utilizing the filter and sort functions, confirming that the addition of DataTables had made their day-to-day tasks more efficient.

Our Next Steps with DBC

After the success with the contact list, we plan to incorporate DataTables into more areas of the Digital Business Card platform. The next candidate is the company employee directory page for their corporate clients, where administrators manage all their employees' digital cards. Adding DataTables there will allow for quick searching and sorting of employees.

We're also considering using DataTables for an analytics page that lists card-sharing events, so users can filter and sort when and where their card was viewed. After these, we will continue applying DataTables to other data listings throughout the site to enhance usability.

We delivered a better UX in less time, and users appreciated it. Thanks, DataTables.