@likable-hair/svelte 3.3.14 → 3.3.16

package/dist/components/composed/list/DynamicTable.svelte

@@ -13,7 +13,7 @@
   ToolTip
 } from "../../..";
 import { DateTime } from "luxon";
-import { createEventDispatcher, onMount } from "svelte";
+import { createEventDispatcher, onMount, tick } from "svelte";
 import { quintOut } from "svelte/easing";
 import { crossfade, fade } from "svelte/transition";
 import Filters from "../search/Filters.svelte";
@@ -36,6 +36,24 @@ onMount(() => {
   updateHeaderHeight();
   window.addEventListener("resize", updateHeaderHeight);
   tableContainer.addEventListener("scroll", setReachedBottomOrTop);
+  if (tableContainer.scrollHeight <= tableContainer.clientHeight) {
+    tableContainer.style.marginRight = "0px";
+  }
+  if (resizableColumns) {
+    for (const head of [...headers, { value: "non-resizable", minWidth: DEFAULT_MIN_WIDTH_PX + "px", maxWidth: DEFAULT_MAX_WIDTH_PX + "px" }, { value: "slot-append", minWidth: DEFAULT_MIN_WIDTH_PX + "px", maxWidth: DEFAULT_MAX_WIDTH_PX + "px" }]) {
+      let th;
+      if (head.value == "non-resizable" || head.value == "slot-append") {
+        th = document.getElementsByClassName(head.value).item(0);
+      } else {
+        th = document.getElementById(head.value);
+      }
+      if (!!th) {
+        resizeHeader(th, head);
+      }
+    }
+    let table = document.getElementsByClassName("table")[0];
+    table.classList.add("resizable");
+  }
   return () => {
     window.removeEventListener("resize", updateHeaderHeight);
     tableContainer.removeEventListener("scroll", setReachedBottomOrTop);
@@ -86,8 +104,9 @@ const [send, receive] = crossfade({
 let clazz = {};
 export { clazz as class };
 const dispatch = createEventDispatcher();
-export let headers = [], headersToShowInTable = headers, subHeaders = [], customizeHeaders = false, rows = [], sortedBy = void 0, sortDirection = "asc", cellEdit = false, noItemsText = "No items to show", showSelect = false, showSelectContainer = true, selectMode = "single", selectedItems = [], showExpand = false, loading = false, disabled = false, filters = [], searchBarColumns = void 0, searchBarVisible = false, searchBarPlaceholder = "Type to search for identification code, description and MRN...", filtersVisible = false, quickFiltersVisible = false, lang = "en", editFilterMode = "one-edit", showActiveFilters = true, quickFilters = [], actionsForSelectedItems = [], totalRows = rows.length, searchText = void 0, renderedRowsNumber = 100, sectionRowsNumber = 20, sectionThreshold = 2, backwardThresholdPixel = 100, forwardThresholdPixel = 100, uniqueKey = "id", numberOfResultsVisible = false, endLineVisible = false;
-let openCellEditor = false, cellEditorActivator, cellEditorContainer, menuElementCellEditor, menuElementQuickFilters, cellEditorInfoActive, saveEditDisabled = false, searchBarInput = void 0, openQuickFilter = false, quickFilterActivator, quickFilterActive, globalBuilder = new FilterBuilder(), slotSelectActionsContainer, isSelectedAll = false, calendarOpened = false, calendarOpened2 = false, selectedIndexes = [], cellEditorIndexRow, cellEditorIndexHeader, cellEditorSubItem, currentSectionNumber = 0, tableBody, tableContainer, userScrolling = true, reachedBottom = false, reachedTop = false;
+export let headers = [], headersToShowInTable = headers, subHeaders = [], customizeHeaders = false, rows = [], sortedBy = void 0, sortDirection = "asc", cellEdit = false, noItemsText = "No items to show", showSelect = false, showSelectContainer = true, selectMode = "single", selectedItems = [], showExpand = false, loading = false, disabled = false, filters = [], searchBarColumns = void 0, searchBarVisible = false, searchBarPlaceholder = "Type to search for identification code, description and MRN...", filtersVisible = false, quickFiltersVisible = false, lang = "en", editFilterMode = "one-edit", showActiveFilters = true, quickFilters = [], actionsForSelectedItems = [], totalRows = rows.length, searchText = void 0, renderedRowsNumber = 100, sectionRowsNumber = 20, sectionThreshold = 2, backwardThresholdPixel = 100, forwardThresholdPixel = 100, uniqueKey = "id", numberOfResultsVisible = false, endLineVisible = false, resizableColumns = false, resizedColumnSizeWithPadding = {};
+let openCellEditor = false, cellEditorActivator, cellEditorContainer, menuElementCellEditor, menuElementQuickFilters, cellEditorInfoActive, saveEditDisabled = false, searchBarInput = void 0, openQuickFilter = false, quickFilterActivator, quickFilterActive, globalBuilder = new FilterBuilder(), slotSelectActionsContainer, isSelectedAll = false, calendarOpened = false, calendarOpened2 = false, selectedIndexes = [], cellEditorIndexRow, cellEditorIndexHeader, cellEditorSubItem, currentSectionNumber = 0, tableBody, tableContainer, userScrolling = true, reachedBottom = false, reachedTop = false, resizing = false, remainingWidth = 0;
+const DEFAULT_MIN_WIDTH_PX = 100, DEFAULT_MAX_WIDTH_PX = 400;
 $:
   totalSections = (totalRows - renderedRowsNumber) / sectionRowsNumber;
 $:
@@ -117,7 +136,7 @@ function saveHeadersToShow() {
   openHeaderDrawer = false;
 }
 function handleHeaderClick(header) {
-  if (header.sortable && !loading) {
+  if (header.sortable && !loading && !resizing) {
     if (!!sortedBy && header.value == sortedBy) {
       if (sortDirection == "asc")
         sortDirection = "desc";
@@ -595,7 +614,7 @@ function handleRemoveFilter(filter) {
   dispatch("removeFilter", { filter });
   handleSearchChange(searchText);
 }
-function handleLoadForward() {
+async function handleLoadForward() {
   if (renderedRows.length >= renderedRowsNumber) {
     userScrolling = false;
     const anchorIndex = renderedRowsNumber - 1;
@@ -613,42 +632,42 @@ function handleLoadForward() {
       }
     }
     currentSectionNumber = currentSectionNumber + 1;
-    setTimeout(() => {
-      const anchorElementAfter = findAnchorElement(anchorUniqueKey);
-      const anchorOffsetAfter = anchorElementAfter?.getBoundingClientRect().top || 0;
-      const offsetDiff = anchorOffsetAfter - anchorOffsetBefore;
-      tableContainer.scrollTop += offsetDiff;
-      userScrolling = true;
-    }, 10);
+    await tick();
+    const anchorElementAfter = findAnchorElement(anchorUniqueKey);
+    const anchorOffsetAfter = anchorElementAfter?.getBoundingClientRect().top || 0;
+    const offsetDiff = anchorOffsetAfter - anchorOffsetBefore;
+    tableContainer.scrollTop += offsetDiff;
+    userScrolling = true;
   }
   if (totalCachedSections - sectionThreshold <= currentSectionNumber && !loading && totalRows > rows.length) {
     dispatch("fetchData", {});
   }
 }
-function handleLoadBackward() {
-  userScrolling = false;
-  const anchorIndex = 0;
-  const anchorUniqueKey = renderedRows[anchorIndex].item[uniqueKey];
-  const anchorElement = findAnchorElement(anchorUniqueKey);
-  const anchorOffsetBefore = anchorElement?.getBoundingClientRect().top || 0;
-  let removedRowCount = 0;
-  for (let i = renderedRows.length - 1; removedRowCount < sectionRowsNumber; i--) {
-    let row = tableBody.children.item(i);
-    removedRowCount++;
-    const rowKey = row?.getAttribute("data-key");
-    const isExpanded = expandedRows.some((r) => r.item[uniqueKey] == rowKey);
-    if (isExpanded) {
-      i--;
+async function handleLoadBackward() {
+  if (currentSectionNumber > 0) {
+    userScrolling = false;
+    const anchorIndex = 0;
+    const anchorUniqueKey = renderedRows[anchorIndex].item[uniqueKey];
+    const anchorElement = findAnchorElement(anchorUniqueKey);
+    const anchorOffsetBefore = anchorElement?.getBoundingClientRect().top || 0;
+    let removedRowCount = 0;
+    for (let i = renderedRows.length - 1; removedRowCount < sectionRowsNumber; i--) {
+      let row = tableBody.children.item(i);
+      removedRowCount++;
+      const rowKey = row?.getAttribute("data-key");
+      const isExpanded = expandedRows.some((r) => r.item[uniqueKey] == rowKey);
+      if (isExpanded) {
+        i--;
+      }
     }
-  }
-  currentSectionNumber = currentSectionNumber - 1;
-  setTimeout(() => {
+    currentSectionNumber = currentSectionNumber - 1;
+    await tick();
     const anchorElementAfter = findAnchorElement(anchorUniqueKey);
     const anchorOffsetAfter = anchorElementAfter?.getBoundingClientRect().top || 0;
     const offsetDiff = anchorOffsetAfter - anchorOffsetBefore;
     tableContainer.scrollTop += offsetDiff;
     userScrolling = true;
-  }, 10);
+  }
 }
 function findAnchorElement(key) {
   for (let i = 0; i < tableBody.children.length; i++) {
@@ -659,6 +678,110 @@ function findAnchorElement(key) {
   }
   return void 0;
 }
+function resize(node) {
+  let th = node.parentElement;
+  let resizingInner = false;
+  if (!!th) {
+    let mouseMoveHandler = function(e) {
+      if (resizingInner && !!th && !!tableContainer) {
+        width += e.movementX;
+        const { paddingLeft, paddingRight } = getComputedStyle(th);
+        const minWidth = headers.find((h) => h.value === th.id)?.minWidth;
+        let minWidthPx;
+        if (!!minWidth && minWidth.endsWith("px")) {
+          minWidthPx = parseInt(minWidth, 10);
+        }
+        const maxWidth = headers.find((h) => h.value === th.id)?.maxWidth;
+        let maxWidthPx;
+        if (!!maxWidth && maxWidth.endsWith("px")) {
+          maxWidthPx = parseInt(maxWidth, 10);
+        }
+        const actualMinWidth = (minWidthPx || DEFAULT_MIN_WIDTH_PX) - parseFloat(paddingLeft) - parseFloat(paddingRight);
+        const actualMaxWidth = (maxWidthPx || DEFAULT_MAX_WIDTH_PX) - parseFloat(paddingLeft) - parseFloat(paddingRight);
+        if (width > actualMinWidth && width < actualMaxWidth) {
+          th.style.width = width + "px";
+          resizedColumnSizeWithPadding[th.id] = th.getBoundingClientRect().width;
+          resizedColumnSizeWithPadding = resizedColumnSizeWithPadding;
+        }
+      }
+    }, mouseUpHandler = function(e, setResize = true) {
+      if (!!th) {
+        resizingInner = false;
+        let { paddingLeft, paddingRight } = getComputedStyle(th);
+        width = th.getBoundingClientRect().width - parseFloat(paddingLeft) - parseFloat(paddingRight);
+        if (setResize) {
+          setTimeout(() => resizing = false, 20);
+        }
+        dispatch("columnResize", {
+          id: th.id,
+          newWidthPx: width
+        });
+      }
+    }, mouseDownHandler = function(e) {
+      if (!!th) {
+        resizing = true;
+        resizingInner = true;
+        let { paddingLeft, paddingRight } = getComputedStyle(th);
+        width = th.getBoundingClientRect().width - parseFloat(paddingLeft) - parseFloat(paddingRight);
+      }
+    };
+    let { width } = th.getBoundingClientRect();
+    node.addEventListener("mousedown", mouseDownHandler);
+    document.addEventListener("mouseup", mouseUpHandler);
+    document.addEventListener("mousemove", mouseMoveHandler);
+    return {
+      destroy() {
+        node.removeEventListener("mousedown", mouseDownHandler);
+        document.removeEventListener("mouseup", mouseUpHandler);
+        document.removeEventListener("mousemove", mouseMoveHandler);
+      }
+    };
+  }
+}
+$:
+  if (resizableColumns && !!tableContainer && resizableColumns && headersToShowInTable.length > 0 && resizedColumnSizeWithPadding && headersToShow.length > 0 && mainHeader) {
+    tick().then(updateRemainingWidth);
+  }
+async function updateRemainingWidth() {
+  if (tableContainer != null && !!tableContainer) {
+    const containerWidth = tableContainer?.getBoundingClientRect().width - 30;
+    if (containerWidth) {
+      const totalResizableWidth = headersToShowInTable.reduce((sum, head) => {
+        let th = document.getElementById(head.value);
+        if (!!th) {
+          resizeHeader(th, head);
+        }
+        const width = th?.getBoundingClientRect().width || 0;
+        return sum + width + 1;
+      }, 0);
+      const extraStaticWidth = Array.from(mainHeader.querySelectorAll("th.non-resizable, th.slot-append, th.customize-headers")).reduce((sum, th) => sum + th.getBoundingClientRect().width + 1, 0);
+      remainingWidth = Math.max(0, containerWidth - totalResizableWidth - extraStaticWidth);
+    }
+  }
+}
+function resizeHeader(th, header) {
+  if (!resizedColumnSizeWithPadding[header.value]) {
+    let widthWihtPadding = th.getBoundingClientRect().width;
+    let minWidth = header.minWidth, minWidthPx = DEFAULT_MIN_WIDTH_PX;
+    if (!!minWidth && minWidth.endsWith("px")) {
+      minWidthPx = parseInt(minWidth, 10);
+    }
+    if (widthWihtPadding < minWidthPx) {
+      widthWihtPadding = minWidthPx;
+    }
+    let maxWidth = header.maxWidth, maxWidthPx = DEFAULT_MAX_WIDTH_PX;
+    if (!!maxWidth && maxWidth.endsWith("px")) {
+      maxWidthPx = parseInt(maxWidth, 10);
+    }
+    if (widthWihtPadding > maxWidthPx) {
+      widthWihtPadding = maxWidthPx;
+    }
+    resizedColumnSizeWithPadding[header.value] = widthWihtPadding;
+  }
+  let { paddingLeft, paddingRight } = getComputedStyle(th);
+  let width = resizedColumnSizeWithPadding[header.value] - parseFloat(paddingLeft) - parseFloat(paddingRight);
+  th.style.width = `${width}px`;
+}
 </script>
 
 {#if !!rows && Array.isArray(rows) && !!headersToShowInTable && Array.isArray(headersToShowInTable)}
@@ -795,7 +918,6 @@ function findAnchorElement(key) {
 
   <div class="outer-container">
     <div class="inner-container" bind:this={tableContainer} on:scroll>
-  <!-- <div class="table-container" bind:this={tableContainer}> -->
     <InfiniteScroll
       on:loadMore={handleLoadBackward}
       threshold={backwardThresholdPixel}
@@ -810,6 +932,7 @@ function findAnchorElement(key) {
               style:width="30px"
               style:min-width="30px"
               style:text-align="center"
+              class="non-resizable"
             >
               {#if selectMode === "multiple"}
                 <Checkbox
@@ -824,16 +947,22 @@ function findAnchorElement(key) {
           {#if showExpand}
             <th
               style:min-width="60px"
+              style:max-width="60px"
               style:text-align="center"
+              class="non-resizable"
             />
           {/if}
           {#each headersToShowInTable as head, index}
             <th
-              style:width={head.width}
+              style={`${resizableColumns || !head.width ? '' : `width: ${head.width}`}`}
               style:min-width={head.minWidth}
               class:sortable={head.sortable}
               on:click={() => handleHeaderClick(head)}
+              id={head.value}
             >
+              {#if resizableColumns}
+                <div class="resizer" use:resize></div>
+              {/if}
               <slot name="header" {head}>
                 <span class="header-label" bind:this={infoActivators[index]}>
                   <slot name="headerLabel">{head.label}</slot>
@@ -876,17 +1005,27 @@ function findAnchorElement(key) {
             </th>
           {/each}
           {#if $$slots.rowActions || $$slots.append}
-            <th>
+            <th
+              class="slot-append"
+            >
               <slot name="append" index={-1} items={undefined} />
             </th>
           {/if}
+          {#if resizableColumns && remainingWidth}
+            <th
+              style:width={remainingWidth + 'px'}
+              class="filler"
+              aria-hidden="true"
+            />
+          {/if}
           {#if customizeHeaders}
             <th
-              style:width="30px"
-              style:min-width="30px"
+              style:width="15px"
+              style:min-width="15px"
               style:text-align="center"
+              class="customize-headers"
             >
-              <div style="display: flex; gap: 8px;">
+              <div style="display: flex; justify-content: center;">
                 <Icon
                   name="mdi-plus-circle-outline"
                   click
@@ -1034,6 +1173,7 @@ function findAnchorElement(key) {
                   <td
                     colspan={headersToShowInTable.length + 1}
                     style:border="none"
+                    class="expanded-row"
                   >
                     <table style="display: table;">
                       <thead class="table-header table-subheader">
@@ -1607,10 +1747,25 @@ function findAnchorElement(key) {
     border-collapse: separate;
   }
 
+  .table.resizable {
+    table-layout: fixed;
+    width: fit-content;
+  }
+
+  .slot-append {
+    width: 1px;
+    min-width: unset;
+    box-sizing: content-box;
+  }
+
   .table-header {
     position: sticky;
     top: 0;
     z-index: 2;
+    height: var(
+      --dynamic-table-header-height,
+      var(--dynamic-table-default-header-height)
+    );
   }
 
   @media not all and (min-resolution:.001dpcm) { 
@@ -1651,12 +1806,6 @@ function findAnchorElement(key) {
     );
   }
 
-  .table-header th.sortable {
-    cursor: pointer;
-    transition: all 0.1s ease-in;
-    user-select: none;
-  }
-
   .table-header th.sortable:hover {
     color: var(
       --dynamic-table-header-hover-color,
@@ -1699,13 +1848,6 @@ function findAnchorElement(key) {
     );
   }
 
-  .thead {
-    height: var(
-      --dynamic-table-header-height,
-      var(--dynamic-table-default-header-height)
-    );
-  }
-
   table {
     border-collapse: separate;
     width: 100%;
@@ -1715,6 +1857,9 @@ function findAnchorElement(key) {
     text-align: start;
     padding-left: 10px;
     min-width: 100px;
+    position: relative;
+    user-select: none;
+    box-sizing: content-box;
   }
 
   td {
@@ -1722,6 +1867,20 @@ function findAnchorElement(key) {
     border: 1px solid transparent;
   }
 
+  table.table > tbody > tr > td {
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  table.table > thead > tr > th {
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  table.table > tbody > tr > td.expanded-row {
+  overflow: visible;
+}
+
   .hover-cell:hover, .hover-cell:focus, .cell-edit-activator {
     cursor: pointer;
     border: 1px solid rgb(var(--global-color-contrast-800));
@@ -1925,4 +2084,16 @@ function findAnchorElement(key) {
     align-items: center;
     gap: 4px;
   }
+  .resizer {
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 6px;
+    height: 100%;
+    cursor: col-resize;
+    z-index: 100;
+  }
+  .filler {
+    padding: 0 !important;
+  }
 </style>

package/dist/components/composed/list/DynamicTable.svelte.d.ts

@@ -45,6 +45,7 @@ declare const __propDef: {
                 info?: string | undefined;
             } | undefined;
             info?: string | undefined;
+            maxWidth?: string | undefined;
         })[] | undefined;
         headersToShowInTable?: (import("../../simple/lists/SimpleTable.svelte").Header & {
             cellEditorInfo?: {
@@ -77,6 +78,7 @@ declare const __propDef: {
                 info?: string | undefined;
             } | undefined;
             info?: string | undefined;
+            maxWidth?: string | undefined;
         })[] | undefined;
         subHeaders?: (import("../../simple/lists/SimpleTable.svelte").Header & {
             cellEditorInfo?: {
@@ -109,6 +111,7 @@ declare const __propDef: {
                 info?: string | undefined;
             } | undefined;
             info?: string | undefined;
+            maxWidth?: string | undefined;
         })[] | undefined;
         customizeHeaders?: boolean | undefined;
         rows?: {
@@ -163,6 +166,10 @@ declare const __propDef: {
         } | undefined;
         numberOfResultsVisible?: boolean | undefined;
         endLineVisible?: boolean | undefined;
+        resizableColumns?: boolean | undefined;
+        resizedColumnSizeWithPadding?: {
+            [value: string]: number;
+        } | undefined;
     };
     events: {
         scroll: Event;
@@ -209,6 +216,10 @@ declare const __propDef: {
             quickFilter: QuickFilter;
             setQuickFilterValue: (quickFilter: QuickFilter, value?: any) => void;
         }>;
+        columnResize: CustomEvent<{
+            id: string;
+            newWidthPx: number;
+        }>;
     } & {
         [evt: string]: CustomEvent<any>;
     };
@@ -257,6 +268,7 @@ declare const __propDef: {
                     info?: string | undefined;
                 } | undefined;
                 info?: string | undefined;
+                maxWidth?: string | undefined;
             };
         };
         headerLabel: {};
@@ -309,6 +321,7 @@ declare const __propDef: {
                     info?: string | undefined;
                 } | undefined;
                 info?: string | undefined;
+                maxWidth?: string | undefined;
             };
             row: {
                 item: {
@@ -380,6 +393,7 @@ declare const __propDef: {
                     info?: string | undefined;
                 } | undefined;
                 info?: string | undefined;
+                maxWidth?: string | undefined;
             };
             subItem: {
                 [key: string]: any;

package/dist/components/composed/list/PaginatedTable.svelte

@@ -14,7 +14,7 @@ export let headers = [], items = [], sortedBy = void 0, sortDirection = void 0,
   { label: "20", value: 20 },
   { label: "50", value: 50 },
   { label: "100", value: 100 }
-], hideRowsPerPage = false, totalElements = void 0, rowsPerPage = 20, filters = [], searchBarColumns = void 0, searchBarVisible = true, searchBarPlaceholder = "Type something to search...", lang = "en", editFilterMode = "one-edit", showActiveFilters = true, resizableColumns = false, resizedColumnSizeWithPadding = {}, pointerOnRowHover = void 0;
+], hideRowsPerPage = false, totalElements = void 0, rowsPerPage = 20, filters = [], searchBarColumns = void 0, searchBarVisible = true, searchBarPlaceholder = "Type something to search...", lang = "en", editFilterMode = "one-edit", showActiveFilters = true, resizableColumns = false, resizedColumnSizeWithPadding = {}, pointerOnRowHover = void 0, doubleClickActive = false, doubleClickDelay = 250;
 export let calculateRowStyles = void 0;
 export let calculateRowClasses = void 0;
 let searchBarInput, searchText = void 0;
@@ -118,9 +118,12 @@ function buildFilters(params) {
     bind:sortedBy
     bind:sortDirection
     bind:pointerOnRowHover
+    {doubleClickActive}
+    {doubleClickDelay}
     on:sort={handleFiltersChange}
     on:sort
     on:rowClick
+    on:rowDoubleClick
     {calculateRowStyles}
     {calculateRowClasses}
     {resizableColumns}

package/dist/components/composed/list/PaginatedTable.svelte.d.ts

@@ -33,6 +33,8 @@ declare const __propDef: {
             [value: string]: number;
         } | undefined;
         pointerOnRowHover?: boolean | undefined;
+        doubleClickActive?: ComponentProps<SimpleTable>['doubleClickActive'];
+        doubleClickDelay?: ComponentProps<SimpleTable>['doubleClickDelay'];
         calculateRowStyles?: CalculateRowStyles | undefined;
         calculateRowClasses?: CalculateRowClasses | undefined;
     };
@@ -48,6 +50,9 @@ declare const __propDef: {
         rowClick: CustomEvent<{
             item: import("../../simple/lists/SimpleTable.svelte").Item;
         }>;
+        rowDoubleClick: CustomEvent<{
+            item: import("../../simple/lists/SimpleTable.svelte").Item;
+        }>;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/dist/components/simple/lists/SimpleTable.svelte

@@ -7,7 +7,8 @@ import { createEventDispatcher, onMount } from "svelte";
 let clazz = {};
 export { clazz as class };
 const dispatch = createEventDispatcher();
-export let headers = [], items = [], sortedBy = void 0, sortDirection = "asc", resizableColumns = false, resizedColumnSizeWithPadding = {}, pointerOnRowHover = false;
+export let headers = [], items = [], sortedBy = void 0, sortDirection = "asc", resizableColumns = false, resizedColumnSizeWithPadding = {}, pointerOnRowHover = false, doubleClickActive = false, doubleClickDelay = 250;
+let clickTimeout = void 0;
 export let calculateRowStyles = void 0;
 export let calculateRowClasses = void 0;
 onMount(() => {
@@ -65,9 +66,20 @@ function handleHeaderClick(header) {
   }
 }
 function handleRowClick(item) {
-  dispatch("rowClick", {
-    item
-  });
+  if (doubleClickActive) {
+    if (clickTimeout) {
+      clearTimeout(clickTimeout);
+      clickTimeout = void 0;
+      dispatch("rowDoubleClick", { item });
+    } else {
+      clickTimeout = setTimeout(() => {
+        dispatch("rowClick", { item });
+        clickTimeout = void 0;
+      }, doubleClickDelay);
+    }
+  } else {
+    dispatch("rowClick", { item });
+  }
 }
 function formatDate(dateTime, dateFormat) {
   return dateTime.setLocale(dateFormat.locale).toFormat(dateFormat.format);

package/dist/components/simple/lists/SimpleTable.svelte.d.ts

@@ -40,6 +40,8 @@ declare const __propDef: {
             [value: string]: number;
         } | undefined;
         pointerOnRowHover?: boolean | undefined;
+        doubleClickActive?: boolean | undefined;
+        doubleClickDelay?: number | undefined;
         calculateRowStyles?: CalculateRowStyles | undefined;
         calculateRowClasses?: CalculateRowClasses | undefined;
     };
@@ -51,6 +53,9 @@ declare const __propDef: {
         rowClick: CustomEvent<{
             item: Item;
         }>;
+        rowDoubleClick: CustomEvent<{
+            item: Item;
+        }>;
         columnResize: CustomEvent<{
             id: string;
             newWidthPx: number;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@likable-hair/svelte",
   "description": "A Svelte component for likablehair and others",
-  "version": "3.3.14",
+  "version": "3.3.16",
   "scripts": {
     "host": "vite --host",
     "dev": "vite dev",