New

• Remove jQuery dependency
• Support DataTables 3 (required)
• Common styling properties of Select can now be styled with CSS variables

Updates

• ES6 output target from TypeScript
• Improved styling integration with DataTables base selection style variables

Fixes

• Checkbox renderer didn't make use of a custom class name if one was given

Removed

• Remove SCSS variables and replace with CSS variables

Examples

• Update to remove jQuery initialisation version of each example, and focus on the Vanilla JS code for simplicity and consistency throughout the DataTables examples.

Docs

• Updated for the more consistent naming convention used for DataTables' defined types in DT3

Download Select 4.0.0-beta.1

Note that if you had custom plugins that depended upon jQuery, they will need to be updated, due to the removal of jQuery as a dependency. SearchBuilder now uses the Dom instance from DataTables as its DOM library.

New

• Remove jQuery dependency
• Support DataTables 3 (required)
• Common styling properties of Scroller can now be styled with CSS variables

Updates

• ES6 output target from TypeScript
• Custom criteria must be updated to use Dom
• searchBuilder().container() will now return a Dom instance, not a jQuery one.
• Optimised layout

Fixes

• Error in Date between search when looking for search return property
• Custom criteria must be updated to use Dom
• DateTime search would throw an error if used with search.return enabled
• Add missing documentation for language.searchBuilder.search

Removed

Examples

• Update to remove jQuery initialisation version of each example, and focus on the Vanilla JS code for simplicity and consistency throughout the DataTables examples.
• Remove jQuery code (except Select2 example, as Select2 uses jQuery)

Docs

• Updated for the more consistent naming convention used for DataTables' defined types in DT3

Download SearchBuilder 2.0.0-beta.1

New

• Remove jQuery dependency
• Support DataTables 3 (required)
• Common styling properties of Scroller can now be styled with CSS variables

Updates

• ES6 output target from TypeScript

Examples

• Update to remove jQuery initialisation version of each example, and focus on the Vanilla JS code for simplicity and consistency throughout the DataTables examples.

Docs

• Updated for the more consistent naming convention used for DataTables' defined types in DT3

Download Scroller 3.0.0-beta.1

New

• Remove jQuery dependency
• Support DataTables 3 (required)
• CSS variables used to set common styling information for RowReorder

Updates

• ES6 output target from TypeScript

Fixes

• Compatibility with jQuery 4.x
• Structure for floating table wasn't right, impacting styles

Examples

• Update to remove jQuery initialisation version of each example, and focus on the Vanilla JS code for simplicity and consistency throughout the DataTables examples.
• Change terminology of jQuery selector to CSS selector

Docs

• Updated for the more consistent naming convention used for DataTables' defined types in DT3

Download RowReorder 2.0.0-beta.1

New

• Remove jQuery dependency
• Support DataTables 3 (required)
• CSS variables use for easy customisation of common properties for RowGroup

Updates

• ES6 output target from TypeScript

Fixes

• colspan for grouping rows wasn't being updated if there was more than one grouping row shown on a page.

Removed

Examples

• Update to remove jQuery initialisation version of each example, and focus on the Vanilla JS code for simplicity and consistency throughout the DataTables examples.
• Change terminology of jQuery selector to CSS selector

Docs

• Updated for the more consistent naming convention used for DataTables' defined types in DT3

Download RowGroup 2.0.0-beta.1

New

• Remove jQuery dependency
• Support DataTables 3 (required)
• Use CSS grid for improved layout of the default list renderer.
• Responsive CSS for the default list renderer.
• Support for CSS variables to easily customise commonly tweaked parts of the Responsive UI.

Updates

• ES6 output target from TypeScript

Examples

• Update to remove jQuery initialisation version of each example, and focus on the Vanilla JS code for simplicity and consistency throughout the DataTables examples.

Docs

• Updated for the more consistent naming convention used for DataTables' defined types in DT3

Download Responsive 4.0.0-beta.1

New

• Remove jQuery dependency
• Support DataTables 3 (required)
• CSS variables for controlling the focus cell styling

Updates

• ES6 output target from TypeScript

Fixes

