[BUGFIX] stabilize VirtualizedTable component references to prevent remounts

[adrianSepiol]

Description

Fixes: perses/perses#4571

The fix moves VirtuosoTableComponents out of the component entirely as a module-level constant, giving it a permanently stable reference. Per-render values (width, density, keyboard handlers, row event handlers) are threaded through via Virtuoso's context prop and a tableContext memo instead of closing over them.

Additionally, useVirtualizedTableKeyboardNav now wraps onActiveCellChange in useCallback so the returned handler references are stable when its inputs haven't changed, which was the other source of memo churn.

This fix also enables stateful components to be used inside the table (e.g. a filter dropdown that tracks its own open state) — previously, remounting on every render would silently reset any local state those components held.

Screenshots

Checklist

• Pull request has a descriptive title and context useful to a reviewer.
• Pull request title follows the [<catalog_entry>] <commit message> naming convention using one of the
  following catalog_entry values: FEATURE, ENHANCEMENT, BUGFIX, BREAKINGCHANGE, DOC,IGNORE.
• All commits have DCO signoffs.

UI Changes

• Changes that impact the UI include screenshots and/or screencasts of the relevant changes.
• Code follows the UI guidelines.
• E2E tests are stable and unlikely to be flaky.
  See e2e docs for more details. Common issues include:
  • Is the data inconsistent? You need to mock API requests.
  • Does the time change? You need to use consistent time values or mock time utilities.
  • Does it have loading states? You need to wait for loading to complete.

[Copilot]

🟡 Changes recommended

The remount regression needs focused automated coverage to prevent recurrence.

1 open finding

• Add regression test for preserving stateful cell components on rerender · New

What changed in this PR

Stabilizes VirtualizedTable internals to prevent child remounts and state loss.

Changes:

• Moves Virtuoso components to module scope and supplies dynamic values through context.
• Stabilizes keyboard-navigation callbacks with useCallback.
• Uses row data directly through Virtuoso’s data prop.

File	Description
components/​src/​Table/​VirtualizedTable.tsx	Stabilizes Virtuoso component identities and passes render context.
components/​src/​Table/​hooks/​useVirtualizedTableKeyboardNav.tsx	Memoizes the active-cell callback.

🧠 Review effort: Balanced

---

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

[Gladorme]

context is "leaking" on TableHead, TableFoot and TableBody components, because it's passed by default (where on others, it's separated). So the scroller div, thead, tbody and tfoot (when paginated) now render context="[object Object]"

[Gladorme]

Once it's fixed, this PR is a nice improvement for the rendering :)

[adrianSepiol]

Good catch :) I've pushed fix