@openreachtech/furo-vue 1.3.1

package/lib/components/organisms/FuroTable/FuroTableContext.js

@@ -0,0 +1,1965 @@
+import {
+  onBeforeUnmount,
+  onMounted,
+  ref,
+  shallowRef,
+  watch,
+} from 'vue'
+
+import BaseFuroContext from '../../../contexts/BaseFuroContext.js'
+
+import FuroTableRowItemContext from './FuroTableRowItemContext.js'
+
+const DEFAULT_ROW_KEY = 'id'
+const DEFAULT_EMPTY_TEXT = 'No records'
+const DEFAULT_OVERSCAN = 4
+const DEFAULT_END_THRESHOLD = 8
+
+const SORT_ICON_NEUTRAL = 'ph:arrows-down-up'
+const SORT_ICON_HASH = {
+  asc: 'ph:arrow-up',
+  desc: 'ph:arrow-down',
+}
+
+const MIN_COLUMN_WIDTH = 80
+const SELECTION_COLUMN_WIDTH = '2.75rem'
+const DEFAULT_ROW_ACTIONS_WIDTH = '6rem'
+const DEFAULT_ROW_ACTIONS_LABEL = ''
+
+/**
+ * Context class for FuroTable organism.
+ *
+ * Presentational, domain-agnostic table. Sort and selection are controlled by
+ * the consumer (the table emits intent and re-reads its parcel); it never sorts
+ * or fetches data itself.
+ *
+ * @extends {BaseFuroContext<null, Props, EmitEventName>}
+ */
+export default class FuroTableContext extends BaseFuroContext {
+  /**
+   * Constructor.
+   *
+   * @param {FuroTableContextParams} params - Parameters of this constructor.
+   */
+  constructor ({
+    props,
+    componentContext,
+
+    refHash,
+  }) {
+    super({
+      props,
+      componentContext,
+    })
+
+    this.refHash = refHash
+
+    /** @type {{ first: number, last: number } | null} */
+    this.lastEmittedRange = null
+
+    /**
+     * The loaded-window end (`rowOffset + rows.length`) for which `reach-end`
+     * was last emitted. Guards against re-emitting until the loaded window grows.
+     *
+     * @type {number | null}
+     */
+    this.lastReachEndLoadedEnd = null
+
+    /**
+     * @type {{
+     *   field: string
+     *   startX: number
+     *   startWidth: number
+     *   nextField: string
+     *   nextStartWidth: number
+     * } | null}
+     */
+    this.resizeState = null
+
+    /** @type {number | null} */
+    this.scrollFrameId = null
+
+    this.pendingScrollTop = 0
+  }
+
+  /**
+   * Factory method.
+   *
+   * @template {X extends typeof FuroTableContext ? X : never} T, X
+   * @override
+   * @param {FuroTableContextFactoryParams} params - Parameters of this factory method.
+   * @returns {InstanceType<T>} An instance of this class.
+   * @this {T}
+   */
+  static create ({
+    props,
+    componentContext,
+
+    refHash = this.buildRefHash(),
+  }) {
+    return /** @type {InstanceType<T>} */ (
+      new this({
+        props,
+        componentContext,
+
+        refHash,
+      })
+    )
+  }
+
+  /**
+   * Build ref hash.
+   *
+   * @override
+   * @returns {FuroTableContextParams['refHash']}
+   */
+  static buildRefHash () {
+    return {
+      selectedRowKeysRef: ref([]),
+      // Shallow so `derivedFrom` stays reference-comparable against the prop.
+      pendingSelectionRef: shallowRef(null),
+      scrollTopRef: ref(0),
+      columnWidthsRef: ref({}),
+    }
+  }
+
+  /**
+   * Schedule a callback on the next animation frame.
+   *
+   * Wrapped as a static hook so scroll throttling can be driven deterministically
+   * in tests (spy on this method) instead of depending on the browser global.
+   *
+   * @param {FrameRequestCallback} callback - Callback to run on the next frame.
+   * @returns {number} The frame request id.
+   */
+  static requestFrame (callback) {
+    return globalThis.requestAnimationFrame(callback)
+  }
+
+  /**
+   * Cancel a scheduled animation frame.
+   *
+   * Wrapped as a static hook (mirrors `requestFrame`) so teardown can be driven
+   * deterministically in tests.
+   *
+   * @param {number} frameId - The frame request id to cancel.
+   * @returns {void}
+   */
+  static cancelFrame (frameId) {
+    globalThis.cancelAnimationFrame(frameId)
+  }
+
+  /**
+   * Get emit event name.
+   *
+   * @override
+   * @returns {Readonly<{
+   *   SORT_CHANGE: 'sort:change'
+   *   SELECTION_CHANGE: 'selection:change'
+   *   UPDATE_SELECTED_ROW_KEYS: 'update:selectedRowKeys'
+   *   RANGE_CHANGE: 'range:change'
+   *   REACH_END: 'reach-end'
+   *   ROW_CLICK: 'row:click'
+   * }>}
+   */
+  static get EMIT_EVENT_NAME () {
+    return {
+      SORT_CHANGE: 'sort:change',
+      SELECTION_CHANGE: 'selection:change',
+      UPDATE_SELECTED_ROW_KEYS: 'update:selectedRowKeys',
+      RANGE_CHANGE: 'range:change',
+      REACH_END: 'reach-end',
+      ROW_CLICK: 'row:click',
+    }
+  }
+
+  /**
+   * Get emit options.
+   *
+   * @returns {{
+   *   'sort:change': (payload: {
+   *     field: string
+   *     direction: 'asc' | 'desc' | null
+   *   }) => void
+   *   'selection:change': (payload: {
+   *     selectedRowKeys: Array<string | number>
+   *   }) => void
+   *   'update:selectedRowKeys': (selectedRowKeys: Array<string | number>) => void
+   *   'range:change': (payload: {
+   *     first: number
+   *     last: number
+   *   }) => void
+   *   'reach-end': (payload: {
+   *     first: number
+   *     last: number
+   *     loadedCount: number
+   *     totalRecords: number
+   *   }) => void
+   *   'row:click': (payload: {
+   *     row: Record<string, unknown>
+   *     rowKey: string | number | null
+   *   }) => void
+   * }}
+   */
+  static get EMIT_EVENT_HASH () {
+    return {
+      [this.EMIT_EVENT_NAME.SORT_CHANGE]: payload => {},
+      [this.EMIT_EVENT_NAME.SELECTION_CHANGE]: payload => {},
+      [this.EMIT_EVENT_NAME.UPDATE_SELECTED_ROW_KEYS]: selectedRowKeys => {},
+      [this.EMIT_EVENT_NAME.RANGE_CHANGE]: payload => {},
+      [this.EMIT_EVENT_NAME.REACH_END]: payload => {},
+      [this.EMIT_EVENT_NAME.ROW_CLICK]: payload => {},
+    }
+  }
+
+  /**
+   * get: Constructor of this class.
+   *
+   * @override
+   * @returns {typeof FuroTableContext}
+   */
+  get Ctor () {
+    return /** @type {typeof FuroTableContext} */ (
+      this.constructor
+    )
+  }
+
+  /**
+   * Get internal selected row keys ref (uncontrolled mode).
+   *
+   * @returns {import('vue').Ref<Array<string | number>>}
+   */
+  get selectedRowKeysRef () {
+    return this.refHash.selectedRowKeysRef
+  }
+
+  /**
+   * Get the ref holding the last selection this table emitted.
+   *
+   * @returns {import('vue').Ref<PendingSelection | null>}
+   */
+  get pendingSelectionRef () {
+    return this.refHash.pendingSelectionRef
+  }
+
+  /**
+   * Get the scroll-top ref driving virtual windowing.
+   *
+   * @returns {import('vue').Ref<number>}
+   */
+  get scrollTopRef () {
+    return this.refHash.scrollTopRef
+  }
+
+  /**
+   * Get the per-column width overrides (px) set by resizing.
+   *
+   * @returns {import('vue').Ref<Record<string, number>>}
+   */
+  get columnWidthsRef () {
+    return this.refHash.columnWidthsRef
+  }
+
+  /**
+   * Parcel passed from parent via props.
+   *
+   * @override
+   * @returns {NonNullable<Props['parcel']>}
+   */
+  get parcel () {
+    return {
+      columns: [],
+      rows: [],
+      rowKey: DEFAULT_ROW_KEY,
+      selectable: false,
+      selectedRowKeys: null,
+      sort: null,
+      loading: false,
+      errorMessage: null,
+      emptyText: DEFAULT_EMPTY_TEXT,
+      virtual: null,
+      totalRecords: null,
+      rowOffset: 0,
+      resizable: false,
+      compact: false,
+      gridLines: false,
+      rowActionsLabel: DEFAULT_ROW_ACTIONS_LABEL,
+      rowActionsWidth: DEFAULT_ROW_ACTIONS_WIDTH,
+      ...this.props.parcel,
+    }
+  }
+
+  /**
+   * Extract the column configuration.
+   *
+   * @returns {Array<FuroTableColumn>}
+   */
+  extractColumns () {
+    return this.parcel.columns
+      ?? []
+  }
+
+  /**
+   * Extract the raw row records.
+   *
+   * @returns {Array<Record<string, unknown>>}
+   */
+  extractRows () {
+    return this.parcel.rows
+      ?? []
+  }
+
+  /**
+   * Extract the field used as the unique row key.
+   *
+   * @returns {string}
+   */
+  extractRowKey () {
+    return this.parcel.rowKey
+      ?? DEFAULT_ROW_KEY
+  }
+
+  /**
+   * Extract the empty-state text.
+   *
+   * @returns {string}
+   */
+  extractEmptyText () {
+    return this.parcel.emptyText
+      ?? DEFAULT_EMPTY_TEXT
+  }
+
+  /**
+   * Extract the error message, when present.
+   *
+   * @returns {string | null}
+   */
+  extractErrorMessage () {
+    return this.parcel.errorMessage
+      ?? null
+  }
+
+  /**
+   * Total rendered column count (data columns plus the selection column).
+   *
+   * @returns {number}
+   */
+  extractTotalColumnCount () {
+    const selectionColumnCount = this.isSelectable()
+      ? 1
+      : 0
+
+    const actionsColumnCount = this.hasRowActionsColumn()
+      ? 1
+      : 0
+
+    return this.extractColumns().length
+      + selectionColumnCount
+      + actionsColumnCount
+  }
+
+  /**
+   * Extract how many columns a placeholder row's skeleton spans.
+   *
+   * Data columns only, so an unloaded row keeps its selection and actions cells.
+   *
+   * @returns {number}
+   */
+  extractPlaceholderColumnCount () {
+    return this.extractColumns().length
+  }
+
+  /**
+   * Whether a trailing row-actions column is rendered.
+   *
+   * True when the consumer provides a `row-actions` slot; the column then holds
+   * that slot's per-row content (edit/delete buttons, an action menu, etc.).
+   *
+   * @returns {boolean}
+   */
+  hasRowActionsColumn () {
+    return Boolean(this.componentContext.slots?.['row-actions'])
+  }
+
+  /**
+   * Whether a footer region is rendered.
+   *
+   * True when the consumer provides a `footer` slot (bulk-action bar, summary
+   * row, etc.).
+   *
+   * @returns {boolean}
+   */
+  hasFooterSlot () {
+    return Boolean(this.componentContext.slots?.footer)
+  }
+
+  /**
+   * Extract the header label for the row-actions column.
+   *
+   * @returns {string}
+   */
+  extractRowActionsLabel () {
+    return this.parcel.rowActionsLabel
+  }
+
+  /**
+   * Extract the `<col>` inline style for the row-actions column.
+   *
+   * @returns {Record<string, string>}
+   */
+  extractRowActionsColStyle () {
+    return {
+      width: this.parcel.rowActionsWidth,
+    }
+  }
+
+  /**
+   * Extract root class names.
+   *
+   * @returns {Record<string, boolean>}
+   */
+  extractRootClassNames () {
+    return {
+      'unit-table': true,
+      loading: this.isLoading(),
+      compact: this.isCompact(),
+      'grid-lines': this.hasGridLines(),
+    }
+  }
+
+  /**
+   * Whether the table renders in the compact (denser) density.
+   *
+   * @returns {boolean}
+   */
+  isCompact () {
+    return Boolean(this.parcel.compact)
+  }
+
+  /**
+   * Whether the table renders vertical grid lines between columns.
+   *
+   * @returns {boolean}
+   */
+  hasGridLines () {
+    return Boolean(this.parcel.gridLines)
+  }
+
+  /**
+   * Extract the label rendered in a column header.
+   *
+   * @param {{
+   *   column: FuroTableColumn
+   * }} params - Parameters of this method.
+   * @returns {string}
+   */
+  extractColumnLabel ({
+    column,
+  }) {
+    return column.label
+      ?? column.field
+  }
+
+  /**
+   * Extract the text alignment for a column.
+   *
+   * @param {{
+   *   column: FuroTableColumn
+   * }} params - Parameters of this method.
+   * @returns {'start' | 'center' | 'end'}
+   */
+  extractColumnAlign ({
+    column,
+  }) {
+    return column.align
+      ?? 'start'
+  }
+
+  /**
+   * Whether columns can be resized by dragging their right edge.
+   *
+   * @returns {boolean}
+   */
+  isResizable () {
+    return Boolean(this.parcel.resizable)
+  }
+
+  /**
+   * Extract the `<col>` inline style for the selection column.
+   *
+   * @returns {Record<string, string>}
+   */
+  extractSelectionColStyle () {
+    return {
+      width: SELECTION_COLUMN_WIDTH,
+    }
+  }
+
+  /**
+   * Extract the `<col>` inline style for a data column. A resized width wins
+   * over a configured `column.width`; otherwise the column is unsized (the
+   * fixed table layout shares remaining width).
+   *
+   * @param {{
+   *   column: FuroTableColumn
+   * }} params - Parameters of this method.
+   * @returns {Record<string, string>}
+   */
+  extractColumnColStyle ({
+    column,
+  }) {
+    const resizedWidth = this.columnWidthsRef.value[column.field]
+      ?? null
+
+    if (resizedWidth !== null) {
+      return {
+        width: `${resizedWidth}px`,
+      }
+    }
+
+    if (column.width) {
+      return {
+        width: column.width,
+      }
+    }
+
+    return {}
+  }
+
+  /**
+   * Whether row selection is enabled.
+   *
+   * @returns {boolean}
+   */
+  isSelectable () {
+    return Boolean(this.parcel.selectable)
+  }
+
+  /**
+   * Whether the table is in the loading state.
+   *
+   * @returns {boolean}
+   */
+  isLoading () {
+    return Boolean(this.parcel.loading)
+  }
+
+  /**
+   * Whether interaction with the table body is blocked.
+   *
+   * @returns {boolean}
+   */
+  isInteractionBlocked () {
+    return this.isLoading()
+  }
+
+  /**
+   * Extract the `inert` attribute for the scroll viewport. Any present value
+   * makes the subtree inert, so absence must be `null` and never `false`.
+   *
+   * @returns {true | null}
+   */
+  extractInertAttribute () {
+    if (!this.isInteractionBlocked()) {
+      return null
+    }
+
+    return true
+  }
+
+  /**
+   * Extract the `aria-busy` attribute for the table root.
+   *
+   * @returns {'true' | null}
+   */
+  extractAriaBusyAttribute () {
+    if (!this.isLoading()) {
+      return null
+    }
+
+    return 'true'
+  }
+
+  /**
+   * Whether the table is in the error state.
+   *
+   * @returns {boolean}
+   */
+  hasError () {
+    return this.extractErrorMessage() !== null
+  }
+
+  /**
+   * Whether the error state should render.
+   *
+   * @returns {boolean}
+   */
+  shouldShowError () {
+    return this.hasError()
+  }
+
+  /**
+   * Whether the in-body loading spinner should render. Only the first load (no
+   * rows yet) shows the centered spinner row; a refresh over existing rows keeps
+   * the rows mounted and shows the floating overlay instead (see
+   * `shouldShowLoadingOverlay`), so the layout never collapses.
+   *
+   * @returns {boolean}
+   */
+  shouldShowLoading () {
+    if (this.hasError()) {
+      return false
+    }
+
+    if (!this.isLoading()) {
+      return false
+    }
+
+    return this.extractRows().length === 0
+  }
+
+  /**
+   * Whether the floating loading overlay should render. Used on a refresh, when
+   * rows are already present: the overlay is layered above the whole table
+   * (out of flow) so it dims and blocks the current rows without a layout shift.
+   *
+   * @returns {boolean}
+   */
+  shouldShowLoadingOverlay () {
+    if (this.hasError()) {
+      return false
+    }
+
+    if (!this.isLoading()) {
+      return false
+    }
+
+    return this.extractRows().length > 0
+  }
+
+  /**
+   * Whether the empty state should render.
+   *
+   * @returns {boolean}
+   */
+  shouldShowEmpty () {
+    if (this.hasError()) {
+      return false
+    }
+
+    if (this.isLoading()) {
+      return false
+    }
+
+    return this.extractRows().length === 0
+  }
+
+  /**
+   * Whether the data rows should render.
+   *
+   * @returns {boolean}
+   */
+  shouldShowRows () {
+    if (this.hasError()) {
+      return false
+    }
+
+    return this.extractRows().length > 0
+  }
+
+  /**
+   * Whether a column header is sortable.
+   *
+   * @param {{
+   *   column: FuroTableColumn
+   * }} params - Parameters of this method.
+   * @returns {boolean}
+   */
+  isColumnSortable ({
+    column,
+  }) {
+    return Boolean(column.sortable)
+  }
+
+  /**
+   * Extract the controlled sort indicator.
+   *
+   * @returns {FuroTableSort | null}
+   */
+  extractSort () {
+    return this.parcel.sort
+      ?? null
+  }
+
+  /**
+   * Extract the active sort direction for a column, when sorted by it.
+   *
+   * @param {{
+   *   column: FuroTableColumn
+   * }} params - Parameters of this method.
+   * @returns {'asc' | 'desc' | null}
+   */
+  extractSortDirectionFor ({
+    column,
+  }) {
+    const sort = this.extractSort()
+
+    if (!sort) {
+      return null
+    }
+
+    if (sort.field !== column.field) {
+      return null
+    }
+
+    return sort.direction
+  }
+
+  /**
+   * Whether the table is currently sorted by a column.
+   *
+   * @param {{
+   *   column: FuroTableColumn
+   * }} params - Parameters of this method.
+   * @returns {boolean}
+   */
+  isSortedBy ({
+    column,
+  }) {
+    return this.extractSortDirectionFor({ column }) !== null
+  }
+
+  /**
+   * Extract the sort indicator icon name for a column. Returns a neutral
+   * (bidirectional) icon when the column is sortable but not the active sort,
+   * and a directional icon when it is.
+   *
+   * @param {{
+   *   column: FuroTableColumn
+   * }} params - Parameters of this method.
+   * @returns {string}
+   */
+  extractSortIconName ({
+    column,
+  }) {
+    const direction = this.extractSortDirectionFor({ column })
+
+    if (direction === null) {
+      return SORT_ICON_NEUTRAL
+    }
+
+    return SORT_ICON_HASH[direction]
+  }
+
+  /**
+   * Extract the controlled selected row keys.
+   *
+   * @returns {Array<string | number>}
+   */
+  extractSelectedRowKeys () {
+    if (this.isSelectionControlled()) {
+      return this.parcel.selectedRowKeys
+        ?? []
+    }
+
+    return this.selectedRowKeysRef.value
+  }
+
+  /**
+   * Extract the number of currently selected rows.
+   *
+   * Exposed to the `footer` slot so a bulk-action bar can render "N selected".
+   *
+   * @returns {number}
+   */
+  extractSelectedCount () {
+    return this.extractSelectedRowKeys()
+      .length
+  }
+
+  /**
+   * Extract the scope object passed to the `footer` slot.
+   *
+   * A single object (single-word slot key) so a bulk-action bar can read the
+   * selected keys and count without any kebab/camel binding ambiguity.
+   *
+   * @returns {{
+   *   keys: Array<string | number>
+   *   count: number
+   * }}
+   */
+  extractFooterSelection () {
+    return {
+      keys: this.extractSelectedRowKeys(),
+      count: this.extractSelectedCount(),
+    }
+  }
+
+  /**
+   * Extract the keys of every row.
+   *
+   * @returns {Array<string | number>}
+   */
+  extractAllRowKeys () {
+    const rowKeyField = this.extractRowKey()
+
+    return /** @type {Array<string | number>} */ (
+      this.extractRows()
+        .map(row => row?.[rowKeyField] ?? null)
+        .filter(rowKey => rowKey !== null)
+    )
+  }
+
+  /**
+   * Whether selection is controlled by the parent (via `parcel.selectedRowKeys`).
+   *
+   * @returns {boolean}
+   */
+  isSelectionControlled () {
+    return (this.parcel.selectedRowKeys ?? null) !== null
+  }
+
+  /**
+   * Whether every row is currently selected.
+   *
+   * @returns {boolean}
+   */
+  hasAllRowsSelected () {
+    const rowKeys = this.extractAllRowKeys()
+
+    if (rowKeys.length === 0) {
+      return false
+    }
+
+    const selectedRowKeys = this.extractSelectedRowKeys()
+
+    return rowKeys.every(rowKey => selectedRowKeys.includes(rowKey))
+  }
+
+  /**
+   * Whether some (but not all) rows are selected.
+   *
+   * @returns {boolean}
+   */
+  hasIndeterminateSelection () {
+    const selectedRowKeys = this.extractSelectedRowKeys()
+
+    if (selectedRowKeys.length === 0) {
+      return false
+    }
+
+    return !this.hasAllRowsSelected()
+  }
+
+  /**
+   * Resolve the parcel for the select-all header checkbox.
+   *
+   * @returns {{
+   *   value: boolean
+   *   indeterminate: boolean
+   *   disabled: boolean
+   * }}
+   */
+  extractSelectAllParcel () {
+    return {
+      value: this.hasAllRowsSelected(),
+      indeterminate: this.hasIndeterminateSelection(),
+      disabled: this.isSelectAllDisabled(),
+    }
+  }
+
+  /**
+   * Whether the select-all header checkbox is disabled. Disabled while loading
+   * (interaction is blocked during a refresh) and when there are no rows.
+   *
+   * @returns {boolean}
+   */
+  isSelectAllDisabled () {
+    if (this.isInteractionBlocked()) {
+      return true
+    }
+
+    return this.extractRows().length === 0
+  }
+
+  /**
+   * Resolve the parcel for a single row's selection checkbox.
+   *
+   * @param {{
+   *   rowContext: FuroTableRowItemContext
+   * }} params - Parameters of this method.
+   * @returns {{
+   *   value: boolean
+   *   disabled: boolean
+   * }}
+   */
+  extractRowSelectionParcel ({
+    rowContext,
+  }) {
+    return {
+      value: rowContext.isSelected(),
+      disabled: this.isInteractionBlocked(),
+    }
+  }
+
+  /**
+   * Create the per-row presentation contexts for the current rows.
+   *
+   * @returns {Array<FuroTableRowItemContext>}
+   */
+  createRowItemContexts () {
+    const rowKeyField = this.extractRowKey()
+    const selectedRowKeys = this.extractSelectedRowKeys()
+
+    return this.extractRows()
+      .map(row => FuroTableRowItemContext.create({
+        row,
+        rowKeyField,
+        selectedRowKeys,
+      }))
+  }
+
+  /**
+   * Resolve the next sort direction in the tri-state cycle:
+   * unsorted → ascending → descending → unsorted.
+   *
+   * @param {{
+   *   current: 'asc' | 'desc' | null
+   * }} params - Parameters of this method.
+   * @returns {'asc' | 'desc' | null}
+   */
+  resolveNextSortDirection ({
+    current,
+  }) {
+    if (current === 'asc') {
+      return 'desc'
+    }
+
+    if (current === 'desc') {
+      return null
+    }
+
+    return 'asc'
+  }
+
+  /**
+   * Handle a sortable header click. Cycles ascending → descending → cleared and
+   * emits the sort intent upward; the parent re-sorts and re-passes the parcel.
+   * A `null` direction restores the default (unsorted) order.
+   *
+   * @param {{
+   *   column: FuroTableColumn
+   * }} params - Parameters of this method.
+   */
+  onHeaderClick ({
+    column,
+  }) {
+    if (!this.isColumnSortable({ column })) {
+      return
+    }
+
+    const direction = this.resolveNextSortDirection({
+      current: this.extractSortDirectionFor({ column }),
+    })
+
+    this.emit(
+      this.EMIT_EVENT_NAME.SORT_CHANGE,
+      {
+        field: column.field,
+        direction,
+      }
+    )
+  }
+
+  /**
+   * Toggle selection of a single row. A `null` key (row without an identifier)
+   * is ignored.
+   *
+   * @param {{
+   *   rowKey: string | number | null
+   * }} params - Parameters of this method.
+   */
+  onToggleRow ({
+    rowKey,
+  }) {
+    if (rowKey === null) {
+      return
+    }
+
+    const selectedRowKeys = this.extractPendingSelectedRowKeys()
+    const nextSelectedRowKeys = selectedRowKeys.includes(rowKey)
+      ? selectedRowKeys.filter(it => it !== rowKey)
+      : [
+        ...selectedRowKeys,
+        rowKey,
+      ]
+
+    this.applySelection({
+      selectedRowKeys: nextSelectedRowKeys,
+    })
+  }
+
+  /**
+   * Toggle selection of every row (select-all / clear-all).
+   */
+  onToggleSelectAll () {
+    const nextSelectedRowKeys = this.hasAllPendingRowsSelected()
+      ? []
+      : this.extractAllRowKeys()
+
+    this.applySelection({
+      selectedRowKeys: nextSelectedRowKeys,
+    })
+  }
+
+  /**
+   * Extract the selection a toggle must build on.
+   *
+   * When controlled, `parcel.selectedRowKeys` lags a tick behind the emit, so
+   * consecutive toggles must accumulate onto the last emitted selection instead.
+   *
+   * @returns {Array<string | number>}
+   */
+  extractPendingSelectedRowKeys () {
+    const selectedRowKeys = this.extractSelectedRowKeys()
+
+    const emittedSelection = this.pendingSelectionRef.value
+
+    if (emittedSelection?.derivedFrom !== selectedRowKeys) {
+      return selectedRowKeys
+    }
+
+    return emittedSelection.selectedRowKeys
+  }
+
+  /**
+   * Remember a just-emitted selection so a follow-up toggle builds on it.
+   *
+   * @param {{
+   *   selectedRowKeys: Array<string | number>
+   * }} params - Parameters of this method.
+   */
+  rememberPendingSelection ({
+    selectedRowKeys,
+  }) {
+    this.pendingSelectionRef.value = {
+      derivedFrom: this.extractSelectedRowKeys(),
+      selectedRowKeys,
+    }
+  }
+
+  /**
+   * Whether every row is selected in the pending selection.
+   *
+   * @returns {boolean}
+   */
+  hasAllPendingRowsSelected () {
+    const allRowKeys = this.extractAllRowKeys()
+
+    if (allRowKeys.length === 0) {
+      return false
+    }
+
+    const pendingSelectedRowKeys = this.extractPendingSelectedRowKeys()
+
+    return allRowKeys.every(it => pendingSelectedRowKeys.includes(it))
+  }
+
+  /**
+   * Apply a selection change: update internal state when uncontrolled, then
+   * emit the change upward.
+   *
+   * @param {{
+   *   selectedRowKeys: Array<string | number>
+   * }} params - Parameters of this method.
+   */
+  applySelection ({
+    selectedRowKeys,
+  }) {
+    if (!this.isSelectionControlled()) {
+      this.selectedRowKeysRef.value = selectedRowKeys
+    }
+
+    this.rememberPendingSelection({
+      selectedRowKeys,
+    })
+
+    this.emit(
+      this.EMIT_EVENT_NAME.UPDATE_SELECTED_ROW_KEYS,
+      selectedRowKeys
+    )
+
+    this.emit(
+      this.EMIT_EVENT_NAME.SELECTION_CHANGE,
+      {
+        selectedRowKeys,
+      }
+    )
+  }
+
+  /**
+   * Handle a click on a data row. Emits the row and its key so the consumer can
+   * react (e.g. navigate to a detail view). The built-in selection cell stops
+   * propagation; interactive cell-slot content should `@click.stop` to opt out.
+   *
+   * @param {{
+   *   rowContext: FuroTableRowItemContext
+   * }} params - Parameters of this method.
+   */
+  onRowClick ({
+    rowContext,
+  }) {
+    this.emit(
+      this.EMIT_EVENT_NAME.ROW_CLICK,
+      {
+        row: rowContext.row,
+        rowKey: rowContext.extractKey(),
+      }
+    )
+  }
+
+  /**
+   * Handle a click on a virtual-window row. Placeholder rows (no loaded context)
+   * are ignored.
+   *
+   * @param {{
+   *   entry: {
+   *     index: number
+   *     rowContext: FuroTableRowItemContext | null
+   *   }
+   * }} params - Parameters of this method.
+   */
+  onVirtualRowClick ({
+    entry,
+  }) {
+    if (entry.rowContext === null) {
+      return
+    }
+
+    this.onRowClick({
+      rowContext: entry.rowContext,
+    })
+  }
+
+  /**
+   * Whether fixed-height virtual scrolling is enabled.
+   *
+   * @returns {boolean}
+   */
+  isVirtual () {
+    return this.extractVirtualConfig() !== null
+  }
+
+  /**
+   * Extract the virtual-scroll configuration, when enabled.
+   *
+   * @returns {FuroTableVirtual | null}
+   */
+  extractVirtualConfig () {
+    return this.parcel.virtual
+      ?? null
+  }
+
+  /**
+   * Extract the fixed row height in pixels.
+   *
+   * @returns {number}
+   */
+  extractItemSize () {
+    return this.extractVirtualConfig()?.itemSize
+      ?? 0
+  }
+
+  /**
+   * Extract the scroll viewport height in pixels.
+   *
+   * @returns {number}
+   */
+  extractViewportHeight () {
+    return this.extractVirtualConfig()?.height
+      ?? 0
+  }
+
+  /**
+   * Extract how many extra rows render above and below the viewport.
+   *
+   * @returns {number}
+   */
+  extractOverscan () {
+    return this.extractVirtualConfig()?.overscan
+      ?? DEFAULT_OVERSCAN
+  }
+
+  /**
+   * Extract the global index of the first loaded row (sparse windows).
+   *
+   * @returns {number}
+   */
+  extractRowOffset () {
+    return this.parcel.rowOffset
+      ?? 0
+  }
+
+  /**
+   * Extract the total row count of the full dataset. Falls back to the loaded
+   * row count when not provided.
+   *
+   * @returns {number}
+   */
+  extractTotalRowCount () {
+    return this.parcel.totalRecords
+      ?? this.extractRows().length
+  }
+
+  /**
+   * Extract the global index one past the last loaded row.
+   *
+   * @returns {number}
+   */
+  extractLoadedEnd () {
+    return this.extractRowOffset()
+      + this.extractRows().length
+  }
+
+  /**
+   * Extract how close (in rows) to the end of the loaded window a downward
+   * scroll must get before `reach-end` fires.
+   *
+   * @returns {number}
+   */
+  extractEndThreshold () {
+    return this.extractVirtualConfig()?.endThreshold
+      ?? DEFAULT_END_THRESHOLD
+  }
+
+  /**
+   * Extract the inline style for the scroll container.
+   *
+   * @returns {Record<string, string>}
+   */
+  extractScrollStyle () {
+    if (!this.isVirtual()) {
+      return {}
+    }
+
+    return {
+      height: `${this.extractViewportHeight()}px`,
+      overflowY: 'auto',
+    }
+  }
+
+  /**
+   * Extract the inline style for a fixed-height virtual row.
+   *
+   * @returns {Record<string, string>}
+   */
+  extractRowStyle () {
+    return {
+      height: `${this.extractItemSize()}px`,
+    }
+  }
+
+  /**
+   * Extract the number of rows that fit in the viewport.
+   *
+   * @returns {number}
+   */
+  extractVisibleCount () {
+    const itemSize = this.extractItemSize()
+
+    if (itemSize <= 0) {
+      return 0
+    }
+
+    return Math.ceil(this.extractViewportHeight() / itemSize)
+  }
+
+  /**
+   * Extract the first global row index to render (overscan applied).
+   *
+   * @returns {number}
+   */
+  extractFirstIndex () {
+    return this.computeFirstIndex(this.scrollTopRef.value)
+  }
+
+  /**
+   * Compute the first global row index (overscan applied) for a scroll offset.
+   *
+   * Kept separate from {@link extractFirstIndex} so `onScroll` can test a
+   * prospective offset against the current window without mutating state.
+   *
+   * @param {number} scrollTop - Scroll offset in pixels.
+   * @returns {number}
+   */
+  computeFirstIndex (scrollTop) {
+    const itemSize = this.extractItemSize()
+
+    if (itemSize <= 0) {
+      return 0
+    }
+
+    const rawFirst = Math.floor(scrollTop / itemSize)
+      - this.extractOverscan()
+
+    return Math.max(0, rawFirst)
+  }
+
+  /**
+   * Extract the last global row index to render (overscan applied).
+   *
+   * @returns {number}
+   */
+  extractLastIndex () {
+    const total = this.extractTotalRowCount()
+
+    if (total <= 0) {
+      return -1
+    }
+
+    const rawLast = this.extractFirstIndex()
+      + this.extractVisibleCount()
+      + (this.extractOverscan() * 2)
+
+    return Math.min(total - 1, rawLast)
+  }
+
+  /**
+   * Extract the leading spacer height (rows skipped above the window).
+   *
+   * @returns {number}
+   */
+  extractLeadingSpacerHeight () {
+    return this.extractFirstIndex()
+      * this.extractItemSize()
+  }
+
+  /**
+   * Extract the trailing spacer height (rows skipped below the window).
+   *
+   * @returns {number}
+   */
+  extractTrailingSpacerHeight () {
+    const trailingCount = this.extractTotalRowCount()
+      - 1
+      - this.extractLastIndex()
+
+    return Math.max(0, trailingCount)
+      * this.extractItemSize()
+  }
+
+  /**
+   * Create the per-row contexts for the visible virtual window. Entries whose
+   * row is not in the loaded sparse window carry a `null` context (placeholder).
+   *
+   * @returns {Array<{
+   *   index: number
+   *   rowContext: FuroTableRowItemContext | null
+   * }>}
+   */
+  createVirtualRowItemContexts () {
+    const firstIndex = this.extractFirstIndex()
+    const lastIndex = this.extractLastIndex()
+
+    if (lastIndex < firstIndex) {
+      return []
+    }
+
+    const rowKeyField = this.extractRowKey()
+    const rowOffset = this.extractRowOffset()
+    const selectedRowKeys = this.extractSelectedRowKeys()
+    const rows = this.extractRows()
+
+    return Array.from(
+      {
+        length: lastIndex - firstIndex + 1,
+      },
+      (entry, position) => {
+        const index = firstIndex + position
+        const relativeIndex = index - rowOffset
+
+        const isWithinLoadedWindow = relativeIndex >= 0
+          && relativeIndex < rows.length
+
+        const row = isWithinLoadedWindow
+          ? (rows[relativeIndex] ?? null)
+          : null
+
+        return {
+          index,
+          rowContext: row === null
+            ? null
+            : FuroTableRowItemContext.create({
+              row,
+              rowKeyField,
+              selectedRowKeys,
+            }),
+        }
+      }
+    )
+  }
+
+  /**
+   * Handle the raw scroll event from the viewport element.
+   *
+   * @param {Event} scrollEvent - The DOM scroll event.
+   */
+  onScrollEvent (scrollEvent) {
+    const { target } = scrollEvent
+    const scrollElement = /** @type {HTMLElement | null} */ (target)
+    const scrollTop = scrollElement?.scrollTop
+      ?? 0
+
+    this.pendingScrollTop = scrollTop
+
+    this.scheduleScrollFrame()
+  }
+
+  /**
+   * Setup component lifecycle: announce the initial window, re-ask once the
+   * loaded window changes, and cancel a pending scroll frame on unmount.
+   *
+   * @template {X extends FuroTableContext ? X : never} T, X
+   * @returns {T} For method chaining.
+   * @this {T}
+   */
+  setupComponent () {
+    onMounted(() => {
+      this.emitInitialWindow()
+    })
+
+    watch(
+      () => this.extractLoadedEnd(),
+      () => {
+        this.onLoadedWindowChange()
+      }
+    )
+
+    onBeforeUnmount(() => {
+      this.teardownScrollFrame()
+    })
+
+    return this
+  }
+
+  /**
+   * Coalesce raw scroll events into one `onScroll` per animation frame, so a
+   * burst of scroll events triggers at most one windowing pass per frame.
+   */
+  scheduleScrollFrame () {
+    if (this.scrollFrameId !== null) {
+      return
+    }
+
+    this.scrollFrameId = this.Ctor.requestFrame(() => {
+      this.scrollFrameId = null
+
+      this.onScroll({
+        scrollTop: this.pendingScrollTop,
+      })
+    })
+  }
+
+  /**
+   * Cancel a pending coalesced scroll frame, if any. Called on unmount so the
+   * frame callback cannot fire against a torn-down component.
+   *
+   * @returns {void}
+   */
+  teardownScrollFrame () {
+    if (this.scrollFrameId === null) {
+      return
+    }
+
+    this.Ctor.cancelFrame(this.scrollFrameId)
+
+    this.scrollFrameId = null
+  }
+
+  /**
+   * Handle a scroll on the virtual viewport: store the offset and emit a
+   * range change when the visible window moves.
+   *
+   * @param {{
+   *   scrollTop: number
+   * }} params - Parameters of this method.
+   */
+  onScroll ({
+    scrollTop,
+  }) {
+    if (!this.isVirtual()) {
+      return
+    }
+
+    const previousFirstIndex = this.extractFirstIndex()
+    const nextFirstIndex = this.computeFirstIndex(scrollTop)
+
+    if (nextFirstIndex === previousFirstIndex) {
+      return
+    }
+
+    const isScrollingDown = nextFirstIndex > previousFirstIndex
+
+    this.scrollTopRef.value = scrollTop
+
+    this.emitRangeChange()
+
+    if (isScrollingDown) {
+      this.emitReachEndIfNeeded()
+    }
+  }
+
+  /**
+   * Emit `reach-end` once when a downward scroll brings the visible window
+   * within `endThreshold` rows of the end of the currently loaded window, and
+   * more records remain to load. Re-arms only when the loaded window grows, so
+   * a consumer appending pages is asked exactly once per page — unlike
+   * `range:change`, it never fires on upward scroll nor before the end.
+   *
+   * @returns {void}
+   */
+  emitReachEndIfNeeded () {
+    if (!this.isVirtual()) {
+      return
+    }
+
+    const rows = this.extractRows()
+
+    if (rows.length === 0) {
+      return
+    }
+
+    const loadedEnd = this.extractLoadedEnd()
+
+    if (loadedEnd >= this.extractTotalRowCount()) {
+      return
+    }
+
+    const lastVisibleIndex = this.extractLastIndex()
+
+    if (lastVisibleIndex < loadedEnd - 1 - this.extractEndThreshold()) {
+      return
+    }
+
+    if (this.lastReachEndLoadedEnd === loadedEnd) {
+      return
+    }
+
+    this.lastReachEndLoadedEnd = loadedEnd
+
+    this.emit(
+      this.EMIT_EVENT_NAME.REACH_END,
+      {
+        first: this.extractFirstIndex(),
+        last: lastVisibleIndex,
+        loadedCount: rows.length,
+        totalRecords: this.extractTotalRowCount(),
+      }
+    )
+  }
+
+  /**
+   * Release the `reach-end` guard once the loaded window shrank, so a refresh
+   * landing back on an already seen end can ask for its next page again.
+   *
+   * @returns {void}
+   */
+  releaseReachEndGuard () {
+    if (this.lastReachEndLoadedEnd === null) {
+      return
+    }
+
+    if (this.extractLoadedEnd() >= this.lastReachEndLoadedEnd) {
+      return
+    }
+
+    this.lastReachEndLoadedEnd = null
+  }
+
+  /**
+   * Emit `range:change` when the visible window differs from the last emitted.
+   * Virtual mode only, because a plain table has no window to move.
+   */
+  emitRangeChange () {
+    if (!this.isVirtual()) {
+      return
+    }
+
+    const first = this.extractFirstIndex()
+    const last = this.extractLastIndex()
+
+    const hasSameRange = this.lastEmittedRange !== null
+      && this.lastEmittedRange.first === first
+      && this.lastEmittedRange.last === last
+
+    if (hasSameRange) {
+      return
+    }
+
+    this.lastEmittedRange = {
+      first,
+      last,
+    }
+
+    this.emit(
+      this.EMIT_EVENT_NAME.RANGE_CHANGE,
+      {
+        first,
+        last,
+      }
+    )
+  }
+
+  /**
+   * Announce the window the table renders on mount. That window can already
+   * hold unloaded rows, which no scroll event would otherwise ask to fill.
+   *
+   * @returns {void}
+   */
+  emitInitialWindow () {
+    this.emitRangeChange()
+
+    this.emitReachEndIfNeeded()
+  }
+
+  /**
+   * Ask for the next page again once the loaded window changed, so a window
+   * still holding unloaded rows never waits for a scroll that may never come.
+   *
+   * @returns {void}
+   */
+  onLoadedWindowChange () {
+    this.releaseReachEndGuard()
+
+    this.emitReachEndIfNeeded()
+  }
+
+  /**
+   * Resolve the field of the column immediately after the given one. The next
+   * column absorbs the width change during a fit-mode resize.
+   *
+   * @param {{
+   *   field: string
+   * }} params - Parameters of this method.
+   * @returns {string | null}
+   */
+  resolveNextColumnField ({
+    field,
+  }) {
+    const columns = this.extractColumns()
+    const index = columns.findIndex(column => column.field === field)
+
+    if (index === -1) {
+      return null
+    }
+
+    return columns[index + 1]?.field
+      ?? null
+  }
+
+  /**
+   * Whether a column's resize handle is shown. The last column has no neighbour
+   * to trade width with in fit mode, so it is not resizable.
+   *
+   * @param {{
+   *   columnIndex: number
+   * }} params - Parameters of this method.
+   * @returns {boolean}
+   */
+  canResizeColumn ({
+    columnIndex,
+  }) {
+    if (!this.isResizable()) {
+      return false
+    }
+
+    return columnIndex < this.extractColumns().length - 1
+  }
+
+  /**
+   * Measure the current rendered width (px) of every data column from its
+   * header cell. Pinning all widths on the first resize keeps the table's total
+   * width fixed while resizing trades width between two adjacent columns.
+   *
+   * @param {{
+   *   handle: HTMLElement
+   * }} params - Parameters of this method.
+   * @returns {Record<string, number>}
+   */
+  measureColumnWidths ({
+    handle,
+  }) {
+    const row = handle.closest('tr')
+
+    if (row === null) {
+      return {}
+    }
+
+    const headerCells = /** @type {NodeListOf<HTMLElement>} */ (
+      row.querySelectorAll('.header-cell')
+    )
+
+    const entries = this.extractColumns()
+      .map((column, index) => [
+        column.field,
+        headerCells[index]?.offsetWidth
+        ?? 0,
+      ])
+
+    return Object.fromEntries(entries)
+  }
+
+  /**
+   * Begin resizing a column (fit mode). On the first resize, all column widths
+   * are pinned so the table's total width stays fixed; dragging then trades
+   * width with the next column. Captures the pointer on the handle so move/end
+   * events keep firing even when the cursor leaves it.
+   *
+   * @param {{
+   *   column: FuroTableColumn
+   *   pointerEvent: PointerEvent
+   * }} params - Parameters of this method.
+   */
+  onColumnResizeStart ({
+    column,
+    pointerEvent,
+  }) {
+    const handle = /** @type {HTMLElement} */ (pointerEvent.currentTarget)
+
+    if (Object.keys(this.columnWidthsRef.value).length === 0) {
+      this.columnWidthsRef.value = this.measureColumnWidths({
+        handle,
+      })
+    }
+
+    const nextField = this.resolveNextColumnField({
+      field: column.field,
+    })
+
+    if (nextField === null) {
+      return
+    }
+
+    const widths = this.columnWidthsRef.value
+    const startWidth = widths[column.field]
+      ?? 0
+    const nextStartWidth = widths[nextField]
+      ?? 0
+
+    this.resizeState = {
+      field: column.field,
+      startX: pointerEvent.clientX,
+      startWidth,
+      nextField,
+      nextStartWidth,
+    }
+
+    handle.setPointerCapture(pointerEvent.pointerId)
+  }
+
+  /**
+   * Trade width between the resized column and its neighbour as the pointer
+   * moves. The shared total is preserved (fit mode) and both columns are
+   * clamped to the minimum width, so the table never overflows from a resize.
+   *
+   * @param {{
+   *   pointerEvent: PointerEvent
+   * }} params - Parameters of this method.
+   */
+  onColumnResizeMove ({
+    pointerEvent,
+  }) {
+    if (this.resizeState === null) {
+      return
+    }
+
+    const {
+      field,
+      startX,
+      startWidth,
+      nextField,
+      nextStartWidth,
+    } = this.resizeState
+
+    const rawDelta = pointerEvent.clientX
+      - startX
+    const delta = Math.min(
+      Math.max(rawDelta, MIN_COLUMN_WIDTH - startWidth),
+      nextStartWidth - MIN_COLUMN_WIDTH
+    )
+
+    const width = startWidth + delta
+    const nextWidth = nextStartWidth - delta
+
+    this.columnWidthsRef.value = {
+      ...this.columnWidthsRef.value,
+      [field]: width,
+      [nextField]: nextWidth,
+    }
+  }
+
+  /**
+   * Finish resizing a column and release the captured pointer.
+   *
+   * @param {{
+   *   pointerEvent: PointerEvent
+   * }} params - Parameters of this method.
+   */
+  onColumnResizeEnd ({
+    pointerEvent,
+  }) {
+    if (this.resizeState === null) {
+      return
+    }
+
+    const handle = /** @type {HTMLElement} */ (pointerEvent.currentTarget)
+
+    handle.releasePointerCapture(pointerEvent.pointerId)
+
+    this.resizeState = null
+  }
+}
+
+/**
+ * @typedef {import('../../../contexts/BaseFuroContext.js').BaseFuroContextParams & {
+ *   props: Props
+ *   componentContext: ComponentContext
+ *   refHash: {
+ *     selectedRowKeysRef: import('vue').Ref<Array<string | number>>
+ *     pendingSelectionRef: import('vue').Ref<PendingSelection | null>
+ *     scrollTopRef: import('vue').Ref<number>
+ *     columnWidthsRef: import('vue').Ref<Record<string, number>>
+ *   }
+ * }} FuroTableContextParams
+ */
+
+/**
+ * The last selection this table emitted.
+ *
+ * @typedef {{
+ *   derivedFrom: Array<string | number>
+ *   selectedRowKeys: Array<string | number>
+ * }} PendingSelection
+ */
+
+/**
+ * @typedef {Omit<FuroTableContextParams, 'refHash'> & {
+ *   refHash?: FuroTableContextParams['refHash']
+ * }} FuroTableContextFactoryParams
+ */
+
+/**
+ * @typedef {keyof typeof FuroTableContext.EMIT_EVENT_NAME} EmitEventName
+ */
+
+/**
+ * @typedef {import('vue').HTMLAttributes & {
+ *   parcel?: FuroTableParcel | null
+ * }} Props
+ */
+
+/**
+ * Closed-set Furo behavior for `<FuroTable>`. JSON-serializable only.
+ *
+ * @typedef {{
+ *   columns?: Array<FuroTableColumn>
+ *   rows?: Array<Record<string, unknown>>
+ *   rowKey?: string
+ *   selectable?: boolean
+ *   selectedRowKeys?: Array<string | number> | null
+ *   sort?: FuroTableSort | null
+ *   loading?: boolean
+ *   errorMessage?: string | null
+ *   emptyText?: string
+ *   virtual?: FuroTableVirtual | null
+ *   totalRecords?: number | null
+ *   rowOffset?: number
+ *   resizable?: boolean
+ *   compact?: boolean
+ *   gridLines?: boolean
+ *   rowActionsLabel?: string
+ *   rowActionsWidth?: string
+ * }} FuroTableParcel
+ */
+
+/**
+ * Fixed-height virtual-scroll configuration. When set, FuroTable windows the
+ * rendered rows and emits `range:change` so the consumer can lazy-fetch the
+ * visible window into a sparse `rows` (with `rowOffset` + `totalRecords`).
+ *
+ * For infinite-append consumers, prefer the `reach-end` event over
+ * `range:change`: it fires once per loaded window when a downward scroll nears
+ * the end (within `endThreshold` rows), never on upward scroll.
+ *
+ * @typedef {{
+ *   itemSize: number
+ *   height: number
+ *   overscan?: number
+ *   endThreshold?: number
+ * }} FuroTableVirtual
+ */
+
+/**
+ * @typedef {{
+ *   field: string
+ *   label?: string
+ *   sortable?: boolean
+ *   align?: 'start' | 'center' | 'end'
+ *   width?: string
+ * }} FuroTableColumn
+ */
+
+/**
+ * @typedef {{
+ *   field: string
+ *   direction: 'asc' | 'desc'
+ * }} FuroTableSort
+ */
+
+/**
+ * @typedef {import('vue').SetupContext<FuroTableEmitHash, FuroTableSlots>} ComponentContext
+ */
+
+/**
+ * @typedef {typeof FuroTableContext.EMIT_EVENT_HASH} FuroTableEmitHash
+ */
+
+/**
+ * @typedef {import('vue').SlotsType<{
+ *   'header-cell': {
+ *     column: FuroTableColumn
+ *   }
+ *   cell: {
+ *     row: Record<string, unknown>
+ *     column: FuroTableColumn
+ *     value: unknown
+ *   }
+ *   loading: {}
+ *   empty: {}
+ *   error: {
+ *     message: string | null
+ *   }
+ *   placeholder: {
+ *     index: number
+ *   }
+ *   'row-actions': {
+ *     row: Record<string, unknown>
+ *   }
+ *   pagination: {}
+ *   footer: {
+ *     selection: {
+ *       keys: Array<string | number>
+ *       count: number
+ *     }
+ *   }
+ * }>} FuroTableSlots
+ */
+
+/**
+ * @typedef {(
+ *   props: Props,
+ *   componentContext: ComponentContext
+ * ) => {
+ *   context: FuroTableContext
+ * }} FuroTableSetup
+ */