• Dropdown inline editing compatibility

Removed

• SCSS build variables

Examples

• Update to remove jQuery initialisation version of each example, and focus on the Vanilla JS code for simplicity and consistency throughout the DataTables examples.

Docs

• Updated for the more consistent naming convention used for DataTables' defined types in DT3

Download KeyTable 3.0.0-beta.1

New

• Remove jQuery dependency
• Support DataTables 3 (required)
• fixedHeader.adjust() will now recompute auto offsets as well as its regular calculations.

Updates

• ES6 output target from TypeScript

Fixes

• Take account of changes in draw state to other DataTables on the page
• Changes in other DataTables's state can cause the positions for header / footer fixed positioning to change, and this needs to be taken account of.

Examples

• Update to remove jQuery initialisation version of each example, and focus on the Vanilla JS code for simplicity and consistency throughout the DataTables examples.

Docs

• Updated for the more consistent naming convention used for DataTables' defined types in DT3

Download FixedHeader 5.0.0-beta.1

New

• Remove jQuery dependency
• Support DataTables 3

Updates

• ES6 output target from TypeScript

Fixes

• Don't set a header background when using jQuery UI styling. Allow the style to do that.

Examples

• Update to remove jQuery initialisation version of each example, and focus on the Vanilla JS code for simplicity and consistency throughout the DataTables examples.

Docs

• Updated for the more consistent naming convention used for DataTables' defined types in DT3

Download FixedColumns 6.0.0-beta.1

New

• DateTime no longer depends on jQuery. It does however depend on DataTables.
• Ported to Typescript and offers improved typing support
• The first day in the week is now detected automatically for the end user's locale (if possible). This does not yet work in Firefox due to a missing API, where it will default to 1 (Monday) as it used to be.

Updates

• Improve options information
• ES6 output target from TypeScript

Examples

• Update to remove jQuery initialisation version of each example, and focus on the Vanilla JS code for simplicity and consistency throughout the DataTables examples.
• Update the default date used in the examples

Docs

• Explicitly state the top level and column level interaction for columnControl.target.
• Consistent naming for DataTables types
• Updated for the more consistent naming convention used for DataTables' defined types in DT3

Download DateTime 2.0.0-beta.1

New

• Supports DataTables 3 (required).
• dropdownClass option for dropdown which is assigned to the dropdown container, allowing customisation per column if needed.
• autoFocus option for dropdown. This will allow ColumnControl to automatically select an element to gain focus when the dropdown is focused. By default, this will now happen for search content types in the dropdown (e.g. the search input in searchDropdown will gain focus when displayed).
• searchDropdown will show a different icon (magnifying glass with a tick inside it) when there is an active search.

Updates

• ES6 output target from TypeScript
• "Select all" in check list renamed to "Select" and will select only the filtered results (if there is a filter).

Fixes

• Date conversation should use UTC - search was failing due to a timezone offset
• Only try to resolve moment and luxon when they are needed, rather than up front, which can cause an issue if they are loaded after the fact.
• When using a free text search input, list search and state saving, a dropdown button might not show as active when a search is applied at load.
• State saving could throw an error when used with search

Examples

• Update to remove jQuery initialisation version of each example, and focus on the Vanilla JS code for simplicity and consistency throughout the DataTables examples.

Docs

• Explicitly state the top level and column level interaction for columnControl.target.
• Consistent naming for DataTables types
• Updated for the more consistent naming convention used for DataTables' defined types in DT3

Download ColumnControl 2.0.0-beta.1

New

• ColReorder no longer requires jQuery
• Supports DataTables 3 (required).

Updates

• ES6 output target from TypeScript
• Support for DataTable 3's changed search internals

Examples

• Update to remove jQuery initialisation version of each example, and focus on the Vanilla JS code for simplicity and consistency throughout the DataTables examples.

Docs

• Consistent naming for DataTables types
• Update for the renaming of Settings to DataTable.Context
• Updated for the more consistent naming convention used for DataTables' defined types in DT3

Download ColReorder 3.0.0-beta.1

New

