@shortfuse/materialdesignweb 0.2.0 → 0.5.0

package/adapters/datatable/index.js

@@ -1,281 +1,115 @@
-import { Button } from '../../components/button/index';
-import { DataTable } from '../../components/datatable/index';
-
-/** @return {HTMLLabelElement} */
-function constructTableCheckbox() {
-  const checkboxLabel = document.createElement('label');
-  checkboxLabel.classList.add('mdw-selection');
-  const input = document.createElement('input');
-  input.classList.add('mdw-selection__input');
-  input.setAttribute('type', 'checkbox');
-  const icon = document.createElement('div');
-  icon.classList.add('mdw-selection__icon');
-  checkboxLabel.appendChild(input);
-  checkboxLabel.appendChild(icon);
-  return checkboxLabel;
-}
+import * as Button from '../../components/button/index.js';
+import * as DataTableCell from '../../components/datatable/cell.js';
+import * as DataTableColumnHeader from '../../components/datatable/columnheader.js';
+import * as DataTable from '../../components/datatable/index.js';
+import * as DataTableRow from '../../components/datatable/row.js';
+import * as DataTableRowHeader from '../../components/datatable/rowheader.js';
+import * as Selection from '../../components/selection/index.js';
+import * as RovingTabIndex from '../../core/aria/rovingtabindex.js';
 
-/**
- * @callback DataTableAdapterColumnFormatter<T>
- * @param {any} value
- * @param {T=} object
- * @return {any}
- * @template T
- */
+import DataTableAdapterColumn from './column.js';
 
 /**
- * @callback DataTableAdapterColumnRenderer<T>
- * @param {HTMLTableCellElement} cell,
- * @param {any} value
- * @param {T} data
- * @return {void}
- * @template T
+ * @template {Record<string, any>} T
+ * @template {(keyof T & string)|string} K
+ * @typedef {import('./column').DataTableAdapterColumnOptions<T,K>} DataTableAdapterColumnOptions<T,K>
  */
 
 /**
  * Callback fired when value change is requested
  * Return truthy value to cancel updating object
+ * @template {Record<string, any>} T
+ * @template {keyof T & string} K
  * @callback DataTableAdapterOnValueChangeRequestedCallback<T>
  * @param {T} object
- * @param {string} key
- * @param {any} value
+ * @param {K} key
+ * @param {T[K]} value
  * @return {boolean} cancel
- * @template T
  */
 
 /**
  * Callback fired when value is changed
+ * @template {Record<string, any>} T
+ * @template {keyof T & string} K
  * @callback DataTableAdapterOnValueChangedCallback<T>
  * @param {T} object
- * @param {string} key
- * @param {any} value
+ * @param {K} key
+ * @param {T[K]} value
  * @return {void}
- * @template T
  */
 
 /**
+ * @template {Record<string, any>} T
  * @callback DataTableAdapterFilter<T>
  * @param {T} element
- * @param {number=} index
- * @param {T[]=} array
+ * @param {number} [index]
+ * @param {T[]} array
  * @return {any}
- * @template T
  */
 
 /**
+ * @template {Record<string, any>} T
  * @callback DataTableAdapterSorter<T>
  * @param {T} a
  * @param {T} b
  * @return {number}
- * @template T
- */
-
-/**
- * Constructor options for DataTableAdapterColumn
- * @typedef DataTableAdapterColumnOptions<T>
- * @property {string} key
- * @property {(string|DocumentFragment)=} name
- * @property {string=} type
- * @property {boolean=} rowSelector
- * @property {string=} tooltip
- * @property {boolean=} sortable
- * @property {boolean=} primaryColumn
- * @property {HTMLElement=} customSortIcon
- * @property {string=} innerHTML
- * @property {DocumentFragment=} fragment
- * @property {DataTableAdapterColumnRenderer<T>=} renderer
- * @property {DataTableAdapterColumnFormatter<T>=} formatter
- * @template T
  */
 
 /**
+ * Constructor options for DataTableAdapter
  * @template T
+ * @typedef DataTableAdapterOptions<T>
+ * @prop {HTMLElement} datatable
+ * @prop {T[]} datasource Object array
+ * @prop {DataTableAdapterFilter<T>} [filter]
+ * @prop {DataTableAdapterOnValueChangeRequestedCallback<T,keyof T & string>} [onValueChangeRequested]
+ * @prop {DataTableAdapterOnValueChangedCallback<T,keyof T & string>} [onValueChanged]
+ * @prop {DataTableAdapterSorter<T>} [sorter]
  */
