Fix scroll on mobile devices

Author: Natterum

package.json

@@ -1,6 +1,6 @@
 {
     "name": "react-table-scroll",
-    "version": "0.0.12b",
+    "version": "0.0.14b",
     "author": "Ontuzhev Viacheslav (Natterum)",
     "license": "MIT",
     "main": "./dist/cjs/index.js",

src/components/ReactTableScroll.tsx

@@ -10,12 +10,20 @@ interface IProps {
 
 const ReactTableScroll = ({ children }: IProps) => {
     const [horizontalScrollStyle, setHorizontalScrollStyle] = useState<object>({});
+    const [isMobileDevice, setIsMobileDevice] = useState<boolean>(false);
+
     const horizontalScrollRef = useRef<HTMLDivElement | null>(null);
     const targetRef = useRef<HTMLDivElement | null>(null);
     const tableContainerRef = useRef<HTMLDivElement | null>(null);
     const tableWrapperRef = useRef<HTMLDivElement | any>(null);
+
     const { width, height } = useResizeDetector({ targetRef: tableContainerRef });
 
+    const MobileDeviceDetector = () => {
+        const isMobile = /Mobi|Android/i.test(navigator.userAgent);
+        setIsMobileDevice(isMobile);
+    };
+
     const diffSizes = (): boolean => {
         if (tableContainerRef?.current && targetRef?.current) {
             return tableContainerRef.current?.clientWidth > targetRef.current?.clientWidth;
@@ -44,21 +52,28 @@ const ReactTableScroll = ({ children }: IProps) => {
 
     useEffect(() => {
         handleResize();
+        MobileDeviceDetector();
     }, [width, height]);
 
+    useEffect(() => {
+        MobileDeviceDetector();
+    }, []);
+
     return (
-        <div ref={targetRef}>
-            <div style={rtsTableWrapper} ref={tableWrapperRef}>
-                <div style={rtsTableContainer} ref={tableContainerRef}>
-                    {children}
+        <>
+            <div ref={targetRef}>
+                <div style={{ ...rtsTableWrapper, overflowX: isMobileDevice ? 'scroll' : 'hidden' }} ref={tableWrapperRef}>
+                    <div style={rtsTableContainer} ref={tableContainerRef}>
+                        {children}
+                    </div>
                 </div>
+                {diffSizes() && !isMobileDevice && (
+                    <div style={rtsTableScrollWrapper} ref={horizontalScrollRef} onScroll={onTableHorizontalScroll}>
+                        <div style={{ ...rtsTableScrollContent, ...horizontalScrollStyle }}></div>
+                    </div>
+                )}
             </div>
-            {diffSizes() && (
-                <div style={rtsTableScrollWrapper} ref={horizontalScrollRef} onScroll={onTableHorizontalScroll}>
-                    <div style={{ ...rtsTableScrollContent, ...horizontalScrollStyle }}></div>
-                </div>
-            )}
-        </div>
+        </>
     );
 };
 

src/styles.ts

@@ -1,7 +1,6 @@
 import { CSSProperties } from 'react';
 
 export const rtsTableWrapper: CSSProperties = {
-    overflowX: 'hidden',
     position: 'relative',
     width: '100%'
 };