@shortfuse/materialdesignweb 0.5.0 → 0.7.0

package/adapters/datatable/index.js

@@ -1,960 +0,0 @@
-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';
-
-import DataTableAdapterColumn from './column.js';
-
-/**
- * @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 {K} key
- * @param {T[K]} value
- * @return {boolean} cancel
- */
-
-/**
- * Callback fired when value is changed
- * @template {Record<string, any>} T
- * @template {keyof T & string} K
- * @callback DataTableAdapterOnValueChangedCallback<T>
- * @param {T} object
- * @param {K} key
- * @param {T[K]} value
- * @return {void}
- */
-
-/**
- * @template {Record<string, any>} T
- * @callback DataTableAdapterFilter<T>
- * @param {T} element
- * @param {number} [index]
- * @param {T[]} array
- * @return {any}
- */
-
-/**
- * @template {Record<string, any>} T
- * @callback DataTableAdapterSorter<T>
- * @param {T} a
- * @param {T} b
- * @return {number}
- */
-
-/**
- * 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]
- */
-
-/** @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;
-    this.onValueChanged = options.onValueChanged;
-    DataTable.attach(this.element);
-
-    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;
-    this.debounceTimeMs = 0;
-    this.throttleTimeMs = 0;
-    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-datatable-adapter');
-    this.element = null;
-    this.datasource = null;
-    this.filteredDatasource = null;
-  }
-
-  /**
-   * @param {boolean} [forceRefresh=false]
-   * @return {void}
-   */
-  performThrottledRender(forceRefresh = false) {
-    this.performLazyRender(forceRefresh);
-    if (this.throttledRenderPending) {
-      this.throttledRenderPending = false;
-      this.scheduleThrottledRender();
-    }
-  }
-
-  /**
-   * @param {boolean} [forceRefresh=false]
-   * @return {void}
-   */
-  scheduleThrottledRender(forceRefresh = false) {
-    if (this.throttleTimeMs < 17) {
-      window.requestAnimationFrame(() => this.performThrottledRender(forceRefresh));
-    } else {
-      setTimeout(() => this.performThrottledRender(forceRefresh), this.throttleTimeMs);
-    }
-  }
-
-  /**
-   * @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);
-      this.debounceTimeout = null;
-    }
-    if (this.throttledRenderPending) {
-      // Will perform in the future
-      return;
-    }
-    if (this.debounceTimeMs) {
-      this.debounceTimeout = setTimeout(() => {
-        this.scheduleThrottledRender();
-        this.throttledRenderPending = true;
-      }, this.debounceTimeMs);
-    } else {
-      this.scheduleThrottledRender();
-      this.throttledRenderPending = true;
-    }
-  }
-
-  buildScrollListener() {
-    this.scroller.addEventListener('scroll', this.onElementScrollListener, { passive: true });
-  }
-
-  destroyScrollListener() {
-    this.scroller.removeEventListener('scroll', this.onElementScrollListener);
-  }
-
-  /**
-   * @param {CustomEvent} event
-   * @return {void}
-   */
-  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 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 {boolean} [ascending=false]
-   * @return {void}
-   */
-  updateSortColumn(tableHeaderCell, ascending) {
-    if (!tableHeaderCell) {
-      this.sorter = null;
-      this.refresh();
-      return;
-    }
-    if (tableHeaderCell.cellIndex === -1) {
-      // Header not attached to row!
-      return;
-    }
-    const index = tableHeaderCell.cellIndex;
-    const tableColumn = this.columns[index];
-    const direction = ascending ? 1 : -1;
-    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;
-        }
-        return -1 * direction;
-      }
-      if (valueB == null) {
-        return direction;
-      }
-      if (tableColumn.type === 'number') {
-        return (Number.parseFloat(valueA) - Number.parseFloat(valueB)) * direction;
-      }
-      if (tableColumn.type === 'checkbox') {
-        return ((valueA ? 1 : 0) - (valueB ? 1 : 0)) * direction;
-      }
-      if ('localeCompare' in valueA) {
-        return valueA.localeCompare(valueB) * direction;
-      }
-      // eslint-disable-next-line eqeqeq
-      if (valueA == valueB) {
-        return 0;
-      }
-      return (valueA - valueB) * direction;
-    });
-    this.refresh();
-  }
-
-  /**
-   * @param {HTMLTableHeaderCellElement} [sortedTableHeaderCell] null if none
-   * @param {boolean} [ascending=false]
-   * @return {void}
-   */
-  updateSortIcons(sortedTableHeaderCell, ascending) {
-    if (sortedTableHeaderCell) {
-      if (ascending) {
-        sortedTableHeaderCell.setAttribute('aria-sort', 'ascending');
-      } else {
-        sortedTableHeaderCell.setAttribute('aria-sort', 'descending');
-      }
-    }
-    for (const otherTableHeader of this.getHeaderRow().getElementsByTagName('th')) {
-      if (otherTableHeader !== sortedTableHeaderCell && otherTableHeader.hasAttribute('aria-sort')) {
-        otherTableHeader.setAttribute('aria-sort', 'none');
-      }
-    }
-  }
-
-  /**
-   * @param {boolean} value
-   * @param {number} columnIndex
-   * @return {void}
-   */
-  setCheckOnAllRows(value, columnIndex) {
-    const column = this.columns[columnIndex];
-    for (const object of this.datasource) {
-      object[column.key] = value;
-    }
-    this.refresh();
-  }
-
-  /**
-   * @param {HTMLElement} element
-   * @return {HTMLTableRowElement}
-   */
-  getTableRow(element) {
-    if (element === this.element) {
-      return null;
-    }
-    if (element instanceof HTMLTableRowElement) {
-      return element;
-    }
-    if (!element.parentElement) {
-      return null;
-    }
-    return this.getTableRow(element.parentElement);
-  }
-
-  /**
-   * @param {HTMLElement} element
-   * @return {HTMLTableCellElement}
-   */
-  getTableCell(element) {
-    if (element === this.element) {
-      return null;
-    }
-    if (element instanceof HTMLTableCellElement) {
-      return element;
-    }
-    if (!element.parentElement) {
-      return null;
-    }
-    return this.getTableCell(element.parentElement);
-  }
-
-  /** @return {T[]} */
-  getSelectedRows() {
-    const selectorColumn = this.columns.find((column) => column.rowSelector);
-    if (!selectorColumn) {
-      return [];
-    }
-    return this.getDatasource().filter((row) => row[selectorColumn.key]);
-  }
-
-  /**
-   * @param {boolean} value
-   * @return {void}
-   */
-  setHasSelection(value) {
-    if (value) {
-      this.element.setAttribute('mdw-has-selection', '');
-      return;
-    }
-    this.element.removeAttribute('mdw-has-selection');
-  }
-
-  /**
-   * @param {T[]} datasource Object array
-   * @return {void}
-   */
-  setDatasource(datasource) {
-    this.datasource = datasource;
-  }
-
-  /**
-   * Toggle lazy rending for datasources
-   * @param {boolean} value
-   * @return {void}
-   */
-  setUseLazyRendering(value) {
-    this.useLazyRendering = value;
-    if (value) {
-      this.buildScrollListener();
-    } else {
-      this.destroyScrollListener();
-    }
-  }
-
-  /**
-   * @template {(keyof T & string)|string} K
-   * @param {DataTableAdapterColumnOptions<T,K>} options
-   * @return {DataTableAdapterColumn<T,K>}
-   */
-  addColumn(options) {
-    const tableColumn = new DataTableAdapterColumn(options);
-    const headerRow = this.getHeaderRow();
-    headerRow.appendChild(tableColumn.element);
-    this.columns.push(tableColumn);
-    return tableColumn;
-  }
-
-  updatePaginator() {
-    if (!this.pageLimit) {
-      return;
-    }
-    const min = this.page * this.pageLimit;
-    const total = this.getDatasource().length;
-    let max = this.pageLimit + min;
-    if (max > total) {
-      max = total;
-    }
-    this.paginationDetailsElement.textContent = `${min + 1}-${max} of ${total}`;
-    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]]
-   * @return {void}
-   */
-  setPagination(options = {}) {
-    const footer = this.getFooter(!options.disabled);
-    if (options.disabled) {
-      this.pageLimit = 0;
-      this.page = 0;
-      if (footer) {
-        footer.style.setProperty('display', 'none');
-      }
-      this.needsDraw = true;
-      return;
-    }
-    footer.style.removeProperty('display');
-    let optionsElement = footer.getElementsByClassName('mdw-datatable__footer-options')[0];
-    if (!optionsElement) {
-      optionsElement = document.createElement('div');
-      optionsElement.classList.add('mdw-datatable__footer-options');
-      const rowsPerPageText = document.createElement('span');
-      rowsPerPageText.textContent = 'Rows per page';
-      const limits = options.limits || [10, 25, 50, 100];
-      const limitsElement = document.createElement('label');
-      limitsElement.classList.add('mdw-textfield');
-      limitsElement.setAttribute('mdw-solo', '');
-      const select = document.createElement('select');
-      select.classList.add('mdw-textfield__input');
-      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.value = (options.limit && options.limit.toString()) || '10';
-      const dropdownIcon = document.createElement('div');
-      dropdownIcon.classList.add('mdw-textfield__icon');
-      dropdownIcon.setAttribute('mdw-dropdown', '');
-      limitsElement.appendChild(select);
-      limitsElement.appendChild(dropdownIcon);
-      optionsElement.appendChild(rowsPerPageText);
-      optionsElement.appendChild(limitsElement);
-      footer.appendChild(optionsElement);
-      select.addEventListener('input', () => {
-        this.pageLimit = Number.parseInt(select.value, 10);
-        this.updateRowCount(false);
-        this.updatePaginator();
-        this.refreshRows();
-      });
-    }
-
-    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);
-    }
-
-    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');
-      footer.appendChild(this.paginationControls);
-    }
-    if (!this.previousPageButton || !this.nextPageButton) {
-      const buttons = this.paginationControls.getElementsByClassName('mdw-button');
-      if (buttons.length !== 2) {
-        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('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);
-        Button.attach(this.nextPageButton);
-      } else {
-        this.previousPageButton = buttons[0];
-        this.nextPageButton = buttons[1];
-      }
-      this.previousPageButton.addEventListener('click', () => {
-        if (this.previousPageButton.getAttribute('aria-disabled') === 'true') {
-          return;
-        }
-        this.page -= 1;
-        this.updateRowCount(false);
-        this.updatePaginator();
-        this.refreshRows();
-      });
-      this.nextPageButton.addEventListener('click', () => {
-        if (this.nextPageButton.getAttribute('aria-disabled') === 'true') {
-          return;
-        }
-        this.page += 1;
-        this.updateRowCount(false);
-        this.updatePaginator();
-        this.refreshRows();
-      });
-    }
-    this.pageLimit = options.limit || 10;
-    this.updateRowCount(false);
-    this.updatePaginator();
-    this.refreshRows();
-  }
-
-  /**
-   * @param {boolean} create
-   * @return {HTMLElement}
-   */
-  getFooter(create) {
-    let footer = /** @type {HTMLElement} */ (this.element.getElementsByClassName('mdw-datatable__footer')[0]);
-    if (!footer && create) {
-      footer = document.createElement('div');
-      footer.classList.add('mdw-datatable__footer');
-      this.element.appendChild(footer);
-    }
-    return footer;
-  }
-
-  /**
-   * @param {HTMLTableRowElement} el
-   * @param {?number} viewportTop
-   * @param {?number} viewportBottom
-   * @return {boolean}
-   */
-  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;
-    }
-    if (rowBottom > viewportTop && rowBottom < viewportBottom) {
-      // Bottom of row is visible
-      return true;
-    }
-    return false;
-  }
-
-  /**
-   * @param {(HTMLTableRowElement[])} visibleRows
-   * @return {void}
-   */
-  clearNonvisibleRows(visibleRows) {
-    const tbody = this.getTableBody();
-    if (visibleRows.length === tbody.rows.length) {
-      return;
-    }
-    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 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);
-      }
-    }
-  }
-
-  /**
-   * @return {HTMLTableRowElement[]}
-   */
-  getLazyRenderRows() {
-    const tbody = this.getTableBody();
-    const len = tbody.rows.length;
-    /** @type {HTMLTableRowElement[]} */
-    const rows = [];
-    const minRowCount = window.screen.height / 48;
-    if (len <= minRowCount) {
-      for (const row of tbody.rows) {
-        rows.push(row);
-      }
-      return rows;
-    }
-    let foundFirstVisibleRow = false;
-    let startIndex = 0;
-    let endIndex = 0;
-    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, viewportTop, viewportBottom)) {
-        if (!foundFirstVisibleRow) {
-          foundFirstVisibleRow = true;
-          startIndex = i;
-        }
-        endIndex = i;
-      } else if (foundFirstVisibleRow) {
-        break;
-      }
-    }
-
-    while ((endIndex - startIndex) + 1 < minRowCount) {
-      if (startIndex === 0) {
-        endIndex += 1;
-      } else if (endIndex === len - 1) {
-        startIndex -= 1;
-      } else {
-        startIndex -= 1;
-        endIndex += 1;
-      }
-    }
-    for (let i = startIndex; i <= endIndex; i += 1) {
-      rows.push(tbody.rows.item(i));
-    }
-
-    return rows;
-  }
-
-  /**
-   * @param {boolean} forceRefresh
-   * @return {void}
-   */
-  performLazyRender(forceRefresh = false) {
-    const visibleRows = this.getLazyRenderRows();
-    for (const row of visibleRows) {
-      if (forceRefresh || !row.cells.length) {
-        this.refreshRow(row.sectionRowIndex);
-      }
-    }
-    this.clearNonvisibleRows(visibleRows);
-  }
-
-  /**
-   * @param {DataTableAdapterFilter<T>} filter
-   * @return {void}
-   */
-  setFilter(filter) {
-    this.filter = filter;
-    this.refreshFilter();
-  }
-
-  /**
-   * @param {DataTableAdapterSorter<T>} sorter
-   * @return {void}
-   */
-  setSorter(sorter) {
-    this.sorter = sorter;
-    this.refreshFilter();
-  }
-
-  refreshFilter() {
-    if (this.filter && this.sorter) {
-      this.filteredDatasource = this.datasource.filter(this.filter).sort(this.sorter);
-    } else if (this.filter) {
-      this.filteredDatasource = this.datasource.filter(this.filter);
-    } else if (this.sorter) {
-      this.filteredDatasource = this.datasource.slice(0).sort(this.sorter);
-    } else {
-      this.filteredDatasource = null;
-    }
-  }
-
-  /**
-   * Get filtered datasource
-   * @return {T[]}
-   */
-  getDatasource() {
-    if (this.filter || this.sorter) {
-      if (this.filteredDatasource == null) {
-        this.refreshFilter();
-      }
-      return this.filteredDatasource;
-    }
-    return this.datasource;
-  }
-
-  /**
-   * Update number of rows in table
-   * @param {boolean} [refresh=false] Refresh new rows
-   * @return {void}
-   */
-  updateRowCount(refresh) {
-    const tbody = this.getTableBody();
-    const rowLength = tbody.rows.length;
-
-    const datasource = this.getDatasource();
-    let rowsToDisplay = datasource.length;
-    if (this.pageLimit) {
-      let offset = this.page * this.pageLimit;
-      if (offset > rowsToDisplay) {
-        // Datasource or filter likely changed
-        // Reset to page 0
-        this.page = 0;
-        offset = 0;
-      }
-      rowsToDisplay -= offset;
-      if (rowsToDisplay > this.pageLimit) {
-        rowsToDisplay = this.pageLimit;
-      }
-    }
-
-    const rowDifference = rowsToDisplay - rowLength;
-    const newRows = [];
-
-    if (rowDifference < 0) {
-      // too many rows
-      for (let i = rowLength - 1; i >= rowsToDisplay; i -= 1) {
-        const row = tbody.rows.item(i);
-        tbody.removeChild(row);
-      }
-    }
-    if (rowDifference > 0) {
-      const fragment = document.createDocumentFragment();
-      for (let i = 0; i < rowDifference; i += 1) {
-        const row = document.createElement('tr');
-        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 {
-        for (const row of newRows) {
-          this.refreshRow(row.sectionRowIndex);
-        }
-      }
-    }
-  }
-
-  /** @return {void} */
-  refreshRows() {
-    if (this.useLazyRendering) {
-      this.performLazyRender(true);
-    } else {
-      const tbody = this.getTableBody();
-      for (let i = 0; i < tbody.rows.length; i++) {
-        this.refreshRow(i);
-      }
-    }
-    if (this.useLazyRendering) {
-      this.scheduleThrottledRender();
-    }
-  }
-
-  /** @return {void} */
-  refresh() {
-    this.refreshFilter();
-    this.updateRowCount(false);
-    this.updatePaginator();
-    this.refreshRows();
-  }
-
-  /**
-   * @param {HTMLTableRowElement} row
-   * @return {T}
-   */
-  getDataForTableRow(row) {
-    const index = (row.sectionRowIndex) + (this.page * this.pageLimit);
-    return this.getDatasource()[index];
-  }
-
-  /**
-   * @param {T} data
-   * @return {HTMLTableRowElement} row
-   */
-  getTableRowForData(data) {
-    const datasourceIndex = this.getDatasource().indexOf(data);
-    if (datasourceIndex === -1) {
-      return null;
-    }
-    const minIndex = this.page * this.pageLimit;
-    return this.getTableBody().rows.item(datasourceIndex - minIndex);
-  }
-
-  /**
-   * @param {number} rowIndex
-   * @return {void}
-   */
-  refreshRow(rowIndex) {
-    const row = this.getTableBody().rows.item(rowIndex);
-    row.style.removeProperty('height');
-    for (let i = 0; i < this.columns.length; i++) {
-      this.refreshCell(i, rowIndex);
-    }
-  }
-
-  /**
-   * @param {number} columnIndex
-   * @param {number} rowIndex
-   * @return {void}
-   */
-  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];
-      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) {
-        missingCell.setAttribute('mdw-selector', '');
-      }
-      if (missingColumn.primaryColumn) {
-        missingCell.setAttribute('mdw-primary-column', '');
-      }
-      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 && 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);
-  }
-
-  /**
-   * @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.find((column) => column.element === search);
-    }
-    if (typeof search === 'string') {
-      return this.columns.find((column) => column.element.dataset.key === search);
-    }
-    return this.columns[search];
-  }
-
-  /** @return {HTMLTableElement} */
-  getTable() {
-    let table = this.element.getElementsByTagName('table')[0];
-    if (!table) {
-      table = document.createElement('table');
-      const footer = this.element.getElementsByClassName('mdw-datatable__footer')[0];
-      if (footer) {
-        this.element.insertBefore(table, footer);
-      } else {
-        this.element.appendChild(table);
-      }
-    }
-    return table;
-  }
-
-  /** @return {HTMLTableRowElement} */
-  getHeaderRow() {
-    let thead = this.element.getElementsByTagName('thead')[0];
-    if (!thead) {
-      const table = this.getTable();
-      thead = document.createElement('thead');
-      table.appendChild(thead);
-    }
-    let headerRow = thead.getElementsByTagName('tr')[0];
-    if (!headerRow) {
-      headerRow = document.createElement('tr');
-      thead.appendChild(headerRow);
-    }
-    return headerRow;
-  }
-
-  /** @return {HTMLTableSectionElement} */
-  getTableBody() {
-    // eslint-disable-next-line no-return-assign
-    return this.tbody
-      ||= this.element.getElementsByTagName('tbody')[0]
-      || this.getTable().appendChild(document.createElement('tbody'));
-  }
-
-  /**
-   * @param {number} columnIndex
-   * @return {void}
-   */
-  refreshColumn(columnIndex) {
-    const tbody = this.getTableBody();
-    for (let i = 0; i < tbody.rows.length; i++) {
-      this.refreshCell(columnIndex, i);
-    }
-  }
-}