DataViews: Add scrollY layout option for table views

[dilirity]

What?

Adds a new scrollY layout option to the DataViews table and pickerTable view types.

CleanShot.2026-03-10.at.11.18.23.mp4

CleanShot.2026-03-10.at.11.17.03.mp4

Why?

Currently, the entire DataViews wrapper scrolls as one unit. When using free composition to build custom layouts - for example, with route tabs and view actions in a shared toolbar above the table - the table body needs to scroll independently within a constrained container while keeping the toolbar and table headers fixed.

Free composition gives control over the layout of the surrounding UI, but the table itself still needs to know where vertical scrolling should occur. Without this option, the only way to achieve this behavior is to override internal DataViews styles, which is fragile and breaks the sticky actions column border logic.

Additionally, the horizontal scroll needs to be handled by the correct container so the sticky actions column shows its border only when overlapping content.

How?

• Adds scrollY?: 'wrapper' | 'table' to the ViewTable and ViewPickerTable layout types. Defaults to 'wrapper' (current behavior).
• When scrollY is 'table', the wrapper disables vertical overflow (overflow-y: hidden) and the table is wrapped in an inner scroll container that handles both vertical and horizontal scrolling.
• A new scrollContainerRef is threaded through DataViewsContext so the table component can expose the inner scroll element to the parent for infinite scroll support and horizontal scroll-end detection.
• The infinite scroll listener in both DataViews and DataViewsPicker attaches to the correct scroll container based on the mode.
• useIsHorizontalScrollEnd receives the appropriate ref so the actions column border logic works with either scroll mode.

Testing Instructions

1. Use a DataViews table with view.layout.scrollY set to 'table'.
2. Verify filters and view actions stay fixed while the table body scrolls vertically.
3. Scroll horizontally and confirm the actions column shows a left border when overlapping content, and no border when scrolled fully right.
4. Test with scrollY unset or set to 'wrapper' to confirm default behavior is unchanged.
5. If using infinite scroll, verify it triggers correctly in both modes.

Testing Instructions for Keyboard

1. Storybook for DataViews -> Free Composition Scroll Y demonstrates the scrollY: 'table' option in a layout with route tabs and view actions in a shared toolbar. The table body scrolls while the toolbar and
   thead stay fixed.
2. Storybook for DataViews -> Layout Table also has a scrollY control to toggle between wrapper and table modes.

[github-actions]

Warning: Type of PR label mismatch

To merge this PR, it requires exactly 1 label indicating the type of PR. Other labels are optional and not being checked here.

• Required label: Any label starting with [Type].
• Labels found: Needs Design Feedback, [Package] DataViews.

Read more about Type labels in Gutenberg. Don't worry if you don't have the required permissions to add labels; the PR reviewer should be able to help with the task.

[github-actions]

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: dilirity <dilirity@git.wordpress.org>
Co-authored-by: oandregal <oandregal@git.wordpress.org>
Co-authored-by: gigitux <gigitux@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

[dilirity]

Closing as not needed.

[oandregal]

Would you be able to use free form instead to have this kind of interaction? Examples: free composition, minimal UI.

[dilirity]

Would you be able to use free form instead to have this kind of interaction? Examples: free composition, minimal UI.

free form doesn't solve this on its own - I've included a storybook (Free Composition Scroll Y) showing free composition that still needs scrollY: 'table' to work correctly.

[gigitux]

I opened an alternative PR #76453

[gigitux]

I'm going to close this PR given that #76453 has been merged! Kudos to @dilirity for this exploration! 🙇