something works

src/App.js

@@ -30,7 +30,7 @@ const Row = ({top, children}) =>
 
 const Cell = ({children, ...props}) =>
 <div className='Cell' {...props}>
-    {children}
+    {children && children.toString()}
 </div>
 
 
@@ -145,52 +145,66 @@ const GridHeader = ({fields, sort, onSort}) =>
     {fields.map(field => <GridHeaderItem field={field} sort={sort} onClick={() => onSort(field.name)}/>)}
 </div>
 
-const Grid = ({fields, sort, onSort}) => 
+const Grid = ({sort, scroll, gridHeight, overload, setScroll, count, rowHeight, records, skip, model, cellDoubleClick}) =>  {
+    const viewport = useRef()
+    return (
     <div className='GridViewport' 
          onScroll={e => {
-                if (Math.abs(e.target.scrollTop - scroll) > gridHeight*overload/3){  
+             console.log((Math.abs(e.target.scrollTop - scroll)))
+                if (Math.abs(e.target.scrollTop - scroll) > gridHeight*overload/5){  
                     setScroll(e.target.scrollTop); 
-                    setRecords(null)
+                    //setRecords(null)
                 } }} 
-         style={{maxHeight: gridHeight, height: gridHeight}}>
+         style={{maxHeight: gridHeight, height: gridHeight}}
+         ref={viewport}>
 
         <div className='GridContent' 
-             style={{height: totalCount*rowHeight}}
-             ref={e => setGridContentRef(e)}>
-            {console.log(records), records && records.map((record,i) => 
-                                            <Row top={(skip)*rowHeight}>
+             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, gridHeight, overload}) => {
-    const onScreenRowCount   = gridHeight/rowHeight
-    const overloadedRowCount = overload * onScreenRowCount
+const ModelView = ({model, components:Components={Search, Count, GridHeader, Grid}, rowHeight=50, gridHeight=500, overload=2}) => {
+    const onScreenRowCount   = Math.ceil(gridHeight/rowHeight)
+    const overloadedRowCount = Math.ceil(overload * onScreenRowCount)
     const [scroll, setScroll]                 = useState(0)
 
 
 
     const  onScreenFirstRowIndex = Math.floor(scroll/rowHeight)
-    let skip                  =  onScreenFirstRowIndex  - (overloadedRowCount - onScreenRowCount)/2;
+    let skipAbove             = Math.floor((overloadedRowCount - onScreenRowCount)/2);
+    let skip                  =  onScreenFirstRowIndex  - skipAbove 
 
-    if (skip < 0) skip = 0
 
     const [records, setRecords] = useState()
 
 
     const [search, setSearch] = useState("")
-    const [count, setCount]   = useState()
+    const [count, setCount]   = useState(0)
+
+    if (count - skip < overloadedRowCount) skip = count - overloadedRowCount 
+    if (skip < 0) skip = 0
 
     const [query,  setQuery]  = useState({})
-    const [cursorCalls,  setCursorCalls]  = useState({sort:{}, skip: [skip], limit: [overloadedRowCount]})
+    const [cursorCalls,  setCursorCalls]  = useState({sort:[{}], skip: skip ? [skip] : undefined, limit: overloadedRowCount ? [overloadedRowCount] : undefined})
 
     console.log(cursorCalls)
 
+    useEffect(() => {
+        setCursorCalls({sort:cursorCalls.sort, skip: skip ? [skip] : undefined, limit: overloadedRowCount ? [overloadedRowCount] : undefined})
+    }, [scroll])
+
     const timeout = useRef(0)
     useEffect(() => {
         clearInterval(timeout.current)
@@ -201,9 +215,11 @@ const ModelView = ({model, components:Components={Search, Count, GridHeader, Gri
 
     useEffect(() => {
         model.count(query, cursorCalls).then(count => setCount(count))
-        model.find(query, cursorCalls).then(records => setRecords(records))
+        model.find(query, cursorCalls).then(records => Promise.all(records)).then(records => setRecords(records))
     }, [query, model, cursorCalls])
 
+    //console.log(records)
+
     return (
         <>
                 <Components.Search value={search} onChange={({target: {value}}) => setSearch(value)}/>
@@ -215,7 +231,18 @@ const ModelView = ({model, components:Components={Search, Count, GridHeader, Gri
                             onSort={sort => setCursorCalls({...cursorCalls,
                                 sort: {[sort]: cursorCalls.sort[sort] === 1 ? -1 : 1}
                             })}/>
-                <Grid records={records}/>
+
+                {records && <Grid 
+                                scroll={scroll}
+                                setScroll={setScroll}
+                                gridHeight={gridHeight}
+                                overload={overload}
+                                count={count}
+                                rowHeight={rowHeight}
+                                records={records}
+                                skip={skip}
+                                model={model}
+                                /> }
         </>
     )
 }
@@ -228,13 +255,13 @@ const Admin = ({models, components:Components={ModelList, Search}}) => {
         <>
             <Components.ModelList models={models} onChange={(name) => setSelected(name)} selected={selected}/>
             <content>
+
                 {selected && <ModelView model={models[selected]} /> }
             </content>
         </>
     )
 }
 
-                //{selected && <ModelGrid key={selected} model={models[selected]} rowHeight={50} gridHeight={700} overload={5} query={query}/> }
 
 function App() {
     let [models, setModels] = useState()
@@ -245,10 +272,10 @@ function App() {
     console.log(query)
     const classes = models
     console.log(classes)
-    if (classes && Object.keys(classes).length){
-        classes.Good.find().then(goods => console.log(goods))
-        classes.Image.find().then(images => console.log(images))
-    }
+    //if (classes && Object.keys(classes).length){
+        //classes.Good.find().then(goods => console.log(goods))
+        //classes.Image.find().then(images => console.log(images))
+    //}
 
     return (
         <div className="App">