@likable-hair/svelte 3.3.12 → 3.3.14

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

@@ -15,7 +15,7 @@
 import { DateTime } from "luxon";
 import { createEventDispatcher, onMount } from "svelte";
 import { quintOut } from "svelte/easing";
-import { crossfade } from "svelte/transition";
+import { crossfade, fade } from "svelte/transition";
 import Filters from "../search/Filters.svelte";
 import ConfirmOrCancelButtons from "../forms/ConfirmOrCancelButtons.svelte";
 import { flip } from "svelte/animate";
@@ -31,10 +31,15 @@ import DynamicFilters from "../search/DynamicFilters.svelte";
 import QuickActions, {} from "../common/QuickActions.svelte";
 import "./DynamicTable.css";
 import Switch from "../../simple/forms/Switch.svelte";
+import CircularLoader from "../../simple/loaders/CircularLoader.svelte";
 onMount(() => {
   updateHeaderHeight();
   window.addEventListener("resize", updateHeaderHeight);
-  return () => window.removeEventListener("resize", updateHeaderHeight);
+  tableContainer.addEventListener("scroll", setReachedBottomOrTop);
+  return () => {
+    window.removeEventListener("resize", updateHeaderHeight);
+    tableContainer.removeEventListener("scroll", setReachedBottomOrTop);
+  };
 });
 let mainHeader;
 function updateHeaderHeight() {
@@ -43,6 +48,26 @@ function updateHeaderHeight() {
     document.documentElement.style.setProperty("--main-header-height", headerHeight + "px");
   }
 }
