Making Use Of columnDefs Option In DataTables
HTML tables are a common element in web applications and websites. They are a convenient and effective way of representing data in rows and columns.
While tables are powerful tools, the user can only have so many rows to traverse and comb through before it becomes terribly inconvenient. The need for searching, sorting, ordering and pagination of tables is therefore born. HTML table plugins aim to fill this gap and DataTables is one of the many javascript table plugins/libraries out there.
DataTables was intended as a plugin for the jQuery javascript library and it brings with it all the above advanced table features amongst others. It is open source and there are quite a number of server side libraries for DataTables on Github across different languages and different frameworks. It is therefore used by quite a number of developers out there.
That’s a long enough introduction on DataTables. This post will look at a particular option available in the configuration of a DataTables instance and that in my experience is quite a powerful one, the columnDefs option.
This post will briefly cover how to instantiate a DataTables instance and then we will jump straight into the various use cases for the columnDefs option and how to utilize it in the said use cases.
How to instantiate DataTables
On top of the jQuery library, You will need two files to be able to use DataTables, the style sheet and the javascript file, both of which are available through a cdn.
// jQuery file
https://code.jquery.com/jquery-3.6.0.min.js// DataTables files
https://cdn.datatables.net/1.12.1/css/jquery.dataTables.min.css
https://cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js
A table can be turned into a datatable instance in two ways. The first way is to populate the table with the data then instantiate it as show below.
This second option is used when utilizing data from an external source, for example from a JSON Object obtained from the server during rendering time, from an API call, from an AJAX call with server side datatables or from an external JSON file. With this second option, the tbody of the table should be empty before DataTables is instantiated.
Using both methods for the same dataset will produce the following result.
Use cases for the columnDefs option
The columnDefs option essentially allows the developer to make modification to the cells (td) of a specific column, all from a central point. These modifications include rendering a custom element rather than the data source as a text and adding a custom css class to the cell, among others. The columnDefs option is ideal for such instances.
How to use the columnDefs option
columnDefs is defined in the instantiation of the table as a DataTable object. In its basic form, one needs to specify the target of the modifications in an array of the targeted column’s indexes, with the columns being zero indexed. Once the target is defined, the rest of the properties are added.
DataTables caters for negative indexes to facilitating target columns from the end, with -1 as the last column.
Using columnDefs to add a css class to specific column(s)
You might arrive at a point where you want to apply specific styling to a column. For example, in a column with people’s names, you might want the text to appear in upper case. Another common use case would be when rendering numeric data. It is common to right-align numeric figures and also use mono-space font to facilitate easy comparison.
This produces the following:
While datatables allows you to define this in the columns option, with columnDefs you can configure multiple columns from a single point. This can be done using the className option in the columns configuration.
Using columnDefs to edit column properties
Properties that can be edited include visibility, searchability and whether the column should be orderable. Visibility is important when columns that might contain properties that the developer considers private such the id of a resource. Making a column not orderable is important for columns that contain actions such as the delete and edit button.
Using columnDefs to render something different
We have mentioned in the above sub section about action columns; where you might need buttons to edit or delete a resource. In such cases, columnDefs enables the developer to render something different from the data source in the column. For example, if the column has the id of the resource as the column data source, you can render something using the id.
It’s important to note that the anonymous function in the render option has three parameters. The first parameter data provides access to the data source of that specific column. In the above example, the targeted column has id as its data source. Thus the data parameter will provide access to the id attribute. The second parameter type will provide access to the type call data, which is used for DataTables’ orthogonal data support. The third parameter row is the full data source for the row.
Applying columnDefs to use a different data source as the sorting parameter
That sub title is a little confusing, but let’s use an example to clear things up. The createdAt as an attribute appears as text and sorting it as text would not universally produce the right result. The better way would be show it as text but sort it using its unix timestamp equivalent.
DataTables enables the developer to sort a column using data from a different column, often one that is hidden.
This option is available to both the columnDefs and columns option.
Conclusion
For advanced usage of DataTables, knowledge of the columnDefs option can prove to be quite useful. It will enable you navigate some roadblocks with ease. The full documentation of columnDefs and the options available to it can be found here.
The post utilizes only snippets of the full code in most gists, full code to the demos can be found here.
