Merge pull request #22 from krjakbrjak/VNI-use-table

Use table
krjakbrjak · Jan 7, 2024 · f4c9566 · f4c9566
2 parents 7463dba + 3d1827d
commit f4c9566
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 37 deletions.
diff --git 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",

diff --git a/src/SizeChecker.tsx b/src/SizeChecker.tsx
@@ -12,18 +12,8 @@ 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, classes: string) => ReactNode;
+    renderer: (data: Type) => ReactNode;
     fetcher: DataSource<Type>;
     on_ready: () => void;
 }
@@ -50,7 +40,7 @@ const SizeChecker = <Type,>({ renderer, fetcher, on_ready }: Args<Type>, ref: Re
                 return invisible.current.clientHeight;
             }
             return 0;
-        }
+        },
     }), [invisible]);
 
     useEffect(() => {
@@ -69,7 +59,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
@@ -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
@@ -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`);
                             }}