DataTables 3 beta!
It is with real pleasure that I announce the release of the first beta of DataTables 3. DataTables is one of the most popular Javascript table enhancing libraries on the web, providing interaction controls and APIs for data tables. With this release, it takes a major step forward into the modern web.
If you want to jump in immediately, use the beta download builder, or check out the examples.
This post is part of a number of related documents detailing the release of DataTables 3:
The extensions have also been updated to operate with DataTables 3 (please note that these new versions require DataTables 3 and will not operate with older versions of DataTables). The full suite of software releases as part of this beta is shown below:
| Software | Version | Release notes | Examples |
|---|---|---|---|
| DataTables | 3.0.0-beta.1 | Notes | Examples |
| AutoFill | 3.0.0-beta.1 | Notes | Examples |
| Buttons | 4.0.0-beta.1 | Notes | Examples |
| ColReorder | 3.0.0-beta.1 | Notes | Examples |
| ColumnControl | 2.0.0-beta.1 | Notes | Examples |
| DateTime | 2.0.0-beta.1 | Notes | Examples |
| FixedColumns | 6.0.0-beta.1 | Notes | Examples |
| FixedHeader | 5.0.0-beta.1 | Notes | Examples |
| KeyTable | 3.0.0-beta.1 | Notes | Examples |
| Responsive | 5.0.0-beta.1 | Notes | Examples |
| RowGroup | 2.0.0-beta.1 | Notes | Examples |
| RowReorder | 2.0.0-beta.1 | Notes | Examples |
| Scroller | 3.0.0-beta.1 | Notes | Examples |
| SearchBuilder | 2.0.0-beta.1 | Notes | Examples |
| Select | 4.0.0-beta.1 | Notes | Examples |
Editor has been updated, but Editor v3 is still in development and will be released for DataTables 3 soon. SearchPanes, StateRestore and the plugins have not yet been updated and will follow in due course.
Highlights
Let's take a look at the major changes in DataTables 3:
Dependency free
When I started work on DataTables in 2007, jQuery was the foundation library many developers turned to, smoothing out browser quirks and different APIs. While jQuery is still an excellent utility library for interacting with the DOM (and still used by the majority of websites), browsers now have much more consistent APIs, so it is now much easier to no longer require an external utility library.
As a result, I've now felt comfortable removing jQuery as a dependency for DataTables and its extensions, instead creating a utility library that is specifically designed and optimised for DataTables, maintaining the wide compatibility that a library such as DataTables should provide without a ridiculous support burden. The result is an overall smaller code size for the page and higher performance for DataTables.
When I ran a survey on the future of DataTables last year, it was clear that respondents wanted DataTables to operate without jQuery. It now does.
It should be highlighted that DataTables will still operate with jQuery! If you are happy using jQuery, then continue doing so - DataTables still registers itself as a jQuery plugin (if present), and provides all the same abilities as before, including interacting with the jQuery event system.
TypeScript base
DataTables core (and the extensions) have now been fully ported to TypeScript. Although end users won't see anything different as a result, the development process for making changes to DataTables is now much easier - tsc and rollup are used as part of the build process now, rather than bash scripts that I used to bring the individual files together. This means that compile-time errors can find trivial errors immediately, and larger changes can also be made much quicker. Having a TypeScript base also greatly improves the typing integration for DataTables which is much improved in v3.
As part of this process, I've also changed much of the internals of DataTables, losing the legacy naming conventions that it used, and updating the code to be much more "modern". While I have updated the extensions to be compatible with this change, it does mean that any custom plug-ins that you might have created yourself will need to be updated (see the upgrade notes) - by far the majority will have no issues here - it is only if you used the internal private properties of DataTables that you would have to take steps to update here.
Search
While the first two points have taken the vast majority of the work for DataTables 3, there are a couple of other notable changes, including improvements to the API search abilities for DataTables.
Previously, columns().search(), when working with multiple columns, would apply the same search to each column - i.e. an AND operation. With DataTables 3, this has been changed to allow it to operate more like the global search, whereby you can select any sub-set of columns and perform a search across them - i.e. an OR operation. This provides much greater flexibility for building complex searches that span multiple columns.
Furthermore, the search APIs have been harmonised and the fixed search methods can now also have a SearchOptions object passed in, allowing easy operations such as exact matching, boundary operations and more.
CSS variables
This release sees the removal of SCSS build time variables and instead leans heavily into CSS variables. With wide support for CSS variables and the flexibility they offer, particularly when used to provide light and dark modes, I've elected to make use of them through the DataTables and extension's code bases. The removal of the SCSS variables also greatly simplifies the generated CSS code and reduces the overall file size.
Not every visual aspect of DataTables has a CSS variable yet, and documentation of those which have been used will take a while for me to develop, but this is a strong step to easy customisation of the look and feel for your tables.
And more...
There have been other, smaller changes in DataTables 3 as well - better visual consistency for the buttons, improvements in individual API methods, performance enhancements, improved ESM options and more. Please see the 3.0.0-beta.1 release notes for full details.
Download and use v3
Ready to give it a go?! There is now a download page for DataTables 3 beta which will give you the usual download options:
- CDN
- npm / yarn / etc
- Download
The download builder will give you the compatible versions for all of the extensions (with the exceptions of Editor, SearchPanes and StateRestore, which are not yet available for DataTables 3 at the time of writing). Select the software you want, the styling framework required and then install using your preferred method.
The DataTables 3 examples are available on this site for you to try them out - see the links at the top of this page for the extensions as well.
Next steps
Almost all of the extensions have been ported to work with DataTables 3 and follow its ground rules (TypeScript base, no dependencies), and you'll be able to use them from the download builder or npm as described above. As noted above, two extensions, SearchPanes and StateRestore, have not yet been ported and will be rewritten in the near future. The plugins have also still to be ported.
Furthermore, the documentation on this site still refers to the current release (2.3.x). When DataTables 3 is promoted to the nightly builds, the documentation on the site will be updated (with labelling to show what is v3 specific). As such, there might be some broken links from the v3 examples at the moment - apologies.
I would ask, if you use DataTables, please try DataTables 3 beta out and let me know how you get on with it! While I have extensive tests for DataTables, inevitably, there might need to be some tweaks made, and it would certainly be much better to catch them now during the beta than needing to make changes after the production release (you are software engineers as well, you all know how this goes!).
All being well, DataTables 3 will be merged to master and promoted to the nightly builds in approximately one month, and a full release following that, with timing based on feedback.