-
Notifications
You must be signed in to change notification settings - Fork 5k
Deprecations
Jonathan Garbee edited this page Oct 19, 2015
·
12 revisions
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.
<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>
<table class="mdl-data-table mdl-js-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>
- Developers are responsible for handling the header checkbox selecting child nodes. For example:
example code
. - You now have direct control over any names, values, and other attributes for the checkboxes.
Copyright Google, 2015. Licensed under an Apache-2 license.