Thursday 13th August, 2015

Update extravaganza

I'm delighted to announce the release of a number of major updates to the DataTables extensions and web-site that mark a significant step forward for the whole project. This has been months in the planning and writing, so it is a real pleasure to finally be able to full share the updates.

The focus with this release is consistency - primarily in how extensions are initialised and their APIs presented, which are all now very tightly integration with the DataTables initialisation options and API structure. Styling is also key, with DataTables and all of its extensions now fully supporting four styling frameworks (more are planned):

DataTables' own styling
Bootstrap
Foundation
jQuery UI

In this post I'll offer a summary of the changes and new releases and in future posts over the coming couple of weeks write up more details about each in further posts (there are a lot of new features!).

Site

The DataTables site has been updated as part of the drive towards providing consistency across DataTables and its extensions. A new download builder and updated reference section are available.

Download builder

Possibly the first change you'll notice with the new software is when you go to download it. A new download builder is available which lets you select the software you want to use using a point and click interface. The resulting files can be downloaded locally, or hosted on the DataTables CDN. The download builder will help to resolve any dependencies and also optimise the loading of the files, as they can be concatenated into a single minified file.

The download builder is designed to make it easier to use the DataTables extensions, particularly with the recent update to provide full support for styling by various styling frameworks. Deciding what files you need to include is now a simple point and click exercise rather than looking through the download packages and including files individually.

For this reason you can use the download builder to select the styling framework you want to use with DataTables and it will automatically include all of the correct code for you. Bootstrap styled tables are now super easy!

Reference

The reference section of the site has also been updated to include information about the options, APIs, events and buttons (see the new Buttons extension below) for all of the extensions as well as DataTables core. These options are clearly marked so you know what software is required for each property and makes finding what you need much easier!

Editor

Today also sees the release of Editor 1.5.0 - this is a major update to the Editor software which introduces a number of new features:

Multi-row editing!
- Multiple rows in a table to edit them all at the same time!
- Fully exposed via the API allowing AutoFill and RowReorder to operate with Editor
Server-side events to perform operations when certain actions occur - PHP and .NET documentation is available.
File upload support for one or many files per field are now built into the core library using the upload and uploadMany field types.
Option to not submit data to the server if there are no changes (this is enabled by default for inline editing) - form-options).

Please note that the upgrade to add multi-row editing in Editor 1.5 required changes to be made to the client / server communication protocol that Editor uses. If you only use the Editor libraries without accessing the raw data no change will be needed. However, if you access the data directly the code must be updated for this, or multi-row editing can be disabled and the legacy protocol used. Please see the upgrade document for those upgrading from 1.4.

New Extensions

Three new extensions have been created for this release which greatly increase the utility of DataTables.

Buttons

Buttons, along with the new Select extension, replaces the TableTools and ColVis extensions which are now retired. Buttons provides a common API and styling framework to display buttons that interact with a DataTable in some manner. It is split into the core software, which by itself does very little although it provides the framework to define your own buttons, and four modules that can optionally be included (use the download builder!):

HTML5 export option - this is possibly one of the most requested features for DataTables! The old TableTools extension used Flash for export, and Flash is well on its way out now and HTML APIs are starting to provide what we need for local file creation. CSV, XLSX and PDF files can be created from the data contained in the table. The XLSX files require JSZip and PDF files require pdfmake - the disadvantage is that these files can significantly increase the amount of Javascript required on your page, but they provide great flexibility such as images in your PDFs!
Flash export option - the HTML5 export option requires IE10+ or one of the evergreen browsers (Chrome, Firefox, Edge, Safari, Opera), so for legacy browsers, Flash export is still optionally available. The Excel export option has been upgrades from TableTools to export true XLSX files.
Print view - Show a printable table
Column visibility controls - This is the module that replaces the old ColVis library and ensures that the buttons are styles like all of the others on the page.

RowReorder

RowReorder introduces an entirely new feature to the DataTables line up - the ability to reorder rows through click and drag. It is primarily designed to order sequential lists, and so operates on a data swap principle (i.e. the row dropped takes the data from the row it replaces and other rows and shifted in the table to maintain the sequence).

It also features full integration with Editor's multi-row editing so a single click and drag event can update multiple rows on a database.

Select

Select replaces the row selection aspect of the retired TableTools extension, and expands upon it by offering the ability to select columns and cells as well as rows. Row selection can be performed using a single click, or more complex options such as shift click to select a range and cmd/ctrl click to toggle individual items.

Select also features tight integration with the DataTables API making it super easy to get information about the items are selected. For example:

var table = $('#myTable').DataTable();
 
table.rows( { selected: true } ).data();

will gather the data from the rows that have been selected.

Rewritten Extensions

As well as the three brand new extensions introduced above, three old friends have also been entirely rewritten to make use of the features offered by DataTables 1.10 and provide tight integration with its options and API.

Please note that these rewrites are not backwards compatible. Please refer to their individual documentation pages for instructions on how to use each of them.

AutoFill

AutoFill 2, features a much more compact and simpler code base than the original. It still provides the same basic interaction with the DataTable - click and drag to fill cells with data - but v2 adds a lot of flexibility through its new multi-fill options. Users can now select how they wish to fill the data (horizontally, vertically or with an incrementing value for example) and new fill styles can easily be added. Full styling integration with the styling frameworks supported by DataTables is also now available.

KeyTable

KeyTable 2 also sees a rewrite to simplify and expand the capabilities of its code base. KeyTable still provides the same basic features - spreadsheet like navigation of a DataTable, but now it does it much better!

KeyTable also now directly supports Editor's inline editing mode. The keys.editor option can be used to pass in the Editor instance to use, immediately adding everything that is required for inline editing.

FixedHeader

FixedHeader 3 has been rewritten to use a new method of fixing the header and footer of the table to the page. Rather than showing cloned elements, it will now move the "real" elements into floating containers and clone placeholders into the original table to stop it jumping around.

The big benefit of this is that the original elements are the ones which are on display to the end user all the time, so complex behaviour such as putting inputs into the elements will still work. As a trivial example the sort listeners attached by DataTables to the column header automatically work since it is the original header that is shown.

To my mind this is an epic release of DataTables, the cumulation of almost a year of long term planning and four months direct work on it. 12 individual pieces of software with 50k lines of code make up this release. It has been planned to be evolutionary from the point of view of yourself and the other developers using DataTables, but at the same time make a significant difference for developers new to DataTables and for new projects.

There is still a lot of work planned, but before I turn to thinking about the next major release of DataTables I'll be taking stock with this release. Inevitably there will unfortunately be bugs to be fixed and I plan to introduce better browser / npm support, which will make up the majority of the planned work for the next few months.

Enjoy!