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