DataTables 1.12

It is with great pleasure that I announce the release of DataTables 1.12. This is an incremental upgrade, modernising many parts of our default styling and significantly improving internationalisation abilities.

As a quick run down, in this post I will introduce the following enhancements in DataTables:

Built in date / time rendering and ordering
Automatic locale rendering for numbers
Ordering style improvements
Row colouring improvements

With this release of DataTables we have also updated all of our extensions to ensure full compatibility, make their new features available and address known issues. Please see the end of this post for links to the full release notes for all released software.

Additionally, this release spells the end of our IE6 and IE7 support for DataTables. While the Javascript hasn't had its support hacks for those browsers removed yet (and won't be until DataTables 2), so it will continue to largely work in them, any CSS hacks for these legacy browsers have now been removed so we only distribute fully valid CSS.

Live example

Let's see DataTables 1.12 in action - it will immediately be familiar to anyone who has used DataTables before:

Name	Office	Start date	Salary
Tiger Nixon	Edinburgh	2011-04-25	320800
Garrett Winters	Tokyo	2011-07-25	170750
Ashton Cox	San Francisco	2009-01-12	86000
Cedric Kelly	Edinburgh	2012-03-29	433060
Airi Satou	Tokyo	2008-11-28	162700
Brielle Williamson	New York	2012-12-02	372000
Herrod Chandler	San Francisco	2012-08-06	137500
Rhona Davidson	Tokyo	2010-10-14	327900
Colleen Hurst	San Francisco	2009-09-15	205500
Sonya Frost	Edinburgh	2008-12-13	103600
Jena Gaines	London	2008-12-19	90560
Quinn Flynn	Edinburgh	2013-03-03	342000
Charde Marshall	San Francisco	2008-10-16	470600
Haley Kennedy	London	2012-12-18	313500
Tatyana Fitzpatrick	London	2010-03-17	385750
Michael Silva	London	2012-11-27	198500
Paul Byrd	New York	2010-06-09	725000
Gloria Little	New York	2009-04-10	237500
Bradley Greer	London	2012-10-13	132000
Dai Rios	Edinburgh	2012-09-26	217500
Jenette Caldwell	New York	2011-09-03	345000
Yuri Berry	New York	2009-06-25	675000
Caesar Vance	New York	2011-12-12	106450
Doris Wilder	Sydney	2010-09-20	85600
Angelica Ramos	London	2009-10-09	1200000
Gavin Joyce	Edinburgh	2010-12-22	92575
Jennifer Chang	Singapore	2010-11-14	357650
Brenden Wagner	San Francisco	2011-06-07	206850
Fiona Green	San Francisco	2010-03-11	850000
Shou Itou	Tokyo	2011-08-14	163000
Michelle House	Sydney	2011-06-02	95400
Suki Burks	London	2009-10-22	114500
Prescott Bartlett	London	2011-05-07	145000
Gavin Cortez	San Francisco	2008-10-26	235500
Martena Mccray	Edinburgh	2011-03-09	324050
Unity Butler	San Francisco	2009-12-09	85675
Howard Hatfield	San Francisco	2008-12-16	164500
Hope Fuentes	San Francisco	2010-02-12	109850
Vivian Harrell	San Francisco	2009-02-14	452500
Timothy Mooney	London	2008-12-11	136200
Jackson Bradshaw	New York	2008-09-26	645750
Olivia Liang	Singapore	2011-02-03	234500
Bruno Nash	London	2011-05-03	163500
Sakura Yamamoto	Tokyo	2009-08-19	139575
Thor Walton	New York	2013-08-11	98540
Finn Camacho	San Francisco	2009-07-07	87500
Serge Baldwin	Singapore	2012-04-09	138575
Zenaida Frank	New York	2010-01-04	125250
Zorita Serrano	San Francisco	2012-06-01	115000
Jennifer Acosta	Edinburgh	2013-02-01	75650
Cara Stevens	New York	2011-12-06	145600
Hermione Butler	London	2011-03-21	356250
Lael Greer	London	2009-02-27	103500
Jonas Alexander	San Francisco	2010-07-14	86500
Shad Decker	Edinburgh	2008-11-13	183000
Michael Bruce	Singapore	2011-06-27	183000
Donna Snider	New York	2011-01-25	112000

Features

Built in date / time rendering and ordering

