something works

src/App.css

@@ -41,9 +41,9 @@
     width: 100%;
     max-width: 100%;
     overflow: hidden;
-    border: 1px solid #707070;
     padding: 10px;
     text-align: center;
+    font-size: 1.1em;
 }
 
 .Row {
@@ -62,9 +62,12 @@
 }
 
 .Cell {
-    max-width: 200px;
-    width: 200px;
+    width: 100%;
+    max-width: 100%;
     overflow: hidden;
+    border: 1px solid #BBB;
+    padding: 10px;
+    text-align: center;
     font-size: 0.8em;
 }
 

src/App.js

@@ -103,7 +103,7 @@ const VirtualScroll = ({gridHeight, count, rowHeight, row=Row, onScroll, records
          style={{maxHeight: gridHeight, height: gridHeight}} >
         <div className='GridContent' 
              style={{height: count*rowHeight, minHeight: count*rowHeight, maxHeight: count*rowHeight}} >
-            <div style={{height: skip*rowHeight}} />
+        { /*      <div style={{height: skip*rowHeight}} /> */ }
             {records && records.map((record,i) => 
                                             <Row key={i}>
                                                 {record.constructor.fields.map(field => 
@@ -111,7 +111,7 @@ const VirtualScroll = ({gridHeight, count, rowHeight, row=Row, onScroll, records
                                                         {record[field.name] === 'object' ? record[field.name].toString() :  record[field.name]}
                                                     </Cell>)}
                                             </Row>)}
-            <div style={{height: (count - skip - records.length)*rowHeight}} />
+        {/*            <div style={{height: (count - skip - records.length)*rowHeight}} /> */ }
         </div>
     </div>
     )
@@ -119,37 +119,8 @@ const VirtualScroll = ({gridHeight, count, rowHeight, row=Row, onScroll, records
 
 
 
-const Grid = ({sort, scroll, gridHeight, overload, setScroll, count, rowHeight, records, skip, model, cellDoubleClick}) =>  {
-    const viewport = useRef()
-    return (
-    <div className='GridViewport' 
-         onScroll={e => {
-             console.log((Math.abs(e.target.scrollTop - scroll)))
-                if (Math.abs(e.target.scrollTop - scroll) > gridHeight*overload/5){  
-                    setScroll(e.target.scrollTop); 
-                    //setRecords(null)
-                } }} 
-         style={{maxHeight: gridHeight, height: gridHeight}}
-         ref={e => e && e.scrollTo(0,scroll)}>
-
-        <div className='GridContent' 
-             style={{height: count*rowHeight, minHeight: count*rowHeight, maxHeight: count*rowHeight}} >
-            <div style={{height: skip*rowHeight}} />
-            {records && records.map((record,i) => 
-                                            <Row key={record._id || record.key}>
-                                                {model.fields.map(field => 
-                                                    <Cell onDoubleClick={e => cellDoubleClick(field.name, record[field.name], record._id)}>
-                                                        {record[field.name] === 'object' ? record[field.name].toString() :  record[field.name]}
-                                                    </Cell>)}
-                                            </Row>)}
-            <div style={{height: (count - skip - records.length)*rowHeight}} />
-        </div>
-    </div>
-    )
-}
 
-
-const ModelView = ({model, components:Components={Search, Count, GridHeader, Grid}, rowHeight=50, gridHeight=500, overload=2}) => {
+const ModelView = ({model, components:Components={Search, Count, GridHeader, Grid:VirtualScroll}, rowHeight=50, gridHeight=500, overload=2}) => {
 
 
 
@@ -160,7 +131,7 @@ const ModelView = ({model, components:Components={Search, Count, GridHeader, Gri
     const [count, setCount]   = useState(0)
 
     const [query,  setQuery]  = useState({})
-    const [cursorCalls,  setCursorCalls]  = useState({sort:[{}], skip: [0], limit: [gridHeight/rowHeight]})
+    const [cursorCalls,  setCursorCalls]  = useState({sort:[{}], skip: [0]/*, limit: [gridHeight/rowHeight]*/})
 
     const skip = cursorCalls.skip[0]
 
@@ -191,30 +162,20 @@ const ModelView = ({model, components:Components={Search, Count, GridHeader, Gri
                 <Components.Count> 
                     {count}
                 </Components.Count> 
-                <GridHeader fields={model.fields} 
+                <Components.GridHeader fields={model.fields} 
                             sort={cursorCalls.sort} 
                             onSort={sort => setCursorCalls({...cursorCalls,
                                 sort: [{[sort]: cursorCalls.sort[0][sort] === 1 ? -1 : 1}]
                             })}/>
 
-                {/*records && <Grid 
-                                scroll={scroll}
-                                setScroll={setScroll}
-                                gridHeight={gridHeight}
-                                overload={overload}
-                                count={count}
-                                rowHeight={rowHeight}
-                                records={records}
-                                skip={skip}
-                                model={model}
-                                /> */}
-                {records && <VirtualScroll 
+                {records && <Components.Grid 
                                 skip={skip}
                                 count={count}
                                 records={records}
                                 gridHeight={500} 
                                 rowHeight={50} 
                                 onScroll={(skip, limit) =>  {
+                                    limit = undefined;
                                     model.find(query, {...cursorCalls, limit: [limit], skip: [skip]}).then(records => Promise.all(records)).then(records => setRecords(records)).then(() =>
                                     setCursorCalls({...cursorCalls, limit: [limit], skip: [skip]}))
                                 }}/> }