No way to get the list of checked rows in a data table

[tleunen]

How can we get the list of checked rows in a data-table if this one is selectable?
Would it be possible to get a event when a row is checked/unchecked, or maybe a new getter?

[Garbee]

An event sounds reasonable. I don't see where a getter would really be useful to add in. It saves only a few lines of code in the end.

[nicolasgarnier]

Arguably you can already do this by adding an event on each checkbox no? Like that:

  var checkboxes = document.getElementById('myTableId').querySelector('tbody').querySelectorAll('.mdl-checkbox__input');
  for (var i = 0; i < checkboxes.length; i++) {
    checkboxes[i].addEventListener('change', listener);
  }

The above should be enough, especially after #1170 lands.

I could add the following to the DataTable's proto but is it really worth it since we're trying to stay "light"? :)

/**
 * Adds an event listener on the table's checkboxes.
 */
MaterialDataTable.prototype.addEventListener = function(type, listener,
                                                        useCapture) {
  'use strict';

  var checkboxes = this.element_.querySelector('tbody').querySelectorAll('.mdl-checkbox__input');
  for (var i = 0; i < checkboxes.length; i++) {
    checkboxes[i].addEventListener(type, listener, useCapture);
  }
};

[tleunen]

Of course there's a way to get that information.. But I still think it's something that should be included in the library.

What's the point of having a feature to add checkboxes in the datatable if there's no way of getting the result of them with the library?

[thanhmabo]

How add name and value for checkbox, @tleunen , have u find solution?

[nicolasgarnier]

@thanhmabo To do this easily you have to wait until #1170 is merged and for the next release which should be v1.1.
In the mean time you can do this programmatically: give an ID to your <tr> and get the checkbox with a selector like that:

document.getElementById('myTRId').querySelector('.mdl-checkbox__input').name = 'myCheckboxInputName';

@tleunen I discussed with the rest of the team and we decided to add the event on data-table. I'll get started on that. Probably this will make it into 1.1 too :)

[tleunen]

Thanks @nicolasgarnier :) 🙌

[Garbee]

We are officially deprecating the automatic checkbox generation for data tables. Please see the wiki page for instructions on how this should be replaced in your current code. The new method allows developers more control over the checkboxes in every way, as well as more intuitive removing and adding new rows.

Due to this deprecation we will not be adding this or any other new functionality for this component's JS.

[slippyC]

Just a heads up for anyone that cares. If dynamically adding, even after you do componentHandler.upgradeElement(whatever) The ripple effect that is on the label will not respond like the ripple on static labels. I don't know if the timing is quicker or what, but it is visually faster or at least different.