From c8f6188f5a3b21c91ca5887eb7911641b93a2107 Mon Sep 17 00:00:00 2001
From: Nikita Vakula <programmistov.programmist@gmail.com>
Date: Sun, 7 Jan 2024 16:21:14 +0100
Subject: [PATCH 1/3] Use table as an underlying element

Signed-off-by: Nikita Vakula <programmistov.programmist@gmail.com>
---
 src/SizeChecker.tsx   |  6 ++---
 src/VirtualTable.tsx  | 62 ++++++++++++++++++++++++++++---------------
 testApp/src/index.tsx |  5 ++--
 3 files changed, 47 insertions(+), 26 deletions(-)

diff --git a/src/SizeChecker.tsx b/src/SizeChecker.tsx
index 1e75729..0c75ef3 100644
--- a/src/SizeChecker.tsx
+++ b/src/SizeChecker.tsx
@@ -23,7 +23,7 @@ interface Rect {
 }
 
 interface Args<Type> {
-    renderer: (data: Type, classes: string) => ReactNode;
+    renderer: (data: Type) => ReactNode;
     fetcher: DataSource<Type>;
     on_ready: () => void;
 }
@@ -50,7 +50,7 @@ const SizeChecker = <Type,>({ renderer, fetcher, on_ready }: Args<Type>, ref: Re
                 return invisible.current.clientHeight;
             }
             return 0;
-        }
+        },
     }), [invisible]);
 
     useEffect(() => {
@@ -69,7 +69,7 @@ const SizeChecker = <Type,>({ renderer, fetcher, on_ready }: Args<Type>, ref: Re
                 position: 'absolute',
                 pointerEvents: 'none'
             }}>
-                {renderer(data[0], '')}
+                {renderer(data[0])}
             </div>
         );
     }
diff --git a/src/VirtualTable.tsx b/src/VirtualTable.tsx
index 140db06..c0e501e 100644
--- a/src/VirtualTable.tsx
+++ b/src/VirtualTable.tsx
@@ -7,7 +7,7 @@
 import React, {
     useReducer, useEffect, useRef, ReactNode,
 } from 'react';
-import { Container, Row, Col } from 'react-bootstrap';
+import { Container, Row, Col, Table } from 'react-bootstrap';
 import PropTypes from 'prop-types';
 
 import { fetch_items, get_items } from './helpers/collections';
@@ -25,9 +25,10 @@ import SizeChecker from './SizeChecker';
 import './base.css';
 
 interface Args<Type> {
-    renderer: (data: Type, classes: string) => ReactNode;
+    renderer: (data: Type) => ReactNode;
     fetcher: DataSource<Type>;
     style?: Style;
+    striped?: boolean;
 }
 
 function calculatePageCount(pageHeight: number, itemHeight: number) {
@@ -41,7 +42,7 @@ function calculatePageCount(pageHeight: number, itemHeight: number) {
  *
  * @component
  */
-export default function VirtualTable<Type>({ renderer, fetcher, style }: Args<Type>): JSX.Element {
+export default function VirtualTable<Type>({ renderer, fetcher, style, striped }: Args<Type>): JSX.Element {
     const ref = useRef(null);
     const invisible = useRef(null);
     const scrolldiv = useRef(null);
@@ -67,7 +68,18 @@ export default function VirtualTable<Type>({ renderer, fetcher, style }: Args<Ty
             } else if (i + offset === state.hovered && style) {
                 className = `${className} ${style.hover}`;
             }
-            ret.push(<div key={i}>{renderer(d[i], className)}</div>);
+            ret.push(<tr key={i} style={{
+                padding: 0,
+                width: '100%',
+            }}>
+                <td className={className} style={{
+                    padding: 0,
+                    width: '100%',
+                    textOverflow: 'ellipsis',
+                }}>
+                    {renderer(d[i])}
+                </td>
+            </tr>);
         }
         return ret;
     };
@@ -154,10 +166,10 @@ export default function VirtualTable<Type>({ renderer, fetcher, style }: Args<Ty
             })} fetcher={fetcher} renderer={renderer} />
             <Container className='position-relative' style={{ padding: 0, height: '100%', width: '100%'}}>
                 <Row style={{ padding: 0, height: '100%', width: '100%' }}>
-                    <Col style={{ padding: 0, height: '100%' }} className='position-relative'>
+                    <Col style={{ padding: 0, height: '100%', width: '100%' }} className='position-relative'>
                         <div
                             ref={ref}
