Editor 2.4 and DataTables 2.2

It is always nice to start the New Year with some freshly baked software, so I'm delighted to announce the release of Editor 2.4 and DataTables 2.2. Both are iterative releases, building on the solid foundations of each and introducing new features to make both the development of software with them and the end user use of the software, even more present and flexible.

Editor 2.4

Let's talk about Editor first - while the focus has largely been on DataTables core recently, Editor development has been keeping stride and there are some exciting new features in this release. If you are keen to just jump in:

Autocomplete and tags

The biggest new feature in Editor 2.4 is the introduction of two new field types: autocomplete and tags. These new field types are similar to the inputs that can be generated with Select2 / Selectize and other select enhancing libraries, but are directly integrated into Editor, not only on the client-side, but also the server-side libraries that we produce (currently PHP, .NET and Node.js).

The autocomplete input type allows freeform text input, but will also show the end user predefined options (typically values that already exist for that column) in a list below the field, and can be selected via keyboard or mouse interaction. The list of options for the autocomplete list can be static (small data sets) or dynamically updated based on the input value (large data sets).

Auto-complete with custom tags - see this example live.

With tags rather than allowing freeform input, a list of options will be shown that can be selected from. This list can be searched from a text input, and like autocomplete is either populated via a static list, or dynamic Ajax. tags is "multi-selection" first - i.e. it is perfect for use as an array value picker (Mjoin in Editor terminology), but can also be configured to work with scalar values.

Tags with multiple selection - see this example live.

Both autocomplete and tags operate with the server-side Options class that is present in our PHP, .NET and Node.js libraries for Editor (it is also fully documented if you are using your own server-side code). The Options class can be used to drive checkbox, datatable, radio and select as well as these two new field types. This makes it very easy to switch between various input types as your app requires.

The documentation for Options has been split into its own section in the manuals: PHP | .NET | Node.js.

Its use is typically as simple as setting the table name, label and value columns:

new Field('users.site')
    .options(new Options()
        .table('sites')
        .value('id')
        .label('name')
    );

There are plenty of other configuration options to provide customisation if you need them as well! See the docs for full details.

For live examples of the new field types, see the new Dropdown section of the examples.

ES Module improvements

When using Editor with an external framework and ES Modules, you need to tell Editor about the framework that you have loaded in, so it can use it in the styling integration. For example, the Bootstrap modal needs to be available if you want to use it for the Editor lightbox. This isn't an issue with traditional <script> loading, since it is registered globally and Editor can look for that, but with ES Modules, the module is local.

Previously this was solved using DataTable.Editor.bootstrap() (and other functions for other styling frameworks), but with DataTables 2.2 and Editor 2.4, you can simply register the styling framework with DataTable.use() and Editor will now be able to check and use that (the old way still works as well for backwards compatibility).

In short, to use Bootstrap 5 styling with Editor in an ES Module environment, you can now do:

import * as bootstrap from 'bootstrap';
import DataTable from 'datatables.net-bs5';
import Editor from 'datatables.net-editor-bs5';

DataTable.use(bootstrap);

The Download builder will soon be updated with these details.

There are a number of other improvements and a range of fixes and updates in Editor 2.4 (e.g. full Bulma 1.0 support, a new i18n() method, and more) - full details of which you can find in the release notes.

DataTables 2.2

While Editor takes the headline in this release cycle, DataTables 2.2 receives a number of welcome upgrades as well. It is available for immediate use from the CDN, download, NPM, Nuget and wherever else you want to get your Javascript source files:

Automatic resizing calculations

Ever since the first version, DataTables has performed column width calculations to keep the columns stable between pages, and latterly for scrolling tables. If a table was initialised hidden for whatever reason (e.g. in a tab, or just to show a loader), there would be no height/width for the calculations to be performed and thus columns.adjust() would need to be called when the table is made visible to allow those calculations to be made.

Previously DataTables would call this method automatically when the browser window was resized, but there was no way to know if the DataTable container alone changed size. That was until I was recently made aware of the existence of ResizeObserver, which provides exactly that information.

With DataTables 2.2 and any browser that supports ResizeObserver (all of them released since 2020) the column width calculations are now done automatically! It might sound like a trivial thing, but this is something that bit a lot of us. You can see an example with Bootstrap tabs - previously when the second tab was made visible, columns.adjust() would need to be called, or the table would be misaligned. That is no longer required.

State restore and columns

State saving (stateSave / state()) would to throw out states if the number of columns in the state doesn't match the number that the table knows about - this is because there is no way to know which column a column state would apply to. With DataTables 2.2, the state system makes use of columns.name to uniquely identify a column. If columns are named, that information is stored in the state and then parsed and applied as needed when restoring a state. This means columns can be added, removed and reordered while old states can still be loaded.

Furthermore, if the columns don't match, and columns haven't been given names, while the column states can't be restored, other properties of the state, such as paging and search will now be restored.

Also more!

As with Editor, this only scratches the surface of the changes in DataTables 2.2 (for example the extended DataTable.use() mentioned in the Editor section above, diacritic sorting for HTML-based columns, and more). As well as the new features, there are also a range of bug fixes and improvements for Typescript integration. Full details are available in the release notes.

So what's next for DataTables? Beyond surfacing for breath after putting together these releases, in the short term, the download builder will receive an update for clearer ESM usage, and some general improvements to the documentation. Medium term, I have plans for new extensions which I look forward to announcing details of later in the year.