DataTables 3.1 now available

allan

Hi all,

DataTables 3.1 is now available on npm and through the download builder. 3.1 does not provide any significant change in the functionality of the software, but rather focuses on improving the npm packages for DataTables for modern bundlers, and allows DataTables to be evaluated in a windowless environment. Release notes here.

Windowless evaluation

DataTables, as a client-side UI library, requires a DOM in which to run, typically inside a window. Previously, assumptions were made that the global window and document objects would be available when DataTables was loaded (i.e. prior to initialisation). With modern server-side component libraries and routers (e.g. Next.js), this isn't always the case now - sometimes you want DataTables to be loaded in Node.js directly. With 3.1 this is now possible - you can do:

import DataTable from 'datatables.net';

in Node.js without any error (client-side support has been in place for many years for this, this change is specifically for evaluation on the server-side). I'll be posting on the blog about this in more detail soon.

The upshot of this is that it is now much easier to use DataTables in frameworks such as Next.js. You can also use DataTables with jsdom if you wanted to render a DataTable completely server-side.

If you are using DataTables purely client-side, you'll notice no change.

NPM package improvements

Bundlers will look in package.json for each Node module you have loaded to see what a package supports and how it can get the code it needs from the package. Previously, the module, main and style properties were used in the DataTables packages, and while they are still there for backwards compatibility with older bundlers, the DataTables 3.1 packages now make use of the exports property.

exports lets us define the entry points, based on the path, to specific files / loaders. Webpack, Vite, Node.js and others all support this property, and will seamlessly use it for DataTables now that the packages define it. For loading the Javascript you'll notice no difference. For the CSS, in some cases you used to need to know and use the path to the style file:

import 'datatables.net-dt/css/dataTable.dataTables.css';

This is no longer the case - you can now simply do:

import 'datatables.net-dt/css';

All of the DataTables and extensions styling packages now support the /css path to load their style file.

Extensions

All of the DataTables extensions have received updates to match these two capabilities of DataTables core. They are all available on npm and the download builder now!

Allan