Sooner or later, and normally sooner, every web application developer will need to use dynamic tables. It is hard to imagine an application that doesn’t require the ability to present tabulated data to the user. Being able to populate that data on the fly and allowing the user to interact with it is a must. In this article I take a look at both creating my own dynamic tables and implementing the excellent DataTables component.

Creating Dynamic Tables

Several years ago I found myself frustrated by the limitations of a static table for presenting data. There are three key drawbacks to them:

• Not sortable.
• Not scrollable.
• No direct support for REST.

I had tried third party dynamic tables in the past, but these had been part of an overly bloated suite of ASP.NET components. I wanted something that was purely Javascript.

The first step for me was to create a component that could link to a blank table in a page’s HTML and create an API hook. This was implemented as a self registering component. All I had to do was include a link to my Javascript library and any table with the correct Class would become a dynamic table.

The next step was to add functions that allowed me to add and manipulate rows of data on the fly. Essential this was the part where the tables actually became dynamic.

The third step was to implement user interaction: returning the selected record on single click and double click, intercepting header clicks for sorting and allowing multiple record selection when needed.

The final step was the hardest. I needed to get the CSS right to format the table, so that it not only looked attractive but also allowed scrolling. I also needed to add Javascript to resize the table and columns.

Happy with the resulting component, I soon used it in several projects, each with different usage requirements.

Using the DataTables Component

More recently I was working on another web application project that required dynamic tables and at first I started implementing my own component. However, I needed some functionality that I hadn’t written. I had recently heard a recommendation for DataTables by SpryMedia and I thought I’d check it out.

I very quickly replaced one of my own tables with the DataTables component. It took some tinkering to get it to work but once I had it up and running it was clear this was a mature and well developed component. I started by making it display dummy data. I then needed it to connect to my own datasource and this turned out to be a dream come true. Rather than my own script firing of a REST request for the data and processing the result, inserting records into the table, I could just pass the API path to DataTables and it did all the heavy lifting. It wasn’t long before I had replaced all my dynamic tables with DataTables.

I would highly recommend any web developer that needs a dynamic table check out DataTables.

SAMWare UK creates bespoke solutions and websites. Contact us to arrange a chat to discuss your needs and for a free no obligation quote.