✨ 📝 Added ability to past onHeaderUpdate for custom header actions.…

… Added usage info and details of what has been added in this fork.

README.md

@@ -1,8 +1,30 @@
 [![npm](https://img.shields.io/npm/v/svelte-data-grid.svg?style=flat-square)](https://npmjs.org/package/svelte-data-grid)
-# Svelte Data Grid
+# Svelte Data Grid, slightly enhanced
+
+This is a fork of [gamalielmendez's fork](https://github.com/gamalielmendez/svelte-data-grid)
+of [svelte-data-grid](https://github.com/bsssshhhhhhh/svelte-data-grid).
+
+gamalielmendez's fork added:
+- Infinite scroll
+- Ability to select row
+- Move selection cursor with mouse wheel
+- Changecursor event
+- Move cursor with the keyboard arrows
+- Striped rows
+
+This fork added/fixed:
+- Render "" instead of "undefined" if no data
+- Changed `on:change` to `on:blur` per warning message
+- Added tableWidth prop, allow last column to have auto width
+- Fixed input loses focus
+- Added debounce
+- Fixed dispatch
+- Added align prop
+- Lighter border colors
+- Added onCellUpdate and onHeaderUpdate (see usage below)
 
 ## [Demo](https://bsssshhhhhhh.github.io/svelte-data-grid-demo/)
-
+### [Demo repo](https://github.com/bsssshhhhhhh/svelte-data-grid-demo)
 
 Svelte Data Grid is a svelte v3 component for displaying and editing any amount of data.
 
@@ -197,6 +219,45 @@ import MyCustomCell from './MyCustomCell.svelte';
 ## Custom Header Components
 Header components can also be specified in `columns` entries as the `headerComponent` property. Header components are only passed `column`, the column object from `columns`.
 
+## onCellUpdate, onHeaderUpdate
+
+`on:valueUpdated={handler}` doesn't seem to work for me (at least not for textbox-cell, `event.*` were all `undefined`).
+Thus, `onCellUpdate` callback is added for cell updates.
+
+Likewise,`onHeaderUpdate` callback is added for custom events trigger on a custom header column. Eg.
+
+MyCustomHeaderCol.svelte
+```svelte
+<script>
+  export function onUpdate(action) {
+    dispatch('update', {
+      action,
+    })
+  }
+</script>
+
+<i on:click={evt => onUpdate('someAction')}>
+```
+
+MyCustomHeaderCol.svelte
+```svelte
+<script>
+  $: columns = [ ...otherCols,
+    { headerComponent: MyCustomHeaderCol, disallowResize: true },
+  ]
+  const onCellUpdate = (event) => {
+    const { rowNumber, value } = event.detail
+  }
+  const onHeaderUpdate = (event) => {
+    const { action } = event.detail
+  }
+</script>
+<DataGrid {rows} {columns} {...props} {tableWidth}
+  {onHeaderUpdate}
+  {onCellUpdate}
+/>
+```
+
 ## Options:
 
 Svelte Data Grid provides a few options for controlling the grid and its interactions:

src/index.svelte

@@ -164,6 +164,7 @@
   export let Striped=false;
   export let tableWidth=0; // allow user to define table width
   export let onCellUpdate = () => {}
+  export let onHeaderUpdate = () => {}
 
   onMount(() => {
     editHistory = new EditHistory(rows);
@@ -340,9 +341,11 @@
   }
 
   /**
-   * DOESN'T WORK!
    * Event handler for when a value has been updated
    * @param {Object} event Event object with row and column objects
+   * @note `on:valueUpdated={handler}` doesn't seem to work for me
+   * (at least not for textbox-cell, `event.*` were all `undefined`).
+   * Thus, `onCellUpdate` callback is added and will be used instead.
    */
   function onCellUpdated(event) {
     rows[event.detail.rowNumber][event.detail.column.dataName] =
@@ -974,7 +977,6 @@
   .stripedRow{
     background-color: #ccc;
   }
-
 </style>
 
 <svelte:window
@@ -1016,7 +1018,9 @@
           use:dragCopy={allowColumnReordering}
           role="columnheader">
           {#if column.headerComponent}
-            <svelte:component this={column.headerComponent} {column} />
+            <svelte:component this={column.headerComponent} {column} 
+              on:update={onHeaderUpdate}
+            />
           {:else}
             <div class="cell-default">{column.display || ''}</div>
           {/if}

src/textbox-cell.svelte

@@ -8,6 +8,8 @@
   export let updateRate=2000;
   let prevColumn;
   let prevRow;
+  let timeoutId;
+
   // [svelte-upgrade warning]
   // beforeUpdate and afterUpdate handlers behave
   // differently to their v2 counterparts
@@ -24,9 +26,6 @@
       prevColumn = column;
     }
   });
-  // [svelte-upgrade warning]
-  // beforeUpdate and afterUpdate handlers behave
-  // differently to their v2 counterparts
   afterUpdate(() => {
     /* Since data-grid isn't using a keyed each block to display the rows, we need to update
       the focus as the grid scrolls. When this cell component receives a new row, check if the column's active row
@@ -40,21 +39,19 @@
       prevRow = row;
     }
   });
-  // [svelte-upgrade suggestion]
-  // review these functions and remove unnecessary 'export' keywords
-  export function onFocus(event) {
+
+  function onFocus(event) {
     column.activeRow = rowNumber;
   }
-  export function onBlur(event) {
+  function onBlur(event) {
     // if blur event was user-initiated and not initiated by the blur call above,
     // remove the activeRow property
     if (event.sourceCapabilities) {
       delete column.activeRow;
     }
     else event.srcElement.focus() // First inputbox loses focus after 1st char for some reason 
   }
-  let timeoutId
-  export function onInput(event) {
+  function onInput(event) {
     const value = textbox.value;
     clearTimeout(timeoutId)
     timeoutId = setTimeout(() => {