create-react-admin-template 0.0.0-stage → 0.1.0

package/template/src/components/AppTable/engine/table/layout/fixedEndOverlayRenderer.ts

@@ -0,0 +1,690 @@
+import type Handsontable from 'handsontable'
+import type { CellProperties } from 'handsontable'
+import {
+  TABLE_FIXED_END_BOUNDARY_CLASS,
+  TABLE_FIXED_END_CLASS,
+} from './fixedEndOverlay'
+import type { FixedEndSemanticReconciler } from './fixedEndOverlayAccessibility'
+import { buildTableFixedEndOverlayLayoutKey } from './fixedEndOverlaySignature'
+import { readHandsontableFixedEndDom } from './handsontableDomAdapter'
+
+interface CachedOverlayRow {
+  tr: HTMLTableRowElement
+  cells: HTMLTableCellElement[]
+  signatures: Array<readonly unknown[]>
+  columnsKey: string
+}
+
+interface OverlaySectionCache {
+  rows: Map<number, CachedOverlayRow>
+  pool: CachedOverlayRow[]
+}
+
+interface FixedEndOverlayElements {
+  root: HTMLDivElement
+  headerTable: HTMLTableElement
+  headerRow: HTMLTableRowElement
+  headerKey: string
+  body: HTMLDivElement
+  bodyTable: HTMLTableElement
+  bodyRows: HTMLTableSectionElement
+  bodyCache: OverlaySectionCache
+  footer: HTMLDivElement
+  footerTable: HTMLTableElement
+  footerRows: HTMLTableSectionElement
+  footerCache: OverlaySectionCache
+  widthsKey: string
+}
+
+interface VisibleOverlayRow {
+  visualRow: number
+  rect: DOMRect
+  currentRow: boolean
+  borderTopWidth: string
+  borderBottomWidth: string
+}
+
+interface CachedBorderWidths {
+  borderTopWidth: string
+  borderBottomWidth: string
+}
+
+const TABLE_FIXED_END_BORDER_STYLE_CACHE_LIMIT = 256
+
+const cacheBorderWidths = (
+  cache: Map<string, CachedBorderWidths>,
+  key: string,
+  value: CachedBorderWidths
+) => {
+  if (
+    !cache.has(key) &&
+    cache.size >= TABLE_FIXED_END_BORDER_STYLE_CACHE_LIMIT
+  ) {
+    const oldestKey = cache.keys().next().value
+    if (oldestKey !== undefined) cache.delete(oldestKey)
+  }
+  cache.set(key, value)
+}
+
+interface TableFixedEndOverlayOptions {
+  getContainer: () => HTMLElement | undefined
+  getFixedColumnsEnd: () => number
+  getInstance: () => Handsontable | null | undefined
+  getDataRevision: () => number
+  semantics: FixedEndSemanticReconciler
+  ariaLabel: string
+}
+
+const syncColumnWidths = (
+  table: HTMLTableElement,
+  widths: readonly number[]
+) => {
+  let group = table.querySelector('colgroup')
+  if (!group) {
+    group = document.createElement('colgroup')
+    table.prepend(group)
+  }
+  while (group.children.length < widths.length) {
+    group.append(document.createElement('col'))
+  }
+  while (group.children.length > widths.length) group.lastElementChild?.remove()
+  widths.forEach((width, index) => {
+    const col = group.children[index] as HTMLTableColElement
+    col.style.width = `${width}px`
+  })
+}
+
+const createOverlayHeaderLabel = (text: string) => {
+  const label = document.createElement('span')
+  label.className = 'table-component__fixed-end-overlay-header-label'
+  label.textContent = text
+  Object.assign(label.style, {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: '100%',
+    height: '100%',
+  })
+  return label
+}
+
+const createBorderStyleKey = (cell: HTMLElement, row: HTMLTableRowElement) => {
+  const documentRoot = cell.ownerDocument.documentElement
+  const themeRoot = cell.closest<HTMLElement>('.handsontable')
+  const componentRoot = cell.closest<HTMLElement>('.table-component')
+  return [
+    documentRoot.className,
+    documentRoot.style.cssText,
+    cell.ownerDocument.body?.className,
+    cell.ownerDocument.body?.style.cssText,
+    themeRoot?.className,
+    themeRoot?.style.cssText,
+    componentRoot?.className,
+    componentRoot?.style.cssText,
+    row.className,
+    row.sectionRowIndex,
+    row.matches(':first-child'),
+    row.matches(':last-child'),
+    cell.className,
+    cell.style.borderTopWidth,
+    cell.style.borderBottomWidth,
+  ].join('\u0000')
+}
+
+const resolveHeaderBorderBottomWidth = (
+  headerRow: HTMLTableRowElement | undefined,
+  cache: Map<string, CachedBorderWidths>
+) => {
+  const sourceCell = Array.from(headerRow?.cells ?? []).find(
+    (cell) => !cell.classList.contains('hiddenHeader')
+  )
+  if (!sourceCell) return '0px'
+  const key = createBorderStyleKey(sourceCell, headerRow!)
+  const cached = cache.get(key)
+  if (cached) return cached.borderBottomWidth
+  const style =
+    sourceCell.ownerDocument.defaultView?.getComputedStyle(sourceCell)
+  const resolved = {
+    borderTopWidth: style?.borderTopWidth || '0px',
+    borderBottomWidth: style?.borderBottomWidth || '0px',
+  }
+  cacheBorderWidths(cache, key, resolved)
+  return resolved.borderBottomWidth
+}
+
+const resolveRowBlockBorderWidths = (
+  row: HTMLTableRowElement,
+  cache: Map<string, CachedBorderWidths>
+) => {
+  const sourceCell = Array.from(row.cells).find(
+    (cell) => cell.tagName === 'TD' && !cell.classList.contains('hiddenHeader')
+  )
+  if (!sourceCell) {
+    return { borderTopWidth: '0px', borderBottomWidth: '0px' }
+  }
+  const key = createBorderStyleKey(sourceCell, row)
+  const cached = cache.get(key)
+  if (cached) return cached
+  const style =
+    sourceCell.ownerDocument.defaultView?.getComputedStyle(sourceCell)
+  const resolved = {
+    borderTopWidth: style?.borderTopWidth || '0px',
+    borderBottomWidth: style?.borderBottomWidth || '0px',
+  }
+  cacheBorderWidths(cache, key, resolved)
+  return resolved
+}
+
+const resolveVisualRow = (row: HTMLTableRowElement) => {
+  const ariaIndex = Number(row.getAttribute('aria-rowindex'))
+  return Number.isFinite(ariaIndex) ? ariaIndex - 2 : -1
+}
+
+const resolveCellSignature = (
+  hot: Handsontable,
+  row: number,
+  column: number,
+  width: number,
+  dataRevision: number
+) => {
+  const meta = hot.getCellMeta(row, column) as CellProperties & {
+    className?: string
+    tableError?: unknown
+  }
+  const value = hot.getDataAtCell(row, column)
+  const renderer = hot.getCellRenderer(meta)
+  return {
+    meta,
+    renderer,
+    value,
+    width,
+    signature: [
+      // visualRow 会在排序/筛选后复用；物理行和数据版本共同保证业务回调不会保留旧 row。
+      hot.toPhysicalRow(row),
+      dataRevision,
+      value,
+      meta.className,
+      meta.tableError,
+      width,
+      renderer,
+    ] as const,
+  }
+}
+
+const signaturesEqual = (
+  left: readonly unknown[] | undefined,
+  right: readonly unknown[]
+) =>
+  Boolean(
+    left &&
+    left.length === right.length &&
+    left.every((value, index) => Object.is(value, right[index]))
+  )
+
+const renderOverlayCell = (
+  hot: Handsontable,
+  td: HTMLTableCellElement,
+  row: number,
+  column: number,
+  meta: CellProperties & { className?: string; tableError?: unknown },
+  renderer: ReturnType<Handsontable['getCellRenderer']>,
+  value: unknown,
+  width: number,
+  boundary: boolean,
+  height: number,
+  currentRow: boolean
+) => {
+  // 行节点长期复用，先清理上一个 visual row 遗留的样式和语义。
+  td.removeAttribute('class')
+  td.removeAttribute('style')
+  td.removeAttribute('title')
+  renderer(hot, td, row, column, hot.colToProp(column), value, meta)
+  // overlay 是固定尾列在横向虚拟窗口外的唯一可见语义代理。
+  if (meta.className)
+    td.classList.add(...meta.className.split(/\s+/).filter(Boolean))
+  td.classList.add(TABLE_FIXED_END_CLASS)
+  td.classList.toggle(TABLE_FIXED_END_BOUNDARY_CLASS, boundary)
+  td.classList.toggle('table-component__current-row', currentRow)
+  Object.assign(td.style, {
+    position: 'static',
+    width: `${width}px`,
+    minWidth: `${width}px`,
+    maxWidth: `${width}px`,
+    height: `${height}px`,
+  })
+  td.tabIndex = -1
+  td.setAttribute('role', 'gridcell')
+  td.setAttribute('aria-colindex', String(column + 2))
+  td.dataset.visualRow = String(row)
+  td.dataset.visualColumn = String(column)
+  if (meta.tableError !== undefined) {
+    td.title =
+      typeof meta.tableError === 'string'
+        ? meta.tableError
+        : meta.tableError instanceof Error
+          ? meta.tableError.message
+          : String(meta.tableError)
+  }
+}
+
+const syncRows = (
+  cache: OverlaySectionCache,
+  tbody: HTMLTableSectionElement,
+  hot: Handsontable,
+  rows: readonly VisibleOverlayRow[],
+  columns: readonly number[],
+  widths: readonly number[],
+  dataRevision: number
+) => {
+  const columnsKey = columns.join(',')
+  const activeRows = new Set(rows.map(({ visualRow }) => visualRow))
+  cache.rows.forEach((entry, visualRow) => {
+    if (activeRows.has(visualRow)) return
+    entry.tr.remove()
+    cache.rows.delete(visualRow)
+    cache.pool.push(entry)
+  })
+
+  rows.forEach((visibleRow) => {
+    const { visualRow, rect, currentRow } = visibleRow
+    let entry = cache.rows.get(visualRow)
+    if (!entry) {
+      entry = cache.pool.pop() ?? {
+        tr: document.createElement('tr'),
+        cells: [],
+        signatures: [],
+        columnsKey: '',
+      }
+      // DOM 槽位可跨 visualRow 复用，业务闭包和签名必须重新生成。
+      entry.signatures = []
+      cache.rows.set(visualRow, entry)
+    }
+    if (entry.columnsKey !== columnsKey) {
+      entry.tr.replaceChildren()
+      entry.cells = []
+      entry.signatures = []
+      entry.columnsKey = columnsKey
+    }
+    entry.tr.style.height = `${rect.height}px`
+    entry.tr.setAttribute('role', 'row')
+    entry.tr.setAttribute('aria-rowindex', String(visualRow + 2))
+
+    columns.forEach((column, index) => {
+      let td = entry!.cells[index]
+      if (!td) {
+        td = document.createElement('td')
+        entry!.cells[index] = td
+        entry!.tr.append(td)
+      }
+      const { meta, renderer, value, width, signature } = resolveCellSignature(
+        hot,
+        visualRow,
+        column,
+        widths[index] ?? hot.getColWidth(column),
+        dataRevision
+      )
+      if (!signaturesEqual(entry!.signatures[index], signature)) {
+        renderOverlayCell(
+          hot,
+          td,
+          visualRow,
+          column,
+          meta,
+          renderer,
+          value,
+          width,
+          index === 0,
+          rect.height,
+          currentRow
+        )
+        entry!.signatures[index] = signature
+      } else {
+        td.classList.toggle('table-component__current-row', currentRow)
+        if (td.style.height !== `${rect.height}px`)
+          td.style.height = `${rect.height}px`
+      }
+      // Handsontable 会根据纵向滚动位置切换首个可见数据行的上边框。
+      // overlay 的第一条 DOM 行不一定是数据首行，必须镜像源单元格的块向边框，
+      // 否则会与 clone 表头边框叠成两条线。
+      td.style.borderTopWidth = visibleRow.borderTopWidth
+      td.style.borderBottomWidth = visibleRow.borderBottomWidth
+    })
+  })
+  // append 会按新的视觉顺序移动已有 tr，不销毁其子树。
+  tbody.append(...rows.map(({ visualRow }) => cache.rows.get(visualRow)!.tr))
+}
+
+/** 只绘制当前纵向窗口中的固定尾列，并复用行/单元格 DOM。 */
+export const createTableFixedEndOverlay = ({
+  getContainer,
+  getFixedColumnsEnd,
+  getInstance,
+  getDataRevision,
+  semantics,
+  ariaLabel,
+}: TableFixedEndOverlayOptions) => {
+  let elements: FixedEndOverlayElements | undefined
+  let lastLayoutKey = ''
+  let lastSemanticColumnsKey = ''
+  let lastSemanticHeader: HTMLElement | undefined
+  let lastSemanticBottom: HTMLElement | null | undefined
+  const borderWidthsByStyle = new Map<string, CachedBorderWidths>()
+
+  const destroy = () => {
+    semantics.setActive(false)
+    elements?.root.remove()
+    elements = undefined
+    lastLayoutKey = ''
+    lastSemanticColumnsKey = ''
+    lastSemanticHeader = undefined
+    lastSemanticBottom = undefined
+    borderWidthsByStyle.clear()
+  }
+
+  const ensureElements = () => {
+    const host = getContainer()
+    if (!host) return
+    if (elements?.root.isConnected) return elements
+    const themeRoot = host.querySelector<HTMLElement>('.handsontable') ?? host
+    const root = document.createElement('div')
+    root.className = 'table-component__fixed-end-overlay'
+    root.setAttribute('role', 'region')
+    root.setAttribute('aria-label', ariaLabel)
+    const headerTable = document.createElement('table')
+    headerTable.className = 'table-component__fixed-end-overlay-header'
+    const thead = document.createElement('thead')
+    const headerRow = document.createElement('tr')
+    thead.append(headerRow)
+    headerTable.append(thead)
+    const body = document.createElement('div')
+    body.className = 'table-component__fixed-end-overlay-body'
+    const bodyTable = document.createElement('table')
+    const bodyRows = document.createElement('tbody')
+    bodyTable.append(bodyRows)
+    body.append(bodyTable)
+    const footer = document.createElement('div')
+    footer.className = 'table-component__fixed-end-overlay-footer'
+    const footerTable = document.createElement('table')
+    const footerRows = document.createElement('tbody')
+    footerTable.append(footerRows)
+    footer.append(footerTable)
+    root.append(headerTable, body, footer)
+    root.addEventListener('mousedown', (event) => {
+      if (event.defaultPrevented) return
+      const cell =
+        event.target instanceof Element
+          ? event.target.closest<HTMLTableCellElement>('td[data-visual-row]')
+          : null
+      if (!cell || !root.contains(cell)) return
+      const row = Number(cell.dataset.visualRow)
+      const column = Number(cell.dataset.visualColumn)
+      if (Number.isInteger(row) && Number.isInteger(column)) {
+        getInstance()?.selectCell(row, column, row, column, false)
+      }
+    })
+    themeRoot.append(root)
+    elements = {
+      root,
+      headerTable,
+      headerRow,
+      headerKey: '',
+      body,
+      bodyTable,
+      bodyRows,
+      bodyCache: { rows: new Map(), pool: [] },
+      footer,
+      footerTable,
+      footerRows,
+      footerCache: { rows: new Map(), pool: [] },
+      widthsKey: '',
+    }
+    return elements
+  }
+
+  const render = () => {
+    const host = getContainer()
+    const hot = getInstance()
+    const {
+      holder,
+      headerClone,
+      headerRow,
+      bottomClone,
+      masterRows,
+      bottomRows,
+    } = readHandsontableFixedEndDom(host)
+    if (!host || !hot || !holder || !headerClone || masterRows.length === 0) {
+      // HOT 重建或版本选择器失配时不能继续展示带旧业务闭包的操作层。
+      destroy()
+      return
+    }
+    const overlay = ensureElements()
+    if (!overlay) return
+    semantics.pruneDisconnected()
+
+    const totalColumns = hot.countCols()
+    const fixedColumnsEnd = getFixedColumnsEnd()
+    const firstFixedColumn = Math.max(0, totalColumns - fixedColumnsEnd)
+    const columns = Array.from(
+      { length: totalColumns - firstFixedColumn },
+      (_, index) => firstFixedColumn + index
+    )
+    const widths = columns.map((column) => hot.getColWidth(column))
+    const semanticColumnsKey = columns.join(',')
+    const requiresSemanticReconcile =
+      !semantics.active ||
+      semanticColumnsKey !== lastSemanticColumnsKey ||
+      headerClone !== lastSemanticHeader ||
+      bottomClone !== lastSemanticBottom
+    semantics.setActive(true)
+    // 首次启用或 HOT 重建 clone 时全量去重；滚动复用的 td 由 afterRenderer 增量
+    // 更新，避免每个纵向滚动帧再次 querySelectorAll 整个可见窗口。
+    if (requiresSemanticReconcile) {
+      semantics.reconcile(
+        overlay.root,
+        [headerClone, ...masterRows, ...(bottomClone ? [bottomClone] : [])],
+        columns
+      )
+      lastSemanticColumnsKey = semanticColumnsKey
+      lastSemanticHeader = headerClone
+      lastSemanticBottom = bottomClone
+    }
+    const width = widths.reduce((sum, value) => sum + value, 0)
+    const layoutKey = buildTableFixedEndOverlayLayoutKey({
+      hot,
+      holder,
+      rows: masterRows,
+      bottomRows,
+      columns,
+      widths,
+      fixedColumnsEnd,
+      dataRevision: getDataRevision(),
+    })
+    if (elements?.root.isConnected && layoutKey === lastLayoutKey) return
+    lastLayoutKey = layoutKey
+    const overlayOffsetParent =
+      overlay.root.offsetParent instanceof HTMLElement
+        ? overlay.root.offsetParent
+        : host
+
+    // 先完成全部布局读取，再集中写样式和 DOM，避免滚动帧中的强制回流。
+    const overlayOffsetParentRect = overlayOffsetParent.getBoundingClientRect()
+    const holderRect = holder.getBoundingClientRect()
+    const headerRect = headerClone.getBoundingClientRect()
+    const headerBorderBottomWidth = resolveHeaderBorderBottomWidth(
+      headerRow,
+      borderWidthsByStyle
+    )
+    const bottomRect = bottomClone?.getBoundingClientRect()
+    const measuredMasterRows = masterRows.map((row) => ({
+      row,
+      rect: row.getBoundingClientRect(),
+      ...resolveRowBlockBorderWidths(row, borderWidthsByStyle),
+    }))
+    const measuredBottomRows = bottomRows.map((row) => ({
+      row,
+      rect: row.getBoundingClientRect(),
+      ...resolveRowBlockBorderWidths(row, borderWidthsByStyle),
+    }))
+    const holderScaleX = holder.offsetWidth
+      ? holderRect.width / holder.offsetWidth
+      : 1
+    const holderViewportLeft =
+      holderRect.left + holder.clientLeft * holderScaleX
+    const holderViewportRight =
+      holderRect.left + (holder.clientLeft + holder.clientWidth) * holderScaleX
+    const rtl = hot.isRtl()
+    const headerHeight = Math.max(
+      0,
+      Math.min(holderRect.height, headerRect.bottom - holderRect.top)
+    )
+    const activeBottomRect =
+      bottomRows.length > 0 &&
+      bottomRect &&
+      bottomRect.height > 0 &&
+      bottomRect.top > holderRect.top + headerHeight
+        ? bottomRect
+        : undefined
+    // 固定尾列只是主表已渲染内容的视觉代理，不能用 holder 的完整视口高度
+    // 作为自身高度。数据不足一屏时，Handsontable 会保留空白视口；若 overlay
+    // 继续铺到 holder 底部，其表格边框就会把这段空白错误画成额外数据区。
+    // 数据溢出时，虚拟窗口中的末行会自然到达（或越过）视口底部，因此统一
+    // 以真实 DOM 内容底部裁剪即可，不需要再估算逻辑行高或滚动高度。
+    const renderedContentBottom = [
+      headerRect.bottom,
+      ...measuredMasterRows.map(({ rect }) => rect.bottom),
+      ...measuredBottomRows.map(({ rect }) => rect.bottom),
+    ].reduce((maximum, bottom) => Math.max(maximum, bottom), holderRect.top)
+    const overlayBottom = Math.max(
+      holderRect.top + headerHeight,
+      Math.min(holderRect.bottom, renderedContentBottom)
+    )
+    const dataBottom = activeBottomRect
+      ? Math.min(overlayBottom, activeBottomRect.top)
+      : overlayBottom
+    const footerBottom = overlayBottom
+    const footerHeight = Math.max(0, footerBottom - dataBottom)
+    const overlayHeight = Math.max(headerHeight, footerBottom - holderRect.top)
+    const toVisibleRow = ({
+      row,
+      rect,
+      borderTopWidth,
+      borderBottomWidth,
+    }: {
+      row: HTMLTableRowElement
+      rect: DOMRect
+      borderTopWidth: string
+      borderBottomWidth: string
+    }): VisibleOverlayRow => ({
+      visualRow: resolveVisualRow(row),
+      rect,
+      currentRow: Boolean(row.querySelector('td.table-component__current-row')),
+      borderTopWidth,
+      borderBottomWidth,
+    })
+    const visibleRows = measuredMasterRows
+      .filter(
+        ({ rect }) =>
+          rect.bottom > holderRect.top + headerHeight && rect.top < dataBottom
+      )
+      .map(toVisibleRow)
+      .filter(({ visualRow }) => visualRow >= 0 && visualRow < hot.countRows())
+    const visibleBottomRows = measuredBottomRows
+      .filter(({ rect }) => rect.bottom > dataBottom && rect.top < footerBottom)
+      .map(toVisibleRow)
+      .filter(({ visualRow }) => visualRow >= 0 && visualRow < hot.countRows())
+
+    Object.assign(overlay.root.style, {
+      top: `${holderRect.top - overlayOffsetParentRect.top}px`,
+      insetInlineEnd: `${Math.max(
+        0,
+        rtl
+          ? holderViewportLeft - overlayOffsetParentRect.left
+          : overlayOffsetParentRect.right - holderViewportRight
+      )}px`,
+      direction: rtl ? 'rtl' : 'ltr',
+      width: `${width}px`,
+      height: `${overlayHeight}px`,
+    })
+    overlay.headerTable.style.width = `${width}px`
+    overlay.headerTable.style.height = `${headerHeight}px`
+    overlay.body.style.top = `${headerHeight}px`
+    overlay.body.style.bottom = `${footerHeight}px`
+    Object.assign(overlay.footer.style, {
+      top: `${dataBottom - holderRect.top}px`,
+      height: `${footerHeight}px`,
+      display: footerHeight > 0 ? '' : 'none',
+    })
+
+    const widthsKey = widths.join(',')
+    if (overlay.widthsKey !== widthsKey) {
+      syncColumnWidths(overlay.headerTable, widths)
+      syncColumnWidths(overlay.bodyTable, widths)
+      syncColumnWidths(overlay.footerTable, widths)
+      overlay.widthsKey = widthsKey
+    }
+    const headerKey = `${headerHeight}|${headerBorderBottomWidth}|${columns
+      .map((column, index) => {
+        const label = hot.getColHeader(column)
+        const text = Array.isArray(label)
+          ? String(label.at(-1) ?? '')
+          : String(label ?? '')
+        return `${column}:${widths[index]}:${text}`
+      })
+      .join('|')}`
+    if (overlay.headerKey !== headerKey) {
+      overlay.headerRow.replaceChildren(
+        ...columns.map((column, index) => {
+          const th = document.createElement('th')
+          const label = hot.getColHeader(column)
+          const text = Array.isArray(label)
+            ? String(label.at(-1) ?? '')
+            : String(label ?? '')
+          th.append(createOverlayHeaderLabel(text))
+          th.classList.add(TABLE_FIXED_END_CLASS)
+          th.classList.toggle(TABLE_FIXED_END_BOUNDARY_CLASS, index === 0)
+          Object.assign(th.style, {
+            position: 'static',
+            width: `${widths[index]}px`,
+            height: `${headerHeight}px`,
+            borderBottomWidth: headerBorderBottomWidth,
+          })
+          th.setAttribute('role', 'columnheader')
+          th.setAttribute('aria-colindex', String(column + 2))
+          return th
+        })
+      )
+      overlay.headerKey = headerKey
+    }
+
+    overlay.bodyTable.style.width = `${width}px`
+    overlay.bodyTable.style.top = visibleRows[0]
+      ? `${visibleRows[0].rect.top - holderRect.top - headerHeight}px`
+      : '0px'
+    const dataRevision = getDataRevision()
+    syncRows(
+      overlay.bodyCache,
+      overlay.bodyRows,
+      hot,
+      visibleRows,
+      columns,
+      widths,
+      dataRevision
+    )
+
+    overlay.footerTable.style.width = `${width}px`
+    overlay.footerTable.style.top = visibleBottomRows[0]
+      ? `${visibleBottomRows[0].rect.top - dataBottom}px`
+      : '0px'
+    syncRows(
+      overlay.footerCache,
+      overlay.footerRows,
+      hot,
+      visibleBottomRows,
+      columns,
+      widths,
+      dataRevision
+    )
+  }
+
+  return { render, destroy }
+}