New in DataTables 2
DataTables 2.1 is the first minor release of the 2.x series and introduces a number of new features, as well as addressing points that have come to light since 2.0 was released.
This document is part of a number of related documents detailing the release of DataTables 2.1:
Layout
One of the big new features in DataTables 2 was the introduction of layout, which replaces the legacy dom option as something that is much easier to work with. Based on feedback 2.1 now places features that are in the same layout cell (i.e. an array) on the same line. Also items in a full width cell (e.g. simply top or bottom) are spaced evenly on the row.
To see this in action, consider the table below:
| 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 |
Here the top most row (top1) has only a Start cell, and you'll be able to see that the three feature elements are on the same row. The next row also have three feature elements, but as it is a "full" row, they are equally spaced. This addition makes it much easier to have more than just two items on a row, while keeping the ease of use of layout.
A more complete example of the layout options is available here.
IDs and class names
2.1 also introduces the ability to set the class name and id of rows and cells created by layout. See this example and the layout documentation for details.
Table width
Related to layout, DataTables will now automatically set the table width to 100% if no style="width: ... or width attributes are found. Almost all tables I've encountered use 100% width, but it is surprisingly difficult to read a relative value from CSS, so DataTables will now make this assumption to help assist with clean and simple markup.
Data type detection and accented characters
DataTables 2.1 introduces a major enhancement to the way data type detection works. Previously a single function was used and if all data points in a column passed the function's test the column would be assigned that data type. However, that lead to issues with similar and empty data - for example a column with FontAwesome icons in it could be found to be numeric, since the HTML was stripped and the numeric data type allows empty cells!
With 2.1 a type detection function can now specify oneOf and allOf functions. At least one data point from a column must pass the new oneOf function, while allOf is the same as the previous behaviour. Backwards compatibility is still assured with support for a single function. This allows a tightening of the data type tests, which have been implemented.
Auto ordering for accented characters
As part of the type detection improvements, 2.1 introduces a new data type: string-utf8. This is distinct from string and is matched if a string contains a character that is outside the ASCII range. This new data type will make use of localeCompare to order data, allowing correct ordering for accented characters. It is not used for columns with ASCII only characters as it is slower than a simple string compare.
Bulma 1
Bulma is a popular CSS framework for building modern web apps and sites, and has long been supported by DataTables. Earlier in the year Bulma released 1.0 (huge coagulations to the team) and DataTables 2.1 has been updated to fully support the new release. Bulma also introduced a dark mode in 1.0, which is also now fully supported in DataTables. The DataTables examples can all have "Bulma" selected as the styling framework, and you can alternate between light and dark mode as needed.
This takes the support for dark mode in our supported frameworks to three: DataTables default, Bootstrap 5, and now Bulma 1.
Use method
When loading DataTables directly in the browser it will automatically look for certain libraries such as Moment.js and Luxon, making use of them if available. This isn't possible in an ESM environment where libraries don't attach to the global scope. In such a case you need to tell DataTables about the external libraries, which you can now do with the DataTable.use() static method.
For example, the code below is the same as this example, but for ESM (to then be transformed via a bundler such as Vite or Webpack):
import moment from 'moment';
import DataTable from 'datatables.net';
// Tell DataTables that it can use Moment for date formatting
DataTable.use(moment, 'moment');
// Tell DataTables what date format you want to look for in the HTML data
DataTable.datetime('D MMM YYYY');
// Initialise DataTables
new DataTable('#example');
And more...
There are other smaller additions to 2.1 - these are just the "big ticket" items. Please see the release notes for full details on additions and changes in DataTables 2.1.