@likable-hair/svelte 4.0.0 → 4.0.2

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

@@ -25,6 +25,25 @@ onMount(() => {
     updateHeaderHeight();
     window.addEventListener('resize', updateHeaderHeight);
     tableContainer?.addEventListener("scroll", setReachedBottomOrTop);
+    if (tableContainer?.scrollHeight && tableContainer.clientHeight && 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);
@@ -76,8 +95,9 @@ const [send, receive] = crossfade({
         };
     },
 });
-let { headers = [], headersToShowInTable = headers, subHeaders = [], customizeHeaders = false, rows = [], sortedBy = $bindable(), sortDirection = $bindable("asc"), cellEdit = false, lang = "en", noItemsText = lang == 'en' ? "No items to show" : 'Nessun elemento da visualizzare', showSelect = false, showSelectContainer = true, selectMode = "single", selectedItems = $bindable([]), showExpand = false, loading = false, disabled = false, filters = $bindable([]), searchBarColumns, searchBarVisible = false, searchBarPlaceholder = lang == 'en' ? "Type to search..." : "Scrivi per cercare...", filtersVisible = false, quickFiltersVisible = false, editFilterMode = "one-edit", showActiveFilters = true, quickFilters = [], actionsForSelectedItems = [], totalRows = rows.length, searchText = $bindable(), renderedRowsNumber = 100, sectionRowsNumber = 20, sectionThreshold = 2, backwardThresholdPixel = 100, forwardThresholdPixel = 100, uniqueKey = 'id', numberOfResultsVisible = false, endLineVisible = false, class: clazz = {}, onapplyCustomQuickFilter, oncellClick, onfetchData, onfiltersChange, onsort, onremoveAllFilters, onremoveCustomQuickFilter, onremoveFilter, onrowClick, onsaveCellEdit, onsaveHeadersToShow, searchBarSnippet, customFilterChipSnippet, customFilterSnippet, filterAppendSnippet, onscroll, selectionSnippet: selectionInternalSnippet, itemLabelSnippet: itemLabelInternalSnippet, chipLabelSnippet, headerSnippet, headerLabelSnippet, rowAppendSnippet, rowActionsSnippet, customRowSnippet, subRowAppendSnippet, subHeaderLabelSnippet, subHeaderSnippet, subRowActionsSnippet, customSubRowSnippet, customQuickFilterSnippet, appendSnippet, } = $props();
-let openCellEditor = $state(false), cellEditorActivator = $state(), cellEditorContainer = $state(), menuElementCellEditor = $state(), menuElementQuickFilters = $state(), cellEditorInfoActive = $state(), saveEditDisabled = $state(false), searchBarInput = $state(undefined), openQuickFilter = $state(false), quickFilterActivator = $state(), quickFilterActive = $state(), globalBuilder = new FilterBuilder(), slotSelectActionsContainer, isSelectedAll = $state(false), calendarOpened = $state(false), calendarOpened2 = $state(false), selectedIndexes = [], cellEditorIndexRow = $state(), cellEditorIndexHeader = $state(), cellEditorSubItem = $state(), currentSectionNumber = $state(0), tableBody = $state(), tableContainer = $state(), userScrolling = $state(true), reachedBottom = $state(false), reachedTop = false;
+let { headers = [], headersToShowInTable = headers, subHeaders = [], customizeHeaders = false, rows = [], sortedBy = $bindable(), sortDirection = $bindable("asc"), cellEdit = false, lang = "en", noItemsText = lang == 'en' ? "No items to show" : 'Nessun elemento da visualizzare', showSelect = false, showSelectContainer = true, selectMode = "single", selectedItems = $bindable([]), showExpand = false, loading = false, disabled = false, filters = $bindable([]), searchBarColumns, searchBarVisible = false, searchBarPlaceholder = lang == 'en' ? "Type to search..." : "Scrivi per cercare...", filtersVisible = false, quickFiltersVisible = false, editFilterMode = "one-edit", showActiveFilters = true, quickFilters = [], actionsForSelectedItems = [], totalRows = rows.length, searchText = $bindable(), renderedRowsNumber = 100, sectionRowsNumber = 20, sectionThreshold = 2, backwardThresholdPixel = 100, forwardThresholdPixel = 100, uniqueKey = 'id', numberOfResultsVisible = false, endLineVisible = false, resizableColumns = false, resizedColumnSizeWithPadding = {}, class: clazz = {}, onapplyCustomQuickFilter, oncellClick, onfetchData, onfiltersChange, onsort, onremoveAllFilters, onremoveCustomQuickFilter, onremoveFilter, onrowClick, onsaveCellEdit, onsaveHeadersToShow, oncolumnResize, searchBarSnippet, customFilterChipSnippet, customFilterSnippet, filterAppendSnippet, onscroll, selectionSnippet: selectionInternalSnippet, itemLabelSnippet: itemLabelInternalSnippet, chipLabelSnippet, headerSnippet, headerLabelSnippet, rowAppendSnippet, rowActionsSnippet, customRowSnippet, subRowAppendSnippet, subHeaderLabelSnippet, subHeaderSnippet, subRowActionsSnippet, customSubRowSnippet, customQuickFilterSnippet, appendSnippet, } = $props();
+let openCellEditor = $state(false), cellEditorActivator = $state(), cellEditorContainer = $state(), menuElementCellEditor = $state(), menuElementQuickFilters = $state(), cellEditorInfoActive = $state(), saveEditDisabled = $state(false), searchBarInput = $state(undefined), openQuickFilter = $state(false), quickFilterActivator = $state(), quickFilterActive = $state(), globalBuilder = new FilterBuilder(), slotSelectActionsContainer, isSelectedAll = $state(false), calendarOpened = $state(false), calendarOpened2 = $state(false), selectedIndexes = [], cellEditorIndexRow = $state(), cellEditorIndexHeader = $state(), cellEditorSubItem = $state(), currentSectionNumber = $state(0), tableBody = $state(), tableContainer = $state(), userScrolling = $state(true), reachedBottom = $state(false), reachedTop = false, resizing = false, remainingWidth = $state(0);
+const DEFAULT_MIN_WIDTH_PX = 100, DEFAULT_MAX_WIDTH_PX = 400;
 let totalSections = $derived((totalRows - renderedRowsNumber) / sectionRowsNumber);
 let hasMoreToRender = $derived(totalSections > currentSectionNumber);
 let totalCachedSections = $derived((rows.length - renderedRowsNumber) / sectionRowsNumber);
