/analytical-table

name: analytical-table
description: Use ALWAYS for AnalyticalTable internals — react-table v7 plugin architecture, vendored react-table code at packages/main/src/components/AnalyticalTable/react-table/, tableHooks, AnalyticalTableHooks, useDynamicColumnWidths, useColumnResizing, useRowSelect, useF2CellEdit, useManualRowSelect, useIndeterminateRowSelection, useOnColumnResize, selectionMode, selectionBehavior, onRowSelect, onRowClick, onRowContextMenu, scaleWidthMode, infiniteScroll, isTreeTable, renderRowSubComponent, columnResizing, dynamic column widths, row virtualization, scroll-to-row freezes, deferred selection events, ARIA roles on grid/treegrid, aria-rowindex under virtualization, custom Cell/Header/Filter/Popover render-prop columns. Apply on ANY task that reads or modifies files under packages/main/src/components/AnalyticalTable/. SKIP for plain prop / event / ref-method / column-property lookups — those are in the ui5-wcr MCP `get_component_api`.

AnalyticalTable Expert

Start with **Key Behaviors** below; jump to a reference file only when its topic comes up.

react-table v7 is vendored, not a dependency

react-table v7 lives at `packages/main/src/components/AnalyticalTable/react-table/` — in-tree, not a node_modules dependency. Imports are relative (`./react-table/index.js`). Grepping `node_modules/react-table` returns nothing — search the vendored tree. For the re-export list, the structure of the vendored copy, and the upstream-fallback path when the in-tree copy doesn't answer a question, see [REACT-TABLE-PIPELINE.md](references/REACT-TABLE-PIPELINE.md).

---

Key Behaviors

autoReset Defaults

react-table defaults all `autoReset*` options to `true`. Most reset on `data` changes: `autoResetSelectedRows`, `autoResetSortBy`, `autoResetFilters`, `autoResetGlobalFilter`, `autoResetGroupBy`, `autoResetExpanded`, `autoResetHiddenColumns`. The exception is `autoResetResize`, which resets on `columns` changes (not `data`).

**Not used by AnalyticalTable:** `autoResetPage` (no `usePagination` plugin) and `autoResetRowState` (no `useRowState` plugin) have no effect.

Hooks that need stable state across data changes (e.g., `useManualRowSelect`) must set `autoResetSelectedRows = false` on the instance. The main `stateReducer` also handles `SET_SELECTED_ROW_IDS` for programmatic overrides.

Selection Mechanics

**UI5 tag blocklist:** `useSingleRowStateSelection` checks `tagNamesWhichShouldNotSelectARow` — a Set of UI5 Web Component tag names (Button, Link, Input, CheckBox, Select, etc.) defined at `util/index.ts:21-56`. Clicking these inside a cell does NOT trigger row selection. The check uses `getTagNameWithoutScopingSuffix(e.target.tagName)` (`packages/main/src/internal/utils.ts:52-55`) so scoped tag names like `ui5-button-foo123` still match.

**`markerAllowTableRowSelection`:** Checked on both `e` and `e.nativeEvent`. When `true`, overrides the blocklist and allows the click to trigger selection.

**Native HTML elements** are NOT in the blocklist. A `<button>`, `<input>`, or `<a>` inside a cell WILL trigger row selection unless `e.stopPropagation()` is called.

**`onRowSelect` is deferred, not synchronous.** `useSingleRowStateSelection` and `useRowSelectionColumn` store `instance.pendingSelectEvent` and a `useEffect` in `useSelectionChangeCallback` consumes it after `selectedRowIds` actually changes (`hooks/useSingleRowStateSelection.ts:53`, `hooks/useSelectionChangeCallback.ts:21-67`, `hooks/useRowSelectionColumn.tsx:70`). Two consequences: (1) `e.preventDefault()`/`e.stopPropagation()` inside `onRowClick` does **not** suppress `onRowSelect`; (2) `onRowSelect` is **skipped entirely** if the click did not actually change `selectedRowIds` (e.g., re-clicking the already-selected row in single-select mode).

**`onRowClick` always fires before `onRowSelect`.** The sole exception is clicking the checkbox itself (`e.target?.dataset?.name === 'internal_selection_column'`). Cell-level `data-selection-cell="true"` does NOT suppress `onRowClick` (`hooks/useSingleRowStateSelection.ts:29-31`). `data-selection-cell` is also a string, so compare `=== 'true'`, never just truthy.

Keyboard Navigation Pattern

Keyboard nav splits across two hooks:

• **`useKeyboardNavigation`** (always on) — Arrow keys, Home, End, PageUp, PageDown. Uses `findParentCell()` recursion (`hooks/useKeyboardNavigation.ts:41`) and `currentlyFocusedCell.current` to track focus, NOT a `currentTarget !== target` guard.
• **`useF2CellEdit`** (opt-in via `tableHooks`) — F2, Tab/Shift+Tab. Gates with the **positive** form `e.currentTarget === e.target` (`pluginHooks/useF2CellEdit.ts:87,97,105,129,156`) to detect cell-level events vs. interactive-child events.

**End/Home:** Uses `data-column-index` (absolute) to find the target cell. If the cell is already in DOM, focus is synchronous. Only when the cell is outside the virtualization window does the handler scroll `tableRef.current.scrollLeft` and focus after `requestAnimationFrame` (`hooks/useKeyboardNavigation.ts:81-94,214-244`).

**onKeyDown is short-circuited during F2 edit mode:** When `state.cellContentTabIndex === 0`, the table's main `onKeyDown` skips arrow/Home/End/PageUp/PageDown and only forwards to user-supplied `tableProps.onKeyDown` (`hooks/useKeyboardNavigation.ts:368-378`). Don't add nav-key handlers expecting them to coexist with edit mode.

**PageUp/PageDown** read `[data-component-name="AnalyticalTableBody"].children[0].children.length` (`hooks/useKeyboardNavigation.ts:252-253`). PageDown jumps to the last _currently rendered virtual_ row, not the last data row.

**Cell data attributes:** Each cell has two column index attributes:

• `data-column-index` — **absolute** index (`virtualColumn.index`). Use this for `querySelector`.
• `data-visible-column-index` — **relative** index within currently rendered virtual items. Never use this for `querySelector` after scrolling.

Sibling row attrs: `data-row-index` (header = 0, body = `virtu