svelte-infinite-scroll integration

rollup.config.js

@@ -1,6 +1,7 @@
 import svelte from "rollup-plugin-svelte";
 import resolve from "@rollup/plugin-node-resolve";
 import pkg from "./package.json";
+import commonjs from 'rollup-plugin-commonjs';
 
 const name = pkg.name
   .replace(/^(@\S+\/)?(svelte-)?(\S+)/, "$3")
@@ -13,5 +14,5 @@ export default {
     { file: pkg.module, format: "es" },
     { file: pkg.main, format: "umd", name }
   ],
-  plugins: [svelte(), resolve()]
+  plugins: [svelte(), resolve(),commonjs()]
 };

src/index.svelte

@@ -9,6 +9,7 @@
 
   let wrapper;
   let tableSpace;
+  let isLoadMore = false;
 
   /**
    * Computes the 'left' value for a grid-cell.
@@ -155,6 +156,14 @@
   export let __scrollTop = 0; // DO NOT MODIFY DIRECTLY. The scrollTop position of the scrollable area
   export let __scrollLeft = 0; // DO NOT MODIFY DIRECTLY. The scrollLeft position of the scrollable area
   export let __scrolledAllTheWayToTheRight = false; // DO NOT MODIFY DIRECTLY. Whether the container is scrolled all the way to the right as of the last onscroll event
+  export let threshold = 0;
+  export let horizontal = false;
+  export let hasMore = true;
+  export let EnableCursor = false;
+  export let CurrentSelectedRow = 0;
+  export let Striped=false;
+
+
 
   onMount(() => {
     editHistory = new EditHistory(rows);
@@ -267,6 +276,8 @@
   }
 
   function onWindowKeyDown(event) {
+
+
     if (event.ctrlKey) {
       if (event.keyCode === 90) {
         undo();
@@ -278,6 +289,41 @@
         event.preventDefault();
       }
     }
+
+    if([38,40].includes(event.keyCode) && EnableCursor ){ 
+      const Direction=(event.keyCode==40)?1:0
+      moveCursorWithIndexRow(Direction)
+      event.preventDefault()
+    }
+
+  }
+
+  function moveCursorWithIndexRow(Direction){
+
+    const last=CurrentSelectedRow
+    if (Direction===1){
+      // upscroll code
+      if(rows.length-1>=CurrentSelectedRow+1){
+          CurrentSelectedRow++
+      }
+
+    } else {
+        // upscroll code
+        if(CurrentSelectedRow-1>=0){
+          CurrentSelectedRow--
+        }
+    }
+
+    if(last!==CurrentSelectedRow){
+      dispatch("changecursor",{CurrentSelectedRow});
+    }
+
+    if(Direction===1 && CurrentSelectedRow < rows.length){
+      tableSpace.scrollTop+=rowHeight
+    }else {
+      tableSpace.scrollTop-=(rowHeight)
+    }
+
   }
 
   /**
@@ -592,7 +638,7 @@
   /**
    * Sets updated scroll values when the scrollable area is scrolled
    */
-  function onScroll() {
+  function onScroll(e) {
     // get new scroll values from the scroll area
     const { scrollTop: newScrollTop, scrollLeft: newScrollLeft } = tableSpace;
 
@@ -611,6 +657,36 @@
     __scrolledAllTheWayToTheRight =
       Math.ceil(tableSpace.scrollWidth - tableSpace.scrollLeft) ===
       tableSpace.clientWidth;
+
+
+    //evaluates if the event is executed to load more data
+    const offset = horizontal? e.target.scrollWidth - e.target.clientWidth - e.target.scrollLeft
+                               : e.target.scrollHeight - e.target.clientHeight - e.target.scrollTop;
+
+    if (offset <= threshold) { 
+      if (!isLoadMore && hasMore) { 
+        dispatch("loadMore"); 
+      }
+      isLoadMore = true;
+    } else {
+      isLoadMore = false;
+    }
+
+  }
+
+  function mousewheel(event){
+
+    if(EnableCursor){
+
+      let Direction = Math.sign(event.deltaY);
+      const last=CurrentSelectedRow
+      if(!Direction){ Direction=(event.detail>0)?1:0 }
+      moveCursorWithIndexRow(Direction)
+
+      event.preventDefault()
+
+    }
+
   }
 
   /**
@@ -733,6 +809,23 @@
   };
 
   // const getCellLeft =getCellLeft
+  /**
+   * onclickrow
+  */
+
+  const onClickRow = (event) =>{
+
+    const Sender= event.target.offsetParent.offsetParent
+    const index = Sender.getAttribute('rownumber');
+    dispatch("clickrow",{index}); 
+
+    if(EnableCursor){
+      CurrentSelectedRow=parseInt(index,10)
+      dispatch("changecursor",{CurrentSelectedRow});
+    }
+
+  }
+
 </script>
 
 <style>
@@ -884,6 +977,17 @@
   .grid-cell:not(:last-child) {
     border-right: 1px solid #666;
   }
+
+  .selectedrow{
+    background-color: #0275d8;
+    color: #f7f7f7;
+    font-weight: bold;
+  }
+
+  .stripedRow{
+    background-color: #ccc;
+  }
+
 </style>
 
 <svelte:window
@@ -949,6 +1053,8 @@
     bind:this={tableSpace}
     bind:offsetHeight={__innerOffsetHeight}
     on:scroll={onScroll}
+    on:mousewheel={mousewheel}
+    on:DOMMouseScroll={mousewheel}
     style="height: 100%;"
     role="rowgroup">
 
@@ -988,11 +1094,16 @@
     <!-- Scrolling seems to perform better when not using a keyed each block -->
     {#each visibleRows as row, i}
       <div
-        class="grid-row"
+        class="grid-row "
         style="top: {getRowTop(row.i, rowHeight)}px; height: {rowHeight}px;
         width: {gridSpaceWidth}px;"
         role="row"
-        aria-rowindex={row.i}>
+        aria-rowindex={row.i}
+        rowNumber={row.i}
+        viewindex={i}
+        on:click={onClickRow}
+
+        >
         {#each columns as column, j}
           <div
             class="grid-cell"
@@ -1008,7 +1119,7 @@
                 {row}
                 on:valueupdate={onCellUpdated} />
             {:else}
-              <div class="cell-default">{row.data[column.dataName] || ''}</div>
+              <div style={column.style} class={`cell-default ${(row.i%2===0 &&Striped&& !(CurrentSelectedRow===row.i && EnableCursor))?' stripedRow ':''} ${(CurrentSelectedRow===row.i && EnableCursor)?'selectedrow':''}`}  >{row.data[column.dataName] || ''}</div>
             {/if}
           </div>
         {/each}