Nested FDT causes outer table to scroll when inner table is scrolled

[gersongoulart]

Expected Behavior

When scrolling a nested (inner) FDT instance in a row extension, only that inner table should scroll. The outer table (containing the expanded row) should remain fixed and should not scroll alongside the inner table.

Current Behavior

Currently, when using the mouse/trackpad for scrolling a nested (inner) FDT instance in a row extension, the outer (parent) table also scrolls in tandem. This behavior breaks the UI, making it difficult to navigate and view the nested table contents independently. This issue does not occur when dragging the scrollbar.

Possible Solution

One possibility is that the scroll event is propagating up from the inner table to the outer container. If there is a way to prevent event propagation or to configure scrolling so that it remains isolated to the inner table, that might resolve the issue. If there is a recommended pattern for nesting tables (or any other advice on layout/DOM structure) that ensures scroll boundaries remain separate, that would also be helpful.

Steps to Reproduce (for bugs)

Create an outer DFT where each row can be expanded.
In the expanded row component, place another FDT.
Attempt to scroll the inner table.
Observe that the outer table scrolls in addition to the inner one.
Here’s a minimal example using the Basic template:
https://codesandbox.io/p/sandbox/fdt-inner-table-8kssfj

Context

This issue significantly impacts our users’ experience. They need to view additional details in the nested (inner) table without losing the context of the outer table’s rows. When the outer table scrolls at the same time, it becomes confusing and disrupts data review.

Your Environment

Version used: (e.g. 2.0.19)
Browser Name and version: Chrome Version 133.0.6943.142 (Official Build) (arm64)
Operating System and version: macOS 15.3.1 (24D70)
Link to your project: (N/A, private repository)

Any guidance or best practices for nesting fixed-data-table-2 components, or suggestions on how to isolate scroll behavior, would be greatly appreciated!

[pradeepnschrodinger]

You can just pass the prop stopScrollPropagation as true to your inner table to prevent scroll events from being propagated to the parent.

Note that if the inner table is fully scrolled, and the user attempts to scroll within the inner table, then the outer table will still get scrolled.

In case you want to completely avoid the outer table from being scrolled no matter what, I recommend explicitly stopping propagation of the wheel event by putting in a wrapper element over the inner table.

Here's a sandbox made on top of yours that does both: https://codesandbox.io/p/sandbox/fdt-inner-table-forked-39fdp3?file=%2Fsrc%2Findex.js%3A177%2C62

Let me know if this solves what you're looking for.

This is an interesting usecase btw. We don't have an example for this yet but would be happy to accept a PR to add it in.