DataTables 2.1

Time files! It doesn't feel like long since the big release of DataTables 2.0 dropped, but actually it has been four months. In that time there have been eight patch releases of 2.0.x tweaking little bits and addressing a bugs as they were found. It is now time to introduce DataTables 2.1 with a number of new features and refinements over 2.0.

This blog post is part of a series of documents detailing the 2.1 release:

This blog post will summarize the release - please refer to the other documents for further details.

Let's take a look at some of the new features of 2.1 by considering the table below:

Name	Link	Like

Firstly, you might notice that the three feature elements above the table are equally spaced on a single row. This is done simply with the layout option and setting the features we want in that row to be in an array:

layout: {
    top: [
        'pageLength',
        'buttons',
        'search'
    ]
}

Prior to 2.1, the default CSS would have rendered each feature on its own line. Now features in a layout full-width cell will be spaced equally along the row. Start and End cells also benefit from this change and allow multiple features to be shown on a single row. A more detailed example is available here.

Secondly, if you click the button, you'll get an alert showing the data types of the columns. You might notice that the first column has a new data type: string-utf8, which causes DataTables to order data using localeCompare, ensuring correct ordering for accented characters. You'll also be able to see that the FontAwesome column is not numeric which 2.0 would incorrectly identify it. This fix is due to a significant improvement in the data type detection abilities of DataTables.

Finally for this example, if you were to look at the HTML for the table you would see the table is simply <table id="blog-2-1" class="display">. In all previous versions of DataTables you would most likely had to add style="width:100%" to make sure the table responds to width changes on the page.

Setting the world alight?

Of course, these small changes in a minor release aren't going to set the world alight, but they are small conveniences that make using DataTables a little bit easier. Add all the small conveniences together, and it adds up to a much more pleasurable library to use!

There are other new features, such as full support for Bulma 1.0 (including dark mode), and the new DataTable.use() method for ESM environments. Please see the release notes for full details of all additions, changes and fixes.

Upgrading

Upgrading to 2.1 is just a case of updating DataTables JS and CSS files:

If you are using npm / yarn, run an upgrade on the datatables.net* packages
If you are using our CDN, get the latest sources from the download builder
If you host downloaded files, you can also get the latest files from the download builder.

You are unlikely to run into upgrade issues when moving from 2.0 to 2.1, but it will be worth checking the upgrade notes just to be sure. The biggest change that might affect visuals, if you had custom CSS that affected the layout grid, will be the change to have features in a cell on a single row. Any custom CSS might need to be updated or removed.

If you haven't yet tried DataTables 2, please see the release blog post for it.

As always, I hope you enjoy using DataTables. Feedback is always welcome in the forums.