• CSS variables for styling the buttons when used with DataTables styling
• Buttons will now work without jQuery
• Buttons has been ported to Typescript.
• Supports DataTables 3 (required).

Updates

• Styling for button when in a processing state now works in dark mode and can be set using CSS variables
• ES6 target

Fixes

• A dropdown inside another dropdown would be incorrectly styled in Bootstrap 5

Removed

• SCSS variables used for styling

Examples

• Update to remove jQuery initialisation version of each example, and focus on the Vanilla JS code for simplicity and consistency throughout the DataTables examples.

Docs

• Consistent naming for DataTables types
• Updated for the more consistent naming convention used for DataTables' defined types in DT3

Download Buttons 4.0.0-beta.1

New

• Remove jQuery dependency from AutoFill
• Rewritten in Typescript
• Improved styling integration with the styling frameworks. Popover now looks like it is a modal from the host styling library.
• Expanded CSS variables for styling AutoFill

Updates

• CSS prefix is dtaf- for consistency with the other DataTables extensions. If you had custom styling that used dt-autofill- class names, you will need to update the CSS rules.
• Positioning of the popover box when there is a choice of options is now done with flexbox
• ES6 target

Fixes

• Throw an error if columns.editField is given as an array

Examples

• Update to remove jQuery initialisation version of each example, and focus on the Vanilla JS code for simplicity and consistency throughout the DataTables examples.

Docs

• Consistent naming for DataTables types
• Updated for the more consistent naming convention used for DataTables' defined types in DT3

Download AutoFill 3.0.0-beta.1

These release notes are part of a number of related documents detailing the release process for DataTables 3:

• New features
• Upgrade notes
• Download builder
• Examples

New

• Dom and util libraries that DataTables uses internally are now available and treeshakable.
• In an ESM context DataTables now provides Api, DataTable, Dom and util properties that can be directly imported and used as values and / or types (when using TypeScript).
• columns().search() will now apply a search across the selected columns. This allows grouping of columns to give searching across a sub-set of the columns.
• search.columns - The search feature can be given a column selector to define which columns it should apply to. This allows a subset of columns, while other columns can still be searched using the API (or another instance of the search feature).
• Fixed search methods now accept a SearchOptions object, thus providing the same abilities as the regular search (e.g. extract, boundary, etc options can be specified).
• language.ajax option. Basically the same as language.url, but provides the ability to be used as an object or as a function, matching ajax for its extended capabilities. It can therefore be used to add HTTP headers (csrf for example), or to send data as part of the language Ajax request. The function can be used to get data from alternative locations such as websockets or local storage.
• DataTable.ajax() static method which can be used to make Ajax requests.
• DataTable.stripHtml() now accepts a second parameter, the replacement character
• :eq() selector for rows based on their position in the current data set
• Expanded CSS variable support. In the default styling, pagination, inputs and cells can now all have styling defined with CSS variables. Naming convention is also now consistent.
• SCSS variables for ordering indicators
• DataTables is entirely Typescript based now and builds with tsc and rollup.

Removed

• API cache methods (row().cache(), cell().cache() and column().cache() - plus their plurals). These were deprecated in v2 and scheduled for removal in v3 which is now done. They were limited and error prone, with the data they access not always guaranteed to be present. The .render() method should be used instead if you were using these methods.
• SCSS variables for styling - replaced with CSS variables.
• scrollXInner option. It was used to limit the scrolling width of the table in its container. Simply make the container smaller!
• DataTable.camelToHungarian() method that was used for compatibility

Breaking changes

• The DataTables internal properties have been entirely renamed (mostly a simple change to camelCase). If you used any of the internal settings for custom plugins or similar you will need to update them to use the new properties.
• columns().search() used to apply the given search term to each column. It will now apply a single search to the selected columns.
• columns().search() when used as a getter will return the search value for the selected columns (or an empty string if there is no search value applied). Previously it would return an API instance.
• Callback function scope has changed. It used to be a jQuery instance containing the table, and have an api() function to access the API. The api() method stays exactly the same, but the scope is now a Dom object, since jQuery is not required by DataTables. This will only be an issue if you use this.{jqueryMethod}() in the callback functions, which is very rarely done.
• formatNumber is not longer executed in the scope of the settings object. Rather it is passed in as the second parameter.
• trigger() now returns defaultPrevented in the result set, rather than the return values, which were error prone. Only if you used trigger() and its return value will this impact you.
• If you happen to have your own header or footer renderer (DataTable.ext.renderer.header), the second parameter passed in is no longer a jQuery object, but rather a Dom instance. You are very unlikely to have a custom renderer here!