@@ -111,7 +131,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";
@@ -698,29 +718,31 @@ async function handleLoadForward() {
     }
 }
 async 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--;
+    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;
+        await tick();
+        if (tableContainer) {
+            const anchorElementAfter = findAnchorElement(anchorUniqueKey);
+            const anchorOffsetAfter = anchorElementAfter?.getBoundingClientRect().top || 0;
+            const offsetDiff = anchorOffsetAfter - anchorOffsetBefore;
+            tableContainer.scrollTop += offsetDiff;
+            userScrolling = true;
         }
-    }
-    currentSectionNumber = currentSectionNumber - 1;
-    await tick();
-    if (tableContainer) {
-        const anchorElementAfter = findAnchorElement(anchorUniqueKey);
-        const anchorOffsetAfter = anchorElementAfter?.getBoundingClientRect().top || 0;
-        const offsetDiff = anchorOffsetAfter - anchorOffsetBefore;
-        tableContainer.scrollTop += offsetDiff;
-        userScrolling = true;
     }
 }
 function findAnchorElement(key) {
@@ -734,6 +756,126 @@ function findAnchorElement(key) {
     }
     return undefined;
 }
+function resize(node) {
+    let th = node.parentElement;
+    let resizingInner = false;
+    if (!!th) {
+        let { width } = th.getBoundingClientRect();
+        function mouseMoveHandler(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,
+                    };
+                }
+            }
+        }
+        function mouseUpHandler(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);
+                }
+                if (oncolumnResize) {
+                    oncolumnResize({
+                        detail: {
+                            id: th.id,
+                            newWidthPx: width
+                        }
+                    });
+                }
+            }
+        }
+        function mouseDownHandler(e) {
+            if (!!th) {
+                resizing = true;
+                resizingInner = true;
+                let { paddingLeft, paddingRight } = getComputedStyle(th);
+                width = th.getBoundingClientRect().width - parseFloat(paddingLeft) - parseFloat(paddingRight);
+            }
+        }
+        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);
+            }
+        };
+    }
+}
+$effect(() => {
+    if (resizableColumns &&
+        !!tableContainer &&
+        resizableColumns &&
+        headersToShowInTable.length > 0 &&
+        resizedColumnSizeWithPadding &&
+        headersToShow.length > 0 &&
+        mainHeader) {
+        tick().then(updateRemainingWidth);
+    }
+});
+async function updateRemainingWidth() {
+    if (tableContainer != null && !!tableContainer && mainHeader) {
+        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)}
@@ -880,7 +1022,8 @@ function findAnchorElement(key) {
               style:width="30px"
               style:min-width="30px"
               style:text-align="center"
-            >
+              class="non-resizable"
+            > 
               {#if selectMode === "multiple"}
                 <Checkbox
                   id="select-all"
@@ -894,16 +1037,22 @@ function findAnchorElement(key) {
           {#if showExpand}
             <th
               style:min-width="60px"
+              style:max-width="60px"
               style:text-align="center"
+              class="non-resizable"
             ></th>
           {/if}
           {#each headersToShowInTable as header, index}
             <th
-              style:width={header.width}
+              style={`${resizableColumns || !header.width ? '' : `width: ${header.width}`}`}
               style:min-width={header.minWidth}
               class:sortable={header.sortable}
               onclick={() => handleHeaderClick(header)}
+              id={header.value}
             >
+              {#if resizableColumns}
+                <div class="resizer" use:resize></div>
+              {/if}
               {#if headerSnippet}
                 {@render headerSnippet({ header })}
               {:else}
@@ -952,17 +1101,27 @@ function findAnchorElement(key) {
             </th>
           {/each}
           {#if rowActionsSnippet || rowAppendSnippet}
-            <th>
+            <th
+              class="slot-append"
+            >
               {@render rowAppendSnippet?.({ index: -1, row: undefined })}
             </th>
           {/if}
+          {#if resizableColumns && remainingWidth}
+            <th
+              style:width={remainingWidth + 'px'}
+              class="filler"
+              aria-hidden="true"
+            ></th>
+          {/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"
                   onclick={() => (openHeaderDrawer = true)}
@@ -1102,6 +1261,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">
@@ -1685,10 +1845,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) { 
@@ -1729,12 +1904,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,
@@ -1777,13 +1946,6 @@ function findAnchorElement(key) {
     );
   }
 
-  .thead {
-    height: var(
-      --dynamic-table-header-height,
-      var(--dynamic-table-default-header-height)
-    );
-  }
-
   table {
     border-collapse: separate;
     width: 100%;
@@ -1793,12 +1955,28 @@ function findAnchorElement(key) {
     text-align: start;
     padding-left: 10px;
     min-width: 100px;
+    position: relative;
+    user-select: none;
+    box-sizing: content-box;
   }
 
   td {
     padding-left: 10px;
     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;
@@ -2009,4 +2187,17 @@ 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

@@ -43,6 +43,7 @@ declare class __sveltets_Render<Item extends {
                 info?: string;
             } | undefined;
             info?: string;
+            maxWidth?: string;
         })[] | undefined;
         headersToShowInTable?: (import("../../simple/lists/SimpleTable.svelte").Header<unknown> & {
             cellEditorInfo?: {
@@ -75,6 +76,7 @@ declare class __sveltets_Render<Item extends {
                 info?: string;
             } | undefined;
             info?: string;
+            maxWidth?: string;
         })[] | undefined;
         subHeaders?: (import("../../simple/lists/SimpleTable.svelte").Header<unknown> & {
             cellEditorInfo?: {
@@ -107,6 +109,7 @@ declare class __sveltets_Render<Item extends {
                 info?: string;
             } | undefined;
             info?: string;
+            maxWidth?: string;
         })[] | undefined;
         customizeHeaders?: boolean;
         rows?: {
@@ -154,6 +157,10 @@ declare class __sveltets_Render<Item extends {
         uniqueKey?: "disableEdit" | "rowDisableBackgroundColor" | keyof Item | undefined;
         numberOfResultsVisible?: boolean;
         endLineVisible?: boolean;
+        resizableColumns?: boolean;
+        resizedColumnSizeWithPadding?: {
+            [value: string]: number;
+        } | undefined;
         class?: {
             container?: string;
             header?: string;
@@ -218,6 +225,12 @@ declare class __sveltets_Render<Item extends {
                 setQuickFilterValue: (quickFilter: QuickFilter, value?: any) => void;
             };
         }) => void) | undefined;
+        oncolumnResize?: ((event: {
+            detail: {
+                id: string;
+                newWidthPx: number;
+            };
+        }) => void) | undefined;
         searchBarSnippet?: Snippet<[{
             handleSearchChange: (searchText: string | undefined) => void;
         }]> | undefined;
@@ -265,6 +278,7 @@ declare class __sveltets_Render<Item extends {
                     info?: string;
                 } | undefined;
                 info?: string;
+                maxWidth?: string;
             };
         }]> | undefined;
         headerLabelSnippet?: Snippet<[{
@@ -299,6 +313,7 @@ declare class __sveltets_Render<Item extends {
                     info?: string;
                 } | undefined;
                 info?: string;
+                maxWidth?: string;
             };
         }]> | undefined;
         rowAppendSnippet?: Snippet<[{
@@ -361,6 +376,7 @@ declare class __sveltets_Render<Item extends {
                     info?: string;
                 } | undefined;
                 info?: string;
+                maxWidth?: string;
             };
             row: {
                 item: Item & {
@@ -405,6 +421,7 @@ declare class __sveltets_Render<Item extends {
                     info?: string;
                 } | undefined;
                 info?: string;
+                maxWidth?: string;
             };
         }]> | undefined;
         subHeaderLabelSnippet?: Snippet<[{
@@ -439,6 +456,7 @@ declare class __sveltets_Render<Item extends {
                     info?: string;
                 } | undefined;
                 info?: string;
+                maxWidth?: string;
             };
         }]> | undefined;
         subRowAppendSnippet?: Snippet<[{
@@ -489,6 +507,7 @@ declare class __sveltets_Render<Item extends {
                     info?: string;
                 } | undefined;
                 info?: string;
+                maxWidth?: string;
             };
             row: Item & {
                 disableEdit?: boolean;

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

@@ -8,11 +8,11 @@ import {} from "svelte";
 import Filters from "../search/Filters.svelte";
 import SearchBar from "../search/SearchBar.svelte";
 import Converter from "../../../utils/filters/filters";
-let { headers = [], items = [], sortedBy = $bindable(undefined), sortDirection = $bindable('asc'), page = 1, maxPage = undefined, rowsPerPageOptions = [
+let { headers = [], items = [], sortedBy = $bindable(undefined), sortDirection = $bindable('asc'), page = $bindable(1), maxPage = undefined, rowsPerPageOptions = [
     { label: "20", value: 20 },
     { label: "50", value: 50 },
     { label: "100", value: 100 },
-], hideRowsPerPage = false, totalElements = undefined, rowsPerPage = $bindable(20), filters = $bindable([]), searchBarColumns = undefined, searchBarVisible = true, searchBarPlaceholder = "Type something to search...", lang = "en", editFilterMode = "one-edit", showActiveFilters = true, resizableColumns = false, resizedColumnSizeWithPadding = {}, pointerOnRowHover = undefined, calculateRowStyles = undefined, calculateRowClasses = undefined, class: clazz = {}, onfiltersChange, onpaginationChange, onremoveFilter, onremoveAllFilters, customFilterChipSnippet, customFilterSnippet, filterAppendSnippet, onrowClick, appendSnippet, customSnippet, headerLabelSnippet, headerSnippet, rowActionsSnippet, onsort, footerSnippet, rangeDescriptorSnippet, searchBarSnippet, noDataSnippet, } = $props();
+], hideRowsPerPage = false, totalElements = undefined, rowsPerPage = $bindable(20), filters = $bindable([]), searchBarColumns = undefined, searchBarVisible = true, searchBarPlaceholder = "Type something to search...", lang = "en", editFilterMode = "one-edit", showActiveFilters = true, resizableColumns = false, resizedColumnSizeWithPadding = {}, pointerOnRowHover = undefined, doubleClickActive = false, doubleClickDelay = 250, calculateRowStyles = undefined, calculateRowClasses = undefined, class: clazz = {}, onfiltersChange, onpaginationChange, onremoveFilter, onremoveAllFilters, customFilterChipSnippet, customFilterSnippet, filterAppendSnippet, onrowClick, onrowDoubleClick, appendSnippet, customSnippet, headerLabelSnippet, headerSnippet, rowActionsSnippet, onsort, footerSnippet, rangeDescriptorSnippet, searchBarSnippet, noDataSnippet, oncolumnResize, } = $props();
 let searchBarInput = $state(), searchText = $state();
 let rowsPerPageSelection = $state([]);
 $effect(() => {
@@ -139,7 +139,11 @@ function buildFilters(params) {
     bind:sortDirection
     {pointerOnRowHover}
     onsort={handleOnSort}
+    {doubleClickActive}
+    {doubleClickDelay}
+    {lang}
     {onrowClick}
+    {onrowDoubleClick}
     {calculateRowStyles}
     {calculateRowClasses}
     {resizableColumns}
@@ -150,6 +154,7 @@ function buildFilters(params) {
     {headerSnippet}
     {headerLabelSnippet}
     {noDataSnippet}
+    {oncolumnResize}
   >
   </SimpleTable>
 

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

@@ -6,11 +6,87 @@ import Dropdown from "../forms/Dropdown.svelte";
 import { type ComponentProps, type Snippet } from "svelte";
 import Filters from "../search/Filters.svelte";
 import type Builder from "../../../utils/filters/builder";
-declare const PaginatedTable: import("svelte").Component<{
-    headers?: ComponentProps<typeof SimpleTable>["headers"];
-    items?: ComponentProps<typeof SimpleTable>["items"];
-    sortedBy?: ComponentProps<typeof SimpleTable>["sortedBy"];
-    sortDirection?: ComponentProps<typeof SimpleTable>["sortDirection"];
+declare const PaginatedTable: import("svelte").Component<Omit<{
+    headers: import("../../simple/lists/SimpleTable.svelte").Header<unknown>[];
+    items: {
+        [key: string]: any;
+    }[];
+    sortedBy?: string;
+    sortDirection?: "asc" | "desc";
+    resizableColumns?: boolean;
+    resizedColumnSizeWithPadding?: {
+        [value: string]: number;
+    } | undefined;
+    pointerOnRowHover?: boolean;
+    lang?: "it" | "en";
+    doubleClickActive?: boolean;
+    doubleClickDelay?: number;
+    calculateRowStyles?: import("../../simple/lists/SimpleTable.svelte").CalculateRowStyles<{
+        [key: string]: any;
+    }> | undefined;
+    calculateRowClasses?: import("../../simple/lists/SimpleTable.svelte").CalculateRowClasses<{
+        [key: string]: any;
+    }> | undefined;
+    onsort?: ((event: {
+        detail: {
+            sortedBy: string | undefined;
+            sortDirection: string;
+        };
+    }) => void) | undefined;
+    onrowClick?: ((event: {
+        detail: {
+            item: {
+                [key: string]: any;
+            };
+        };
+    }) => void) | undefined;
+    onrowDoubleClick?: ((event: {
+        detail: {
+            item: {
+                [key: string]: any;
+            };
+        };
+    }) => void) | undefined;
+    oncolumnResize?: ((event: {
+        detail: {
+            id: string;
+            newWidthPx: number;
+        };
+    }) => void) | undefined;
+    headerSnippet?: Snippet<[{
+        head: import("../../simple/lists/SimpleTable.svelte").Header<unknown>;
+    }]> | undefined;
+    headerLabelSnippet?: Snippet<[{
+        head: import("../../simple/lists/SimpleTable.svelte").Header<unknown>;
+    }]> | undefined;
+    appendSnippet?: Snippet<[{
+        index: number;
+        item?: {
+            [key: string]: any;
+        } | undefined;
+    }]> | undefined;
+    rowActionsSnippet?: Snippet<[{
+        index: number;
+        item: {
+            [key: string]: any;
+        };
+    }]> | undefined;
+    customSnippet?: Snippet<[{
+        index: number;
+        columnIndex: number;
+        header: import("../../simple/lists/SimpleTable.svelte").Header<unknown>;
+        item: {
+            [key: string]: any;
+        };
+    }]> | undefined;
+    noDataSnippet?: Snippet<[]>;
+    class?: {
+        container?: string;
+        header?: string;
+        row?: string;
+        cell?: string;
+    } | undefined;
+}, "class"> & {
     page?: NonNullable<ComponentProps<typeof Paginator>["page"]>;
     maxPage?: ComponentProps<typeof Paginator>["maxPage"];
     rowsPerPageOptions?: ComponentProps<typeof Dropdown>["items"];
@@ -21,16 +97,8 @@ declare const PaginatedTable: import("svelte").Component<{
     searchBarColumns?: string[];
     searchBarVisible?: boolean;
     searchBarPlaceholder?: string;
-    lang?: "it" | "en";
     editFilterMode?: "one-edit" | "multi-edit";
     showActiveFilters?: boolean;
-    resizableColumns?: boolean;
-    resizedColumnSizeWithPadding?: {
-        [value: string]: number;
-    };
-    pointerOnRowHover?: boolean;
-    calculateRowStyles?: ComponentProps<typeof SimpleTable>["calculateRowStyles"];
-    calculateRowClasses?: ComponentProps<typeof SimpleTable>["calculateRowClasses"];
     class?: {
         simpleTable?: ComponentProps<typeof SimpleTable>["class"];
     };
@@ -51,14 +119,6 @@ declare const PaginatedTable: import("svelte").Component<{
     filterAppendSnippet?: ComponentProps<typeof Filters>["appendSnippet"];
     customFilterChipSnippet?: ComponentProps<typeof Filters>["customChipSnippet"];
     customFilterSnippet?: ComponentProps<typeof Filters>["customSnippet"];
-    onsort?: ComponentProps<typeof SimpleTable>["onsort"];
-    onrowClick?: ComponentProps<typeof SimpleTable>["onrowClick"];
-    customSnippet?: ComponentProps<typeof SimpleTable>["customSnippet"];
-    rowActionsSnippet?: ComponentProps<typeof SimpleTable>["rowActionsSnippet"];
-    appendSnippet?: ComponentProps<typeof SimpleTable>["appendSnippet"];
-    headerSnippet?: ComponentProps<typeof SimpleTable>["headerSnippet"];
-    headerLabelSnippet?: ComponentProps<typeof SimpleTable>["headerLabelSnippet"];
-    noDataSnippet?: ComponentProps<typeof SimpleTable>["noDataSnippet"];
     searchBarSnippet?: Snippet<[{
         handleSearchChange: (searchText: string | undefined) => void;
     }]>;
@@ -78,6 +138,6 @@ declare const PaginatedTable: import("svelte").Component<{
         maxPage: number | undefined;
         rowsPerPage: number;
     }]>;
-}, {}, "sortedBy" | "sortDirection" | "filters" | "rowsPerPage">;
+}, {}, "page" | "sortedBy" | "sortDirection" | "filters" | "rowsPerPage">;
 type PaginatedTable = ReturnType<typeof PaginatedTable>;
 export default PaginatedTable;

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

@@ -6,7 +6,11 @@ import './SimpleTable.css';
 import Icon from '../media/Icon.svelte';
 import { onMount } from 'svelte';
 import NoData from '../common/NoData.svelte';
-let { headers = [], items = [], sortedBy = $bindable(undefined), sortDirection = $bindable("asc"), resizableColumns = false, resizedColumnSizeWithPadding = $bindable(), pointerOnRowHover = false, lang = 'en', calculateRowStyles = undefined, calculateRowClasses = undefined, oncolumnResize, onrowClick, onsort, headerSnippet, headerLabelSnippet, appendSnippet, rowActionsSnippet, customSnippet, noDataSnippet, class: clazz = {}, } = $props();
+let { headers = [], items = [], sortedBy = $bindable(undefined), sortDirection = $bindable("asc"), resizableColumns = false, resizedColumnSizeWithPadding = $bindable(), pointerOnRowHover = false, lang = 'en', doubleClickActive = false, doubleClickDelay = 250, calculateRowStyles = undefined, calculateRowClasses = undefined, oncolumnResize, onrowClick, onrowDoubleClick, onsort, headerSnippet, headerLabelSnippet, appendSnippet, rowActionsSnippet, customSnippet, noDataSnippet, class: clazz = {}, } = $props();
+if (!onrowClick && !!onrowDoubleClick) {
+    throw new Error('cannot define an onrowDoubleClick event without defining an onrowClick event');
+}
+let clickTimeout = undefined;
 onMount(() => {
     if (resizableColumns) {
         if (!resizedColumnSizeWithPadding)
@@ -72,12 +76,39 @@ function handleHeaderClick(header) {
     }
 }
 function handleRowClick(item) {
-    if (onrowClick) {
-        onrowClick({
-            detail: {
-                item
+    if (doubleClickActive) {
+        if (clickTimeout) {
+            clearTimeout(clickTimeout);
+            clickTimeout = undefined;
+            if (onrowDoubleClick) {
+                onrowDoubleClick({
+                    detail: {
+                        item
+                    }
+                });
             }
-        });
+        }
+        else {
+            clickTimeout = setTimeout(() => {
+                if (onrowClick) {
+                    onrowClick({
+                        detail: {
+                            item
+                        }
+                    });
+                }
+                clickTimeout = undefined;
+            }, doubleClickDelay);
+        }
+    }
+    else {
+        if (onrowClick) {
+            onrowClick({
+                detail: {
+                    item
+                }
+            });
+        }
     }
 }
 function formatDate(dateTime, dateFormat) {

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

@@ -32,6 +32,8 @@ declare class __sveltets_Render<Item extends {
         } | undefined;
         pointerOnRowHover?: boolean;
         lang?: "it" | "en";
+        doubleClickActive?: boolean;
+        doubleClickDelay?: number;
         calculateRowStyles?: CalculateRowStyles<Item> | undefined;
         calculateRowClasses?: CalculateRowClasses<Item> | undefined;
         onsort?: ((event: {
@@ -45,6 +47,11 @@ declare class __sveltets_Render<Item extends {
                 item: Item;
             };
         }) => void) | undefined;
+        onrowDoubleClick?: ((event: {
+            detail: {
+                item: Item;
+            };
+        }) => void) | undefined;
         oncolumnResize?: ((event: {
             detail: {
                 id: string;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@likable-hair/svelte",
   "description": "A Svelte component for likablehair and others",
-  "version": "4.0.0",
+  "version": "4.0.2",
   "scripts": {
     "host": "vite --host",
     "dev": "vite dev",
@@ -28,7 +28,7 @@
     "dist"
   ],
   "peerDependencies": {
-    "svelte": "^4.2.9"
+    "svelte": "^5.0.0"
   },
   "devDependencies": {
     "@orama/orama": "^3.1.4",