-class DataTableAdapterColumn {
-  /** @param {DataTableAdapterColumnOptions<T>} options */
-  constructor(options) {
-    this.element = document.createElement('th');
-    if (options.innerHTML != null) {
-      this.element.innerHTML = options.innerHTML;
-    } else if (options.fragment) {
-      this.element.appendChild(options.fragment);
-    }
-    this.key = options.key;
-    this.element.dataset.key = options.key;
-
-    if (options.sortable) {
-      this.element.setAttribute('mdw-sortable', '');
-      let sortIcon = options.customSortIcon;
-      if (!sortIcon) {
-        sortIcon = document.createElement('div');
-        sortIcon.classList.add('mdw-datatable__sort-icon', 'material-icons');
-        sortIcon.textContent = 'arrow_downward';
-      }
-      if (this.element.hasChildNodes()) {
-        this.element.insertBefore(this.element.firstChild, options.customSortIcon);
-      } else {
-        this.element.appendChild(sortIcon);
-      }
-    }
-    if (options.tooltip) {
-      const wrapper = document.createElement('span');
-      wrapper.classList.add('mdw-tooltip__wrapper');
-      const target = document.createElement('span');
-      target.classList.add('mdw-tooltip__target');
-      if (!options.name) {
-        target.textContent = '';
-      } else if (typeof options.name === 'string') {
-        target.textContent = options.name;
-      } else {
-        target.appendChild(options.name);
-      }
-      const tooltip = document.createElement('div');
-      tooltip.classList.add('mdw-tooltip');
-      tooltip.textContent = options.tooltip;
-      wrapper.appendChild(target);
-      wrapper.appendChild(tooltip);
-      this.element.appendChild(wrapper);
-    } else if (options.name) {
-      let node;
-      if (typeof options.name === 'string') {
-        node = document.createTextNode(options.name);
-      } else {
-        node = options.name;
-      }
-      this.element.appendChild(node);
-    }
-
-    this.primaryColumn = options.primaryColumn;
-    if (options.primaryColumn) {
-      this.element.setAttribute('mdw-primary-column', '');
-    }
-
-    this.rowSelector = options.rowSelector;
-
-    if (this.rowSelector) {
-      this.element.setAttribute('mdw-selector', '');
-    }
-    if (options.type) {
-      this.element.dataset.type = options.type;
-      this.type = options.type;
-    }
-    if (this.rowSelector && this.type === 'checkbox') {
-      const checkboxLabel = constructTableCheckbox();
-      this.element.appendChild(checkboxLabel);
-    }
-
-    if (options.renderer) {
-      this.renderer = options.renderer;
-    } else if (options.type === 'checkbox') {
-      this.renderer = DataTableAdapterColumn.defaultCheckboxRenderer;
-    } else {
-      this.renderer = DataTableAdapterColumn.defaultCellRenderer;
-    }
-    this.formatter = options.formatter || (value => value);
-  }
-
-  /**
-   * @param {HTMLTableCellElement} cell
-   * @param {any} value
-   * @return {void}
-   */
-  static defaultCheckboxRenderer(cell, value) {
-    let input = cell.getElementsByTagName('input')[0];
-    const checked = !!value;
-    if (!input) {
-      const checkboxLabel = document.createElement('label');
-      checkboxLabel.classList.add('mdw-selection');
-      input = document.createElement('input');
-      input.classList.add('mdw-selection__input');
-      input.setAttribute('type', 'checkbox');
-      input.checked = checked;
-      const icon = document.createElement('div');
-      icon.classList.add('mdw-selection__icon');
-      checkboxLabel.appendChild(input);
-      checkboxLabel.appendChild(icon);
-      cell.appendChild(checkboxLabel);
-    }
-    if (input.checked !== checked) {
-      input.checked = checked;
-    }
-  }
-
-  /**
-   * @param {HTMLTableCellElement} cell
-   * @param {any} value
-   * @return {void}
-   */
-  static defaultCellRenderer(cell, value) {
-    let stringValue;
-    if (value == null) {
-      stringValue = '';
-    } else {
-      stringValue = value.toString();
-    }
-    const len = cell.childNodes.length;
-    let foundTextNode = false;
-    for (let i = len - 1; i >= 0; i -= 1) {
-      const node = cell.childNodes.item(i);
-      if (!foundTextNode && node.nodeType === Node.TEXT_NODE) {
-        if (node.nodeValue !== stringValue) {
-          node.nodeValue = stringValue;
-        }
-        foundTextNode = true;
-      } else {
-        cell.removeChild(node);
-      }
-    }
-    if (!foundTextNode) {
-      const node = document.createTextNode(stringValue);
-      cell.appendChild(node);
-    }
-  }
-}
 