-                            className='overflow-hidden'
+                            className='overflow-hidden position-relative'
                             style={{
                                 padding: 0,
                                 top: 0,
@@ -167,7 +179,18 @@ export default function VirtualTable<Type>({ renderer, fetcher, style }: Args<Ty
                                 height: '100%',
                             }}
                         >
-                            {get_height() !== 0 && state.data && generate(Math.floor(state.scrollTop / get_height()), get_items(Math.floor(state.scrollTop / get_height()), state.data))}
+                            <Table className='position-relative' striped={striped} borderless style={{
+                                padding: 0,
+                                width: '100%',
+                                tableLayout: 'fixed'
+                            }}
+                            >
+                                <tbody style={{
+                                    padding: 0,
+                                }}>
+                                    {get_height() !== 0 && state.data && generate(Math.floor(state.scrollTop / get_height()), get_items(Math.floor(state.scrollTop / get_height()), state.data))}
+                                </tbody>
+                            </Table>
                         </div>
                         <div
                             ref={scrolldiv}
@@ -183,27 +206,22 @@ export default function VirtualTable<Type>({ renderer, fetcher, style }: Args<Ty
                                 const position = Math.floor((e.clientY + ref.current.scrollTop - scrolldiv.current.getBoundingClientRect().top) / get_height());
                                 const offset = Math.floor(state.scrollTop / get_height());
                                 const index = position + offset;
-                                const childElement = ref.current.children[index - Math.floor(state.scrollTop / get_height())];
-                                if (childElement) {
-                                    const event = new Event('mouseover', { bubbles: true, cancelable: false });
-                                    childElement.children[0].dispatchEvent(event);
-                                    dispatch({
-                                        type: SELECT,
-                                        payload: {
-                                            selection: Selection.HOVER,
-                                            index,
-                                        },
-                                    });
-                                }
+                                dispatch({
+                                    type: SELECT,
+                                    payload: {
+                                        selection: Selection.HOVER,
+                                        index,
+                                    },
+                                });
                             }}
                             onClick={(e) => {
                                 const position = Math.floor((e.clientY + ref.current.scrollTop - scrolldiv.current.getBoundingClientRect().top) / get_height());
                                 const offset = Math.floor(state.scrollTop / get_height());
                                 const index = position + offset;
-                                const childElement = ref.current.children[index - Math.floor(state.scrollTop / get_height())];
+                                const childElement = ref.current.children[0].children[0].children[index - Math.floor(state.scrollTop / get_height())];
                                 if (childElement) {
                                     const clickEvent = new Event('click', { bubbles: true, cancelable: false });
-                                    childElement.children[0].dispatchEvent(clickEvent);
+                                    childElement.children[0].children[0].dispatchEvent(clickEvent);
                                     dispatch({
                                         type: SELECT,
                                         payload: {
@@ -238,7 +256,9 @@ VirtualTable.propTypes = {
     renderer: PropTypes.func.isRequired,
     fetcher: PropTypes.object.isRequired,
     style: PropTypes.object,
+    striped: PropTypes.bool,
 };
 
 VirtualTable.defaultProps = {
+    striped: false,
 };
diff --git a/testApp/src/index.tsx b/testApp/src/index.tsx
index 0b6d6c6..b89bbb9 100644
--- a/testApp/src/index.tsx
+++ b/testApp/src/index.tsx
@@ -41,9 +41,10 @@ function App() {
                 <Col />
                 <Col style={{height: 400}}>
                     <VirtualTable<number>
+                        striped
                         style={style}
-                        renderer={(i, classes) => <div
-                            className={`text-center border rounded-pill p-3 ${classes}`}
+                        renderer={(i) => <div
+                            className={`text-center p-3`}
                             onClick={(e) => {
                                 console.log(`${i} clicked`);
                             }}

From 778c3ded389daa155e480114a036c2c59730d213 Mon Sep 17 00:00:00 2001
From: Nikita Vakula <programmistov.programmist@gmail.com>
Date: Sun, 7 Jan 2024 22:28:09 +0100
Subject: [PATCH 2/3] Removed unused type

Signed-off-by: Nikita Vakula <programmistov.programmist@gmail.com>
---
 src/SizeChecker.tsx | 10 ----------
 1 file changed, 10 deletions(-)

diff --git a/src/SizeChecker.tsx b/src/SizeChecker.tsx
index 0c75ef3..e44fabb 100644
--- a/src/SizeChecker.tsx
+++ b/src/SizeChecker.tsx
@@ -12,16 +12,6 @@ import './base.css';
 
 import { DataSource, } from './helpers/types';
 
-/**
- * Represent the rectangular.
- */
-interface Rect {
-    x: number;
-    y: number;
-    height: number;
-    width: number;
-}
-
 interface Args<Type> {
     renderer: (data: Type) => ReactNode;
     fetcher: DataSource<Type>;

From 3d1827d5efbaf4736ab2fbacf2de4a7778b5653d Mon Sep 17 00:00:00 2001
From: Nikita Vakula <programmistov.programmist@gmail.com>
Date: Sun, 7 Jan 2024 22:44:57 +0100
Subject: [PATCH 3/3] Bumped version to 1.1.12

Signed-off-by: Nikita Vakula <programmistov.programmist@gmail.com>
---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index ac9ec13..73c1c9b 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@krjakbrjak/virtualtable",
-    "version": "1.1.11",
+    "version": "1.1.12",
     "description": "",
     "repository": {
         "type": "git",