fix(dataGrid): header unscrollable in infinite scroll

packages/ibm-products-styles/src/__tests__/__snapshots__/styles.test.js.snap

@@ -3978,6 +3978,12 @@ p.c4p--about-modal__copyright-text:first-child {
 .c4p--datagrid .c4p--datagrid__head-wrap {
   overflow: hidden;
   background-color: var(--cds-layer-accent);
+  scrollbar-width: none; /* Firefox */
+  -ms-overflow-style: none; /* IE and Edge */
+}
+
+.c4p--datagrid .c4p--datagrid__head-wrap::-webkit-scrollbar {
+  display: none;
 }
 
 .c4p--datagrid .cds--action-list .cds--btn.c4p--button-menu {
@@ -8881,8 +8887,9 @@ button.c4p--add-select__global-filter-toggle--open {
   text-align: left;
 }
 .c4p--tag-set-overflow__tagset-popover .c4p--tag-set-overflow__popover-trigger {
-  font-family: inherit;
+  /* stylelint-disable-next-line declaration-no-important */
   border: none !important;
+  font-family: inherit;
 }
 .c4p--tag-set-overflow__tagset-popover .c4p--tag-set-overflow__show-all-tags-link.cds--link:visited {
   display: inline-block;

packages/ibm-products-styles/src/components/Datagrid/styles/_datagrid.scss

@@ -781,6 +781,13 @@
 .#{$block-class} .#{c4p-settings.$pkg-prefix}--datagrid__head-wrap {
   overflow: hidden;
   background-color: $layer-accent;
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+
+.#{$block-class}
+  .#{c4p-settings.$pkg-prefix}--datagrid__head-wrap::-webkit-scrollbar {
+  display: none;
 }
 
 .#{$block-class}

packages/ibm-products/src/components/Datagrid/Datagrid/DatagridVirtualBody.tsx

@@ -85,23 +85,38 @@ const DatagridVirtualBody = (datagridState: DataGridState) => {
       headEle.style.display = 'flex';
     } // scrollbar width to header column to fix header alignment
 
-    function handleScroll(event) {
+    // Syncs header scroll position when virtual body is scrolled
+    function handleVirtualScrollX(event) {
       const virtualBody = event.target;
       if (headWrapEl) {
         headWrapEl.scrollLeft = virtualBody?.scrollLeft;
       }
     }
 
+    // Syncs virtual body scroll position when header is scrolled
+    function handleHeaderScrollX(event) {
+      const header = event.target;
+
+      if (testRef && testRef.current) {
+        testRef.current.scrollLeft = header?.scrollLeft;
+        // this prevents the scroll bar from over exceeding the vertical scroll bar compensation in the right
+        header.scrollLeft = testRef.current.scrollLeft;
+      }
+    }
+
     const testRefValue = testRef?.current;
-    testRefValue?.addEventListener('scroll', handleScroll);
+    testRefValue?.addEventListener('scroll', handleVirtualScrollX);
+    headWrapEl?.addEventListener('scroll', handleHeaderScrollX);
     return () => {
-      testRefValue?.removeEventListener('scroll', handleScroll);
+      testRefValue?.removeEventListener('scroll', handleVirtualScrollX);
+      headWrapEl?.removeEventListener('scroll', handleHeaderScrollX);
     };
   });
 
   useIsomorphicEffect(() => {
     if (headWrapRef.current && headWrapRef.current.style) {
       headWrapRef.current.style.width = `${gridRef?.current?.clientWidth}px`;
+      headWrapRef.current.style.overflowX = 'auto';
     }
   }, [headWrapRef, gridRef]);