-/**
- * @template T
- */
-class DataTableAdapter {
-  /**
-   * @param {Object} options
-   * @param {HTMLElement} options.datatable
-   * @param {T[]} options.datasource Object array
-   * @param {DataTableAdapterFilter<T>=} options.filter
-   * @param {DataTableAdapterOnValueChangeRequestedCallback<T>=} options.onValueChangeRequested
-   * @param {DataTableAdapterOnValueChangedCallback<T>=} options.onValueChanged
-   * @param {DataTableAdapterSorter<T>=} options.sorter
-   */
+/** @template {Record<string, any>} T */
+export default class DataTableAdapter {
+  /** @param {DataTableAdapterOptions<T>} options */
   constructor(options) {
     this.element = options.datatable;
     this.datasource = options.datasource;
     this.filter = options.filter;
     this.sorter = options.sorter;
-    this.onValueChangeRequested = options.onValueChangeRequested || (() => false);
-    this.onValueChanged = options.onValueChanged || (() => {});
-
-    this.onElementClickListener = (event) => {
-      this.handleClickInteraction(event);
-    };
-    // Use one click event listener to reduce overhead and allow dynamic content
-    this.element.addEventListener('click', this.onElementClickListener);
-
-    this.onElementScrollListener = () => {
-      this.onElementScroll();
-    };
-
-    /** @type {HTMLTableRowElement} */
-    this.tabindexRow = null;
-    /** @type {Object} */
-    this.tabindexRowData = null;
-    this.element.addEventListener('mdw:tabindexchanged', (event) => {
-      if (this.element.hasAttribute('mdw-row-focusable')) {
-        this.tabindexRow = /** @type {HTMLTableRowElement} */ (event.target);
-        this.tabindexRowData = this.getDataForTableRow(this.tabindexRow);
-      }
-    });
+    this.onValueChangeRequested = options.onValueChangeRequested;
+    this.onValueChanged = options.onValueChanged;
     DataTable.attach(this.element);
-    this.element.setAttribute('mdw-adapter', '');
-    /** @type {DataTableAdapterColumn<T>[]} */
+
+    this.onElementScrollListener = () => this.onElementScroll();
+
+    /**
+     * @param {CustomEvent} event
+     * @return {void}
+     */
+    this.onDataTableColumnHeaderSortListener = (event) => this.onDataTableColumnHeaderSort(event);
+    /**
+     * @param {CustomEvent} event
+     * @return {void}
+     */
+    this.onCheckedChangeEventListener = (event) => this.onCheckedChangeEvent(event);
+
+    this.element.addEventListener(
+      DataTableColumnHeader.SORT_EVENT,
+      this.onDataTableColumnHeaderSortListener,
+    );
+    this.element.addEventListener(
+      Selection.CHECKED_CHANGE_EVENT,
+      this.onCheckedChangeEventListener,
+    );
+    this.element.addEventListener(
+      DataTableRow.SELECTED_CHANGE_EVENT,
+      DataTableAdapter.onRowSelectedChangeEvent,
+    );
+
+    /** @type {HTMLTableSectionElement} */
+    this.tbody = null;
+    this.scroller = DataTable.getScroller(this.element);
+    this.element.setAttribute('mdw-datatable-adapter', '');
+    /** @type {DataTableAdapterColumn<T,any>[]} */
     this.columns = [];
     this.page = 0;
     this.pageLimit = 0;
@@ -284,15 +118,28 @@ class DataTableAdapter {
     this.useLazyRendering = false;
   }
 
+  /**
+   * @param {CustomEvent} event
+   * @return {void}
+   */
+  onDataTableColumnHeaderSort(event) {
+    const cell = /** @type {HTMLTableHeaderCellElement} */ (event.target);
+    const ascending = event.detail.sort === 'ascending';
+    this.updateSortIcons(cell, ascending);
+    if (this.updateSortColumn) {
+      this.updateSortColumn(cell, ascending);
+    }
+  }
+
   detach() {
-    this.element.removeAttribute('mdw-adapter');
+    this.element.removeAttribute('mdw-datatable-adapter');
     this.element = null;
     this.datasource = null;
     this.filteredDatasource = null;
   }
 
   /**
-   * @param {boolean=} [forceRefresh=false]
+   * @param {boolean} [forceRefresh=false]
    * @return {void}
    */
   performThrottledRender(forceRefresh = false) {
@@ -304,7 +151,7 @@ class DataTableAdapter {
   }
 
   /**
-   * @param {boolean=} [forceRefresh=false]
+   * @param {boolean} [forceRefresh=false]
    * @return {void}
    */
   scheduleThrottledRender(forceRefresh = false) {
@@ -315,6 +162,19 @@ class DataTableAdapter {
     }
   }
 
+  /**
+   * @param {CustomEvent} event
+   * @return {void}
+   */
+  static onRowSelectedChangeEvent(event) {
+    const row = /** @type {HTMLTableRowElement} */ (event.target);
+    const selectionElement = row.querySelector('[mdw-selector] .mdw-selection[aria-checked]');
+    if (!selectionElement) {
+      return;
+    }
+    Selection.setChecked(selectionElement, event.detail.value, true);
+  }
+
   onElementScroll() {
     if (this.debounceTimeout) {
       clearTimeout(this.debounceTimeout);
@@ -336,68 +196,44 @@ class DataTableAdapter {
   }
 
   buildScrollListener() {
-    this.element.addEventListener('scroll', this.onElementScrollListener);
+    this.scroller.addEventListener('scroll', this.onElementScrollListener, { passive: true });
   }
 
   destroyScrollListener() {
-    this.element.removeEventListener('scroll', this.onElementScrollListener);
+    this.scroller.removeEventListener('scroll', this.onElementScrollListener);
   }
 
   /**
-   * @param {PointerEvent|MouseEvent} event
+   * @param {CustomEvent} event
    * @return {void}
    */
-  handleClickInteraction(event) {
-    const { target } = event;
-    if (target instanceof HTMLInputElement) {
-      if (target.hasAttribute('type') && target.getAttribute('type') === 'checkbox') {
-        event.stopPropagation();
-        const currentCell = this.getTableCell(target);
-        if (currentCell.tagName.toLowerCase() === 'th') {
-          this.setCheckOnAllRows(target.checked, currentCell.cellIndex);
-          this.setHasSelection(target.checked);
-          return;
-        }
-        const currentRow = this.getTableRow(target);
-        const object = this.getDataForTableRow(currentRow);
-        if (this.onValueChangeRequested(object, currentCell.dataset.key, target.checked)) {
-          event.preventDefault();
-          return;
-        }
-        object[currentCell.dataset.key] = target.checked;
-        this.onValueChanged(object, currentCell.dataset.key, target.checked);
-        if (currentCell.hasAttribute('mdw-selector')) {
-          if (target.checked) {
-            currentRow.setAttribute('mdw-selected', '');
-            this.setHasSelection(true);
-          } else {
-            currentRow.removeAttribute('mdw-selected');
-            const selectedRows = this.getSelectedRows();
-            this.setHasSelection(selectedRows.length !== 0);
-          }
-        }
-      }
+  onCheckedChangeEvent(event) {
+    const selectionElement = /** @type {HTMLElement} */ (event.target);
+    const checked = event.detail.value === 'true';
+    const currentCell = this.getTableCell(selectionElement);
+    if (currentCell.getAttribute('role') === 'columnheader') {
+      this.setCheckOnAllRows(checked, currentCell.cellIndex);
+      this.setHasSelection(checked);
       return;
     }
-    const currentCell = this.getTableCell(/** @type {HTMLElement} */ (target));
-    if (currentCell) {
-      if (currentCell.tagName.toLowerCase() === 'th' && currentCell.hasAttribute('mdw-sortable')) {
-        event.stopPropagation();
-        let ascending = true;
-        if (currentCell.hasAttribute('mdw-sorted') && !currentCell.getAttribute('mdw-sorted')) {
-          ascending = false;
-        }
-        this.updateSortIcons(currentCell, ascending);
-        if (this.updateSortColumn) {
-          this.updateSortColumn(currentCell, ascending);
-        }
-      }
+    const currentRow = this.getTableRow(selectionElement);
+    const object = this.getDataForTableRow(currentRow);
+    // eslint-disable-next-line prefer-destructuring
+    const key = /** @type {keyof T & string} */ (currentCell.dataset.key);
+    if (this.onValueChangeRequested?.(object, key, checked)) {
+      event.preventDefault();
+      return;
+    }
+    object[key] = checked;
+    this.onValueChanged?.(object, key, checked);
+    if (currentCell.hasAttribute('mdw-selector')) {
+      DataTableRow.setSelected(currentRow, event.detail.value, true);
     }
   }
 
   /**
    * Overridable sorting method
-   * @param {HTMLTableHeaderCellElement=} tableHeaderCell null if none
+   * @param {HTMLTableHeaderCellElement} [tableHeaderCell] null if none
    * @param {boolean} [ascending=false]
    * @return {void}
    */
@@ -414,9 +250,12 @@ class DataTableAdapter {
     const index = tableHeaderCell.cellIndex;
     const tableColumn = this.columns[index];
     const direction = ascending ? 1 : -1;
-    this.sorter = ((a, b) => {
+    this.sorter = ((/** @type {T} */ a, /** @type {T} */ b) => {
       const valueA = a[tableColumn.key];
       const valueB = b[tableColumn.key];
+      if (tableColumn.sorter) {
+        return tableColumn.sorter(a, b) * direction;
+      }
       if (valueA == null) {
         if (valueB == null) {
           return 0;
@@ -427,14 +266,15 @@ class DataTableAdapter {
         return direction;
       }
       if (tableColumn.type === 'number') {
-        return (parseFloat(valueA) - parseFloat(valueB)) * direction;
+        return (Number.parseFloat(valueA) - Number.parseFloat(valueB)) * direction;
       }
       if (tableColumn.type === 'checkbox') {
         return ((valueA ? 1 : 0) - (valueB ? 1 : 0)) * direction;
       }
-      if (valueA.localeCompare) {
+      if ('localeCompare' in valueA) {
         return valueA.localeCompare(valueB) * direction;
       }
+      // eslint-disable-next-line eqeqeq
       if (valueA == valueB) {
         return 0;
       }
@@ -444,23 +284,21 @@ class DataTableAdapter {
   }
 
   /**
-   * @param {HTMLTableHeaderCellElement=} sortedTableHeaderCell null if none
-   * @param {boolean=} [ascending=false]
+   * @param {HTMLTableHeaderCellElement} [sortedTableHeaderCell] null if none
+   * @param {boolean} [ascending=false]
    * @return {void}
    */
   updateSortIcons(sortedTableHeaderCell, ascending) {
     if (sortedTableHeaderCell) {
       if (ascending) {
-        sortedTableHeaderCell.setAttribute('mdw-sorted', '');
+        sortedTableHeaderCell.setAttribute('aria-sort', 'ascending');
       } else {
-        sortedTableHeaderCell.setAttribute('mdw-sorted', 'desc');
+        sortedTableHeaderCell.setAttribute('aria-sort', 'descending');
       }
     }
-    const tableHeaders = this.element.querySelectorAll('th');
-    for (let i = 0; i < tableHeaders.length; i += 1) {
-      const otherTableHeader = tableHeaders.item(i);
-      if (otherTableHeader !== sortedTableHeaderCell) {
-        otherTableHeader.removeAttribute('mdw-sorted');
+    for (const otherTableHeader of this.getHeaderRow().getElementsByTagName('th')) {
+      if (otherTableHeader !== sortedTableHeaderCell && otherTableHeader.hasAttribute('aria-sort')) {
+        otherTableHeader.setAttribute('aria-sort', 'none');
       }
     }
   }
@@ -472,9 +310,9 @@ class DataTableAdapter {
    */
   setCheckOnAllRows(value, columnIndex) {
     const column = this.columns[columnIndex];
-    this.datasource.forEach((object) => {
-      object[column.key] = value; // eslint-disable-line no-param-reassign
-    });
+    for (const object of this.datasource) {
+      object[column.key] = value;
+    }
     this.refresh();
   }
 
@@ -514,11 +352,11 @@ class DataTableAdapter {
 
   /** @return {T[]} */
   getSelectedRows() {
-    const selectorColumn = this.columns.filter(column => column.rowSelector)[0];
+    const selectorColumn = this.columns.find((column) => column.rowSelector);
     if (!selectorColumn) {
       return [];
     }
-    return this.getDatasource().filter(row => row[selectorColumn.key]);
+    return this.getDatasource().filter((row) => row[selectorColumn.key]);
   }
 
   /**
@@ -556,21 +394,9 @@ class DataTableAdapter {
   }
 
   /**
-   * @param {Object} options Text or options
-   * @param {string} options.key
-   * @param {(string|DocumentFragment)=} options.name
-   * @param {boolean=} options.rowSelector
-   * @param {string=} options.type
-   * @param {boolean=} options.checkbox
-   * @param {string=} options.tooltip
-   * @param {boolean=} options.sortable
-   * @param {boolean=} options.primaryColumn
-   * @param {HTMLElement=} options.customSortIcon
-   * @param {string=} options.innerHTML
-   * @param {DocumentFragment=} options.fragment
-   * @param {DataTableAdapterColumnRenderer<T>=} options.renderer
-   * @param {DataTableAdapterColumnFormatter<T>=} options.formatter
-   * @return {DataTableAdapterColumn<T>}
+   * @template {(keyof T & string)|string} K
+   * @param {DataTableAdapterColumnOptions<T,K>} options
+   * @return {DataTableAdapterColumn<T,K>}
    */
   addColumn(options) {
     const tableColumn = new DataTableAdapterColumn(options);
@@ -591,23 +417,15 @@ class DataTableAdapter {
       max = total;
     }
     this.paginationDetailsElement.textContent = `${min + 1}-${max} of ${total}`;
-    if (min === 0) {
-      this.previousPageButton.setAttribute('disabled', '');
-    } else {
-      this.previousPageButton.removeAttribute('disabled');
-    }
-    if (max === total) {
-      this.nextPageButton.setAttribute('disabled', '');
-    } else {
-      this.nextPageButton.removeAttribute('disabled');
-    }
+    this.previousPageButton.setAttribute('aria-disabled', (min === 0 ? 'true' : 'false'));
+    this.nextPageButton.setAttribute('aria-disabled', (max === total ? 'true' : 'false'));
   }
 
   /**
    * @param {Object} options
-   * @param {boolean=} [options.disabled=false]
-   * @param {number=} [options.limit=10]
-   * @param {number[]=} [options.limits=[10,25,50,100]]
+   * @param {boolean} [options.disabled=false]
+   * @param {number} [options.limit=10]
+   * @param {number[]} [options.limits=[10,25,50,100]]
    * @return {void}
    */
   setPagination(options = {}) {
@@ -616,12 +434,12 @@ class DataTableAdapter {
       this.pageLimit = 0;
       this.page = 0;
       if (footer) {
-        footer.style.display = 'none';
+        footer.style.setProperty('display', 'none');
       }
       this.needsDraw = true;
       return;
     }
-    footer.style.display = '';
+    footer.style.removeProperty('display');
     let optionsElement = footer.getElementsByClassName('mdw-datatable__footer-options')[0];
     if (!optionsElement) {
       optionsElement = document.createElement('div');
@@ -634,13 +452,15 @@ class DataTableAdapter {
       limitsElement.setAttribute('mdw-solo', '');
       const select = document.createElement('select');
       select.classList.add('mdw-textfield__input');
-      limits.forEach((limit) => {
+      for (const limit of limits) {
         const option = document.createElement('option');
         option.value = limit.toString();
         option.textContent = limit.toString();
+        option.className = 'mdw-theme';
+        option.setAttribute('mdw-surface', 'card');
         select.appendChild(option);
-      });
-      select.setAttribute('value', (options.limit && options.limit.toString()) || '10');
+      }
+      select.value = (options.limit && options.limit.toString()) || '10';
       const dropdownIcon = document.createElement('div');
       dropdownIcon.classList.add('mdw-textfield__icon');
       dropdownIcon.setAttribute('mdw-dropdown', '');
@@ -650,23 +470,23 @@ class DataTableAdapter {
       optionsElement.appendChild(limitsElement);
       footer.appendChild(optionsElement);
       select.addEventListener('input', () => {
-        this.pageLimit = parseInt(select.value, 10);
+        this.pageLimit = Number.parseInt(select.value, 10);
         this.updateRowCount(false);
         this.updatePaginator();
         this.refreshRows();
       });
     }
-    if (!this.paginationDetailsElement) {
-      this.paginationDetailsElement = footer.getElementsByClassName('mdw-datatable__footer-details')[0];
-    }
+
+    this.paginationDetailsElement ||= /** @type {HTMLDivElement} */ (footer.getElementsByClassName('mdw-datatable__footer-details')[0]);
+
     if (!this.paginationDetailsElement) {
       this.paginationDetailsElement = document.createElement('div');
       this.paginationDetailsElement.classList.add('mdw-datatable__footer-details');
       footer.appendChild(this.paginationDetailsElement);
     }
-    if (!this.paginationControls) {
-      this.paginationControls = footer.getElementsByClassName('mdw-datatable__footer-controls')[0];
-    }
+
+    this.paginationControls ||= /** @type {HTMLDivElement} */ (footer.getElementsByClassName('mdw-datatable__footer-controls')[0]);
+
     if (!this.paginationControls) {
       this.paginationControls = document.createElement('div');
       this.paginationControls.classList.add('mdw-datatable__footer-controls');
@@ -675,15 +495,17 @@ class DataTableAdapter {
     if (!this.previousPageButton || !this.nextPageButton) {
       const buttons = this.paginationControls.getElementsByClassName('mdw-button');
       if (buttons.length !== 2) {
-        this.previousPageButton = document.createElement('button');
-        this.previousPageButton.classList.add('mdw-button', 'material-icons');
+        this.previousPageButton = document.createElement('a');
+        this.previousPageButton.classList.add('mdw-button');
+        this.previousPageButton.classList.add('material-icons');
         this.previousPageButton.setAttribute('mdw-icon', '');
         this.previousPageButton.textContent = 'chevron_left';
         this.paginationControls.appendChild(this.previousPageButton);
         Button.attach(this.previousPageButton);
 
-        this.nextPageButton = document.createElement('button');
-        this.nextPageButton.classList.add('mdw-button', 'material-icons');
+        this.nextPageButton = document.createElement('a');
+        this.nextPageButton.classList.add('mdw-button');
+        this.nextPageButton.classList.add('material-icons');
         this.nextPageButton.setAttribute('mdw-icon', '');
         this.nextPageButton.textContent = 'chevron_right';
         this.paginationControls.appendChild(this.nextPageButton);
@@ -693,7 +515,7 @@ class DataTableAdapter {
         this.nextPageButton = buttons[1];
       }
       this.previousPageButton.addEventListener('click', () => {
-        if (this.previousPageButton.hasAttribute('disabled')) {
+        if (this.previousPageButton.getAttribute('aria-disabled') === 'true') {
           return;
         }
         this.page -= 1;
@@ -702,7 +524,7 @@ class DataTableAdapter {
         this.refreshRows();
       });
       this.nextPageButton.addEventListener('click', () => {
-        if (this.nextPageButton.hasAttribute('disabled')) {
+        if (this.nextPageButton.getAttribute('aria-disabled') === 'true') {
           return;
         }
         this.page += 1;
@@ -722,8 +544,7 @@ class DataTableAdapter {
    * @return {HTMLElement}
    */
   getFooter(create) {
-    /** @type {HTMLElement} */
-    let footer = (this.element.getElementsByClassName('mdw-datatable__footer')[0]);
+    let footer = /** @type {HTMLElement} */ (this.element.getElementsByClassName('mdw-datatable__footer')[0]);
     if (!footer && create) {
       footer = document.createElement('div');
       footer.classList.add('mdw-datatable__footer');
@@ -734,16 +555,17 @@ class DataTableAdapter {
 
   /**
    * @param {HTMLTableRowElement} el
+   * @param {?number} viewportTop
+   * @param {?number} viewportBottom
    * @return {boolean}
    */
-  isRowVisible(el) {
-    const scrollingElement = this.element;
-    const rowRect = el.getBoundingClientRect();
-    const scrollingRect = scrollingElement.getBoundingClientRect();
-    const rowTop = (rowRect.top) - (scrollingRect.top);
-    const rowBottom = rowTop + rowRect.height;
-    const viewportTop = 0;
-    const viewportBottom = scrollingRect.height;
+  isRowVisible(
+    el,
+    viewportTop = this.scroller.scrollTop,
+    viewportBottom = this.scroller.scrollTop + this.scroller.offsetHeight,
+  ) {
+    const rowTop = el.offsetTop;
+    const rowBottom = rowTop + el.offsetHeight;
     if (rowTop > viewportTop && rowTop < viewportBottom) {
       // Top of row is visible
       return true;
@@ -761,27 +583,26 @@ class DataTableAdapter {
    */
   clearNonvisibleRows(visibleRows) {
     const tbody = this.getTableBody();
-    const len = tbody.rows.length;
-    if (visibleRows.length === len) {
+    if (visibleRows.length === tbody.rows.length) {
       return;
     }
-    let firstRowIndex = Infinity;
-    let lastRowIndex = -Infinity;
+    let firstRowIndex = Number.POSITIVE_INFINITY;
+    let lastRowIndex = Number.NEGATIVE_INFINITY;
     if (visibleRows.length) {
       firstRowIndex = visibleRows[0].sectionRowIndex;
       lastRowIndex = visibleRows[visibleRows.length - 1].sectionRowIndex;
     }
-    for (let i = 0; i < len; i += 1) {
-      if (i < firstRowIndex || i > lastRowIndex) {
-        const row = tbody.rows.item(i);
-        if (row.lastChild) {
-          // Store row height to prevent layout shifting
-          const rect = row.getBoundingClientRect();
-          row.style.setProperty('height', `${rect.height || 0}px`);
-        }
-        while (row.lastChild) {
-          row.removeChild(row.lastChild);
-        }
+    for (let index = 0; index < tbody.rows.length; index++) {
+      const row = tbody.rows[index];
+      if (index >= firstRowIndex && index <= lastRowIndex) {
+        continue;
+      }
+      if (row.lastChild) {
+        // Store row height to prevent layout shifting
+        row.style.setProperty('height', `${row.offsetHeight || 0}px`);
+      }
+      while (row.lastChild) {
+        row.removeChild(row.lastChild);
       }
     }
   }
@@ -792,20 +613,24 @@ class DataTableAdapter {
   getLazyRenderRows() {
     const tbody = this.getTableBody();
     const len = tbody.rows.length;
+    /** @type {HTMLTableRowElement[]} */
     const rows = [];
     const minRowCount = window.screen.height / 48;
     if (len <= minRowCount) {
-      for (let i = 0; i < len; i += 1) {
-        rows.push(tbody.rows.item(i));
+      for (const row of tbody.rows) {
+        rows.push(row);
       }
       return rows;
     }
     let foundFirstVisibleRow = false;
     let startIndex = 0;
     let endIndex = 0;
-    for (let i = 0; i < len; i += 1) {
+    const viewportTop = this.scroller.scrollTop;
+    const viewportBottom = viewportTop + this.scroller.offsetHeight;
+
+    for (let i = 0; i < tbody.rows.length; i++) {
       const row = tbody.rows.item(i);
-      if (this.isRowVisible(row)) {
+      if (this.isRowVisible(row, viewportTop, viewportBottom)) {
         if (!foundFirstVisibleRow) {
           foundFirstVisibleRow = true;
           startIndex = i;
@@ -839,11 +664,11 @@ class DataTableAdapter {
    */
   performLazyRender(forceRefresh = false) {
     const visibleRows = this.getLazyRenderRows();
-    visibleRows.forEach((row) => {
+    for (const row of visibleRows) {
       if (forceRefresh || !row.cells.length) {
         this.refreshRow(row.sectionRowIndex);
       }
-    });
+    }
     this.clearNonvisibleRows(visibleRows);
   }
 
@@ -893,7 +718,7 @@ class DataTableAdapter {
 
   /**
    * Update number of rows in table
-   * @param {boolean=} refresh Refresh new rows
+   * @param {boolean} [refresh=false] Refresh new rows
    * @return {void}
    */
   updateRowCount(refresh) {
@@ -930,21 +755,22 @@ class DataTableAdapter {
       const fragment = document.createDocumentFragment();
       for (let i = 0; i < rowDifference; i += 1) {
         const row = document.createElement('tr');
-        if (this.element.hasAttribute('mdw-row-focusable')) {
-          row.setAttribute('tabindex', '-1');
-        }
+        DataTableRow.attach(row);
         newRows.push(row);
         fragment.appendChild(row);
       }
+      if (this.element.hasAttribute('mdw-row-focusable')) {
+        RovingTabIndex.setupTabIndexes(newRows);
+      }
       tbody.appendChild(fragment);
     }
     if (refresh && rowDifference !== 0) {
       if (this.useLazyRendering) {
         this.scheduleThrottledRender(true);
       } else {
-        newRows.forEach((row) => {
+        for (const row of newRows) {
           this.refreshRow(row.sectionRowIndex);
-        });
+        }
       }
     }
   }
@@ -955,26 +781,10 @@ class DataTableAdapter {
       this.performLazyRender(true);
     } else {
       const tbody = this.getTableBody();
-      const len = tbody.rows.length;
-      for (let i = 0; i < len; i += 1) {
+      for (let i = 0; i < tbody.rows.length; i++) {
         this.refreshRow(i);
       }
     }
-    if (this.tabindexRowData) {
-      const row = this.getTableRowForData(this.tabindexRowData);
-      if (row !== this.tabindexRow) {
-        if (this.tabindexRow) {
-          this.tabindexRow.setAttribute('tabindex', '-1');
-        }
-        if (row) {
-          row.setAttribute('tabindex', '0');
-          if (document.activeElement === this.tabindexRow) {
-            row.focus();
-          }
-        }
-        this.tabindexRow = row;
-      }
-    }
     if (this.useLazyRendering) {
       this.scheduleThrottledRender();
     }
@@ -1017,8 +827,8 @@ class DataTableAdapter {
   refreshRow(rowIndex) {
     const row = this.getTableBody().rows.item(rowIndex);
     row.style.removeProperty('height');
-    for (let columnIndex = 0; columnIndex < this.columns.length; columnIndex += 1) {
-      this.refreshCell(columnIndex, rowIndex);
+    for (let i = 0; i < this.columns.length; i++) {
+      this.refreshCell(i, rowIndex);
     }
   }
 
@@ -1030,13 +840,33 @@ class DataTableAdapter {
   refreshCell(columnIndex, rowIndex) {
     const tableColumn = this.columns[columnIndex];
     const row = this.getTableBody().rows.item(rowIndex);
+    if (!row) return;
     let len = row.cells.length;
+    let createdCells = false;
     while (len <= columnIndex) {
+      createdCells = true;
       // Generate cells
       const missingColumn = this.columns[len];
-      const missingCell = row.insertCell();
-      if (missingColumn.type) {
-        missingCell.dataset.type = missingColumn.type;
+      let missingCell;
+      if (missingColumn.rowSelector) {
+        missingCell = document.createElement('th');
+        row.appendChild(missingCell);
+        DataTableRowHeader.attach(missingCell);
+      } else {
+        missingCell = row.insertCell();
+        DataTableCell.attach(missingCell);
+      }
+      switch (missingColumn.type) {
+        case 'checkbox':
+          missingCell.setAttribute('mdw-checkbox', '');
+          break;
+        case 'number':
+          missingCell.setAttribute('mdw-number', '');
+          break;
+        case 'text':
+          missingCell.setAttribute('mdw-text', '');
+          break;
+        default:
       }
       missingCell.dataset.key = missingColumn.key;
       if (missingColumn.rowSelector) {
@@ -1047,35 +877,33 @@ class DataTableAdapter {
       }
       len += 1;
     }
+    if (createdCells && this.element.hasAttribute('mdw-cell-focusable')) {
+      RovingTabIndex.setupTabIndexes(row.querySelectorAll(DataTable.CELL_TABINDEX_QUERIES.join(',')));
+    }
     const cell = row.cells.item(columnIndex);
     const data = this.getDataForTableRow(row);
     const value = data[tableColumn.key];
-    if (tableColumn.rowSelector) {
-      if (value) {
-        if (!row.hasAttribute('mdw-selected')) {
-          row.setAttribute('mdw-selected', '');
-        }
-      } else if (row.hasAttribute('mdw-selected')) {
-        row.removeAttribute('mdw-selected');
-      }
+    if (tableColumn.rowSelector && row.getAttribute('aria-selected') !== (value ? 'true' : 'false')) {
+      row.setAttribute('aria-selected', (value ? 'true' : 'false'));
     }
     const formattedValue = tableColumn.formatter(value, data);
     tableColumn.renderer(cell, formattedValue, data);
   }
 
   /**
-   * @param {HTMLTableCellElement|DataTableAdapterColumn|number|string} search
-   * @return {DataTableAdapterColumn<T>}
+   * @template {keyof T & string} K
+   * @param {HTMLTableCellElement|DataTableAdapterColumn<T,K>|number|string} search
+   * @return {DataTableAdapterColumn<T,K>}
    */
   getColumn(search) {
     if (search instanceof DataTableAdapterColumn) {
       return search;
     }
     if (search instanceof HTMLTableCellElement) {
-      return this.columns.filter(column => column.element === search)[0];
+      return this.columns.find((column) => column.element === search);
     }
     if (typeof search === 'string') {
-      return this.columns.filter(column => column.element.dataset.key === search)[0];
+      return this.columns.find((column) => column.element.dataset.key === search);
     }
     return this.columns[search];
   }
@@ -1113,16 +941,10 @@ class DataTableAdapter {
 
   /** @return {HTMLTableSectionElement} */
   getTableBody() {
-    if (this.tbody) {
-      return this.tbody;
-    }
-    this.tbody = this.element.getElementsByTagName('tbody')[0];
-    if (!this.tbody) {
-      const table = this.getTable();
-      this.tbody = document.createElement('tbody');
-      table.appendChild(this.tbody);
-    }
-    return this.tbody;
+    // eslint-disable-next-line no-return-assign
+    return this.tbody
+      ||= this.element.getElementsByTagName('tbody')[0]
+      || this.getTable().appendChild(document.createElement('tbody'));
   }
 
   /**
@@ -1131,14 +953,8 @@ class DataTableAdapter {
    */
   refreshColumn(columnIndex) {
     const tbody = this.getTableBody();
-    const rowLen = tbody.rows.length;
-    for (let rowIndex = 0; rowIndex < rowLen; rowIndex += 1) {
-      this.refreshCell(columnIndex, rowIndex);
+    for (let i = 0; i < tbody.rows.length; i++) {
+      this.refreshCell(columnIndex, i);
     }
   }
 }
-
-export {
-  DataTableAdapter,
-  DataTableAdapterColumn,
-};