Deprecations

In the next major release of MDL, there will be some breaking changes. These are some we know will happen. Usage of the methods listed here are discouraged and only bug-fixing updates to them should be expected in the current life-cycle.

Each component affected by a deprecation will have its own section. Within these sections, each deprecation will be explained, have the deprecated (current) code provided, and show the alternative code that currently works in its place. We may provide any considerations developers should know about as well if necessary.

Data Tables

Automatic Selection Checkboxes

The Data Tables component currently supports creating checkboxes for rows for developers. This is being deprecated. There are numerous issues with the implementation and adding in support to handle these problems will only add a good portion of complexity to a component that is otherwise very simple. If you are currently using mdl-data-table--selectable then this will affect you. The recommended alternative is for developers to create the checkboxes on their own.

You may view a functioning example of the new data table method on codepen.

Deprecated Code

<table class="mdl-data-table mdl-js-data-table mdl-data-table--selectable mdl-shadow--2dp">
  <thead>
    <tr>
      <th class="mdl-data-table__cell--non-numeric">Material</th>
      <th>Quantity</th>
      <th>Unit price</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="mdl-data-table__cell--non-numeric">Acrylic (Transparent)</td>
      <td>25</td>
      <td>$2.90</td>
    </tr>
    <tr>
      <td class="mdl-data-table__cell--non-numeric">Plywood (Birch)</td>
      <td>50</td>
      <td>$1.25</td>
    </tr>
    <tr>
      <td class="mdl-data-table__cell--non-numeric">Laminate (Gold on Blue)</td>
      <td>10</td>
      <td>$2.35</td>
    </tr>
  </tbody>
</table>

Current Code

<table class="mdl-data-table mdl-shadow--2dp">
  <thead>
    <tr>
      <th>
          <label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect mdl-data-table__select" for="table-header">
            <input type="checkbox" id="table-header" class="mdl-checkbox__input" />
          </label>
      </th>
      <th class="mdl-data-table__cell--non-numeric">Material</th>
      <th>Quantity</th>
      <th>Unit price</th>
    </tr>
  </thead>
  <tbody>
    <tr>
       <td>
          <label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect mdl-data-table__select" for="row[1]">
            <input type="checkbox" id="row[1]" class="mdl-checkbox__input" />
          </label>
      </td>
      <td class="mdl-data-table__cell--non-numeric">Acrylic (Transparent)</td>
      <td>25</td>
      <td>$2.90</td>
    </tr>
    <tr>
       <td>
          <label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect mdl-data-table__select" for="row[2]">
            <input type="checkbox" id="row[2]" class="mdl-checkbox__input" />
          </label>
      </td>
      <td class="mdl-data-table__cell--non-numeric">Plywood (Birch)</td>
      <td>50</td>
      <td>$1.25</td>
    </tr>
    <tr>
      <td>
          <label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect mdl-data-table__select" for="row[3]">
            <input type="checkbox" id="row[3]" class="mdl-checkbox__input" />
          </label>
      </td>
      <td class="mdl-data-table__cell--non-numeric">Laminate (Gold on Blue)</td>
      <td>10</td>
      <td>$2.35</td>
    </tr>
  </tbody>
</table>

Considerations

• Developers are responsible for handling the header checkbox selecting child nodes. See the code sample following this list for how this can be handled.
• You now have direct control over any names, values, and other attributes for the checkboxes.
• The mdl-js-data-table class is no longer required to trigger the component's JavaScript. The script provided was only to setup the selection checkboxes for you, since this is deprecated initializing the component is not useful.

var table = document.querySelector('table');
var headerCheckbox = table.querySelector('thead .mdl-data-table__select input');
var boxes = table.querySelectorAll('tbody .mdl-data-table__select');
var headerCheckHandler = function(event) {
  if (event.target.checked) {
    for (var i = 0, length = boxes.length; i < length; i++) {
      boxes[i].MaterialCheckbox.check();
      boxes[i].MaterialCheckbox.updateClasses();
    }
  } else {
    for (var i = 0, length = boxes.length; i < length; i++) {
      boxes[i].MaterialCheckbox.uncheck();
      boxes[i].MaterialCheckbox.updateClasses();
    }
  }
};
headerCheckbox.addEventListener('change', headerCheckHandler);