Updated

• Ordering icons are now generated by CSS (creating triangles with borders). This provides much more consistency between browsers, fonts and platforms. CSS variables are available to control the size, colour and opacity of the icons.
• Improved paging button styling for consistency with Buttons
• Tweaked the padding for the input controls for better visual consistency
• Make order indicator icons a little smaller
• cells() will only get the cell nodes when needed for the selector. When used with cells().every() this massively improves performance.
• Changing the column title span to be a div to allow block level elements to be nested in it.
• ES6 target

Fixes

• Multi-line html elements could cause issues for column sizing
• When page length is set to -1 (all) the paging buttons should not show any numbers when there are no records (which now matches the behaviour when page length is >=1).
• Accessability - remove the tfoot element if it is empty
• Don't include <template> tags in the sizing table
• Element that contains the ordering icons should have height as it is focusable and the focus ring needs to be clearly visible

Deprecated

• With the new language.ajax option, language.url is now deprecated. However, it is fully supported and not scheduled for removal. It can continue to safely be used, but new projects should use language.ajax as it provides the same features plus more.

Examples

• Update chart example to use Charts.js
• Add new jQuery specific examples showing how to use DataTables with jQuery
• Remove jQuery version of each example and the option to switch between Vanilla JS and jQuery initialisation
• Remove JSONP example. JSONP is not available when using DataTable.ajax(). Ideally you should switch to CORS, but if JSONP is required, use ajax as a function, to then call jQuery.ajax if you have it on your page, or make use of some other JSONP library.
• Update to not require jQuery

Docs

• Change name of DataTables.Settings to DataTable.Context for consistency.
• Consistent naming for the types documentation, allowing an easier interchange with TypeScript.
• Updating related to preferred style
• Tidy up the auto links to preferred style
• Correction for info.text example code

Types

• rows().nodes() return has the nodes at the top level of the API result set
• Improve each() signature
• Fix register to allow arrays of names for aliases
• Allow selector modifiers to be modified
• Allow the Language interface to be extended
• Improved types for DataTable.ext object
• Correct return type for the info callback function.
• Corrections to generic data type for returned values from methods such as orderable(), nodes() and indexes().
• Correction to scope for the callback function in cells().every().
• Better type return from flatten() and toArray()
• Add context to the iterator callbacks
• Expose the Defaults object
• row().id() wasn't correctly types (used a plural instead)
• DataTable.version() only requires a single parameter

Download DataTables 3.0.0-beta.1

Fixes

• When using a free text search input, list search and state saving, a dropdown button might not show as active when a search is applied at load.
• Search clear button wasn't enabling when used with server-side processing
• State saving could throw an error when used with search
• ColumnControl and ColReorder, with state saving enabled, could result in saved searches not being restored.
• For searchList has a list of options defined on the client-side, and state saving is enabled, the s tate saved option wouldn't be shown as enabled on reload.

Download ColumnControl 1.2.1

Fixes

• "Jitter" when scrolling in Chrome due to table DOM structure change
• Take account of changes in draw state to other DataTables on the page

Download FixedHeader 4.0.6

Fixes

• :visible selector will no longer include columns which are hidden by Responsive.
• tfoot should be the last element in the table, per the WhatWG spec

Download DataTables 2.3.7

• Fix: Set a flag that DataTables core can use to tell if a column is hidden by Responsive or not.
• Update: SCSS updates for Dart SASS changes. No functional change - compile time only

Download Responsive 3.0.8

• Fix: Compatibility with jQuery 4.x
• Docs: Fix error in the arguments passed to pre-row-reorder

Download RowReorder 1.5.1