@shortfuse/materialdesignweb 0.3.0 → 0.4.0

package/components/datatable/index.js

@@ -1,238 +1,122 @@
 // https://www.w3.org/TR/wai-aria-practices/#grid
 
-import {
-  dispatchDomEvent,
-  isRtl,
-  findElementParentByClassName,
-  iterateArrayLike,
-  iterateSomeOfArrayLike,
-} from '../../core/dom';
+import * as Keyboard from '../../core/aria/keyboard.js';
+import * as RovingTabIndex from '../../core/aria/rovingtabindex.js';
+import { iterateArrayLike } from '../../core/dom.js';
+
+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 {Element} element
+ * @param {CustomEvent} event
  * @return {void}
  */
-export function attach(element) {
-  if (!element.hasAttribute('role')) {
-    element.setAttribute('role', 'grid');
-  }
-  element.setAttribute('mdw-js', '');
-  const headerRow = getHeaderRow(element);
-  const tbody = getTableBody(element);
-  const cellFocusable = element.hasAttribute('mdw-cell-focusable');
-  const rowFocusable = element.hasAttribute('mdw-row-focusable');
-
-  headerRow.addEventListener('click', onHeaderRowClick);
-  tbody.addEventListener('keydown', onTableBodyKeyDown);
-  tbody.addEventListener('click', onTableBodyClick);
-  let firstRow = null;
-  let foundTabbableRow = false;
-  let firstCell = null;
-  let foundTabbableCell = false;
-  iterateArrayLike(tbody.rows, (row) => {
-    if (rowFocusable) {
-      if (!firstRow) {
-        firstRow = row;
-      }
-      if (!foundTabbableRow && row.getAttribute('tabindex') === '0') {
-        foundTabbableRow = true;
-      } else {
-        row.setAttribute('tabindex', '-1');
-      }
-    } else {
-      row.removeAttribute('tabindex');
-    }
-    iterateArrayLike(row.cells, (cell) => {
-      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) {
-    updateTabIndex(firstRow, false);
-  } else if (cellFocusable && !foundTabbableCell && firstCell) {
-    updateTabIndex(firstCell, false);
+export function onSelectedChange(event) {
+  const selected = event.detail.value === 'true';
+  /** @type {HTMLElement} */
+  const dataTableElement = (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');
   }
 }
 
 /**
- * @param {MouseEvent} event
- * @return {void}
+ * @param {Element} datatableElement
+ * @return {HTMLElement}
  */
-export function onTableBodyClick(event) {
-  /** @type {HTMLTableSectionElement} */
-  const tbody = (event.currentTarget);
-  const mdwDataTable = findElementParentByClassName(tbody, 'mdw-datatable');
-  const { target } = event;
-  let cell = null;
-  /** @type {HTMLTableRowElement} */
-  let row = null;
-
-  if (target instanceof HTMLInputElement && target.getAttribute('type') === 'checkbox') {
-    if (mdwDataTable.hasAttribute('mdw-datatable-adapter')) {
-      return;
-    }
-    // Checkbox clicked
-    cell = findParentCell(target);
-    if (!cell.hasAttribute('mdw-selector')) {
-      return;
-    }
-    event.stopPropagation();
-    /** @type {HTMLTableRowElement} */
-    row = (cell.parentElement);
-    let hasSelection = false;
-    if (target.checked) {
-      row.setAttribute('aria-selected', 'true');
-      hasSelection = true;
-    } else {
-      row.setAttribute('aria-selected', 'false');
-      /** @type {NodeListOf<HTMLInputElement>} */
-      const checkboxes = (mdwDataTable.querySelectorAll('td[mdw-selector] input[type=checkbox]'));
-      hasSelection = iterateSomeOfArrayLike(checkboxes, checkbox => checkbox.checked);
-    }
-    if (hasSelection) {
-      mdwDataTable.setAttribute('mdw-has-selection', '');
+export function getScroller(datatableElement) {
+  /** @type {HTMLElement} */
+  let scroller = (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) {
+      datatableElement.insertBefore(scroller, footer);
     } else {
-      mdwDataTable.removeAttribute('mdw-has-selection');
-    }
-    return;
-  }
-  if (target instanceof HTMLTableRowElement) {
-    row = target;
-  } else if (target instanceof HTMLTableCellElement) {
-    cell = target;
-  } else {
-    cell = findParentCell(/** @type {Element} */ (target));
-  }
-
-  if (cell) {
-    /** @type {HTMLTableRowElement} */
-    row = (cell.parentElement);
-    const cellFocusable = mdwDataTable.hasAttribute('mdw-cell-focusable');
-    if (cellFocusable) {
-      updateTabIndex(cell);
-      return;
+      datatableElement.appendChild(scroller);
     }
-  }
-  if (row) {
-    const rowFocusable = mdwDataTable.hasAttribute('mdw-row-focusable');
-    if (rowFocusable) {
-      updateTabIndex(row);
+    // Move table into scroller if it exists
+    const table = datatableElement.getElementsByTagName('table')[0];
+    if (table) {
+      table.parentElement.removeChild(table);
+      scroller.appendChild(table);
     }
   }
+  return scroller;
 }
 
 /**
- * @param {HTMLTableRowElement|HTMLTableCellElement} element
- * @param {boolean} [removeOtherTabIndexes=true]
- * @return {void}
+ * @param {Element} datatableElement
+ * @return {HTMLTableElement}
  */
-export function updateTabIndex(element, removeOtherTabIndexes) {
-  if (removeOtherTabIndexes !== false) {
-    /** @type {HTMLElement} */
-    let tbody = element;
-    while (tbody != null && tbody instanceof HTMLTableSectionElement === false) {
-      tbody = tbody.parentElement;
-    }
-    if (element instanceof HTMLTableCellElement) {
-      iterateArrayLike(tbody.querySelectorAll('td[tabindex="0"]'), (td) => {
-        if (td !== element) {
-          td.setAttribute('tabindex', '-1');
-        }
-      });
-    }
-    if (element instanceof HTMLTableRowElement) {
-      iterateArrayLike(tbody.querySelectorAll('tr[tabindex="0"]'), (tr) => {
-        if (tr !== element) {
-          tr.setAttribute('tabindex', '-1');
-        }
-      });
-    }
+export function getTable(datatableElement) {
+  if (datatableElement instanceof HTMLTableElement) {
+    return datatableElement;
   }
-  if (element.getAttribute('tabindex') !== '0') {
-    element.setAttribute('tabindex', '0');
-    dispatchDomEvent(element, 'mdw:tabindexchanged');
+  let table = datatableElement.getElementsByTagName('table')[0];
+  if (!table) {
+    const scroller = getScroller(datatableElement);
+    table = document.createElement('table');
+    scroller.appendChild(table);
   }
+  return table;
 }
 
 /**
- * @param {Element} element
- * @return {HTMLTableCellElement}
+ * @param {Element} datatableElement
+ * @return {HTMLTableSectionElement}
  */
-export function findParentCell(element) {
-  let el = element;
-  while (el != null) {
-    if (el instanceof HTMLTableElement) {
-      return null;
-    }
-    if (el instanceof HTMLTableCellElement) {
-      return el;
-    }
-    el = el.parentElement;
+export function getTableBody(datatableElement) {
+  let tbody = datatableElement.getElementsByTagName('tbody')[0];
+  if (!tbody) {
+    const table = getTable(datatableElement);
+    tbody = document.createElement('tbody');
+    table.appendChild(tbody);
   }
-  return null;
+  return tbody;
 }
 
 /**
- * @param {MouseEvent} event
+ * @param {Element} datatableElement
+ * @param {number} columnIndex
+ * @param {boolean} ascending
  * @return {void}
  */
-export function onHeaderRowClick(event) {
-  /** @type {HTMLElement} */
-  const targetElement = (event.target);
-  const cell = findParentCell(targetElement);
-  if (!cell) {
-    return;
-  }
-  if (cell.cellIndex === -1) {
-    return;
-  }
-  if (!cell.hasAttribute('mdw-sortable')) {
-    return;
-  }
-  /** @type {HTMLElement} */
-  const headerRow = (event.currentTarget);
-  const mdwTable = findElementParentByClassName(headerRow, 'mdw-datatable');
-  if (!mdwTable) {
-    return;
-  }
-  if (mdwTable.hasAttribute('mdw-datatable-adapter')) {
+export function sortColumn(datatableElement, columnIndex, ascending = true) {
+  if (datatableElement.hasAttribute('mdw-datatable-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');
-  }
-  iterateArrayLike(cell.parentElement.getElementsByTagName('th'), (th) => {
-    if (th !== cell) {
-      th.removeAttribute('mdw-sorted');
+  iterateArrayLike(datatableElement.getElementsByTagName('th'), (th) => {
+    if (th.cellIndex === columnIndex) {
+      th.setAttribute('aria-sort', ascending ? 'ascending' : 'descending');
+    } else if (th.hasAttribute('aria-sort')) {
+      th.setAttribute('aria-sort', 'none');
     }
   });
 
   /** @type {HTMLTableSectionElement} */
-  const tbody = getTableBody(mdwTable);
+  const tbody = getTableBody(datatableElement);
   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 aCell = a.cells.item(columnIndex);
+    const bCell = b.cells.item(columnIndex);
     const aText = aCell.textContent;
     const bText = bCell.textContent;
     if (aCell.dataset.type === 'number') {
@@ -248,197 +132,198 @@ export function onHeaderRowClick(event) {
     fragment.appendChild(row);
   });
   tbody.appendChild(fragment);
-  event.stopPropagation();
 }
 
 /**
- * @param {KeyboardEvent} event
+ * @param {CustomEvent} event
  * @return {void}
  */
-export function onTableBodyKeyDown(event) {
-  const currentSelection = document.activeElement;
-  let cellIndex = 0;
-  /** @type {HTMLTableRowElement} */
-  let row = null;
-  let isRow = false;
-  /** @type {HTMLTableRowElement|HTMLTableCellElement} */
-  let nextSelection = null;
-  if (currentSelection instanceof HTMLTableCellElement) {
-    ({ cellIndex } = currentSelection);
-    /** @type {HTMLTableRowElement} */
-    row = (currentSelection.parentElement);
-  } else if (currentSelection instanceof HTMLTableRowElement) {
-    isRow = true;
-    row = currentSelection;
+export function onItemFocus(event) {
+  /** @type {HTMLElement} */
+  const datatableElement = (event.currentTarget);
+  const onFocusInteraction = datatableElement.getAttribute('mdw-on-focus');
+  if (!onFocusInteraction) {
+    return;
   }
-  if (!row) {
+  /** @type {HTMLElement} */
+  const itemElement = (event.target);
+  if (itemElement.getAttribute('aria-disabled') === 'true') {
     return;
   }
-  /** @type {HTMLTableSectionElement} */
-  const tbody = (event.currentTarget);
-  if (event.key === 'ArrowUp' || (event.key === 'Up')) {
-    if (row.sectionRowIndex === 0) {
-      return;
-    }
-    const newRow = tbody.rows.item(row.sectionRowIndex - 1);
-    if (isRow) {
-      nextSelection = newRow;
-    } else {
-      nextSelection = newRow.cells.item(cellIndex);
-    }
-  } else if (event.key === 'ArrowDown' || (event.key === 'Down')) {
-    const newIndex = row.sectionRowIndex + 1;
-    if (newIndex >= tbody.rows.length) {
-      return;
-    }
-    const newRow = tbody.rows.item(newIndex);
-    if (isRow) {
-      nextSelection = newRow;
-    } else {
-      nextSelection = newRow.cells.item(cellIndex);
-    }
-  } else if (event.ctrlKey && event.key === 'Home') {
-    if (row.sectionRowIndex === 0 && cellIndex === 0) {
-      return;
-    }
-    const newRow = tbody.rows.item(0);
-    if (isRow) {
-      nextSelection = newRow;
-    } else {
-      nextSelection = newRow.cells.item(0);
-    }
-  } else 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;
-    }
-    const newRow = tbody.rows.item(newRowIndex);
-    if (isRow) {
-      nextSelection = newRow;
-    } else {
-      nextSelection = newRow.cells.item(newCellIndex);
-    }
-  } else if (event.key === 'Home') {
-    if (isRow) {
-      return;
-    }
-    if (cellIndex === 0) {
-      return;
-    }
-    nextSelection = row.cells.item(0);
-  } else if (event.key === 'End') {
-    if (isRow) {
-      return;
-    }
-    const newIndex = row.cells.length - 1;
-    if (newIndex === cellIndex) {
-      return;
-    }
-    nextSelection = row.cells.item(newIndex);
-  } else {
-    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;
-      }
-    }
-    if (isLeft) {
-      if (isRow) {
-        return;
-      }
-      if (cellIndex === 0) {
-        return;
-      }
-      nextSelection = row.cells.item(cellIndex - 1);
-    } else if (isRight) {
-      if (isRow) {
-        return;
-      }
-      const newIndex = cellIndex + 1;
-      if (newIndex >= row.cells.length) {
-        return;
-      }
-      nextSelection = row.cells.item(newIndex);
+  onFocusInteraction.split(' ').forEach((interaction) => {
+    switch (interaction) {
+      case 'select':
+        if (itemElement instanceof HTMLTableRowElement) {
+          DataTableRow.setSelected(itemElement, true);
+        } else {
+          DataTableCell.setSelected(itemElement, true);
+        }
+        break;
+      default:
     }
-  }
-  if (nextSelection) {
-    event.stopPropagation();
-    event.preventDefault();
-    currentSelection.setAttribute('tabindex', '-1');
-    nextSelection.focus();
-    updateTabIndex(nextSelection, false);
-  }
+  });
 }
 
 /**
- * @param {Element} element
+ * @param {CustomEvent} event
  * @return {void}
  */
-export function detach(element) {
-  element.removeAttribute('mdw-js');
-  const headerRow = getHeaderRow(element);
-  const tbody = getTableBody(element);
-  headerRow.removeEventListener('click', onHeaderRowClick);
-  tbody.removeEventListener('keydown', onTableBodyKeyDown);
-  tbody.removeEventListener('click', onTableBodyClick);
+export function onSort(event) {
+  /** @type {HTMLElement} */
+  const datatableElement = (event.currentTarget);
+  /** @type {HTMLTableHeaderCellElement} */
+  const cell = (event.target);
+  sortColumn(datatableElement, cell.cellIndex, event.detail.sort === 'ascending');
 }
 
 /**
- * @param {Element} datatableElement
- * @return {HTMLElement}
+ * @param {CustomEvent} event
+ * @return {void}
  */
-export function getScroller(datatableElement) {
+export function onRowHeaderCheckedChange(event) {
+  /** @type {HTMLTableHeaderCellElement} */
+  const cell = (event.target);
+  const row = cell.parentElement;
+  DataTableRow.setSelected(row, event.detail.value);
+}
+
+/**
+ * @param {Event} event
+ * @return {void}
+ */
+function onTabIndexZeroed(event) {
   /** @type {HTMLElement} */
-  let scroller = (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) {
-      datatableElement.insertBefore(scroller, footer);
-    } else {
-      datatableElement.appendChild(scroller);
-    }
-    // Move table into scroller if it exists
-    const table = datatableElement.getElementsByTagName('table')[0];
-    if (table) {
-      table.parentElement.removeChild(table);
-      scroller.appendChild(table);
-    }
+  const dataTableElement = (event.currentTarget);
+  /** @type {HTMLElement} */
+  const emitter = (event.target);
+
+  const row = (emitter instanceof HTMLTableRowElement && emitter);
+  const cell = (!row && emitter instanceof HTMLTableCellElement && emitter);
+  if (!row && !cell) {
+    return;
   }
-  return scroller;
+  event.stopPropagation();
+  RovingTabIndex.removeTabIndex(dataTableElement.querySelectorAll(row ? 'tr' : CELL_TABINDEX_QUERIES.join(',')), [emitter]);
 }
 
 /**
- * @param {Element} datatableElement
- * @return {HTMLTableElement}
+ * @param {CustomEvent} event
+ * @return {void}
  */
-export function getTable(datatableElement) {
-  if (datatableElement instanceof HTMLTableElement) {
-    return datatableElement;
+export function onKeyboard(event) {
+  /** @type {HTMLElement} */
+  const dataTableElement = (event.currentTarget);
+  /** @type {HTMLElement} */
+  const emitter = (event.target);
+  let current = document.activeElement;
+
+  let row = (emitter instanceof HTMLTableRowElement && emitter);
+  const cell = (!row && emitter instanceof HTMLTableCellElement && emitter);
+  if (!row && !cell) {
+    return;
   }
-  let table = datatableElement.getElementsByTagName('table')[0];
-  if (!table) {
-    const scroller = getScroller(datatableElement);
-    table = document.createElement('table');
-    scroller.appendChild(table);
+  if (!row) {
+    /** @type {HTMLTableRowElement} */
+    row = (cell.parentElement);
   }
-  return table;
+
+  let checkNavKeys = false;
+  switch (event.type) {
+    case Keyboard.SPACEBAR_KEY:
+      if (event.detail.ctrlKey || event.detail.altKey || event.detail.metaKey) {
+        return;
+      }
+      if (!event.detail.shiftKey) {
+        return;
+      }
+      if (!row.hasAttribute('aria-selected')) {
+        return;
+      }
+      DataTableRow.setSelected(row, row.getAttribute('aria-selected') !== 'true', true);
+      break;
+    default:
+      checkNavKeys = true;
+  }
+
+  if (checkNavKeys) {
+    // Keyboard Navigation
+    /** @type {ArrayLike<HTMLElement>} */
+    let searchElements;
+    let reverse = false;
+    let loop = false;
+    switch (event.type) {
+      case Keyboard.UP_ARROW_KEY:
+        reverse = true;
+        // eslint-disable-next-line no-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;
+        // eslint-disable-next-line no-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;
+        // eslint-disable-next-line no-fallthrough
+      case Keyboard.HOME_KEY:
+        if (event.detail.altKey || event.detail.metaKey) {
+          return;
+        }
+        if (!cell) {
+          return;
+        }
+        if (event.detail.ctrlKey) {
+          searchElements = getTableBody(dataTableElement).querySelectorAll(CELL_TABINDEX_QUERIES.join(','));
+        } else {
+          searchElements = cell.parentElement.querySelectorAll(CELL_TABINDEX_QUERIES.join(','));
+        }
+        cell.setAttribute('tabindex', '-1');
+        current = null;
+        loop = true;
+        break;
+      default:
+        return;
+    }
+    RovingTabIndex.selectNext(searchElements, current, loop, reverse);
+  }
+
+  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);
 }
 
 /**
@@ -461,15 +346,43 @@ export function getHeaderRow(tableElement) {
 }
 
 /**
- * @param {Element} datatableElement
- * @return {HTMLTableSectionElement}
+ * @param {Element} element
+ * @return {void}
  */
-export function getTableBody(datatableElement) {
-  let tbody = datatableElement.getElementsByTagName('tbody')[0];
-  if (!tbody) {
-    const table = getTable(datatableElement);
-    tbody = document.createElement('tbody');
-    table.appendChild(tbody);
+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);
+
+  iterateArrayLike(headerRow.getElementsByTagName('th'), DataTableColumnHeader.attach);
+  iterateArrayLike(tbody.getElementsByTagName('th'), DataTableRowHeader.attach);
+
+  const tableRows = tbody.getElementsByTagName('tr');
+  iterateArrayLike(tableRows, DataTableRow.attach);
+
+  const rowFocusable = element.hasAttribute('mdw-row-focusable');
+  if (rowFocusable) {
+    RovingTabIndex.setupTabIndexes(tableRows);
   }
-  return tbody;
+  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);
 }