Upgrading to DataTables 2.1 from 2.0

As always with a DataTables release, particularly a minor one, there is a strong focus on backwards compatibility. For the most part you should be able to upgrade with 2.1 with no modifications required, however, there are two specific points that it is worth being aware of, as detailed below.

Automatic width assignment

In examples for DataTables up until this point you'll likely have seen style="width: 100%" in the table element. This was used by DataTables to determine if it should apply its automatic width change calculations or not. This was needed as it is very difficult to read a relative value from CSS in Javascript (absolute pixel values are easy, but a relative value such as 100% not so much).

To simplify the HTML for this use case, which is by far the most common (indeed, the default CSS has table { width: 100% } in the CSS), DataTables will now assume that the table's width should be 100% unless it finds a width="..." or style="width: ..." attribute on the table.

If you required the table to be less than 100% width, you will now need to add a style or width attribute to the table - e.g.:

<table id="myTable" style="width: 50%">

Layout grid updates

As detailed in the new features document for 2.1 the default CSS for layout has been updated so that if multiple items are in a single layout cell, they are now shown on a single row rather than as separate blocks (i.e. visually as different rows). If you had CSS to add that feature for 2.0 you can now remove it. If you did want the items to show on separate rows, you could use the following CSS to override the flex box container:

div.dt-container div.dt-layout-row div.dt-layout-cell {
  display: block !important;
}