Code prettier. Increase render speed. Update version

Author: NatterumW

demo/src/app/page.tsx

@@ -18,10 +18,16 @@ export default function Home() {
                             <td>ID</td>
                             <td width="25%">Name</td>
                             <td width="25%">Surname</td>
+                            <td>ID</td>
+                            <td width="25%">Name</td>
+                            <td width="25%"> Surname</td>
+                            <td>ID</td>
+                            <td width="25%">Name</td>
+                            <td width="25%">Surname</td>
                         </tr>
                     </thead>
                     <tbody>
-                        {Array(100)
+                        {Array(300)
                             .fill(null)
                             .map((item, index) => (
                                 <tr key={index}>
@@ -31,6 +37,12 @@ export default function Home() {
                                     <td>10000000000</td>
                                     <td>10000000000</td>
                                     <td>10000000000</td>
+                                    <td>10000000000</td>
+                                    <td>10000000000</td>
+                                    <td>10000000000</td>
+                                    <td>10000000000</td>
+                                    <td>10000000000</td>
+                                    <td>10000000000</td>
                                 </tr>
                             ))}
                     </tbody>

package.json

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

src/components/ReactTableScroll.tsx

@@ -12,27 +12,28 @@ const ReactTableScroll = ({ children }: IProps) => {
     const horizontalScrollRef = useRef<HTMLDivElement | any>(null);
     const targetRef = useRef<HTMLDivElement | any>(null);
     const { width, height } = useResizeDetector({ targetRef });
+    const tableContainerRef = useRef<HTMLDivElement | any>(null);
     const tableWrapperRef = useRef<HTMLDivElement | any>(null);
-    const [tableLeftPos, setTableLeftPos] = useState<number>(0);
 
     const diffSizes = (): boolean => {
-        return tableWrapperRef.current?.clientWidth > targetRef.current?.clientWidth;
+        return tableContainerRef.current?.clientWidth > targetRef.current?.clientWidth;
     };
 
     const handleResize = () => {
         const setValue = (value: number) => {
             setHorizontalScrollStyle({ width: value });
         };
         if (diffSizes()) {
-            setValue(tableWrapperRef.current?.clientWidth);
+            setValue(tableContainerRef.current?.clientWidth);
         } else {
             setValue(0);
         }
     };
 
     const onTableHorizontalScroll = () => {
         const posX: number = horizontalScrollRef.current?.scrollLeft ?? 0;
-        setTableLeftPos(posX);
+        const posY: number = horizontalScrollRef.current?.scrollTop ?? 0;
+        tableWrapperRef.current.scrollTo(posX, posY);
     };
 
     useEffect(() => {
@@ -41,8 +42,8 @@ const ReactTableScroll = ({ children }: IProps) => {
 
     return (
         <div className="rts__wrapper" ref={targetRef}>
-            <div className="rts-table__wrapper">
-                <div className="rts-table__container" ref={tableWrapperRef} style={{ left: -tableLeftPos }}>
+            <div className="rts-table__wrapper" ref={tableWrapperRef}>
+                <div className="rts-table__container" ref={tableContainerRef}>
                     {children}
                 </div>
             </div>

src/index.ts

@@ -1,3 +1,3 @@
 import ReactTableScroll from './components/ReactTableScroll';
 
-export { ReactTableScroll    };
+export { ReactTableScroll };