Real-Time Interactive HTML Tables With EasyBase and DataTables.net

Photo by Chris Adamus on Unsplash

Interactive tables are very effective at communicating information accessibly. These visual assets can make your website or application more usable and concise.

For a user, the opportunity to interact with data is an attractive one. There are many methods available to display your tabular data. One being the advanced HTML table creator, DataTables.net. This library is highly configurable and is used quite widely. It is extensible and supports many different styles of visualization, although manually extending the library to support your specific use-case can be difficult. Fortunately, Easybase.io integrates very well with DataTables and handles much of the hard part for you. In just four lines of code, your data can be transformed into a practical, interactive HTML table.

Getting started with EasyBase

Here I have a table with an assortment of popular objects I found on Amazon. Each product has a corresponding photo, rating, and link. You can upload data to your table with a properly configured JSON or CSV file.

Next, add a TABLE integration to your table:

This will automatically open the integration menu drawer. Add all the columns under the Get section and set Active as true.

After you save your integration, open the integration code helper:

This will give you a custom Integration ID that we will use in our HTML request. Mine is 3ZL0JNhDVkuCf-c5. Take note of your ID, as we will refer to it in the later steps.

HTML Table Integration

Now either open a new or existing HTML file and add the following to your head:

<script src="https://cdn.jsdelivr.net/gh/easybase/easybasejs-visual@1.0.8/dist/bundle.js"></script>

I’ll be demonstrating on a new HTML file, so at this point my workspace would look like the following:

This imported script will add a global variable EasyBase that features a function called table. This function will get your data from EasyBase and manipulate the DOM with styling and various table elements. We will also see how this function can be used to pass options into DataTables. For more information, read the documentation here.

Next, add table tag into your website’s body and give it a unique id attribute. For example, your id could beeasybase_table. That is what I will be using.

Finally, add a script tag at the bottom of your body tag. This is where we will call our TABLE integration with our Integration ID that we previously took note of. In this script, call EasyBase.table("YOUR_INTEGRATION_ID", "YOUR_TABLE_ID").

If you save your HTML file and open it in chrome (or any other web browser) you will see a functional table. You may be satisfied if your data is relatively primitive but you probably want to configure the look and feel of your interactive table. In my case, the table is displaying the Amazon link as plain text (since that is how my EasyBase collection is configured]).

But I want it to be a clickable link.

This is where we use the columnOptions function parameter. It is the 6th parameter in the function and takes an object that maps a column name to a Datatables.net column options object. For example, the EasyBase visual library automatically configures images by default with this object (feel free to overwrite these options):

A list of possible options can be read here.

Back to our example.

I want to convert the Amazon Link from plaintext to a clickable link that reads ‘Click Me!’. This could be accomplished with an a tag with the href attribute being equal to the current value. Therefore, our columnOptions object would look like the following:

Bringing Everything Together

Let’s put our custom column options in our HTML file. The result of this looks like the following:

This will result in an interactive table where the Amazon link is a clickable table element.

Conclusion

In this article we went over how to use EasyBase.io and DataTables.net together to create real-time, interactive HTML tables. Later, we will look into how we can use import custom queries in our TABLE integrations to do advanced filtering on our searchable table.

Thanks for reading! Feel free to leave a response regarding any questions.

If you build it, they will come.