feat(datagrid): add optional synchronized top horizontal scrollbar

[victordonetguerra]

Pull request type

New feature (non-breaking change which adds functionality)

Description

Tall grids with wide columns make users reach the bottom scrollbar to move horizontally. This adds Appearance > Show top horizontal scrollbar, disabled by default. When enabled, the extra bar follows the grid horizontally, hides without overflow, and updates when columns are hidden, shown or resized.

Virtual grids scroll inside the grid element; other grids scroll inside the content wrapper. Runtime testing caught and fixed the original wrapper-only implementation for virtual grids, with a focused unit regression test. Vertical scrolling and pagination logic remain unchanged.

The component observes the existing MobX grid style and uses ResizeObserver with a window-resize fallback. Listeners, observers and queued frames are cleaned up on unmount. No changes to personalization storage, grid sizing, widget identifier, dependencies or release versions. The extra bar is a pointer convenience; existing keyboard navigation remains available.

Includes README fixture instructions, an Unreleased changelog entry, generated XML typings, a default-off E2E test and an opt-in enabled-fixture suite. The latter requires a disposable localhost project and adds 500 synthetic records; it is skipped unless explicitly enabled.

Validation

Windows, Node 24.16.0, pnpm 10.33.4:

• Build: 11 tasks passed.
• Unit tests: 22 suites, 265 tests, 13 snapshots passed. Explicit testMatch for spec.ts/spec.tsx avoids mixed Windows separators in the default matcher.
• Lint: zero errors, 11 existing upstream test warnings. E2E lint, formatting and whitespace checks passed.
• Official Data Grid test project, Mendix 10.24.12.86709, Microsoft Edge: default-off regression passed against the corrected package in the classic client.
• Enabled checks passed in the classic client; the final four-test enabled suite also passed in React Client migration mode: native browser input for column resizing, keyboard navigation, hide/show, bidirectional synchronization, full incremental traversal of 503 rows, unchanged vertical position during horizontal scrolling, and negative RTL offsets with dir="rtl" on the Mendix page root.
• React can reset column width after hide/show; the test checks visibility against actual overflow, then enlarges the column again and verifies synchronization.
• Updating the MPK with its published default of false retained the true option already stored in the enabled model.

The disposable React fixture uses the same official test project with its WebUI client setting changed to MigrationMode. This does not certify strict React mode or Mendix 11. Edge was used because the downloaded Chromium binary did not launch on this workstation. RTL coverage exercises layout and offsets, not application translations. Saved-personalization restore/reset, initially hidden tabs, zoom, other browsers/OS scrollbar styles and screen readers have not been certified by these checks.

Maintainer follow-up

• Approve workflows for this external contribution and review the proposed option/API.
• Inspect the Snyk dependency report: earlier runs reported 21 failures, with code and license scans passing. No package manifests or lockfile changed; baseline status has not been established because the detailed report requires Mendix organization access.
• Review the enabled-fixture approach and public documentation if accepted.

Related context: #2222 covers virtual-scroll height locking; this PR does not modify that logic. The behavior reported in #1818 is outside this contribution's scope.

[victordonetguerra]

Validation update for 7f33975:

• Local build passed (11 tasks).
• Unit tests passed: 22 suites, 264 tests, 13 snapshots.
• Lint passed with no errors (11 existing warnings); formatting and diff whitespace checks passed.
• The new Playwright default-off regression test is discovered, but has not been executed. Enabled-option validation in a running Mendix app is still pending, including hide/show columns, resizing, virtual scrolling and RTL.
• No package.json files or pnpm-lock.yaml differ from the base commit 991f8bd.

Snyk code and license checks passed. The dependency security check reports 21 failures; the detailed report requires access to the Mendix Snyk organization, so I cannot yet determine whether these are baseline findings.

Could a maintainer approve the four workflows awaiting approval and share the relevant Snyk findings (or confirm their baseline status)? I am keeping this PR as a draft until the outstanding validation is complete.

[victordonetguerra]

Runtime validation update for the same commit (7f33975):

The official public Data Grid test project now builds and runs locally on Mendix 10.24.12.86709. The new default-off Playwright regression test passed in Microsoft Edge.

Two additional local fixture tests also passed: bidirectional horizontal synchronization, independent grids, hide/show of an enlarged column, scrollbar collapse/reappearance on viewport resize, negative offsets with RTL direction applied to the grid, and mounting on the virtual-scrolling page.

For the enabled fixture only, I restored the original public MPR and changed the new property default to true in a disposable copy of the MPK XML before running mx update-widgets and rebuilding. The widget JavaScript and this PR remain unchanged; the published default remains false.

Limitations: native mouse dragging timed out in the local Edge automation, so the resize check dispatches mouse events to the actual resize control. The RTL check applies CSS direction rather than using a translated Mendix fixture. Virtual-scrolling coverage is a mounting smoke test, not a full large-dataset scrolling regression. These remain reasons to keep the PR in draft.

The earlier Docker startup blocker is resolved. Maintainer approval for upstream workflows and access to the Snyk dependency findings are still needed.

[victordonetguerra]

Could a maintainer help clarify the failing Snyk dependency check on this PR? The detailed report requires access to the Mendix Snyk organization, so I cannot inspect the findings.

Could you share the affected packages and dependency paths, vulnerability IDs, and recommended fixed versions, and confirm whether the same findings also occur on main?

This PR changes no package manifests or lockfile. If these are existing baseline findings, could you advise whether the scrollbar improvement can be reviewed independently? If dependency updates are needed from our side, I can prepare a separate, focused PR with the minimum updates and compatibility validation.

The current PR description contains the completed local build, unit-test and runtime-validation results. Thank you for your help.

[leonardomendix]

Could a maintainer help clarify the failing Snyk dependency check on this PR? The detailed report requires access to the Mendix Snyk organization, so I cannot inspect the findings.

Could you share the affected packages and dependency paths, vulnerability IDs, and recommended fixed versions, and confirm whether the same findings also occur on main?

This PR changes no package manifests or lockfile. If these are existing baseline findings, could you advise whether the scrollbar improvement can be reviewed independently? If dependency updates are needed from our side, I can prepare a separate, focused PR with the minimum updates and compatibility validation.

The current PR description contains the completed local build, unit-test and runtime-validation results. Thank you for your help.

Hello,

First of all, thank you for your PR.

I have checked and found that the Snyk report is not related to the changes you made to your PR. This scan checks the entire repository, so any new PR will encounter the same failed check until we resolve the issue in the repository. But don't worry — it won't affect the next review steps for your PR.