google / google/material-design-lite
check all in data table only works for td headers without th
- Dominant language
- HTML
- Stars
- 32.2k
- Forks
- 4.9k
- PR merge metrics
- No merged PRs in 30d
Description
MDL version: v1.3.0
Browser: All
Browser version: All
Operating system: All
Operating system version: All
Description:
I encountered an issue regarding to the usage of th headers column instead of td(s) as example in https://getmdl.io/components/index.html#tables-section.
What steps will reproduce the problem:
* create a data table with th headers instead of td(s).
* click the first checkbox of table header.
* issue will occur as: Uncaught TypeError: Cannot read property 'querySelector' of null
at b. (data-table.js:78).
* completed.
Solution:
I think that we shall check the existance of td node(s) before querying them. e.g.
```javascript
if (checkbox.checked) {
for (i = 0; i < opt_rows.length; i++) {
var tdQuerySelector = opt_rows[i].querySelector('td'); // added
if (tdQuerySelector) { // added
el = tdQuerySelector.querySelector('.mdl-checkbox'); // modified
el['MaterialCheckbox'].check();
opt_rows[i].classList.add(this.CssClasses_.IS_SELECTED);
} // added
}
} else {
for (i = 0; i < opt_rows.length; i++) {
var tdQuerySelector = opt_rows[i].querySelector('td'); // added
if (tdQuerySelector) { // added
el = tdQuerySelector.querySelector('.mdl-checkbox'); // modified
el['MaterialCheckbox'].uncheck();
opt_rows[i].classList.remove(this.CssClasses_.IS_SELECTED);
} // added
}
}
```
Contributor guide
Assessment
This issue has not been assessed yet.