DataTables 2.2.0

DataTables CDN files for DataTables 2.2.0. This software was originally released on 6th January, 2025.

Release notes

Kicking the new year off with a significant release of DataTables! This release makes the manual calling of columns.adjust() redundant by doing it automatically as a table is resized! There are also improvements in state restoring, styling framework integrations and more. Please see the release notes below for full details.

New

Automatic resizing when the table's container changes width (uses ResizeObserver). The upshot of this is that you don't need to call columns.adjust() any more if the table is made visible, having initially been hidden, or its container otherwise changes width due to some other resizing on the page.
Support for state restoring when columns have been reordered, added to or removed. This requires that columns.name be set to allow a column to be uniquely identifies. If it is not set then column state will not be loaded if the number of columns in the table changes (i.e. similar to 2.1-).
html-utf8 data type which supports correct diacritic sorting - i.e. it is the same as string-utf8, but with support for HTML in the string.
DataTable.use() can now have Bootstrap (5) and Foundation JS libraries set so extensions such as Editor and Responsive can use the JS function (e.g. Modal). They had their own methods for that in the past (which will work for backwards compatibility), but this provides a single common approach for all libraries that DataTables components can use.
CSS variables to control row hover alpha

Updated

Moved the tab focus (for keyboard access to ordering) to the ordering icon, rather than the full header cells. This makes a lot more sense as it acts as a button to trigger ordering, and it addresses a spec violation error which dictates that you cannot have aria-sort and tabindex on the same elements.
State restore will still attempt to restore the state for paging, page length and search, even if the number of columns has changed.
The state object now includes a name property for the columns array and if a column name is set, in the sorting array.

Fixes

If columns.className is used to define an alignment class such as dt-left, it will now take priority over the automatic type detection classes.
Update columns.orderData documentation to note that you will likely want to include the original source column so the order indicator at the top of the table is correctly shown.
layout's output depended for a row depended on the order Start and End were given in. That is no longer the case and Start will always precede End in the DOM.
Remove the name attribute from the length dropdown select (pageLength). This prevents it from being submitted in a form.
Headers which used colspan with a single row would throw an error
tabIndex wasn't being obeyed for the column headers
Don't set aria-disabled on the ellipsis element for the pagination control
Set the tfoot to be hidden when it is empty to improve accessability
Bulma dark mode without a table footer would show a white border at the bottom of the table.
.use() method wasn't using strict type checking for one check, which caused problems with ESM imports
DataTable.ext.classes.thead.row wouldn't apply to a header row that had been dynamically created by DataTables (only to existing header rows). The same with .tfoot.row as well.
Potential stack overflow issues in Chrome when making large arrays
When server-side processing is enabled, the columns could go out of alignment when paging
Date render helpers wrt. setting locales in Luxon
typeDetect option name was documented incorrectly
When using a CSS selector for the column selector (columns()) the order is now guaranteed to be in column index order.
Very old Safari (7/8) doesn't support Array.from which was used in one unprotected position. Support for DataTables is the main browsers for the last 10 years, so this has been addressed.
Sizing of columns when scrolling is enabled
Check that the paging control has any width before triggering responsive control

Typescript

Make the returned Node types more specific (e.g. HTMLTableCellElement and friends)
Correct language.aria types
Tighten up the types for headerCallback and other functions.

Docs

Correct signature parameters names for preXhr
Correct old error event to be dt-error

Examples

Handle the readyState = interactive condition when loading and adding libraries to be loaded.
Fix error in BS4 dark mode message
Fix link to auto rendering example