Friday 13th May, 2022
By Allan Jardine

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:

NameOfficeStart dateSalary
Tiger NixonEdinburgh2011-04-25320800
Garrett WintersTokyo2011-07-25170750
Ashton CoxSan Francisco2009-01-1286000
Cedric KellyEdinburgh2012-03-29433060
Airi SatouTokyo2008-11-28162700
Brielle WilliamsonNew York2012-12-02372000
Herrod ChandlerSan Francisco2012-08-06137500
Rhona DavidsonTokyo2010-10-14327900
Colleen HurstSan Francisco2009-09-15205500
Sonya FrostEdinburgh2008-12-13103600
Jena GainesLondon2008-12-1990560
Quinn FlynnEdinburgh2013-03-03342000
Charde MarshallSan Francisco2008-10-16470600
Haley KennedyLondon2012-12-18313500
Tatyana FitzpatrickLondon2010-03-17385750
Michael SilvaLondon2012-11-27198500
Paul ByrdNew York2010-06-09725000
Gloria LittleNew York2009-04-10237500
Bradley GreerLondon2012-10-13132000
Dai RiosEdinburgh2012-09-26217500
Jenette CaldwellNew York2011-09-03345000
Yuri BerryNew York2009-06-25675000
Caesar VanceNew York2011-12-12106450
Doris WilderSydney2010-09-2085600
Angelica RamosLondon2009-10-091200000
Gavin JoyceEdinburgh2010-12-2292575
Jennifer ChangSingapore2010-11-14357650
Brenden WagnerSan Francisco2011-06-07206850
Fiona GreenSan Francisco2010-03-11850000
Shou ItouTokyo2011-08-14163000
Michelle HouseSydney2011-06-0295400
Suki BurksLondon2009-10-22114500
Prescott BartlettLondon2011-05-07145000
Gavin CortezSan Francisco2008-10-26235500
Martena MccrayEdinburgh2011-03-09324050
Unity ButlerSan Francisco2009-12-0985675
Howard HatfieldSan Francisco2008-12-16164500
Hope FuentesSan Francisco2010-02-12109850
Vivian HarrellSan Francisco2009-02-14452500
Timothy MooneyLondon2008-12-11136200
Jackson BradshawNew York2008-09-26645750
Olivia LiangSingapore2011-02-03234500
Bruno NashLondon2011-05-03163500
Sakura YamamotoTokyo2009-08-19139575
Thor WaltonNew York2013-08-1198540
Finn CamachoSan Francisco2009-07-0787500
Serge BaldwinSingapore2012-04-09138575
Zenaida FrankNew York2010-01-04125250
Zorita SerranoSan Francisco2012-06-01115000
Jennifer AcostaEdinburgh2013-02-0175650
Cara StevensNew York2011-12-06145600
Hermione ButlerLondon2011-03-21356250
Lael GreerLondon2009-02-27103500
Jonas AlexanderSan Francisco2010-07-1486500
Shad DeckerEdinburgh2008-11-13183000
Michael BruceSingapore2011-06-27183000
Donna SniderNew York2011-01-25112000

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.