fix: sync table header scroll with body on horizontal scroll

Closes #4633

AntD's virtual Table (rc-table with virtual prop) syncs the header's
horizontal scroll position with the body internally. However, the sync
can drift after:
- column visibility changes (columns added/removed)
- resizable-column width updates that change scroll.x
- other re-renders that reset the header's scrollLeft

When drift occurs, the header columns appear misaligned with the body
columns whenever the user scrolls horizontally.

Fix: add a passive 'scroll' listener on .ant-table-body in
InfiniteVirtualTableInner that writes body.scrollLeft → header.scrollLeft
on every scroll tick. The effect re-attaches whenever finalColumns or
scrollConfig.x changes (the conditions under which drift can occur).

In the normal (no-drift) path AntD has already run its own sync handler,
so setting the same value is a no-op. When drift has occurred, this
listener corrects it on the very next scroll event without any visible
glitch.

Author: NamHT4Devlop

web/oss/src/components/InfiniteVirtualTable/components/InfiniteVirtualTableInner.tsx

@@ -446,6 +446,36 @@ const InfiniteVirtualTableInnerBase = <RecordType extends object>({
         tableHeaderHeight,
     ])
 
+    // Sync .ant-table-header scroll position with .ant-table-body on every horizontal scroll.
+    //
+    // AntD's virtual Table syncs header/body scroll internally, but it can lose sync after
+    // column visibility changes, resizes, or scroll-config updates that trigger a re-render.
+    // We attach our own passive scroll listener as a safety net: when it fires, the header is
+    // already correct (AntD's handler ran first), so this is a no-op in the happy path.
+    // When AntD's sync breaks, our listener corrects the header on the very next scroll tick.
+    useEffect(() => {
+        const container = containerRef.current
+        if (!container) return
+
+        const body = container.querySelector<HTMLElement>(".ant-table-body")
+        const header = container.querySelector<HTMLElement>(".ant-table-header")
+        if (!body || !header) return
+
+        const sync = () => {
+            if (header.scrollLeft !== body.scrollLeft) {
+                header.scrollLeft = body.scrollLeft
+            }
+        }
+
+        body.addEventListener("scroll", sync, {passive: true})
+        // Correct any drift that happened during the re-render that triggered this effect
+        sync()
+
+        return () => {
+            body.removeEventListener("scroll", sync)
+        }
+    }, [finalColumns, scrollConfig.x])
+
     // Memoize dependencies object to prevent unnecessary useEffect runs in useScrollContainer
     // Without memoization, a new object is created every render, causing infinite loops during scroll
     const scrollContainerDeps = useMemo(