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(),
},
],
});
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();
});
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(),
},
],
});
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 ofcolumnDefs.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:
- DataTables 1.12.0
- Editor 2.0.8
- AutoFill 2.4.0
- Buttons 2.2.3
- ColReorder 1.5.6
- FixedColumns 4.1.0
- FixedHeader 3.2.3
- KeyTable 2.7.0
- Responsive 2.3.0
- RowGroup 1.2.0
- Scroller 2.0.6
- SearchBuilder 1.3.3
- SearchPanes 2.0.1
- Select 1.4.0
- StateRestore 1.1.1
These releases are all available from our download builder, CDN, NPM and Nuget now.