+function setReachedBottomOrTop() {
+  reachedBottom = tableContainer.scrollHeight - tableContainer.scrollTop === tableContainer.clientHeight;
+  reachedTop = tableContainer.scrollTop === 0;
+}
+$:
+  if (reachedBottom && rows.length < totalRows) {
+    setTimeout(() => {
+      if (reachedBottom) {
+        handleLoadForward();
+      }
+    }, 30);
+  }
+$:
+  if (reachedTop && currentSectionNumber > 0) {
+    setTimeout(() => {
+      if (reachedTop) {
+        handleLoadBackward();
+      }
+    }, 30);
+  }
 const [send, receive] = crossfade({
   duration: 500,
   fallback(node, params) {
@@ -61,8 +86,10 @@ 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, sectionTreshold = 2, backwardTresholdPixel = 100, forwardTresholdPixel = 100;
-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, totalSections = (totalRows - renderedRowsNumber) / sectionRowsNumber;
+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;
+$:
+  totalSections = (totalRows - renderedRowsNumber) / sectionRowsNumber;
 $:
   hasMoreToRender = totalSections > currentSectionNumber;
 $:
@@ -172,14 +199,14 @@ function handleCancelClick() {
   openQuickFilter = false;
 }
 function handleSelect(item, shiftKeyPressed) {
-  let index = selectedItems.findIndex((i) => i.id == item.id);
+  let index = selectedItems.findIndex((i) => i[uniqueKey] == item[uniqueKey]);
   if (index == -1) {
     if (selectMode == "single") {
       selectedItems = [item];
-      selectedIndexes = [rows.findIndex((r) => r.item.id == item.id)];
+      selectedIndexes = [rows.findIndex((r) => r.item[uniqueKey] == item[uniqueKey])];
     } else if (selectMode == "multiple") {
       if (shiftKeyPressed && selectedIndexes.length > 0 && !isSelectedAll) {
-        let lastSelectedIndex = selectedIndexes[selectedIndexes.length - 1], selectedIndex = rows.findIndex((r) => r.item.id == item.id);
+        let lastSelectedIndex = selectedIndexes[selectedIndexes.length - 1], selectedIndex = rows.findIndex((r) => r.item[uniqueKey] == item[uniqueKey]);
         if (selectedIndex != -1) {
           if (selectedIndex < lastSelectedIndex) {
             let x = lastSelectedIndex;
@@ -187,19 +214,19 @@ function handleSelect(item, shiftKeyPressed) {
             selectedIndex = x;
           }
           for (let i = lastSelectedIndex + 1; i <= selectedIndex; i++) {
-            if (!selectedItems.find((selectedItem) => selectedItem.id == rows[i].item.id)) {
+            if (!selectedItems.find((selectedItem) => selectedItem[uniqueKey] == rows[i].item[uniqueKey])) {
               selectedItems = [...selectedItems, rows[i].item];
             }
           }
         }
       } else {
         selectedItems = [...selectedItems, item];
-        selectedIndexes.push(rows.findIndex((r) => r.item.id == item.id));
+        selectedIndexes.push(rows.findIndex((r) => r.item[uniqueKey] == item[uniqueKey]));
       }
     }
   } else {
-    selectedItems = selectedItems.filter((i) => i.id != item.id);
-    selectedIndexes = selectedIndexes.filter((r) => r != rows.findIndex((r2) => r2.item.id == item.id));
+    selectedItems = selectedItems.filter((i) => i[uniqueKey] != item[uniqueKey]);
+    selectedIndexes = selectedIndexes.filter((r) => r != rows.findIndex((r2) => r2.item[uniqueKey] == item[uniqueKey]));
     isSelectedAll = false;
   }
 }
@@ -216,11 +243,11 @@ function handleSelectAll() {
   }
 }
 function expandRow(row) {
-  let index = expandedRows.findIndex((r) => r.item.id == row.item.id);
+  let index = expandedRows.findIndex((r) => r.item[uniqueKey] == row.item[uniqueKey]);
   if (index == -1) {
     expandedRows = [...expandedRows, row];
   } else {
-    expandedRows = expandedRows.filter((r) => r.item.id != row.item.id);
+    expandedRows = expandedRows.filter((r) => r.item[uniqueKey] != row.item[uniqueKey]);
   }
 }
 function formatDate(dateTime, dateFormat) {
@@ -278,10 +305,12 @@ $:
   if (searchText != void 0)
     handleSearchChange(searchText);
 function handleFiltersChange() {
-  userScrolling = false;
-  currentSectionNumber = 0;
-  tableContainer.scrollTop = 0;
-  setTimeout(() => userScrolling = true, 20);
+  if (!!tableContainer) {
+    userScrolling = false;
+    currentSectionNumber = 0;
+    tableContainer.scrollTop = 0;
+    setTimeout(() => userScrolling = true, 20);
+  }
   dispatch("filtersChange", {
     builder: globalBuilder
   });
@@ -477,14 +506,14 @@ function quickFilterBuilder(builder, quickFilter, clearPreaviousValue = true) {
         builder.where(
           quickFilter.column,
           ">=",
-          DateTime.fromJSDate(from).toString()
+          DateTime.fromJSDate(from).setLocale("it-IT").startOf("day").toString()
         );
       }
       if (!!to) {
         builder.where(
           quickFilter.column,
           "<=",
-          DateTime.fromJSDate(to).toString()
+          DateTime.fromJSDate(to).setLocale("it-IT").endOf("day").toString()
         );
       }
     }
@@ -567,27 +596,68 @@ function handleRemoveFilter(filter) {
   handleSearchChange(searchText);
 }
 function handleLoadForward() {
-  userScrolling = false;
-  let topElementsHeight = 0;
-  for (let i = 0; i < sectionRowsNumber; i++) {
-    topElementsHeight += tableBody?.children.item(i)?.getBoundingClientRect().height || 0;
-  }
-  currentSectionNumber = currentSectionNumber + 1;
-  tableContainer.scrollTop -= topElementsHeight;
-  setTimeout(() => userScrolling = true, 20);
-  if (totalCachedSections - sectionTreshold <= currentSectionNumber && !loading && totalRows > rows.length) {
+  if (renderedRows.length >= renderedRowsNumber) {
+    userScrolling = false;
+    const anchorIndex = renderedRowsNumber - 1;
+    const anchorUniqueKey = renderedRows[anchorIndex].item[uniqueKey];
+    const anchorElement = findAnchorElement(anchorUniqueKey);
+    const anchorOffsetBefore = anchorElement?.getBoundingClientRect().top || 0;
+    let removedRowCount = 0;
+    for (let i = 0; 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(() => {
+      const anchorElementAfter = findAnchorElement(anchorUniqueKey);
+      const anchorOffsetAfter = anchorElementAfter?.getBoundingClientRect().top || 0;
+      const offsetDiff = anchorOffsetAfter - anchorOffsetBefore;
+      tableContainer.scrollTop += offsetDiff;
+      userScrolling = true;
+    }, 10);
+  }
+  if (totalCachedSections - sectionThreshold <= currentSectionNumber && !loading && totalRows > rows.length) {
     dispatch("fetchData", {});
   }
 }
 function handleLoadBackward() {
   userScrolling = false;
-  let topElementsHeight = 0;
-  for (let i = renderedRows.length - 1; i > renderedRows.length - sectionRowsNumber + 1; i--) {
-    topElementsHeight += tableBody?.children.item(i)?.getBoundingClientRect().height || 0;
+  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;
-  tableContainer.scrollTop += topElementsHeight;
-  setTimeout(() => userScrolling = true, 20);
+  setTimeout(() => {
+    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++) {
+    const child = tableBody.children.item(i);
+    if (child?.getAttribute("data-key") == key) {
+      return child;
+    }
+  }
+  return void 0;
 }
 </script>
 
@@ -605,75 +675,78 @@ function handleLoadBackward() {
   />
 
   <slot name="search-bar" {handleSearchChange}>
-    <div class="search-bar-container">
-      {#if searchBarVisible}
-        <SimpleTextField
-          placeholder={searchBarPlaceholder}
-          appendInnerIcon="mdi-magnify"
-          bind:value={searchText}
-          bind:input={searchBarInput}
-          on:keydown={handleSearchBoxKeydown}
-          --simple-textfield-default-width="450px"
-          --simple-textfield-border-radius= 0.5rem
-          --simple-textfield-background-color= transparent
-          --simple-textfield-box-shadow= 'inset 0 0 0 1px rgb(var(--global-color-background-500))'
-          --simple-textfield-focus-box-shadow='inset 0 0 0 2px rgb(var(--global-color-primary-500))'
-        />
-      {/if}
+    {#if searchBarVisible || filtersVisible}
+      <div class="search-bar-container">
+        {#if searchBarVisible}
+          <SimpleTextField
+            placeholder={searchBarPlaceholder}
+            appendInnerIcon="mdi-magnify"
+            bind:value={searchText}
+            bind:input={searchBarInput}
+            on:keydown={handleSearchBoxKeydown}
+            --simple-textfield-default-width="450px"
+            --simple-textfield-border-radius= 0.5rem
+            --simple-textfield-background-color= transparent
+            --simple-textfield-box-shadow= 'inset 0 0 0 1px rgb(var(--global-color-background-500))'
+            --simple-textfield-focus-box-shadow='inset 0 0 0 2px rgb(var(--global-color-primary-500))'
+          />
+        {/if}
 
-      {#if filtersVisible}
-        <div style="margin-left: 20px;">
-          <Filters
-            bind:filters
-            on:applyFilter={() => {
-              handleSearchChange(searchText);
-            }}
-            on:removeFilter={e => { handleRemoveFilter(e.detail.filter) }}
-            on:removeAllFilters={() => handleRemoveAllFilters()}
-            --filters-default-wrapper-width="100%"
-            {lang}
-            {editFilterMode}
-            {showActiveFilters}
-          >
-            <svelte:fragment slot="append">
-              <slot name="filter-append" />
-            </svelte:fragment>
-            <svelte:fragment slot="custom-chip" let:filter>
-              <slot name="custom-filter-chip" {filter} />
-            </svelte:fragment>
-            <svelte:fragment
-              slot="custom"
-              let:filter
-              let:updateFunction
-              let:mAndDown
+        {#if filtersVisible}
+          <div style="margin-left: 20px;">
+            <Filters
+              bind:filters
+              on:applyFilter={() => {
+                handleSearchChange(searchText);
+              }}
+              on:removeFilter={e => { handleRemoveFilter(e.detail.filter) }}
+              on:removeAllFilters={() => handleRemoveAllFilters()}
+              --filters-default-wrapper-width="100%"
+              {lang}
+              {editFilterMode}
+              {showActiveFilters}
             >
-              <slot name="custom-filter" {filter} {updateFunction} {mAndDown} />
-            </svelte:fragment>
+              <svelte:fragment slot="append">
+                <slot name="filter-append" />
+              </svelte:fragment>
+              <svelte:fragment slot="custom-chip" let:filter>
+                <slot name="custom-filter-chip" {filter} />
+              </svelte:fragment>
+              <svelte:fragment
+                slot="custom"
+                let:filter
+                let:updateFunction
+                let:mAndDown
+              >
+                <slot name="custom-filter" {filter} {updateFunction} {mAndDown} />
+              </svelte:fragment>
 
-            <svelte:fragment slot="content" let:mAndDown let:filters let:updateMultiFilterValues let:handleRemoveAllFilters={removeAllFilters}>
-              {#key filters}
-                <DynamicFilters
-                  {lang}
-                  {filters}                      
-                  {mAndDown}
-                  on:change={e => updateFilterValues(e.detail.filter, updateMultiFilterValues)}    
-                  on:removeAllFilters={() => handleRemoveAllFilters(removeAllFilters)}
-                >
-                  <svelte:fragment slot="custom" let:filter let:mAndDown>
-                    <slot name="custom-filter" {filter} {updateMultiFilterValues} {mAndDown}></slot>
-                  </svelte:fragment>
-                </DynamicFilters>
-              {/key}
-            </svelte:fragment>
-          </Filters>
-        </div>
-      {/if}
-    </div>
+              <svelte:fragment slot="content" let:mAndDown let:filters let:updateMultiFilterValues let:handleRemoveAllFilters={removeAllFilters}>
+                {#key filters}
+                  <DynamicFilters
+                    {lang}
+                    {filters}                      
+                    {mAndDown}
+                    on:change={e => updateFilterValues(e.detail.filter, updateMultiFilterValues)}    
+                    on:removeAllFilters={() => handleRemoveAllFilters(removeAllFilters)}
+                  >
+                    <svelte:fragment slot="custom" let:filter let:mAndDown>
+                      <slot name="custom-filter" {filter} {updateMultiFilterValues} {mAndDown}></slot>
+                    </svelte:fragment>
+                  </DynamicFilters>
+                {/key}
+              </svelte:fragment>
+            </Filters>
+          </div>
+        {/if}
+      </div>
+    {/if}
   </slot>
 
-  {#if quickFiltersVisible}
+  {#if quickFiltersVisible || numberOfResultsVisible}
+  <div class="quick-filters-results-container">
     <div class="quick-filters">
-      {#if !!quickFilters && quickFilters.length > 0}
+      {#if !!quickFilters && quickFilters.length > 0 && quickFiltersVisible}
         {#each quickFilters as quickFilter}
           <div
             class={quickFilter.active ? "active-quick-filters" : "non-active-quick-filters"}
@@ -704,13 +777,28 @@ function handleLoadBackward() {
         {/each}
       {/if}
     </div>
+    {#if numberOfResultsVisible}
+      <div class='results-number'>
+        { lang == 'en' ? 'Results: ' : 'Risultati: '}
+        {#if !loading}
+          {totalRows || rows.length}
+        {:else}
+          <CircularLoader 
+            {loading}
+            --circular-loader-height='10px'
+          ></CircularLoader>
+        {/if}
+      </div>
+    {/if}
+  </div>
   {/if}
+
   <div class="outer-container">
-    <div class="inner-container" bind:this={tableContainer}>
+    <div class="inner-container" bind:this={tableContainer} on:scroll>
   <!-- <div class="table-container" bind:this={tableContainer}> -->
     <InfiniteScroll
       on:loadMore={handleLoadBackward}
-      treshold={backwardTresholdPixel}
+      threshold={backwardThresholdPixel}
       hasMore={currentSectionNumber > 0 && userScrolling}
       direction='backward'
     />
@@ -843,15 +931,16 @@ function handleLoadBackward() {
           {#each renderedRows as row, indexRow}
             <tr
               class="item-row"
+              data-key={row.item[uniqueKey]}
               style:background-color={
                 !!row.item.disableEdit ?
                   !!row.item.rowDisableBackgroundColor ?
                     row.item.rowDisableBackgroundColor : 
-                    'var(--dynamic-table-row-disabled-background-color, var(--dynamic-table-row-default-disabled-background-color))' : 
-                expandedRows.findIndex((r) => r.item.id == row.item.id ) != -1 ? 
-                  'var(--dynamic-table-expanded-row-background-color, var(--dynamic-table-expanded-row-default-background-color))' :
-                  !!selectedItems.find(i => i.id == row.item.id) ?
-                    'var(--dynamic-table-selected-row-background-color, var(--dynamic-table-selected-row-default-background-color))' :
+                    'var(--dynamic-table-row-disabled-background-color, var(--dynamic-table-default-row-disabled-background-color))' : 
+                expandedRows.findIndex((r) => r.item[uniqueKey] == row.item[uniqueKey] ) != -1 ? 
+                  'var(--dynamic-table-expanded-row-background-color, var(--dynamic-table-default-expanded-row-background-color))' :
+                  !!selectedItems.find(i => i[uniqueKey] == row.item[uniqueKey]) ?
+                    'var(--dynamic-table-selected-row-background-color, var(--dynamic-table-default-selected-row-background-color))' :
                     ""
                 }
               class:row-activator={cellEditorIndexRow == indexRow && !cellEditorSubItem}
@@ -860,9 +949,9 @@ function handleLoadBackward() {
               {#if !!showSelect && !showExpand}
                 <td style:padding-left="0px" style:text-align="center">
                   <Checkbox
-                    id={row.item.id}
+                    id={row.item[uniqueKey]}
                     value={selectedItems.findIndex(
-                      (i) => i.id == row.item.id
+                      (i) => i[uniqueKey] == row.item[uniqueKey]
                     ) != -1}
                     disabled={disabled || loading}
                     on:change={(e) => handleSelect(row.item, e.detail.shiftKeyPressed)}
@@ -873,7 +962,7 @@ function handleLoadBackward() {
                 <td style:padding-left="0px" style:text-align="center">
                   <Icon
                     name={expandedRows.findIndex(
-                      (r) => r.item.id == row.item.id
+                      (r) => r.item[uniqueKey] == row.item[uniqueKey]
                     ) == -1
                       ? "mdi-chevron-down"
                       : "mdi-chevron-up"}
@@ -940,7 +1029,7 @@ function handleLoadBackward() {
               {/if}
             </tr>
             {#if showExpand}
-              {#if expandedRows.findIndex((r) => r.item.id == row.item.id) != -1}
+              {#if expandedRows.findIndex((r) => r.item[uniqueKey] == row.item[uniqueKey]) != -1}
                 <tr>
                   <td
                     colspan={headersToShowInTable.length + 1}
@@ -1000,7 +1089,7 @@ function handleLoadBackward() {
                             {#each subHeaders as subHeader, indexSubHeader}
                               <td
                                 class:cell-edit-activator={cellEditorIndexHeader == indexSubHeader && cellEditorIndexRow == indexSubItem && cellEditorSubItem}
-                                class:hover-cell={cellEdit}
+                                class:hover-cell={cellEdit && !loading && !!subHeader.cellEditorInfo}
                                 on:click={(e) => {
                                   handleCellClick(
                                     e,
@@ -1042,7 +1131,7 @@ function handleLoadBackward() {
                                       {subHeader.type.params.nullText}
                                     {/if}
                                   {:else}
-                                    {subItem[subHeader.value]}
+                                    <div style="display: flex; justify-content: center;">-</div>
                                   {/if}
                                 {:else}
                                   {subItem[subHeader.value]}
@@ -1077,10 +1166,17 @@ function handleLoadBackward() {
     </table>
     <InfiniteScroll
       on:loadMore={handleLoadForward}
-      treshold={forwardTresholdPixel}
+      threshold={forwardThresholdPixel}
       hasMore={hasMoreToRender && userScrolling}
     />
   </div>
+  {#if totalSections - 1 < currentSectionNumber && reachedBottom && endLineVisible}
+    <div class="line-container" transition:fade>
+      <span class="line"></span>
+      <span class="text">{lang == 'en' ? 'End' : 'Fine'}</span>
+      <span class="line"></span>
+    </div>
+  {/if}
   </div>
 {/if}
 
@@ -1234,55 +1330,58 @@ function handleLoadBackward() {
             >
           {/if}
         </div>
-        <Autocomplete
-          multiple
-          items={quickFilterActive.type.items}
-          bind:values={quickFilterActive.type.values}
-          --autocomplete-border="1px solid rgb(var(--global-color-background-500))"
-          --autocomplete-focus-box-shadow="0 0 0 2px rgb(var(--global-color-primary-500))"
-        >
-          <svelte:fragment slot="selection" let:selection let:unselect>
-            <slot name="selection" {selection} {unselect}>
-              <div tabindex="-1">
-                <Chip
-                  close={true}
-                  on:close={() => unselect(selection)}
-                  --chip-default-border-radius="var(--autocomplete-border-radius, var(--autocomplete-default-border-radius))"
-                  buttonTabIndex={-1}
-                  truncateText
-                >
-                  <slot name="chip-label" {selection}>
-                    {#if !!quickFilterActive.type.countriesAlpha2 && quickFilterActive.type.countriesAlpha2.find((c) => c.value == selection.value)}
-                      <div>
-                        <FlagIcon
-                          alpha2={quickFilterActive.type.countriesAlpha2
-                            .find((c) => c.value == selection.value)
-                            ?.label?.toString()
-                            .toLowerCase() ?? ""}
-                          --flag-icon-size="16px"
-                        />
-                      </div>
-                    {/if}
-                    {selection.label}
-                  </slot>
-                </Chip>
-              </div>
-            </slot>
-          </svelte:fragment>
-          <svelte:fragment slot="item-label" let:item>
-            <slot name="item-label" {item}>
-              {#if !!quickFilterActive.type.countriesAlpha2 && quickFilterActive.type.countriesAlpha2.find((c) => c.value == item.value)}
-                <FlagIcon
-                  alpha2={quickFilterActive.type.countriesAlpha2
-                    .find((c) => c.value == item.value)
-                    ?.label?.toString()
-                    .toLowerCase() ?? ""}
-                />
-              {/if}
-              {item.label}
-            </slot>
-          </svelte:fragment>
-        </Autocomplete>
+        <div on:click|stopPropagation role="presentation" tabindex="-1">
+          <Autocomplete
+            multiple
+            items={quickFilterActive.type.items}
+            bind:values={quickFilterActive.type.values}
+            --autocomplete-border-radius= 0.5rem
+            --autocomplete-border="1px solid rgb(var(--global-color-background-500))"
+            --autocomplete-focus-box-shadow="0 0 0 2px rgb(var(--global-color-primary-500))"
+          >
+            <svelte:fragment slot="selection" let:selection let:unselect>
+              <slot name="selection" {selection} {unselect}>
+                <div tabindex="-1">
+                  <Chip
+                    close={true}
+                    on:close={() => unselect(selection)}
+                    --chip-default-border-radius="var(--autocomplete-border-radius, var(--autocomplete-default-border-radius))"
+                    buttonTabIndex={-1}
+                    truncateText
+                  >
+                    <slot name="chip-label" {selection}>
+                      {#if !!quickFilterActive.type.countriesAlpha2 && quickFilterActive.type.countriesAlpha2.find((c) => c.value == selection.value)}
+                        <div>
+                          <FlagIcon
+                            alpha2={quickFilterActive.type.countriesAlpha2
+                              .find((c) => c.value == selection.value)
+                              ?.label?.toString()
+                              .toLowerCase() ?? ""}
+                            --flag-icon-size="16px"
+                          />
+                        </div>
+                      {/if}
+                      {selection.label}
+                    </slot>
+                  </Chip>
+                </div>
+              </slot>
+            </svelte:fragment>
+            <svelte:fragment slot="item-label" let:item>
+              <slot name="item-label" {item}>
+                {#if !!quickFilterActive.type.countriesAlpha2 && quickFilterActive.type.countriesAlpha2.find((c) => c.value == item.value)}
+                  <FlagIcon
+                    alpha2={quickFilterActive.type.countriesAlpha2
+                      .find((c) => c.value == item.value)
+                      ?.label?.toString()
+                      .toLowerCase() ?? ""}
+                  />
+                {/if}
+                {item.label}
+              </slot>
+            </svelte:fragment>
+          </Autocomplete>
+        </div>
       {:else if quickFilterActive.type.key === "boolean"}
         {#if quickFilterActive.type.params}
           <div class="vertical-quick-filters">
@@ -1314,22 +1413,24 @@ function handleLoadBackward() {
             >
           {/if}
         </div>
-        <CountriesAutocomplete
-          bind:selected={quickFilterActive.type.selected}
-          {...((!!quickFilterActive.type.countriesOptions && quickFilterActive.type.countriesOptions.length > 0) && {
-            items: quickFilterActive.type.countriesOptions,
-          })}
-          autocompleteProps={{
-            placeholder: !!quickFilterActive.type.selected
-              ? quickFilterActive.type.selected.length > 0
-                ? ""
-                : quickFilterActive.description
-              : quickFilterActive.description,
-            multiple: true,
-          }}
-          --autocomplete-border="1px solid rgb(var(--global-color-background-500))"
-          --autocomplete-focus-box-shadow="0 0 0 2px rgb(var(--global-color-primary-500))"
-        />
+        <div on:click|stopPropagation role="presentation" tabindex="-1">
+          <CountriesAutocomplete
+            bind:selected={quickFilterActive.type.selected}
+            {...((!!quickFilterActive.type.countriesOptions && quickFilterActive.type.countriesOptions.length > 0) && {
+              items: quickFilterActive.type.countriesOptions,
+            })}
+            autocompleteProps={{
+              placeholder: !!quickFilterActive.type.selected
+                ? quickFilterActive.type.selected.length > 0
+                  ? ""
+                  : quickFilterActive.description
+                : quickFilterActive.description,
+              multiple: true,
+            }}
+            --autocomplete-border="1px solid rgb(var(--global-color-background-500))"
+            --autocomplete-focus-box-shadow="0 0 0 2px rgb(var(--global-color-primary-500))"
+          />
+        </div>
       {:else if quickFilterActive.type.key === "date"}
         <div on:click|stopPropagation role="presentation" tabindex="-1">
           <div>
@@ -1495,7 +1596,6 @@ function handleLoadBackward() {
   .inner-container {
     overflow-y: auto;
     margin-right: -15px;
-    padding-right: 15px;
     max-height: var(--dynamic-table-max-height, var(--dynamic-table-default-max-height));
   }
 
@@ -1513,10 +1613,18 @@ function handleLoadBackward() {
     z-index: 2;
   }
 
+  @media not all and (min-resolution:.001dpcm) { 
+    .table-header {
+      position: sticky;
+      top: -2px;
+      z-index: 2;
+    }
+  }
+
   .table-subheader {
-  top: var(--main-header-height);
-  z-index: 1;
-}
+    top: var(--main-header-height);
+    z-index: 1;
+  }
   .table-header th {
     padding: var(
       --dynamic-table-header-padding,
@@ -1599,7 +1707,7 @@ function handleLoadBackward() {
   }
 
   table {
-    border-collapse: collapse;
+    border-collapse: separate;
     width: 100%;
   }
 
@@ -1620,10 +1728,17 @@ function handleLoadBackward() {
     border-radius: 5px;
   }
 
+  .item-row > td {
+    height: var(
+      --dynamic-table-row-min-height,
+      var(--dynamic-table-default-row-min-height)
+    );
+  }
+
   .item-row:hover {
     background-color: var(
       --dynamic-table-row-background-color-hover,
-      var(--dynamic-table-row-default-background-color-hover)
+      var(--dynamic-table-default-row-background-color-hover)
     );
   }
 
@@ -1638,7 +1753,7 @@ function handleLoadBackward() {
     border-radius: 10px;
     background-color: var(
       --dynamic-table-cell-editor-background-color,
-      var(--dynamic-table-cell-editor-default-background-color)
+      var(--dynamic-table-default-cell-editor-background-color)
     );
     height: 200px;
     width: 500px;
@@ -1647,7 +1762,7 @@ function handleLoadBackward() {
   .row-activator {
     background-color: var(
       --dynamic-table-row-background-color-hover,
-      var(--dynamic-table-row-default-background-color-hover)
+      var(--dynamic-table-default-row-background-color-hover)
     );
   }
 
@@ -1662,7 +1777,7 @@ function handleLoadBackward() {
     border-radius: 10px;
     background-color: var(
       --dynamic-table-quick-filter-background-color,
-      var(--dynamic-table-quick-filter-default-background-color)
+      var(--dynamic-table-default-quick-filter-background-color)
     );
   }
 
@@ -1709,6 +1824,11 @@ function handleLoadBackward() {
     margin-bottom: 10px;
   }
 
+  .quick-filters-results-container {
+    display: flex;
+    justify-content: space-between;
+  }
+
   .vertical-quick-filters {
     display: flex;
     flex-direction: column;
@@ -1766,4 +1886,43 @@ function handleLoadBackward() {
     gap: 12px;
     padding: 8px;
   }
-</style>
+
+  .line-container {
+    position: sticky;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    background: var(
+      --dynamic-table-end-line-background-color,
+      var(--dynamic-table-default-end-line-background-color)
+    );
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 3;
+  }
+
+  .line {
+    flex-grow: 1;
+    height: 1px;
+    background: var(
+      --dynamic-table-end-line-color,
+      var(--dynamic-table-default-end-line-color)
+    );
+    margin: 0 10px;
+  }
+
+  .text {
+    color: var(
+      --dynamic-table-end-line-text-color,
+      var(--dynamic-table-default-end-line-text-color)
+    );
+  }
+
+  .results-number {
+    margin: 0px 0px 4px 4px;
+    display: flex;
+    align-items: center;
+    gap: 4px;
+  }
+</style>