One of the most common data types to show in a DataTable is date and time information. We've had full built in support for ISO8601 data for a long time now, but formatted dates and times would require a plug-in. No longer! The new DataTable.render.date() helper function and DataTable.datetime() function can now be used to display formatted dates and register formatted dates, respectively.

Locale formatting

When loading date and time into a DataTable, we would recommend that the wire data (i.e. that loaded by Ajax or read from the HTML) is in ISO8601 format. The new DateTable.render.date() helper can be assigned to date columns with columns.render and it will automatically format it into a format that your end user will recognise (e.g., MM/DD/YYYY in the US, DD/MM/YYYY in the UK, etc - this works globally through your browser's APIs).

For example you might use:

$('#example').DataTable({
    columnDefs: [
        {
            target: 4,
            render: DataTable.render.date(),
        },
    ],
});

Live example.

This does not require any external libraries. If you want to override the browser's locale format though, into a custom format, that is also possible with this helper, but you will need either Moment.js or Luxon to be available on your page.

Custom formats

Of course, your data might be already formatted. To instruct DataTables on how to understand these formats, use the DataTable.datetime() function, passing in a Moment or Luxon format string to register the format with DataTables (thus allowing correct sorting on the data).

DataTable.datetime('D MMM YYYY');
 
$(document).ready(function () {
    $('#example').DataTable();
});

Live example.

Note that in this case you must have Moment or Luxon on your page to register the custom formats and you should use the exact format string for the library you are using (they use slightly different formats).

Full set of examples

We have a new examples category for the date / time handling examples, which you can find here.

Automatic locale rendering for numbers

Similarly to date formats, there isn't just one common format for number display around the world (Wikipedia map of the standards used around the world). To make your numeric data easily understandable to everyone without custom configuration per locale on your part, our DataTable.render.number() has been updated to perform automatic detection.

You can now use DataTable.render.number() assigned to columns.render to have fully automatic number formatting:

$('#example').DataTable({
    columnDefs: [
        {
            target: 5,
            render: DataTable.render.number(),
        },
    ],
});

Live example.

This is done through the Intl.NumberFormat API which is available in all browsers from IE11 and newer.

Ordering style improvements

If you compare the example table at the top of this page, with a v1.11 styled table you will notice that the ordering icons have changed. Previously we used png background images to indicate the ordering state of the table. With 1.12 we have removed these images and replaced them with UTF8 icons, placed in the header with pseudo elements. This makes controlling the icons, the colour of them and other styling aspects much easier since images do not need updated now, just a few additional lines of CSS for customisation.

This change has been propagated throughout the styling frameworks that we support in DataTables (e.g. Bootstrap, FomaticUI, etc) providing a consistent integration for easy styling. The default style works really well with the supported styling frameworks.

Row colouring improvements

If you've every tried to add a background colour to a table cell or row in DataTables you might have quickly run into problems with the colours of striped rows, order highlighted rows, FixedColumns and more. What initially appeared as a simple task could quickly become dense CSS depending on the features you were using. This was because DataTable's row tinting for striped rows, etc, was done with a background colour, leading to potential conflicts.

No longer! Our row tinting is now all done with an inset box-shadow (another benefit of modernising our CSS). With an alpha channel for the tint, you can now simply apply a background colour to cells and rows, and they will just work with all of DataTables features, including row selection.

Other changes

There are a number of smaller changes as well:

When loading a language file via Ajax, local language options that are defined, will now override the remotely loaded options.
There is now a columnDefs.target option - this is simply an alias of columnDefs.targets, but useful for when targeting a single column.
The default processing indicator has been updated to be much more attractive.
The nowrap class and other text alignment classes are now available in all supported styling integrations.
pluck supports nested data.

What next?

As I noted at the start, this is an incremental update to DataTables and there is much more to come. We are working towards DataTables 2 which will include a significant change to how layout is done (the dreaded dom option!) along with better header and footer handling. Indeed, DataTables 2 is already used in production in CloudTables, but it is not ready for a release and certain features need to be rounded off. Rather than waiting for that to be done and include the features described here in that release, I wanted to get them out and available sooner rather than later. There isn't yet a defined release data for DataTables 2 - it will be done when it is done!

There is a good chance this will be the last in the 1.x series though (although I also said that when releasing 1.10 and 1.11)!

Release notes

The following are links to release notes for all of the updates we've released today:

These releases are all available from our download builder, CDN, NPM and Nuget now.