Adding icon columns to DataTables with FontAwesomePosted: September 14, 2016
If you are modernizing a Notes/Domino application, chances are there are many underlying views that make use of column icons, which have always been one the great little features that users really loved about Notes. As Domino web apps became more prevalent, you could even create img tags that pointed to the icon source files on the server (oooohhhh!).
In the modern app world you are probably using icons that are more … modern, such as Font Awesome.
If you are using jQuery DataTables as well, then it is incredibly easy to add much more functional column icons to your DataTable using a Renderer.
Note: this article assumes the reader has an understanding of how a DataTable is configured using the columns object.
The example below takes the email column and turns it into an icon that, when clicked, will launch a new mail message addressed to the person listed on that line.
We want to turn this:
1.) Setup the view data source that feeds the DataTable.
This can be done by adding a new column to the datasource that contains a JSON string. This is personal preference – you can setup the column however you wish. The important thing is passing the data needed to render the icon to DataTables.
The JSON string in my new column has three properties:
- renderer – has the value “getIcon”.
- icon – this property contains the class(es) of the Font Awesome icon to be used.
- data – this is the raw email address. We want to include this for filtering and sorting.
2.) Now that the data source is setup, update the columns object of our DataTables initilization:
In previous examples our columns object looked like this:
Now, we are replacing the “email” entry with a new entry that will render the Font Awesome icon by using the “render” property of the columns object:
Our view that utilizes the renderer now shows an icon in the email column:
Clicking on one of the mail icons launches a new memo:
Even though our email column is now displaying an icon instead of an email address, we can still filter on email address due to DataTables’ handling of orthogonal data. By filtering on the domain spambob.com, we get only the records that have an email address with that domain.
The working demo for this example can be found here.
Even though this is a fairly basic example, it is incredibly easy to add icons to views created with DataTables – it was simply 2 additional steps. This is only the tip of the iceberg for both Renderers and View Icon Columns.