@shortfuse/materialdesignweb 0.2.0 → 0.5.0

package/components/datatable/index.js

@@ -1,478 +1,374 @@
-import { isRtl, findElementParentByClassName } from '../common/dom';
-
 // https://www.w3.org/TR/wai-aria-practices/#grid
 
-// eslint-disable-next-line import/prefer-default-export
-export class DataTable {
-  /**
-   * @param {Element} element
-   * @return {void}
-   */
-  static attach(element) {
-    if (!element.hasAttribute('role')) {
-      element.setAttribute('role', 'grid');
-    }
-    element.setAttribute('mdw-js', '');
-    const headerRow = DataTable.getHeaderRow(element);
-    const tbody = DataTable.getTableBody(element);
-    const cellFocusable = element.hasAttribute('mdw-cell-focusable');
-    const rowFocusable = element.hasAttribute('mdw-row-focusable');
+import * as Keyboard from '../../core/aria/keyboard.js';
+import * as RovingTabIndex from '../../core/aria/rovingtabindex.js';
 
-    headerRow.addEventListener('click', DataTable.onHeaderRowClick);
-    tbody.addEventListener('keydown', DataTable.onTableBodyKeyDown);
-    tbody.addEventListener('click', DataTable.onTableBodyClick);
-    let firstRow = null;
-    let foundTabbableRow = false;
-    let firstCell = null;
-    let foundTabbableCell = false;
-    for (let i = 0; i < tbody.rows.length; i += 1) {
-      const row = tbody.rows.item(i);
-      if (rowFocusable) {
-        if (!firstRow) {
-          firstRow = row;
-        }
-        if (!foundTabbableRow && row.getAttribute('tabindex') === '0') {
-          foundTabbableRow = true;
-        } else {
-          row.setAttribute('tabindex', '-1');
-        }
-      } else {
-        row.removeAttribute('tabindex');
-      }
-      for (let j = 0; j < row.cells.length; j += 1) {
-        const cell = row.cells.item(j);
-        if (cellFocusable && !rowFocusable) {
-          if (!firstCell) {
-            firstCell = cell;
-          }
-          if (!foundTabbableCell && cell.getAttribute('tabindex') === '0') {
-            foundTabbableCell = true;
-          } else {
-            cell.setAttribute('tabindex', '-1');
-          }
-        } else {
-          cell.removeAttribute('tabindex');
-        }
-      }
-    }
-    if (rowFocusable && !foundTabbableRow && firstRow) {
-      firstRow.setAttribute('tabindex', '0');
-      DataTable.dispatchEvent(firstRow, 'mdw:tabindexchanged');
-    } else if (cellFocusable && !foundTabbableCell && firstCell) {
-      firstCell.setAttribute('tabindex', '0');
-      DataTable.dispatchEvent(firstCell, 'mdw:tabindexchanged');
-    }
+import * as DataTableCell from './cell.js';
+import * as DataTableColumnHeader from './columnheader.js';
+import * as DataTableRow from './row.js';
+import * as DataTableRowHeader from './rowheader.js';
+
+export const CELL_TABINDEX_QUERIES = [
+  'td:not([mdw-autofocus-widget])',
+  'th:not([mdw-autofocus-widget])',
+  'td[mdw-autofocus-widget] .mdw-datatable__widget',
+  'th[mdw-autofocus-widget] .mdw-datatable__widget',
+];
+
+/**
+ * @param {CustomEvent} event
+ * @return {void}
+ */
+export function onSelectedChange(event) {
+  const selected = event.detail.value === 'true';
+  const dataTableElement = /** @type {HTMLElement} */ (event.currentTarget);
+  const hasSelection = selected || dataTableElement.querySelector('td[aria-selected="true"],tr[aria-selected="true"]');
+  if (hasSelection) {
+    dataTableElement.setAttribute('mdw-has-selection', '');
+  } else {
+    dataTableElement.removeAttribute('mdw-has-selection');
   }
+}
 
-  static onTableBodyClick(event) {
-    const tbody = event.currentTarget;
-    const mdwDataTable = findElementParentByClassName(tbody, 'mdw-datatable');
-    const { target } = event;
-    if (target instanceof HTMLTableCellElement) {
-      const cellFocusable = mdwDataTable.hasAttribute('mdw-cell-focusable');
-      const rowFocusable = mdwDataTable.hasAttribute('mdw-row-focusable');
-      if (cellFocusable) {
-        const otherTabIndexes = tbody.querySelectorAll('[tabindex="0"]');
-        for (let i = 0; i < otherTabIndexes.length; i += 1) {
-          const otherTabIndexItem = otherTabIndexes.item(i);
-          if (otherTabIndexItem !== target) {
-            otherTabIndexItem.setAttribute('tabindex', '-1');
-          }
-        }
-        if (target.getAttribute('tabindex') !== '0') {
-          target.setAttribute('tabindex', '0');
-          DataTable.dispatchEvent(target, 'mdw:tabindexchanged');
-        }
-      } else if (rowFocusable) {
-        const otherTabIndexes = tbody.querySelectorAll('[tabindex="0"]');
-        for (let i = 0; i < otherTabIndexes.length; i += 1) {
-          const otherTabIndexItem = otherTabIndexes.item(i);
-          if (otherTabIndexItem !== target.parentElement) {
-            otherTabIndexItem.setAttribute('tabindex', '-1');
-          }
-        }
-        if (target.parentElement.getAttribute('tabindex') !== '0') {
-          target.parentElement.setAttribute('tabindex', '0');
-          DataTable.dispatchEvent(target.parentElement, 'mdw:tabindexchanged');
-        }
-      }
-      return;
+/**
+ * @param {Element} datatableElement
+ * @return {HTMLElement}
+ */
+export function getScroller(datatableElement) {
+  let scroller = /** @type {HTMLElement} */ (datatableElement.getElementsByClassName('mdw-datatable__scroller')[0]);
+  if (!scroller) {
+    scroller = document.createElement('div');
+    scroller.classList.add('mdw-datatable__scroller');
+    const footer = datatableElement.getElementsByClassName('mdw-datatable__footer')[0];
+    if (footer) {
+      footer.before(scroller);
+    } else {
+      datatableElement.appendChild(scroller);
     }
-    if (target instanceof HTMLInputElement && target.getAttribute('type') === 'checkbox') {
-      if (mdwDataTable.hasAttribute('mdw-adapter')) {
-        return;
-      }
-      // Checkbox clicked
-      const cell = DataTable.findParentCell(target);
-      if (!cell.hasAttribute('mdw-selector')) {
-        return;
-      }
-      event.stopPropagation();
-      const currentRow = cell.parentElement;
-      let hasSelection = false;
-      if (target.checked) {
-        currentRow.setAttribute('mdw-selected', '');
-        hasSelection = true;
-      } else {
-        currentRow.removeAttribute('mdw-selected');
-        /** @type {NodeListOf<HTMLInputElement>} */
-        const checkboxes = (mdwDataTable.querySelectorAll('td[mdw-selector] input[type=checkbox]'));
-        for (let i = 0; i < checkboxes.length; i += 1) {
-          if (checkboxes.item(i).checked) {
-            hasSelection = true;
-            break;
-          }
-        }
-      }
-      if (hasSelection) {
-        mdwDataTable.setAttribute('mdw-has-selection', '');
-      } else {
-        mdwDataTable.removeAttribute('mdw-has-selection');
-      }
+    // Move table into scroller if it exists
+    const table = datatableElement.getElementsByTagName('table')[0];
+    if (table) {
+      table.remove();
+      scroller.appendChild(table);
     }
   }
+  return scroller;
+}
 
-  /**
-   * @param {Element} element
-   * @return {HTMLTableCellElement}
-   */
-  static findParentCell(element) {
-    let el = element;
-    while (el != null) {
-      if (el instanceof HTMLTableElement) {
-        return null;
-      }
-      if (el instanceof HTMLTableCellElement) {
-        return el;
-      }
-      el = el.parentElement;
-    }
-    return null;
+/**
+ * @param {Element} datatableElement
+ * @return {HTMLTableElement}
+ */
+export function getTable(datatableElement) {
+  if (datatableElement instanceof HTMLTableElement) {
+    return datatableElement;
   }
+  let table = datatableElement.getElementsByTagName('table')[0];
+  if (!table) {
+    const scroller = getScroller(datatableElement);
+    table = document.createElement('table');
+    scroller.appendChild(table);
+  }
+  return table;
+}
 
-  static onHeaderRowClick(event) {
-    const cell = DataTable.findParentCell(event.target);
-    if (!cell) {
-      return;
-    }
-    if (cell.cellIndex === -1) {
-      return;
-    }
-    if (!cell.hasAttribute('mdw-sortable')) {
-      return;
-    }
-    const mdwTable = findElementParentByClassName(event.currentTarget, 'mdw-datatable');
-    if (!mdwTable) {
-      return;
-    }
-    if (mdwTable.hasAttribute('mdw-adapter')) {
-      return;
-    }
-    let ascending = true;
-    if (cell.hasAttribute('mdw-sorted') && !cell.getAttribute('mdw-sorted')) {
-      ascending = false;
-    }
-    if (ascending) {
-      cell.setAttribute('mdw-sorted', '');
-    } else {
-      cell.setAttribute('mdw-sorted', 'desc');
-    }
-    const thItems = cell.parentElement.getElementsByTagName('th');
-    for (let i = 0; i < thItems.length; i += 1) {
-      const th = thItems[i];
-      if (th !== cell) {
-        th.removeAttribute('mdw-sorted');
-      }
-    }
+/**
+ * @param {Element} datatableElement
+ * @return {HTMLTableSectionElement}
+ */
+export function getTableBody(datatableElement) {
+  let tbody = datatableElement.getElementsByTagName('tbody')[0];
+  if (!tbody) {
+    const table = getTable(datatableElement);
+    tbody = document.createElement('tbody');
+    table.appendChild(tbody);
+  }
+  return tbody;
+}
 
-    /** @type {HTMLTableSectionElement} */
-    const tbody = DataTable.getTableBody(mdwTable);
-    const rows = [];
-    for (let i = tbody.rows.length - 1; i >= 0; i -= 1) {
-      rows.push(tbody.rows.item(i));
-      tbody.deleteRow(i);
-    }
-    rows.sort((a, b) => {
-      const aCell = a.cells.item(cell.cellIndex);
-      const bCell = b.cells.item(cell.cellIndex);
-      const aText = aCell.textContent;
-      const bText = bCell.textContent;
-      if (aCell.dataset.type === 'number') {
-        return parseFloat(bText) - parseFloat(aText);
-      }
-      return bText.localeCompare(aText);
-    });
-    if (ascending) {
-      rows.reverse();
+/**
+ * @param {Element} datatableElement
+ * @param {number} columnIndex
+ * @param {boolean} ascending
+ * @return {void}
+ */
+export function sortColumn(datatableElement, columnIndex, ascending = true) {
+  if (datatableElement.hasAttribute('mdw-datatable-adapter')) {
+    return;
+  }
+  for (const th of datatableElement.getElementsByTagName('th')) {
+    if (th.cellIndex === columnIndex) {
+      th.setAttribute('aria-sort', ascending ? 'ascending' : 'descending');
+    } else if (th.hasAttribute('aria-sort')) {
+      th.setAttribute('aria-sort', 'none');
     }
-    const fragment = document.createDocumentFragment();
-    rows.forEach((row) => {
-      fragment.appendChild(row);
-    });
-    tbody.appendChild(fragment);
-    event.stopPropagation();
   }
 
-  /**
-   * @param {Element} element
-   * @param {string} type
-   * @return {void}
-   */
-  static dispatchEvent(element, type) {
-    const event = document.createEvent('Event');
-    event.initEvent(type, true, true);
-    element.dispatchEvent(event);
+  /** @type {HTMLTableSectionElement} */
+  const tbody = getTableBody(datatableElement);
+  const rows = [];
+  let i = tbody.rows.length;
+  while (i--) {
+    rows.push(tbody.rows.item(i));
+    tbody.deleteRow(i);
+  }
+  rows.sort((a, b) => {
+    const aCell = a.cells.item(columnIndex);
+    const bCell = b.cells.item(columnIndex);
+    const aText = aCell.textContent;
+    const bText = bCell.textContent;
+    if (aCell.dataset.type === 'number') {
+      return Number.parseFloat(bText) - Number.parseFloat(aText);
+    }
+    return bText.localeCompare(aText);
+  });
+  if (ascending) {
+    rows.reverse();
   }
+  const fragment = document.createDocumentFragment();
+  for (const row of rows) {
+    fragment.appendChild(row);
+  }
+  tbody.appendChild(fragment);
+}
 
-  static onTableBodyKeyDown(event) {
-    const currentSelection = document.activeElement;
-    let cellIndex = 0;
-    /** @type {HTMLTableRowElement} */
-    let row = null;
-    let isRow = false;
-    if (currentSelection instanceof HTMLTableCellElement) {
-      ({ cellIndex } = currentSelection);
-      /** @type {HTMLTableRowElement} */
-      row = (currentSelection.parentElement);
-    } else if (currentSelection instanceof HTMLTableRowElement) {
-      isRow = true;
-      row = currentSelection;
-    }
-    if (!row) {
-      return;
-    }
-    /** @type {HTMLTableSectionElement} */
-    const tbody = event.currentTarget;
-    if (event.key === 'ArrowUp' || (event.key === 'Up')) {
-      if (row.sectionRowIndex === 0) {
-        return;
-      }
-      event.stopPropagation();
-      event.preventDefault();
-      const newIndex = row.sectionRowIndex - 1;
-      const newRow = tbody.rows.item(newIndex);
-      currentSelection.setAttribute('tabindex', '-1');
-      if (isRow) {
-        newRow.focus();
-        newRow.setAttribute('tabindex', '0');
-        DataTable.dispatchEvent(newRow, 'mdw:tabindexchanged');
-      } else {
-        newRow.cells.item(cellIndex).focus();
-        newRow.cells.item(cellIndex).setAttribute('tabindex', '0');
-        DataTable.dispatchEvent(newRow.cells.item(cellIndex), 'mdw:tabindexchanged');
-      }
-      return;
-    }
-    if (event.key === 'ArrowDown' || (event.key === 'Down')) {
-      const newIndex = row.sectionRowIndex + 1;
-      if (newIndex >= tbody.rows.length) {
-        return;
-      }
-      event.stopPropagation();
-      event.preventDefault();
-      const newRow = tbody.rows.item(newIndex);
-      currentSelection.setAttribute('tabindex', '-1');
-      if (isRow) {
-        newRow.focus();
-        newRow.setAttribute('tabindex', '0');
-        DataTable.dispatchEvent(newRow, 'mdw:tabindexchanged');
-      } else {
-        newRow.cells.item(cellIndex).focus();
-        newRow.cells.item(cellIndex).setAttribute('tabindex', '0');
-        DataTable.dispatchEvent(newRow.cells.item(cellIndex), 'mdw:tabindexchanged');
-      }
-      return;
-    }
-    if (event.ctrlKey && event.key === 'Home') {
-      if (row.sectionRowIndex === 0 && cellIndex === 0) {
-        return;
-      }
-      event.stopPropagation();
-      event.preventDefault();
-      const newRow = tbody.rows.item(0);
-      currentSelection.setAttribute('tabindex', '-1');
-      if (isRow) {
-        newRow.focus();
-        newRow.setAttribute('tabindex', '0');
-        DataTable.dispatchEvent(newRow, 'mdw:tabindexchanged');
-      } else {
-        newRow.cells.item(0).focus();
-        newRow.cells.item(0).setAttribute('tabindex', '0');
-        DataTable.dispatchEvent(newRow.cells.item(0), 'mdw:tabindexchanged');
-      }
-      return;
-    }
-    if (event.ctrlKey && event.key === 'End') {
-      const newRowIndex = tbody.rows.length - 1;
-      let newCellIndex = 0;
-      if (!isRow) {
-        newCellIndex = row.cells.length - 1;
-      }
-      if (row.sectionRowIndex === newRowIndex && cellIndex === newCellIndex) {
-        return;
-      }
-      event.stopPropagation();
-      event.preventDefault();
-      const newRow = tbody.rows.item(newRowIndex);
-      currentSelection.setAttribute('tabindex', '-1');
-      if (isRow) {
-        newRow.focus();
-        newRow.setAttribute('tabindex', '0');
-        DataTable.dispatchEvent(newRow, 'mdw:tabindexchanged');
-      } else {
-        newRow.cells.item(newCellIndex).focus();
-        newRow.cells.item(newCellIndex).setAttribute('tabindex', '0');
-        DataTable.dispatchEvent(newRow.cells.item(newCellIndex), 'mdw:tabindexchanged');
-      }
-      return;
-    }
-    if (event.key === 'Home') {
-      if (isRow) {
-        return;
-      }
-      if (cellIndex === 0) {
-        return;
-      }
-      event.stopPropagation();
-      event.preventDefault();
-      const newIndex = 0;
-      const newCell = row.cells.item(newIndex);
-      currentSelection.setAttribute('tabindex', '-1');
-      newCell.focus();
-      newCell.setAttribute('tabindex', '0');
-      DataTable.dispatchEvent(newCell, 'mdw:tabindexchanged');
-      return;
-    }
-    if (event.key === 'End') {
-      if (isRow) {
-        return;
-      }
-      const newIndex = row.cells.length - 1;
-      if (newIndex === cellIndex) {
-        return;
-      }
-      event.stopPropagation();
-      event.preventDefault();
-      const newCell = row.cells.item(newIndex);
-      currentSelection.setAttribute('tabindex', '-1');
-      newCell.focus();
-      newCell.setAttribute('tabindex', '0');
-      DataTable.dispatchEvent(newCell, 'mdw:tabindexchanged');
-      return;
-    }
-    const isRtlEnabled = isRtl();
-    let isLeft = false;
-    let isRight = false;
-    if (event.key === 'ArrowLeft' || (event.key === 'Left')) {
-      if (isRtlEnabled) {
-        isRight = true;
-      } else {
-        isLeft = true;
-      }
-    }
-    if (event.key === 'ArrowRight' || (event.key === 'Right')) {
-      if (isRtlEnabled) {
-        isLeft = true;
-      } else {
-        isRight = true;
-      }
+/**
+ * @param {CustomEvent} event
+ * @return {void}
+ */
+export function onItemFocus(event) {
+  const datatableElement = /** @type {HTMLElement} */ (event.currentTarget);
+  const onFocusInteraction = datatableElement.getAttribute('mdw-on-focus');
+  if (!onFocusInteraction) {
+    return;
+  }
+  const itemElement = /** @type {HTMLElement} */ (event.target);
+  if (itemElement.getAttribute('aria-disabled') === 'true') {
+    return;
+  }
+  for (const interaction of onFocusInteraction.split(' ')) {
+    switch (interaction) {
+      case 'select':
+        if (itemElement instanceof HTMLTableRowElement) {
+          DataTableRow.setSelected(itemElement, true);
+        } else {
+          DataTableCell.setSelected(itemElement, true);
+        }
+        break;
+      default:
     }
-    if (isLeft) {
-      if (isRow) {
+  }
+}
+
+/**
+ * @param {CustomEvent} event
+ * @return {void}
+ */
+export function onSort(event) {
+  const datatableElement = /** @type {HTMLElement} */ (event.currentTarget);
+  const cell = /** @type {HTMLTableHeaderCellElement} */ (event.target);
+  sortColumn(datatableElement, cell.cellIndex, event.detail.sort === 'ascending');
+}
+
+/**
+ * @param {CustomEvent} event
+ * @return {void}
+ */
+export function onRowHeaderCheckedChange(event) {
+  const cell = /** @type {HTMLTableHeaderCellElement} */ (event.target);
+  const row = cell.parentElement;
+  DataTableRow.setSelected(row, event.detail.value);
+}
+
+/**
+ * @param {Event} event
+ * @return {void}
+ */
+function onTabIndexZeroed(event) {
+  const dataTableElement = /** @type {HTMLElement} */ (event.currentTarget);
+  const emitter = /** @type {HTMLElement} */ (event.target);
+
+  const row = (emitter instanceof HTMLTableRowElement && emitter);
+  const cell = (!row && emitter instanceof HTMLTableCellElement && emitter);
+  if (!row && !cell) {
+    return;
+  }
+  event.stopPropagation();
+  RovingTabIndex.removeTabIndex(dataTableElement.querySelectorAll(row ? 'tr' : CELL_TABINDEX_QUERIES.join(',')), [emitter]);
+}
+
+/**
+ * @param {CustomEvent} event
+ * @return {void}
+ */
+export function onKeyboard(event) {
+  const dataTableElement = /** @type {HTMLElement} */ (event.currentTarget);
+  const emitter = /** @type {HTMLElement} */ (event.target);
+  let current = document.activeElement;
+
+  let row = (emitter instanceof HTMLTableRowElement && emitter);
+  const cell = (!row && emitter instanceof HTMLTableCellElement && emitter);
+  if (!row && !cell) {
+    return;
+  }
+  if (!row) {
+    row = /** @type {HTMLTableRowElement} */ (cell.parentElement);
+  }
+
+  let checkNavKeys = false;
+  switch (event.type) {
+    case Keyboard.SPACEBAR_KEY:
+      if (event.detail.ctrlKey || event.detail.altKey || event.detail.metaKey) {
         return;
       }
-      if (cellIndex === 0) {
+      if (!event.detail.shiftKey) {
         return;
       }
-      event.stopPropagation();
-      event.preventDefault();
-      const newIndex = cellIndex - 1;
-      const newCell = row.cells.item(newIndex);
-      currentSelection.setAttribute('tabindex', '-1');
-      newCell.focus();
-      newCell.setAttribute('tabindex', '0');
-      DataTable.dispatchEvent(newCell, 'mdw:tabindexchanged');
-      return;
-    }
-    if (isRight) {
-      if (isRow) {
+      if (!row.hasAttribute('aria-selected')) {
         return;
       }
-      const newIndex = cellIndex + 1;
-      if (newIndex >= row.cells.length) {
+      DataTableRow.setSelected(row, row.getAttribute('aria-selected') !== 'true', true);
+      break;
+    default:
+      checkNavKeys = true;
+  }
+
+  if (checkNavKeys) {
+    // Keyboard Navigation
+    /** @type {Iterable<HTMLElement>} */
+    let searchElements;
+    let reverse = false;
+    let loop = false;
+    switch (event.type) {
+      case Keyboard.UP_ARROW_KEY:
+        reverse = true;
+        // Fallthrough
+      case Keyboard.DOWN_ARROW_KEY:
+        if (event.detail.ctrlKey || event.detail.altKey || event.detail.metaKey) {
+          return;
+        }
+        if (cell) {
+          searchElements = getTableBody(dataTableElement).querySelectorAll(
+            CELL_TABINDEX_QUERIES.map((q) => `${q}:nth-child(${cell.cellIndex + 1})`).join(','),
+          );
+        } else {
+          searchElements = getTableBody(dataTableElement).getElementsByTagName('tr');
+        }
+        break;
+      case Keyboard.BACK_ARROW_KEY:
+        reverse = true;
+        // Fallthrough
+      case Keyboard.FORWARD_ARROW_KEY:
+        if (event.detail.ctrlKey || event.detail.altKey || event.detail.metaKey) {
+          return;
+        }
+        if (!cell) {
+          return;
+        }
+        searchElements = cell.parentElement.querySelectorAll(CELL_TABINDEX_QUERIES.join(','));
+        break;
+      case Keyboard.END_KEY:
+        reverse = true;
+        // Fallthrough
+      case Keyboard.HOME_KEY:
+        if (event.detail.altKey || event.detail.metaKey) {
+          return;
+        }
+        if (!cell) {
+          return;
+        }
+        searchElements = event.detail.ctrlKey
+          ? getTableBody(dataTableElement).querySelectorAll(CELL_TABINDEX_QUERIES.join(','))
+          : cell.parentElement.querySelectorAll(CELL_TABINDEX_QUERIES.join(','));
+        cell.setAttribute('tabindex', '-1');
+        current = null;
+        loop = true;
+        break;
+      default:
         return;
-      }
-      event.stopPropagation();
-      event.preventDefault();
-      const newCell = row.cells.item(newIndex);
-      currentSelection.setAttribute('tabindex', '-1');
-      newCell.focus();
-      newCell.setAttribute('tabindex', '0');
-      DataTable.dispatchEvent(newCell, 'mdw:tabindexchanged');
     }
+    RovingTabIndex.selectNext(searchElements, current, loop, reverse);
   }
 
-  static detach(element) {
-    element.removeAttribute('mdw-js');
-    const headerRow = DataTable.getHeaderRow(element);
-    const tbody = DataTable.getTableBody(element);
-    headerRow.removeEventListener('click', DataTable.onHeaderRowClick);
-    tbody.removeEventListener('keydown', DataTable.onTableBodyKeyDown);
-    tbody.removeEventListener('click', DataTable.onTableBodyClick);
-  }
+  event.preventDefault();
+  event.stopPropagation();
+}
 
+/**
+ * @param {Element} element
+ * @return {void}
+ */
+export function detach(element) {
+  element.removeAttribute('mdw-datatable-js');
+  element.removeEventListener(DataTableRow.FOCUS_EVENT, onItemFocus);
+  element.removeEventListener(DataTableCell.FOCUS_EVENT, onItemFocus);
+  element.removeEventListener(DataTableColumnHeader.SORT_EVENT, onSort);
+  element.removeEventListener(Keyboard.UP_ARROW_KEY, onKeyboard);
+  element.removeEventListener(Keyboard.DOWN_ARROW_KEY, onKeyboard);
+  element.removeEventListener(Keyboard.FORWARD_ARROW_KEY, onKeyboard);
+  element.removeEventListener(Keyboard.BACK_ARROW_KEY, onKeyboard);
+  element.removeEventListener(Keyboard.HOME_KEY, onKeyboard);
+  element.removeEventListener(Keyboard.END_KEY, onKeyboard);
+  element.removeEventListener(RovingTabIndex.TABINDEX_ZEROED, onTabIndexZeroed);
+}
 
-  /**
-   * @param {Element} tableElement
-   * @return {HTMLTableElement}
-   */
-  static getTable(tableElement) {
-    if (tableElement instanceof HTMLTableElement) {
-      return tableElement;
-    }
-    let table = tableElement.getElementsByTagName('table')[0];
-    if (!table) {
-      table = document.createElement('table');
-      const footer = tableElement.getElementsByClassName('mdw-datatable__footer')[0];
-      if (footer) {
-        tableElement.insertBefore(table, footer);
-      } else {
-        tableElement.appendChild(table);
-      }
-    }
-    return table;
+/**
+ * @param {Element} tableElement
+ * @return {HTMLTableRowElement}
+ */
+export function getHeaderRow(tableElement) {
+  let thead = tableElement.getElementsByTagName('thead')[0];
+  if (!thead) {
+    const table = getTable(tableElement);
+    thead = document.createElement('thead');
+    table.appendChild(thead);
   }
-
-  /**
-   * @param {Element} tableElement
-   * @return {HTMLTableRowElement}
-   */
-  static getHeaderRow(tableElement) {
-    let thead = tableElement.getElementsByTagName('thead')[0];
-    if (!thead) {
-      const table = DataTable.getTable(tableElement);
-      thead = document.createElement('thead');
-      table.appendChild(thead);
-    }
-    let headerRow = thead.getElementsByTagName('tr')[0];
-    if (!headerRow) {
-      headerRow = document.createElement('tr');
-      thead.appendChild(headerRow);
-    }
-    return headerRow;
+  let headerRow = thead.getElementsByTagName('tr')[0];
+  if (!headerRow) {
+    headerRow = document.createElement('tr');
+    thead.appendChild(headerRow);
   }
+  return headerRow;
+}
 
-  /**
-   * @param {Element} tableElement
-   * @return {HTMLTableSectionElement}
-   */
-  static getTableBody(tableElement) {
-    let tbody = tableElement.getElementsByTagName('tbody')[0];
-    if (!tbody) {
-      const table = DataTable.getTable(tableElement);
-      tbody = document.createElement('tbody');
-      table.appendChild(tbody);
-    }
-    return tbody;
+/**
+ * @param {Element} element
+ * @return {void}
+ */
+export function attach(element) {
+  element.setAttribute('mdw-datatable-js', '');
+
+  const table = getTable(element);
+  table.setAttribute('role', 'grid');
+  const headerRow = getHeaderRow(element);
+  const tbody = getTableBody(element);
+
+  for (const el of headerRow.getElementsByTagName('th')) DataTableColumnHeader.attach(el);
+  for (const el of tbody.getElementsByTagName('th')) DataTableRowHeader.attach(el);
+
+  const tableRows = tbody.getElementsByTagName('tr');
+  for (const el of tableRows) DataTableRow.attach(el);
+
+  const rowFocusable = element.hasAttribute('mdw-row-focusable');
+  if (rowFocusable) {
+    RovingTabIndex.setupTabIndexes(tableRows);
   }
+  const cellFocusable = element.hasAttribute('mdw-cell-focusable');
+  if (cellFocusable) {
+    RovingTabIndex.setupTabIndexes(tbody.querySelectorAll(CELL_TABINDEX_QUERIES.join(',')));
+  }
+
+  element.addEventListener(DataTableRow.FOCUS_EVENT, onItemFocus);
+  element.addEventListener(DataTableRow.SELECTED_CHANGE_EVENT, onSelectedChange);
+  element.addEventListener(DataTableCell.FOCUS_EVENT, onItemFocus);
+  element.addEventListener(DataTableCell.SELECTED_CHANGE_EVENT, onSelectedChange);
+  element.addEventListener(DataTableColumnHeader.SORT_EVENT, onSort);
+  element.addEventListener(Keyboard.SPACEBAR_KEY, onKeyboard);
+  element.addEventListener(Keyboard.UP_ARROW_KEY, onKeyboard);
+  element.addEventListener(Keyboard.DOWN_ARROW_KEY, onKeyboard);
+  element.addEventListener(Keyboard.FORWARD_ARROW_KEY, onKeyboard);
+  element.addEventListener(Keyboard.BACK_ARROW_KEY, onKeyboard);
+  element.addEventListener(Keyboard.HOME_KEY, onKeyboard);
+  element.addEventListener(Keyboard.END_KEY, onKeyboard);
+  element.addEventListener(RovingTabIndex.TABINDEX_ZEROED, onTabIndexZeroed);
 }