@likable-hair/svelte 3.3.16 → 3.3.18

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

@@ -36,30 +36,30 @@ 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);
-      }
+  hideScrollbar = tableContainer.scrollHeight > tableContainer.clientHeight;
+  for (const head of [...headers, { value: "non-resizable", minWidth: DEFAULT_MIN_WIDTH_PX + "px", maxWidth: DEFAULT_MAX_WIDTH_PX + "px" }, { value: "customize-headers", minWidth: DEFAULT_MIN_WIDTH_PX + "px", maxWidth: DEFAULT_MAX_WIDTH_PX + "px" }]) {
+    let th;
+    if (head.value == "non-resizable" || head.value == "customize-headers") {
+      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");
   }
+  let table = document.getElementsByClassName("dynamic-table")[0];
+  table.classList.add("dynamic-resizable");
+  resizeObserver = new ResizeObserver(() => {
+    updateRemainingWidth();
+  });
+  resizeObserver.observe(tableContainer);
   return () => {
     window.removeEventListener("resize", updateHeaderHeight);
     tableContainer.removeEventListener("scroll", setReachedBottomOrTop);
+    resizeObserver?.disconnect();
   };
 });
-let mainHeader;
 function updateHeaderHeight() {
   if (mainHeader) {
     const headerHeight = mainHeader.getBoundingClientRect().height;
@@ -69,6 +69,7 @@ function updateHeaderHeight() {
 function setReachedBottomOrTop() {
   reachedBottom = tableContainer.scrollHeight - tableContainer.scrollTop === tableContainer.clientHeight;
   reachedTop = tableContainer.scrollTop === 0;
+  hideScrollbar = tableContainer.scrollHeight > tableContainer.clientHeight;
 }
 $:
   if (reachedBottom && rows.length < totalRows) {
@@ -104,8 +105,8 @@ 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, 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;
+export let headers = [], headersToShowInTable = headers, subHeaders = [], customizeHeaders = false, rows = [], sortedBy = void 0, sortDirection = "asc", cellEdit = false, lang = "en", dateLocale = void 0, noItemsText = lang == "en" ? "No items to show" : "Nessun elemento da visualizzare", showSelect = false, showActions = true, selectMode = "single", selectedItems = [], unselectedItems = [], selectedAll = false, showExpand = false, loading = false, disabled = false, filters = [], searchBarColumns = void 0, searchBarVisible = false, searchBarPlaceholder = lang == "en" ? "Type to search..." : "Scrivi per cercare...", filtersVisible = false, quickFiltersVisible = false, editFilterMode = "one-edit", showActiveFilters = true, quickFilters = [], actionsForSelectedItems = [], quickActionsDisabled = false, 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 = {}, dynamicFilters = true;
+let openCellEditor = false, cellEditorActivator, cellEditorContainer, menuElementCellEditor, menuElementQuickFilters, cellEditorInfoActive, saveEditDisabled = false, searchBarInput = void 0, openQuickFilter = false, quickFilterActivator, quickFilterActive, globalBuilder = new FilterBuilder(), calendarOpened = false, calendarOpened2 = false, selectedIndexes = [], cellEditorIndexRow, cellEditorIndexHeader, cellEditorSubItem, currentSectionNumber = 0, tableBody, tableContainer, userScrolling = true, reachedBottom = false, reachedTop = false, resizing = false, remainingWidth = 0, hideScrollbar = false, sortModify, mainHeader, resizeObserver;
 const DEFAULT_MIN_WIDTH_PX = 100, DEFAULT_MAX_WIDTH_PX = 400;
 $:
   totalSections = (totalRows - renderedRowsNumber) / sectionRowsNumber;
@@ -142,10 +143,12 @@ function handleHeaderClick(header) {
         sortDirection = "desc";
       else if (sortDirection == "desc") {
         sortedBy = void 0;
+        sortModify = void 0;
       }
     } else {
       sortedBy = header.value;
       sortDirection = "asc";
+      sortModify = header.sortModify;
     }
     handleSearchChange(searchText);
     dispatch("sort", {
@@ -218,13 +221,18 @@ function handleCancelClick() {
   openQuickFilter = false;
 }
 function handleSelect(item, shiftKeyPressed) {
-  let index = selectedItems.findIndex((i) => i[uniqueKey] == item[uniqueKey]);
+  let index = -1;
+  if (selectedAll) {
+    index = unselectedItems.findIndex((i) => i[uniqueKey] == item[uniqueKey]);
+  } else {
+    index = selectedItems.findIndex((i) => i[uniqueKey] == item[uniqueKey]);
+  }
   if (index == -1) {
     if (selectMode == "single") {
       selectedItems = [item];
       selectedIndexes = [rows.findIndex((r) => r.item[uniqueKey] == item[uniqueKey])];
     } else if (selectMode == "multiple") {
-      if (shiftKeyPressed && selectedIndexes.length > 0 && !isSelectedAll) {
+      if (shiftKeyPressed && selectedIndexes.length > 0) {
         let lastSelectedIndex = selectedIndexes[selectedIndexes.length - 1], selectedIndex = rows.findIndex((r) => r.item[uniqueKey] == item[uniqueKey]);
         if (selectedIndex != -1) {
           if (selectedIndex < lastSelectedIndex) {
@@ -233,32 +241,41 @@ function handleSelect(item, shiftKeyPressed) {
             selectedIndex = x;
           }
           for (let i = lastSelectedIndex + 1; i <= selectedIndex; i++) {
-            if (!selectedItems.find((selectedItem) => selectedItem[uniqueKey] == rows[i].item[uniqueKey])) {
-              selectedItems = [...selectedItems, rows[i].item];
+            if (selectedAll) {
+              if (!unselectedItems.find((unselectedItem) => unselectedItem[uniqueKey] == rows[i].item[uniqueKey])) {
+                unselectedItems = [...unselectedItems, rows[i].item];
+              }
+            } else {
+              if (!selectedItems.find((selectedItem) => selectedItem[uniqueKey] == rows[i].item[uniqueKey])) {
+                selectedItems = [...selectedItems, rows[i].item];
+              }
             }
           }
         }
       } else {
-        selectedItems = [...selectedItems, item];
+        if (selectedAll) {
+          unselectedItems = [...unselectedItems, item];
+        } else {
+          selectedItems = [...selectedItems, item];
+        }
         selectedIndexes.push(rows.findIndex((r) => r.item[uniqueKey] == item[uniqueKey]));
       }
     }
   } else {
-    selectedItems = selectedItems.filter((i) => i[uniqueKey] != item[uniqueKey]);
+    if (selectedAll) {
+      unselectedItems = unselectedItems.filter((i) => i[uniqueKey] != item[uniqueKey]);
+    } else {
+      selectedItems = selectedItems.filter((i) => i[uniqueKey] != item[uniqueKey]);
+    }
     selectedIndexes = selectedIndexes.filter((r) => r != rows.findIndex((r2) => r2.item[uniqueKey] == item[uniqueKey]));
-    isSelectedAll = false;
   }
 }
 function handleSelectAll() {
   if (selectMode == "multiple") {
-    if (selectedItems.length == rows.length) {
-      selectedItems = [];
-      selectedIndexes = [];
-      isSelectedAll = false;
-    } else {
-      selectedItems = rows.map((r) => r.item);
-      isSelectedAll = true;
-    }
+    selectedItems = [];
+    selectedIndexes = [];
+    unselectedItems = [];
+    selectedAll = !selectedAll;
   }
 }
 function expandRow(row) {
@@ -286,9 +303,6 @@ $: {
   } else {
     saveEditDisabled = false;
   }
-  if (!!isSelectedAll && rows.length > 0 && !loading && !disabled && selectedItems.length < rows.length) {
-    selectedItems = rows.map((r) => r.item);
-  }
 }
 function searchTextBuilder(searchText2) {
   let builder;
@@ -304,9 +318,6 @@ function searchTextBuilder(searchText2) {
       }
     });
   }
-  if (!!sortedBy) {
-    builder.orderBy(sortedBy, sortDirection || "asc");
-  }
   return builder;
 }
 let syncTimer;
@@ -330,6 +341,13 @@ function handleFiltersChange() {
     tableContainer.scrollTop = 0;
     setTimeout(() => userScrolling = true, 20);
   }
+  if (!!sortedBy) {
+    if (sortModify) {
+      globalBuilder = sortModify({ builder: globalBuilder, sortDirection });
+    } else {
+      globalBuilder.orderBy(sortedBy, sortDirection || "asc");
+    }
+  }
   dispatch("filtersChange", {
     builder: globalBuilder
   });
@@ -577,9 +595,6 @@ function quickFilterBuilder(builder, quickFilter, clearPreaviousValue = true) {
       }
     }
   }
-  if (!!sortedBy) {
-    builder.orderBy(sortedBy, sortDirection || "asc");
-  }
   return builder;
 }
 function updateFilterValues(filter, updateMultiFilterValues) {
@@ -603,10 +618,7 @@ function updateFilterValues(filter, updateMultiFilterValues) {
   }
   updateMultiFilterValues(filter.name, newValue, newValid, newMode);
 }
-function handleRemoveAllFilters(removeAllFilters) {
-  if (!!removeAllFilters) {
-    removeAllFilters();
-  }
+function handleRemoveAllFilters() {
   dispatch("removeAllFilters", {});
   handleSearchChange(searchText);
 }
@@ -739,7 +751,7 @@ function resize(node) {
   }
 }
 $:
-  if (resizableColumns && !!tableContainer && resizableColumns && headersToShowInTable.length > 0 && resizedColumnSizeWithPadding && headersToShow.length > 0 && mainHeader) {
+  if (!!tableContainer && headersToShowInTable.length > 0 && resizedColumnSizeWithPadding && headersToShow.length > 0 && mainHeader) {
     tick().then(updateRemainingWidth);
   }
 async function updateRemainingWidth() {
@@ -785,86 +797,128 @@ function resizeHeader(th, header) {
 </script>
 
 {#if !!rows && Array.isArray(rows) && !!headersToShowInTable && Array.isArray(headersToShowInTable)}
-  <QuickActions
-    {selectedItems}
-    {showSelectContainer}
-    {isSelectedAll}
-    {totalRows}
-    {slotSelectActionsContainer}
-    {disabled}
-    {loading}
-    {actionsForSelectedItems}
-    {lang}
-  />
+  {#if showActions}
+    <QuickActions
+      selectedItems={selectedAll ? totalRows - unselectedItems.length : selectedItems.length}
+      disabled={quickActionsDisabled}
+      {actionsForSelectedItems}
+      {lang}
+      on:close={() => {
+        selectedAll = false
+        unselectedItems = []
+        selectedItems = []
+      }}
+    />
+  {/if}
 
-  <slot name="search-bar" {handleSearchChange}>
-    {#if searchBarVisible || filtersVisible}
+  {#if searchBarVisible || filtersVisible || $$slots.appendFilterRow}
+    <div class="filter-container">
       <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}
+        <slot name="search-bar" {handleSearchChange}>
+          {#if searchBarVisible}
+          <div style="margin-right: 20px;">
+            <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))'
+            />
+          </div>
+          {/if}
+        </slot>
 
         {#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
+          <div>
+            {#if dynamicFilters}
+              <Filters
+                bind:filters
+                on:applyFilter={() => {
+                  handleSearchChange(searchText);
+                }}
+                on:removeFilter={e => { handleRemoveFilter(e.detail.filter) }}
+                on:removeAllFilters={() => handleRemoveAllFilters()}
+                --filters-default-wrapper-width="100%"
+                {lang}
+                {dateLocale}
+                {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>
+                <svelte:fragment slot="content" let:mAndDown let:filters let:updateMultiFilterValues>
+                  {#key filters}
+                    <DynamicFilters
+                      {lang}
+                      {filters}                      
+                      {mAndDown}
+                      {updateMultiFilterValues}
+                      on:change={e => updateFilterValues(e.detail.filter, updateMultiFilterValues)}    
+                    >
+                      <svelte:fragment slot="custom" let:filter let:mAndDown let:updateCustomFilterValues>
+                        <slot name="custom-filter" {filter} {updateCustomFilterValues} {mAndDown}></slot>
+                      </svelte:fragment>
+                    </DynamicFilters>
+                  {/key}
+                </svelte:fragment>
+              </Filters>
+            {:else}
+              <Filters
+                bind:filters
+                on:applyFilter={() => {
+                  handleSearchChange(searchText);
+                }}
+                on:removeFilter={e => { handleRemoveFilter(e.detail.filter) }}
+                on:removeAllFilters={() => handleRemoveAllFilters()}
+                --filters-default-wrapper-width="100%"
+                {lang}
+                {dateLocale}
+                {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
+                >
+                  <slot name="custom-static-filter" {filter} {updateFunction} {mAndDown}/>
+                </svelte:fragment>
+              </Filters>
+            {/if}
           </div>
         {/if}
       </div>
-    {/if}
-  </slot>
+
+      <div>
+        <slot name="appendFilterRow"></slot>
+      </div>
+    </div>
+  {/if}
 
   {#if quickFiltersVisible || numberOfResultsVisible}
   <div class="quick-filters-results-container">
@@ -917,14 +971,14 @@ function resizeHeader(th, header) {
   {/if}
 
   <div class="outer-container">
-    <div class="inner-container" bind:this={tableContainer} on:scroll>
+    <div class="inner-container" class:hide-scrollbar={hideScrollbar} bind:this={tableContainer} on:scroll>
     <InfiniteScroll
       on:loadMore={handleLoadBackward}
       threshold={backwardThresholdPixel}
       hasMore={currentSectionNumber > 0 && userScrolling}
       direction='backward'
     />
-    <table style="display: table;" class="table">
+    <table style="display: table;" class="dynamic-table">
       <thead class="table-header" bind:this={mainHeader}>
         <tr>
           {#if !!showSelect && !showExpand && rows.length > 0}
@@ -937,7 +991,7 @@ function resizeHeader(th, header) {
               {#if selectMode === "multiple"}
                 <Checkbox
                   id="select-all"
-                  value={selectedItems.length == totalBatchLength}
+                  value={selectedAll}
                   disabled={disabled || loading}
                   on:change={handleSelectAll}
                 />
@@ -956,6 +1010,7 @@ function resizeHeader(th, header) {
             <th
               style={`${resizableColumns || !head.width ? '' : `width: ${head.width}`}`}
               style:min-width={head.minWidth}
+              style:max-width={head.maxWidth}
               class:sortable={head.sortable}
               on:click={() => handleHeaderClick(head)}
               id={head.value}
@@ -1004,34 +1059,29 @@ function resizeHeader(th, header) {
               </slot>
             </th>
           {/each}
-          {#if $$slots.rowActions || $$slots.append}
-            <th
-              class="slot-append"
-            >
-              <slot name="append" index={-1} items={undefined} />
-            </th>
-          {/if}
-          {#if resizableColumns && remainingWidth}
+          {#if remainingWidth && (customizeHeaders || resizableColumns)}
             <th
               style:width={remainingWidth + 'px'}
               class="filler"
               aria-hidden="true"
             />
           {/if}
-          {#if customizeHeaders}
+          {#if customizeHeaders || $$slots.rowActions || $$slots.append}
             <th
-              style:width="15px"
-              style:min-width="15px"
               style:text-align="center"
               class="customize-headers"
             >
-              <div style="display: flex; justify-content: center;">
-                <Icon
-                  name="mdi-plus-circle-outline"
-                  click
-                  on:click={() => (openHeaderDrawer = true)}
-                />
-              </div>
+              {#if customizeHeaders}
+                <div style="display: flex; justify-content: start;">
+                  <Icon
+                    name="mdi-plus-circle-outline"
+                    click
+                    on:click={() => (openHeaderDrawer = true)}
+                  />
+                </div>
+              {:else}
+                <slot name="append" index={-1} items={undefined} />
+              {/if}
             </th>
           {/if}
         </tr>
@@ -1072,16 +1122,20 @@ function resizeHeader(th, header) {
               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-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))' :
-                    ""
-                }
+                !!row.item.disableEdit
+                  ? !!row.item.rowDisableBackgroundColor
+                    ? row.item.rowDisableBackgroundColor
+                    : '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))'
+                    : selectedAll
+                      ? !unselectedItems.find(i => i[uniqueKey] == row.item[uniqueKey])
+                        ? 'var(--dynamic-table-selected-row-background-color, var(--dynamic-table-default-selected-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}
               on:click={() => handleRowClick(row)}
             >
@@ -1089,9 +1143,15 @@ function resizeHeader(th, header) {
                 <td style:padding-left="0px" style:text-align="center">
                   <Checkbox
                     id={row.item[uniqueKey]}
-                    value={selectedItems.findIndex(
-                      (i) => i[uniqueKey] == row.item[uniqueKey]
-                    ) != -1}
+                    value={
+                      selectedAll ?
+                        unselectedItems.findIndex(
+                          (i) => i[uniqueKey] == row.item[uniqueKey]
+                        ) == -1 :
+                        selectedItems.findIndex(
+                          (i) => i[uniqueKey] == row.item[uniqueKey]
+                        ) != -1
+                    }
                     disabled={disabled || loading}
                     on:change={(e) => handleSelect(row.item, e.detail.shiftKeyPressed)}
                   />
@@ -1160,6 +1220,9 @@ function resizeHeader(th, header) {
                   {/if}
                 </td>
               {/each}
+              {#if remainingWidth && (customizeHeaders || resizableColumns)}
+                <td/>
+              {/if}
               {#if $$slots.rowActions || $$slots.append}
                 <td class={clazz.cell || ""}>
                   <slot name="rowActions" index={indexRow} {row} />
@@ -1182,6 +1245,7 @@ function resizeHeader(th, header) {
                             <th
                               style:width={subHeader.width}
                               style:min-width={subHeader.minWidth}
+                              style:max-width={subHeader.maxWidth}
                               class:sortable={subHeader.sortable}
                               on:click={() => handleHeaderClick(subHeader)}
                             >
@@ -1567,6 +1631,7 @@ function resizeHeader(th, header) {
                 : quickFilterActive.description,
               multiple: true,
             }}
+            --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))"
           />
@@ -1655,11 +1720,11 @@ function resizeHeader(th, header) {
 <MediaQuery let:sAndDown>
   <Drawer
     bind:open={openHeaderDrawer}
-    _space={sAndDown ? "60vh" : "20vw"}
+    _space={sAndDown ? "60vh" : "400px"}
     position={sAndDown ? "bottom" : "right"}
   >
+    <div class="personalize-header">{lang == 'en' ? 'Personalize your headers' : 'Personalizza le tue intestazioni'}</div>
     <div style="padding: 20px;">
-      <div class="personalize-header">{lang == 'en' ? 'Personalize your headers' : 'Personalizza le tue intestazioni'}</div>
 
       <span class="headers-show grid-col-1">{lang == 'en' ? 'Headers shown in table' : 'Intestazioni visualizzate in tabella'}</span>
 
@@ -1670,19 +1735,26 @@ function resizeHeader(th, header) {
             headersToShow = e.detail.items;
           }}
         >
-          <svelte:fragment slot="item" let:item>
-            <Switch
-              --switch-label-width="90%"
-              value={headersToShow.find((h) => h.id == item.id) != undefined}
-              label={item.name}
-              on:change={(e) => {
-                if (e.detail.value == false) {
-                  headersToShow = headersToShow.filter((h) => h.id != item.id);
-                  headersToSelect = [...headersToSelect, item];
-                }
-              }}
-            />
-          </svelte:fragment>
+          <div slot="item" let:item>
+            <div
+              style:display=flex
+            >
+              <div
+                style:flex-grow=1
+              >
+                {item.name}
+              </div>
+              <Switch
+                value={headersToShow.find((h) => h.id == item.id) != undefined}
+                on:change={(e) => {
+                  if (e.detail.value == false) {
+                    headersToShow = headersToShow.filter((h) => h.id != item.id);
+                    headersToSelect = [...headersToSelect, item];
+                  }
+                }}
+              />
+            </div>
+          </div>
         </VerticalDraggableList>
       {/if}
       <Divider --divider-color=rgb(var(--global-color-contrast-100) />
@@ -1695,19 +1767,26 @@ function resizeHeader(th, header) {
             out:send={{ key: header }}
             class="headers-show grid-col-1"
           >
-            <Switch
-              --switch-label-width="90%"
-              value={false}
-              label={header.name}
-              on:change={(e) => {
-                if (e.detail.value == true) {
-                  headersToSelect = headersToSelect.filter(
-                    (h) => h.id != header.id
-                  );
-                  headersToShow = [...headersToShow, header];
-                }
-              }}
-            />
+            <div
+              style:display=flex
+            >
+              <div
+                style:flex-grow=1
+              >
+                {header.name}
+              </div>
+              <Switch
+                value={false}
+                on:change={(e) => {
+                  if (e.detail.value == true) {
+                    headersToSelect = headersToSelect.filter(
+                      (h) => h.id != header.id
+                    );
+                    headersToShow = [...headersToShow, header];
+                  }
+                }}
+              />
+            </div>
           </div>
         {/each}
       {:else}
@@ -1715,10 +1794,10 @@ function resizeHeader(th, header) {
           <span style="text-align: center;">{lang == 'en' ? 'No headers to add' : 'Nessuna intestazione da aggiungere'}</span>
         </div>
       {/if}
-      <div style="width: 100%; display: flex; justify-content: center;">
+      <div style="width: 100%; display: flex; justify-content: center; padding-top: 15px;">
         <Button
           class="mr-3 mt-5"
-          --button-width="70%"
+          --button-width="100%"
           on:click={saveHeadersToShow}
         >
           {lang == 'en' ? 'Save preferences' : 'Salva preferenze'}
@@ -1735,11 +1814,14 @@ function resizeHeader(th, header) {
 
   .inner-container {
     overflow-y: auto;
-    margin-right: -15px;
     max-height: var(--dynamic-table-max-height, var(--dynamic-table-default-max-height));
   }
 
-  .table {
+  .hide-scrollbar {
+    margin-right: -15px;
+  }
+
+  .dynamic-table {
     background-color: var(
       --dynamic-table-background-color,
       var(--dynamic-table-default-background-color)
@@ -1747,7 +1829,7 @@ function resizeHeader(th, header) {
     border-collapse: separate;
   }
 
-  .table.resizable {
+  .dynamic-table.dynamic-resizable {
     table-layout: fixed;
     width: fit-content;
   }
@@ -1867,17 +1949,17 @@ function resizeHeader(th, header) {
     border: 1px solid transparent;
   }
 
-  table.table > tbody > tr > td {
+  table.dynamic-table > tbody > tr > td {
     overflow: hidden;
     text-overflow: ellipsis;
   }
 
-  table.table > thead > tr > th {
+  table.dynamic-table > thead > tr > th {
     overflow: hidden;
     text-overflow: ellipsis;
   }
 
-  table.table > tbody > tr > td.expanded-row {
+  table.dynamic-table > tbody > tr > td.expanded-row {
   overflow: visible;
 }
 
@@ -1974,6 +2056,12 @@ function resizeHeader(th, header) {
   .search-bar-container {
     display: flex;
     flex-direction: row;
+  }
+
+  .filter-container {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
     margin-bottom: 20px;
   }