@likable-hair/svelte 3.3.28 → 3.3.30

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

@@ -1,1194 +1,800 @@
-<script lang="ts">
-  import {
-    Checkbox,
-    Chip,
-    Converter,
-    CountriesAutocomplete,
-    DatePickerTextField,
-    Drawer,
-    FilterBuilder,
-    FlagIcon,
-    Icon,
-    MediaQuery,
-    Menu,
-    ToolTip,
-    type PaginatedTable
-  } from "../../..";
-  import { DateTime } from "luxon";
-  import { createEventDispatcher, onMount, tick, type ComponentProps } from "svelte";
-  import { quintOut } from "svelte/easing";
-  import { crossfade, fade } from "svelte/transition";
-  import Filters from "../search/Filters.svelte";
-  import ConfirmOrCancelButtons from "../forms/ConfirmOrCancelButtons.svelte";
-  import { flip } from "svelte/animate";
-  import InfiniteScroll from "../../simple/common/InfiniteScroll.svelte";
-  import Divider from "../../simple/common/Divider.svelte";
-  import VerticalDraggableList from "../../simple/common/VerticalDraggableList.svelte";
-  import Button from "../../simple/buttons/Button.svelte";
-  import SimpleTextField from "../../simple/forms/SimpleTextField.svelte";
-  import Autocomplete from "../../simple/forms/Autocomplete.svelte";
-  import LabelAndSelect from "../forms/LabelAndSelect.svelte";
-  import LabelAndTextField from "../forms/LabelAndTextField.svelte";
-  import DynamicFilters from "../search/DynamicFilters.svelte";
-  import type { DateMode, Filter, NumberMode, SelectMode, StringMode } from "../../../utils/filters/filters";
-  import QuickActions, { type Action } from "../common/QuickActions.svelte";
-  import './DynamicTable.css'
-  import type { QuickFilter } from "../../../utils/filters/quickFilters";
-  import Switch from "../../simple/forms/Switch.svelte";
-  import CircularLoader from "../../simple/loaders/CircularLoader.svelte";
-
-  onMount(() => {
-    updateHeaderHeight();
-    window.addEventListener('resize', updateHeaderHeight);
-    tableContainer.addEventListener("scroll", setReachedBottomOrTop);
-
-    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 = headersHTML[head.value]
-      if(!!th) {
-        resizeHeader(th, head)
-      }
-    }
-
-    tableHTML.classList.add('dynamic-resizable')
-
-    resizeObserver = new ResizeObserver(() => {
-      updateRemainingWidth();
-      updateHeaderHeight();
-    });
-    resizeObserver.observe(tableContainer);
-
-    return () => {
-      window.removeEventListener('resize', updateHeaderHeight);
-      tableContainer.removeEventListener("scroll", setReachedBottomOrTop);
-      resizeObserver?.disconnect();
-    }
-  });
-
-  function updateHeaderHeight() {
-    if (mainHeader) {
-      const headerHeight = mainHeader.getBoundingClientRect().height;
-      document.documentElement.style.setProperty('--main-header-height', headerHeight + 'px');
+<script>import {
+  Checkbox,
+  Chip,
+  Converter,
+  CountriesAutocomplete,
+  DatePickerTextField,
+  Drawer,
+  FilterBuilder,
+  FlagIcon,
+  Icon,
+  MediaQuery,
+  Menu,
+  ToolTip
+} from "../../..";
+import { DateTime } from "luxon";
+import { createEventDispatcher, onMount, tick } from "svelte";
+import { quintOut } from "svelte/easing";
+import { crossfade, fade } from "svelte/transition";
+import Filters from "../search/Filters.svelte";
+import ConfirmOrCancelButtons from "../forms/ConfirmOrCancelButtons.svelte";
+import { flip } from "svelte/animate";
+import InfiniteScroll from "../../simple/common/InfiniteScroll.svelte";
+import Divider from "../../simple/common/Divider.svelte";
+import VerticalDraggableList from "../../simple/common/VerticalDraggableList.svelte";
+import Button from "../../simple/buttons/Button.svelte";
+import SimpleTextField from "../../simple/forms/SimpleTextField.svelte";
+import Autocomplete from "../../simple/forms/Autocomplete.svelte";
+import LabelAndSelect from "../forms/LabelAndSelect.svelte";
+import LabelAndTextField from "../forms/LabelAndTextField.svelte";
+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";
+import MenuOrDrawer from "../common/MenuOrDrawer.svelte";
+onMount(() => {
+  updateHeaderHeight();
+  window.addEventListener("resize", updateHeaderHeight);
+  tableContainer.addEventListener("scroll", setReachedBottomOrTop);
+  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 = headersHTML[head.value];
+    if (!!th) {
+      resizeHeader(th, head);
     }
   }
-
-  function setReachedBottomOrTop(){
-    reachedBottom = tableContainer.scrollHeight - tableContainer.scrollTop === tableContainer.clientHeight
-    reachedTop = tableContainer.scrollTop === 0
-    hideScrollbar = tableContainer.scrollHeight > tableContainer.clientHeight
+  tableHTML.classList.add("dynamic-resizable");
+  resizeObserver = new ResizeObserver(() => {
+    updateRemainingWidth();
+    updateHeaderHeight();
+  });
+  resizeObserver.observe(tableContainer);
+  return () => {
+    window.removeEventListener("resize", updateHeaderHeight);
+    tableContainer.removeEventListener("scroll", setReachedBottomOrTop);
+    resizeObserver?.disconnect();
+  };
+});
+function updateHeaderHeight() {
+  if (mainHeader) {
+    const headerHeight = mainHeader.getBoundingClientRect().height;
+    document.documentElement.style.setProperty("--main-header-height", headerHeight + "px");
   }
-
-  $: if(reachedBottom && rows.length < totalRows) {
+}
+function setReachedBottomOrTop() {
+  reachedBottom = tableContainer.scrollHeight - tableContainer.scrollTop === tableContainer.clientHeight;
+  reachedTop = tableContainer.scrollTop === 0;
+  hideScrollbar = tableContainer.scrollHeight > tableContainer.clientHeight;
+}
+$:
+  if (reachedBottom && rows.length < totalRows) {
     setTimeout(() => {
-      if(reachedBottom) {
-        handleLoadForward()
+      if (reachedBottom) {
+        handleLoadForward();
       }
-    }, 30)
+    }, 30);
   }
-
-  $: if(reachedTop && currentSectionNumber > 0) {
+$:
+  if (reachedTop && currentSectionNumber > 0) {
     setTimeout(() => {
-      if(reachedTop) {
-        handleLoadBackward()
+      if (reachedTop) {
+        handleLoadBackward();
       }
-    }, 30)
-  }
-  
-  const [send, receive] = crossfade({
-    duration: 500,
-    fallback(node, params) {
-      const style = getComputedStyle(node);
-      const transform = style.transform === "none" ? "" : style.transform;
-
-      return {
-        duration: 500,
-        easing: quintOut,
-        css: (t) => `
+    }, 30);
+  }
+const [send, receive] = crossfade({
+  duration: 500,
+  fallback(node, params) {
+    const style = getComputedStyle(node);
+    const transform = style.transform === "none" ? "" : style.transform;
+    return {
+      duration: 500,
+      easing: quintOut,
+      css: (t) => `
         transform: ${transform} scale(${t});
         opacity: ${t}
-      `,
-      };
-    },
-  });
-
-  type Item = {
-    [key: string]: any;
-    disableEdit?: boolean,
-    rowDisableBackgroundColor?: string
-  };
-
-  type Row = {
-    item: Item;
-    subItems: Item[];
-  };
-
-  type MenuStringType = {
-    key: "string";
-  };
-
-  type MenuNumberType = {
-    key: "number";
-    params?: {
-      min?: number;
-      max?: number;
-    };
-  };
-
-  type MenuDateType = {
-    key: "date";
-  };
-
-  type MenuSelectType = {
-    key: "select";
-    params: {
-      options: {
-        icon?: string;
-        value: string | number | undefined;
-        id?: number | undefined;
-        text: string;
-      }[];
+      `
     };
+  }
+});
+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, 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, useSelectedItemsOnly = false, selectedAllDisabled = false;
+let openCellEditor = false, cellEditorActivator, cellEditorContainer, 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, tableHTML, headersHTML = {}, userScrolling = true, reachedBottom = false, reachedTop = false, resizing = false, remainingWidth = 0, hideScrollbar = false, sortModify, mainHeader, resizeObserver, ignoreSelectAll = rows.length == totalRows && useSelectedItemsOnly;
+const DEFAULT_MIN_WIDTH_PX = 100, DEFAULT_MAX_WIDTH_PX = 400;
+$:
+  totalSections = (totalRows - renderedRowsNumber) / sectionRowsNumber;
+$:
+  hasMoreToRender = totalSections > currentSectionNumber;
+$:
+  totalCachedSections = (rows.length - renderedRowsNumber) / sectionRowsNumber;
+$:
+  renderedRows = rows.slice(currentSectionNumber * sectionRowsNumber, currentSectionNumber * sectionRowsNumber + renderedRowsNumber);
+let openHeaderDrawer = false, headersToSelect = !!headers ? headers.filter((h) => {
+  return !headersToShowInTable.find((hst) => hst.value == h.value);
+}).map((h) => {
+  return {
+    id: h.value,
+    name: h.label
   };
-
-  type MenuBooleanType = {
-    key: "boolean";
-  };
-
-  type CellEditorInfoType =
-    | MenuStringType
-    | MenuNumberType
-    | MenuDateType
-    | MenuSelectType
-    | MenuBooleanType;
-
-  type CellEditorInfo = {
-    title: string;
-    description: string;
-    type: CellEditorInfoType;
-    column: string;
-    info?: string;
-  };
-
-  type Headers = NonNullable<ComponentProps<PaginatedTable>["headers"]>;
-  type Header = Headers[number] & {
-    cellEditorInfo?: CellEditorInfo;
-    info?: string;
-    maxWidth?: string
+}) : [], headersToShow = headersToShowInTable.map((h) => {
+  return {
+    id: h.value,
+    name: h.label
   };
-  type HeaderType = Header["type"];
-
-  let clazz: {
-    container?: string;
-    header?: string;
-    row?: string;
-    cell?: string;
-  } = {};
-  export { clazz as class };
-
-  const dispatch = createEventDispatcher<{
-    sort: {
-      sortedBy: string | undefined;
-      sortDirection: string;
-    };
-    rowClick: {
-      item: Item;
-    };
-    cellClick: {
-      item: Item;
-    };
-    saveCellEdit: {
-      item: any;
-    };
-    saveHeadersToShow: {
-      headersToShow: {
-        id: string;
-        name: string;
-      }[];
-    };
-    filtersChange: {
-      builder: FilterBuilder;
-    };
-    fetchData: {};
-    removeFilter: {filter: Filter}
-    removeAllFilters: {}
-    removeCustomQuickFilter: {
-      quickFilter: QuickFilter
-    }
-    applyCustomQuickFilter: { 
-      quickFilter: QuickFilter
-      setQuickFilterValue: (quickFilter: QuickFilter, value?: any) => void
-    }
-    columnResize: {
-      id: string,
-      newWidthPx: number
-    }
-  }>();
-
-  export let headers: Header[] = [],
-    headersToShowInTable: Header[] = headers,
-    subHeaders: Header[] = [],
-    customizeHeaders: boolean = false,
-    rows: Row[] = [],
-    sortedBy: string | undefined = undefined,
-    sortDirection: "asc" | "desc" = "asc",
-    cellEdit: boolean = false,
-    lang: "it" | "en" = "en",
-    dateLocale: "it" | "en" | undefined = undefined,
-    noItemsText: string = lang == 'en' ? "No items to show" : 'Nessun elemento da visualizzare',
-    showSelect: boolean = false,
-    showActions: boolean = true,
-    selectMode: "single" | "multiple" = "single",
-    selectedItems: Item[] = [],
-    unselectedItems: Item[] = [],
-    selectedAll: boolean = false,
-    showExpand: boolean = false,
-    loading: boolean = false,
-    disabled: boolean = false,
-    filters: ComponentProps<Filters>["filters"] = [],
-    searchBarColumns: string[] | undefined = undefined,
-    searchBarVisible: boolean = false,
-    searchBarPlaceholder: string = lang == 'en' ? "Type to search..." : 'Scrivi per cercare...',
-    filtersVisible: boolean = false,
-    quickFiltersVisible: boolean = false,
-    editFilterMode: "one-edit" | "multi-edit" = "one-edit",
-    showActiveFilters: boolean = true,
-    quickFilters: QuickFilter[] = [],
-    actionsForSelectedItems: Action[] = [],
-    quickActionsDisabled: boolean = false,
-    totalRows: number = rows.length,
-    searchText: string | undefined = undefined,
-    renderedRowsNumber = 100,
-    sectionRowsNumber = 20,
-    sectionThreshold = 2,
-    backwardThresholdPixel = 100,
-    forwardThresholdPixel = 100,
-    uniqueKey: keyof Item = 'id',
-    numberOfResultsVisible: boolean = false,
-    endLineVisible: boolean = false,
-    resizableColumns: boolean= false,
-    resizedColumnSizeWithPadding: { [value: string]: number } = {},
-    dynamicFilters: boolean = true,
-    useSelectedItemsOnly = false,
-    selectedAllDisabled = false
-
-  let openCellEditor: boolean = false,
-    cellEditorActivator: HTMLElement | undefined,
-    cellEditorContainer: HTMLElement | undefined,
-    menuElementCellEditor: HTMLElement,
-    menuElementQuickFilters: HTMLElement,
-    cellEditorInfoActive: CellEditorInfo & {
-      value?: any;
-      item?: Item;
-    },
-    saveEditDisabled: boolean = false,
-    searchBarInput: HTMLElement | undefined = undefined,
-    openQuickFilter: boolean = false,
-    quickFilterActivator: HTMLElement | undefined,
-    quickFilterActive: QuickFilter,
-    globalBuilder: FilterBuilder = new FilterBuilder(),
-    calendarOpened: boolean = false,
-    calendarOpened2: boolean = false,
-    selectedIndexes: number[] = [],
-    cellEditorIndexRow: number | undefined,
-    cellEditorIndexHeader: number | undefined,
-    cellEditorSubItem: boolean | undefined,
-    currentSectionNumber = 0,
-    tableBody: HTMLElement,
-    tableContainer: HTMLElement,
-    tableHTML: HTMLElement,
-    headersHTML: { [value: string]: HTMLElement } = {},
-    userScrolling = true,
-    reachedBottom = false,
-    reachedTop = false,
-    resizing = false,
-    remainingWidth = 0,
-    hideScrollbar = false,
-    sortModify: Header['sortModify'],
-    mainHeader: Element,
-    resizeObserver: ResizeObserver,
-    ignoreSelectAll = rows.length == totalRows && useSelectedItemsOnly
-
-  const DEFAULT_MIN_WIDTH_PX = 100,
-    DEFAULT_MAX_WIDTH_PX = 400
-  
-  $: totalSections = (totalRows - renderedRowsNumber) / sectionRowsNumber
-  $: hasMoreToRender = totalSections > currentSectionNumber
-  $: totalCachedSections = (rows.length - renderedRowsNumber) / sectionRowsNumber
-  $: renderedRows = rows.slice(currentSectionNumber * sectionRowsNumber, currentSectionNumber * sectionRowsNumber + renderedRowsNumber)
-
-  let openHeaderDrawer: boolean = false,
-    headersToSelect: {
-      id: string;
-      name: string;
-    }[] = !!headers
-      ? headers
-          .filter((h) => {
-            return !headersToShowInTable.find((hst) => hst.value == h.value);
-          })
-          .map((h) => {
-            return {
-              id: h.value,
-              name: h.label,
-            };
-          })
-      : [],
-    headersToShow: {
-      id: string;
-      name: string;
-    }[] = headersToShowInTable.map((h) => {
-      return {
-        id: h.value,
-        name: h.label,
-      };
-    }),
-    infoActivators = Array(headersToShowInTable.length)
-
-  let totalBatchLength: number = 0,
-    expandedRows: Row[] = [];    
-
-  function saveHeadersToShow() {
-    dispatch("saveHeadersToShow", {
-      headersToShow: headersToShow,
-    });
-    openHeaderDrawer = false;
-  }
-
-  function handleHeaderClick(header: Header) {
-    if (header.sortable && !loading && !resizing) {
-      if (!!sortedBy && header.value == sortedBy) {
-        if (sortDirection == "asc") sortDirection = "desc";
-        else if (sortDirection == "desc") {
-          sortedBy = undefined;
-          sortModify = undefined
-        }
-      } else {
-        sortedBy = header.value;
-        sortDirection = "asc";
-        sortModify = header.sortModify
+}), infoActivators = Array(headersToShowInTable.length);
+let totalBatchLength = 0, expandedRows = [];
+function saveHeadersToShow() {
+  dispatch("saveHeadersToShow", {
+    headersToShow
+  });
+  openHeaderDrawer = false;
+}
+function handleHeaderClick(header) {
+  if (header.sortable && !loading && !resizing) {
+    if (!!sortedBy && header.value == sortedBy) {
+      if (sortDirection == "asc")
+        sortDirection = "desc";
+      else if (sortDirection == "desc") {
+        sortedBy = void 0;
+        sortModify = void 0;
       }
-
-      handleSearchChange(searchText);
-
-      dispatch("sort", {
-        sortedBy,
-        sortDirection,
-      });
+    } else {
+      sortedBy = header.value;
+      sortDirection = "asc";
+      sortModify = header.sortModify;
     }
-  }
-
-  function handleRowClick(item: { [key: string]: any }) {
-    if (disabled || loading) return;
-    dispatch("rowClick", {
-      item,
+    handleSearchChange(searchText);
+    dispatch("sort", {
+      sortedBy,
+      sortDirection
     });
   }
-
-  function handleCellClick(
-    mouseEvent: MouseEvent & {
-      currentTarget: EventTarget & HTMLTableCellElement;
-    },
-    item: Item,
-    cellEditorInfo?: CellEditorInfo,
-    value?: any,
-    indexRow?: number,
-    indexHeader?: number,
-    subItem?: boolean
-  ) {
-    if (disabled || loading) return;
-    if (cellEdit && cellEditorInfo && !item.disableEdit) {
-      if (!cellEditorActivator) {
-        let target = mouseEvent.target as unknown as HTMLElement;
-        cellEditorActivator = target;
-
-        cellEditorIndexRow = indexRow
-        cellEditorIndexHeader = indexHeader
-        cellEditorSubItem = subItem
-
-        cellEditorInfoActive = {
-          ...cellEditorInfo,
-          value: value,
-          item: item,
-        };
-
-        openCellEditor = !openCellEditor;
-
-        const element = target.getBoundingClientRect();
-        const windowHeight = window.innerHeight;
-        const windowWidth = window.innerWidth;
-
-        if (openCellEditor) {
-          setTimeout(() => {
-            if (windowHeight - element.bottom < 300) {
-              cellEditorContainer!.style.bottom = `${
-                windowHeight - element.top
-              }px`;
-            } else {
-              cellEditorContainer!.style.top = `${element.bottom}px`;
-            }
-
-            if (windowWidth - element.right < 400) {
-              cellEditorContainer!.style.right = `${
-                windowWidth - element.left - cellEditorActivator!.clientWidth
-              }px`;
-            }
-          }, 0);
-        }
+}
+function handleRowClick(item) {
+  if (disabled || loading)
+    return;
+  dispatch("rowClick", {
+    item
+  });
+}
+function handleCellClick(mouseEvent, item, cellEditorInfo, value, indexRow, indexHeader, subItem) {
+  if (disabled || loading)
+    return;
+  if (cellEdit && cellEditorInfo && !item.disableEdit) {
+    mouseEvent.stopPropagation();
+    if (!cellEditorActivator) {
+      let target = mouseEvent.target;
+      cellEditorActivator = target;
+      cellEditorIndexRow = indexRow;
+      cellEditorIndexHeader = indexHeader;
+      cellEditorSubItem = subItem;
+      cellEditorInfoActive = {
+        ...cellEditorInfo,
+        value,
+        item
+      };
+      openCellEditor = !openCellEditor;
+      const element = target.getBoundingClientRect();
+      const windowHeight = window.innerHeight;
+      const windowWidth = window.innerWidth;
+      if (openCellEditor) {
+        setTimeout(() => {
+          if (windowHeight - element.bottom < 300) {
+            cellEditorContainer.style.bottom = `${windowHeight - element.top}px`;
+          } else {
+            cellEditorContainer.style.top = `${element.bottom}px`;
+          }
+          if (windowWidth - element.right < 400) {
+            cellEditorContainer.style.right = `${windowWidth - element.left - cellEditorActivator.clientWidth}px`;
+          }
+        }, 0);
       }
     }
-
-    dispatch("cellClick", {
-      item,
-    });
-  }
-
-  function handleSaveClick() {
-    cellEditorIndexHeader = undefined
-    cellEditorIndexRow = undefined
-    cellEditorSubItem = undefined
-
-    dispatch("saveCellEdit", {
-      item: cellEditorInfoActive,
-    });
-
-    cellEditorActivator = undefined;
-    openCellEditor = false;
   }
-
-  function handleCancelClick() {
-    cellEditorIndexHeader = undefined
-    cellEditorIndexRow = undefined
-    cellEditorSubItem = undefined
-
-    cellEditorActivator = undefined;
-    openCellEditor = false;
-
-    quickFilterActivator = undefined;
-    openQuickFilter = false;
-  }
-
-  function handleSelect(item: Item, shiftKeyPressed: boolean) {
-    let index = -1
-    if(selectedAll && !ignoreSelectAll) {
-      index = unselectedItems.findIndex((i) => i[uniqueKey] == item[uniqueKey]);
-    } else {
-      index = selectedItems.findIndex((i) => i[uniqueKey] == item[uniqueKey]);
-    }
-    // if item is not in the selected/unselected items array, add it
-    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) {
-          let lastSelectedIndex = selectedIndexes[selectedIndexes.length - 1],
-            selectedIndex = rows.findIndex(r => r.item[uniqueKey] == item[uniqueKey])
-          if(selectedIndex != -1) {
-            if(selectedIndex < lastSelectedIndex) {
-              let x = lastSelectedIndex
-              lastSelectedIndex = selectedIndex - 1
-              selectedIndex = x
-            }
-            for (let i = lastSelectedIndex + 1; i <= selectedIndex; i++) {
-              if(selectedAll && !ignoreSelectAll) {
-                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]
-                }
+  dispatch("cellClick", {
+    item
+  });
+}
+function handleSaveClick() {
+  cellEditorIndexHeader = void 0;
+  cellEditorIndexRow = void 0;
+  cellEditorSubItem = void 0;
+  dispatch("saveCellEdit", {
+    item: cellEditorInfoActive
+  });
+  cellEditorActivator = void 0;
+  openCellEditor = false;
+}
+function handleCancelClick() {
+  cellEditorIndexHeader = void 0;
+  cellEditorIndexRow = void 0;
+  cellEditorSubItem = void 0;
+  cellEditorActivator = void 0;
+  openCellEditor = false;
+  quickFilterActivator = void 0;
+  openQuickFilter = false;
+}
+function handleSelect(item, shiftKeyPressed) {
+  let index = -1;
+  if (selectedAll && !ignoreSelectAll) {
+    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) {
+        let lastSelectedIndex = selectedIndexes[selectedIndexes.length - 1], selectedIndex = rows.findIndex((r) => r.item[uniqueKey] == item[uniqueKey]);
+        if (selectedIndex != -1) {
+          if (selectedIndex < lastSelectedIndex) {
+            let x = lastSelectedIndex;
+            lastSelectedIndex = selectedIndex - 1;
+            selectedIndex = x;
+          }
+          for (let i = lastSelectedIndex + 1; i <= selectedIndex; i++) {
+            if (selectedAll && !ignoreSelectAll) {
+              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 {
-          if(selectedAll && !ignoreSelectAll) {
-            unselectedItems = [...unselectedItems, item];
-          } else {
-            selectedItems = [...selectedItems, item];
-          }
-          selectedIndexes.push(rows.findIndex(r => r.item[uniqueKey] == item[uniqueKey]))
-        }
-      }
-    } else {
-      if(selectedAll && !ignoreSelectAll) {
-        unselectedItems = unselectedItems.filter((i) => i[uniqueKey] != item[uniqueKey]);
       } else {
-        selectedItems = selectedItems.filter((i) => i[uniqueKey] != item[uniqueKey]);
+        if (selectedAll && !ignoreSelectAll) {
+          unselectedItems = [...unselectedItems, item];
+        } else {
+          selectedItems = [...selectedItems, item];
+        }
+        selectedIndexes.push(rows.findIndex((r) => r.item[uniqueKey] == item[uniqueKey]));
       }
-      selectedIndexes = selectedIndexes.filter(r => r != rows.findIndex(r => r.item[uniqueKey] == item[uniqueKey]))
     }
-  }
-
-  function handleSelectAll() {
-    if (selectMode == "multiple") {
-      if(!selectedAll && ignoreSelectAll) {
-        selectedItems = rows.map(r => r.item)
-      }
-      else {
-        selectedItems = []
-      }
-      selectedIndexes = []
-      unselectedItems = []
-      selectedAll = !selectedAll
+  } else {
+    if (selectedAll && !ignoreSelectAll) {
+      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]));
   }
-
-  function expandRow(row: Row) {
-    let index = expandedRows.findIndex((r) => r.item[uniqueKey] == row.item[uniqueKey]);
-    if (index == -1) {
-      expandedRows = [...expandedRows, row];
+}
+function handleSelectAll() {
+  if (selectMode == "multiple") {
+    if (!selectedAll && ignoreSelectAll) {
+      selectedItems = rows.map((r) => r.item);
     } else {
-      expandedRows = expandedRows.filter((r) => r.item[uniqueKey] != row.item[uniqueKey]);
+      selectedItems = [];
     }
+    selectedIndexes = [];
+    unselectedItems = [];
+    selectedAll = !selectedAll;
   }
-
-  function formatDate(
-    dateTime: DateTime,
-    dateFormat: Extract<HeaderType, { key: "date" }>["params"]
-  ): string {
-    return dateTime.setLocale(dateFormat.locale).toFormat(dateFormat.format);
+}
+function expandRow(row) {
+  let index = expandedRows.findIndex((r) => r.item[uniqueKey] == row.item[uniqueKey]);
+  if (index == -1) {
+    expandedRows = [...expandedRows, row];
+  } else {
+    expandedRows = expandedRows.filter((r) => r.item[uniqueKey] != row.item[uniqueKey]);
   }
-
-  $: {
-    if (!showExpand) {
-      totalBatchLength = rows.length;
-    } else {
-      totalBatchLength = rows.reduce(
-        (acc, row) => acc + row.subItems.length,
-        rows.length
-      );
+}
+function formatDate(dateTime, dateFormat) {
+  return dateTime.setLocale(dateFormat.locale).toFormat(dateFormat.format);
+}
+$: {
+  if (!showExpand) {
+    totalBatchLength = rows.length;
+  } else {
+    totalBatchLength = rows.reduce(
+      (acc, row) => acc + row.subItems.length,
+      rows.length
+    );
+  }
+  if (!!cellEditorInfoActive && cellEditorInfoActive.type.key == "number" && (cellEditorInfoActive.type.params?.min != void 0 && cellEditorInfoActive.value < cellEditorInfoActive.type.params.min || cellEditorInfoActive.type.params?.max != void 0 && cellEditorInfoActive.value > cellEditorInfoActive.type.params.max)) {
+    saveEditDisabled = true;
+  } else {
+    saveEditDisabled = false;
+  }
+}
+function searchTextBuilder(searchText2) {
+  let builder;
+  let converter = new Converter();
+  builder = converter.createBuilder({
+    filters: filters || []
+  });
+  if (!!searchText2 && !!searchBarColumns && searchBarColumns.length > 0) {
+    builder.where((b) => {
+      b.where(searchBarColumns[0], "ilike", "%" + searchText2 + "%");
+      for (let i = 1; i < searchBarColumns.length; i += 1) {
+        b.orWhere(searchBarColumns[i], "ilike", "%" + searchText2 + "%");
+      }
+    });
+  }
+  return builder;
+}
+let syncTimer;
+function handleSearchChange(searchText2) {
+  clearTimeout(syncTimer);
+  syncTimer = setTimeout(async () => {
+    globalBuilder = searchTextBuilder(searchText2);
+    for (let i = 0; i < quickFilters.length; i++) {
+      globalBuilder = quickFilterBuilder(globalBuilder, quickFilters[i]);
     }
-
-    if (
-      !!cellEditorInfoActive &&
-      cellEditorInfoActive.type.key == "number" &&
-      ((cellEditorInfoActive.type.params?.min != undefined &&
-        cellEditorInfoActive.value < cellEditorInfoActive.type.params.min) ||
-        (cellEditorInfoActive.type.params?.max != undefined &&
-          cellEditorInfoActive.value > cellEditorInfoActive.type.params.max))
-    ) {
-      saveEditDisabled = true;
+    handleFiltersChange();
+  }, 800);
+}
+$:
+  if (searchText != void 0)
+    handleSearchChange(searchText);
+function handleFiltersChange() {
+  if (!!tableContainer) {
+    userScrolling = false;
+    currentSectionNumber = 0;
+    tableContainer.scrollTop = 0;
+    setTimeout(() => userScrolling = true, 20);
+  }
+  if (!!sortedBy) {
+    if (sortModify) {
+      globalBuilder = sortModify({ builder: globalBuilder, sortDirection });
     } else {
-      saveEditDisabled = false;
+      globalBuilder.orderBy(sortedBy, sortDirection || "asc");
     }
   }
-
-  function searchTextBuilder(searchText?: string) {
-    let builder: FilterBuilder;
-
-    let converter = new Converter();
-    builder = converter.createBuilder({
-      filters: filters || [],
-    });
-
-    if (!!searchText && !!searchBarColumns && searchBarColumns.length > 0) {
-      builder.where((b) => {
-        b.where(searchBarColumns![0], "ilike", "%" + searchText + "%");
-        for (let i = 1; i < searchBarColumns!.length; i += 1) {
-          b.orWhere(searchBarColumns![i], "ilike", "%" + searchText + "%");
-        }
-      });
+  dispatch("filtersChange", {
+    builder: globalBuilder
+  });
+}
+function handleClearQuickFilter(quickFilter, dispatchFiltersChange = true) {
+  if (quickFilter.type.key == "custom") {
+    quickFilter.type.value = void 0;
+    quickFilter.type.missingValue = void 0;
+    if (dispatchFiltersChange) {
+      dispatch("removeCustomQuickFilter", { quickFilter });
+    }
+  } else if (quickFilter.type.key == "string") {
+    quickFilter.type.value = void 0;
+    quickFilter.type.missingValue = void 0;
+  } else if (quickFilter.type.key == "number") {
+    quickFilter.type.value = void 0;
+    quickFilter.type.missingValue = void 0;
+  } else if (quickFilter.type.key == "boolean") {
+    quickFilter.type.value = void 0;
+  } else if (quickFilter.type.key == "country") {
+    quickFilter.type.selected = void 0;
+    quickFilter.type.missingValue = void 0;
+  } else if (quickFilter.type.key == "date") {
+    quickFilter.type.from = void 0;
+    quickFilter.type.to = void 0;
+  } else if (quickFilter.type.key == "multi-select") {
+    quickFilter.type.values = [];
+    quickFilter.type.missingValue = false;
+    quickFilter.type.missingValue = void 0;
+  }
+  if (dispatchFiltersChange) {
+    quickFilter.active = false;
+  }
+  globalBuilder = searchTextBuilder(searchText);
+  for (let i = 0; i < quickFilters.length; i++) {
+    if (quickFilters[i].active) {
+      globalBuilder = quickFilterBuilder(
+        globalBuilder,
+        quickFilters[i],
+        false
+      );
     }
-
-    return builder;
   }
-
-  let syncTimer: NodeJS.Timeout;
-  function handleSearchChange(searchText: string | undefined) {
-    clearTimeout(syncTimer);
-    syncTimer = setTimeout(async () => {
-      globalBuilder = searchTextBuilder(searchText);
-      for (let i = 0; i < quickFilters.length; i++) {
-        globalBuilder = quickFilterBuilder(globalBuilder, quickFilters[i]);
-      }
-
-      handleFiltersChange();
-    }, 800);
+  if (dispatchFiltersChange) {
+    quickFilters = quickFilters;
+    handleFiltersChange();
   }
-
-  $: if (searchText != undefined) handleSearchChange(searchText);
-
-  function handleFiltersChange() {
-    if(!!tableContainer) {
-      userScrolling = false
-      currentSectionNumber = 0
-      tableContainer.scrollTop = 0
-      setTimeout(() => userScrolling = true, 20)
-    }
-
-    if (!!sortedBy) {
-      if(sortModify){
-        globalBuilder = sortModify({ builder: globalBuilder, sortDirection })
-      }
-      else {
-        globalBuilder.orderBy(sortedBy, sortDirection || "asc");
+  return globalBuilder;
+}
+function handleSearchBoxKeydown(e) {
+  if (e.key == "Enter") {
+    handleFiltersChange();
+  }
+}
+function handleQuickFilterClick(mouseEvent, quickFilter) {
+  handleCancelClick();
+  setTimeout(() => {
+    if (quickFilter) {
+      if (!quickFilterActivator) {
+        let target = mouseEvent.target;
+        quickFilterActivator = target;
+        quickFilterActive = quickFilter;
+        openQuickFilter = !openQuickFilter;
       }
     }
-    
-    dispatch("filtersChange", {
-      builder: globalBuilder,
-    });
+  }, 300);
+}
+function setQuickFilterMissingValue(quickFilter) {
+  if (quickFilter.type.key == "custom") {
+    quickFilter.type.missingValue = true;
+    quickFilter.type.value = void 0;
+  } else if (quickFilter.type.key == "multi-select") {
+    quickFilter.type.missingValue = true;
+    quickFilter.type.values = [];
+  } else if (quickFilter.type.key == "string") {
+    quickFilter.type.missingValue = true;
+    quickFilter.type.value = void 0;
+  } else if (quickFilter.type.key == "country") {
+    quickFilter.type.missingValue = true;
+    quickFilter.type.selected = void 0;
+  } else if (quickFilter.type.key == "number") {
+    quickFilter.type.missingValue = true;
+    quickFilter.type.value = void 0;
+  }
+  handleApplyClick(quickFilter);
+}
+function setQuickFilterValue(quickFilter, value) {
+  if (quickFilter.type.key == "custom") {
+    quickFilter.type.value = value;
+  } else if (quickFilter.type.key == "boolean") {
+    quickFilter.type.value = value;
   }
-
-  function handleClearQuickFilter(
-    quickFilter: QuickFilter,
-    dispatchFiltersChange: boolean = true
-  ) {
-    if (quickFilter.type.key == 'custom') {
-      quickFilter.type.value = undefined;
-      quickFilter.type.missingValue = undefined;
-      if(dispatchFiltersChange) {
-        dispatch('removeCustomQuickFilter', { quickFilter })
-      }
+  handleApplyClick(quickFilter);
+}
+function handleApplyClick(quickFilter, dispatchCustomFilterClick = false) {
+  if (quickFilter.type.key == "custom" && dispatchCustomFilterClick) {
+    dispatch("applyCustomQuickFilter", { quickFilter, setQuickFilterValue });
+  } else {
+    quickFilter.active = true;
+    quickFilters = quickFilters;
+    globalBuilder = quickFilterBuilder(globalBuilder, quickFilter);
+    handleFiltersChange();
+    quickFilterActivator = void 0;
+    openQuickFilter = false;
+  }
+}
+function quickFilterBuilder(builder, quickFilter, clearPreaviousValue = true) {
+  if (quickFilter.type.key == "custom") {
+    let value = quickFilter.type.value, missingValue = quickFilter.type.missingValue;
+    if (clearPreaviousValue) {
+      builder = handleClearQuickFilter(quickFilter, false);
     }
-    else if (quickFilter.type.key == "string") {
-      quickFilter.type.value = undefined;
-      quickFilter.type.missingValue = undefined;
-    } else if (quickFilter.type.key == "number") {
-      quickFilter.type.value = undefined;
-      quickFilter.type.missingValue = undefined;
-    } else if (quickFilter.type.key == "boolean") {
-      quickFilter.type.value = undefined;
-    } else if (quickFilter.type.key == "country") {
-      quickFilter.type.selected = undefined;
-      quickFilter.type.missingValue = undefined;
-    } else if (quickFilter.type.key == "date") {
-      quickFilter.type.from = undefined;
-      quickFilter.type.to = undefined;
-    } else if (quickFilter.type.key == "multi-select") {
-      quickFilter.type.values = [];
-      quickFilter.type.missingValue = false;
-      quickFilter.type.missingValue = undefined;
+    quickFilter.type.value = value;
+    quickFilter.type.missingValue = missingValue;
+    builder = quickFilter.type.modify({
+      builder,
+      value: { value, missingValue }
+    });
+  } else if (quickFilter.type.key == "string") {
+    let value = quickFilter.type.value, missingValue = quickFilter.type.missingValue;
+    if (clearPreaviousValue) {
+      builder = handleClearQuickFilter(quickFilter, false);
     }
-
-    if (dispatchFiltersChange) {
-      quickFilter.active = false;
+    quickFilter.type.value = value;
+    quickFilter.type.missingValue = missingValue;
+    if (quickFilter.type.modify) {
+      builder = quickFilter.type.modify({
+        builder,
+        value: { value, missingValue }
+      });
     }
-
-    globalBuilder = searchTextBuilder(searchText);
-
-    for (let i = 0; i < quickFilters.length; i++) {
-      if (quickFilters[i].active) {
-        globalBuilder = quickFilterBuilder(
-          globalBuilder,
-          quickFilters[i],
-          false
+    if (!!quickFilter.column) {
+      if (missingValue) {
+        builder.whereNull(quickFilter.column);
+      } else if (!!value) {
+        builder.where(
+          quickFilter.column,
+          quickFilter.type.mode ?? "equal",
+          value
         );
       }
     }
-
-    if (dispatchFiltersChange) {
-      quickFilters = quickFilters;
-      handleFiltersChange();
-    }
-
-    return globalBuilder;
-  }
-
-  function handleSearchBoxKeydown(e: KeyboardEvent) {
-    if (e.key == "Enter") {
-      handleFiltersChange();
-    }
-  }
-
-  function handleQuickFilterClick(
-    mouseEvent: MouseEvent & {
-      currentTarget: EventTarget & HTMLButtonElement;
-    },
-    quickFilter?: QuickFilter
-  ) {
-    handleCancelClick();
-    setTimeout(() => {
-      if (quickFilter) {
-        if (!quickFilterActivator) {
-          let target = mouseEvent.target as unknown as HTMLElement;
-          quickFilterActivator = target;
-          quickFilterActive = quickFilter;
-          openQuickFilter = !openQuickFilter;
-        }
-      }
-    }, 300);
-  }
-
-  function setQuickFilterMissingValue(quickFilter: QuickFilter) {
-    if (quickFilter.type.key == 'custom') {
-      quickFilter.type.missingValue = true;
-      quickFilter.type.value = undefined;
+  } else if (quickFilter.type.key == "boolean") {
+    let value = quickFilter.type.value;
+    if (clearPreaviousValue) {
+      builder = handleClearQuickFilter(quickFilter, false);
     }
-    else if (quickFilter.type.key == "multi-select") {
-      quickFilter.type.missingValue = true;
-      quickFilter.type.values = [];
-    } else if (quickFilter.type.key == "string") {
-      quickFilter.type.missingValue = true;
-      quickFilter.type.value = undefined;
-    } else if (quickFilter.type.key == "country") {
-      quickFilter.type.missingValue = true;
-      quickFilter.type.selected = undefined;
-    } else if (quickFilter.type.key == "number") {
-      quickFilter.type.missingValue = true;
-      quickFilter.type.value = undefined;
+    quickFilter.type.value = value;
+    if (quickFilter.type.modify) {
+      builder = quickFilter.type.modify({
+        builder,
+        value
+      });
     }
-
-    handleApplyClick(quickFilter);
-  }
-
-  function setQuickFilterValue(quickFilter: QuickFilter, value?: any) {
-    if (quickFilter.type.key == "custom") {
-      quickFilter.type.value = value;
-    } 
-    else if (quickFilter.type.key == "boolean") {
-      quickFilter.type.value = value;
-    } 
-
-    handleApplyClick(quickFilter);
-  }
-
-  function handleApplyClick(quickFilter: QuickFilter, dispatchCustomFilterClick: boolean = false) {
-    if(quickFilter.type.key == 'custom' && dispatchCustomFilterClick) {
-      dispatch('applyCustomQuickFilter', { quickFilter, setQuickFilterValue})
+    if (!!quickFilter.column && value != void 0) {
+      builder.where(quickFilter.column, value);
     }
-    else {
-      quickFilter.active = true;
-      quickFilters = quickFilters;
-      globalBuilder = quickFilterBuilder(globalBuilder, quickFilter);
-  
-      handleFiltersChange();
-  
-      quickFilterActivator = undefined;
-      openQuickFilter = false;
+  } else if (quickFilter.type.key == "country") {
+    let value = quickFilter.type.selected, missingValue = quickFilter.type.missingValue;
+    if (clearPreaviousValue) {
+      builder = handleClearQuickFilter(quickFilter, false);
     }
-  }
-
-  function quickFilterBuilder(
-    builder: FilterBuilder,
-    quickFilter: QuickFilter,
-    clearPreaviousValue: boolean = true
-  ) {
-    if (quickFilter.type.key == 'custom') {
-      let value = quickFilter.type.value,
-        missingValue = quickFilter.type.missingValue;
-      if (clearPreaviousValue) {
-        builder = handleClearQuickFilter(quickFilter, false);
-      }
-      quickFilter.type.value = value;
-      quickFilter.type.missingValue = missingValue;
-
+    quickFilter.type.selected = value;
+    quickFilter.type.missingValue = missingValue;
+    const values = value?.map((item) => item.value);
+    if (quickFilter.type.modify) {
       builder = quickFilter.type.modify({
         builder,
-        value: { value, missingValue },
+        value: { values, missingValue }
       });
     }
-    else if (quickFilter.type.key == "string") {
-      let value = quickFilter.type.value,
-        missingValue = quickFilter.type.missingValue;
-      if (clearPreaviousValue) {
-        builder = handleClearQuickFilter(quickFilter, false);
-      }
-      quickFilter.type.value = value;
-      quickFilter.type.missingValue = missingValue;
-
-      if (quickFilter.type.modify) {
-        builder = quickFilter.type.modify({
-          builder,
-          value: { value, missingValue },
-        });
+    if (!!quickFilter.column) {
+      if (missingValue) {
+        builder.whereNull(quickFilter.column);
+      } else if (!!values && values.length > 0) {
+        builder.whereIn(quickFilter.column, values);
       }
-
-      if (!!quickFilter.column) {
-        if (missingValue) {
-          builder.whereNull(quickFilter.column);
-        } else if (!!value) {
-          builder.where(
-            quickFilter.column,
-            quickFilter.type.mode ?? "equal",
-            value
-          );
-        }
+    }
+  } else if (quickFilter.type.key == "date") {
+    let from = quickFilter.type.from, to = quickFilter.type.to;
+    if (clearPreaviousValue) {
+      builder = handleClearQuickFilter(quickFilter, false);
+    }
+    quickFilter.type.from = from;
+    quickFilter.type.to = to;
+    if (quickFilter.type.modify) {
+      builder = quickFilter.type.modify({
+        builder,
+        value: { from, to }
+      });
+    } else if (!!quickFilter.column) {
+      if (!!from) {
+        builder.where(
+          quickFilter.column,
+          ">=",
+          DateTime.fromJSDate(from).setLocale("it-IT").startOf("day").toString()
+        );
       }
-    } else if (quickFilter.type.key == "boolean") {
-      let value = quickFilter.type.value;
-      if (clearPreaviousValue) {
-        builder = handleClearQuickFilter(quickFilter, false);
+      if (!!to) {
+        builder.where(
+          quickFilter.column,
+          "<=",
+          DateTime.fromJSDate(to).setLocale("it-IT").endOf("day").toString()
+        );
       }
-      quickFilter.type.value = value;
-
-      if (quickFilter.type.modify) {
-        builder = quickFilter.type.modify({
-          builder,
-          value,
-        });
+    }
+  } else if (quickFilter.type.key == "multi-select") {
+    let value = quickFilter.type.values, missingValue = quickFilter.type.missingValue;
+    if (clearPreaviousValue) {
+      builder = handleClearQuickFilter(quickFilter, false);
+    }
+    quickFilter.type.values = value;
+    quickFilter.type.missingValue = missingValue;
+    const values = value.map((item) => item.value);
+    if (quickFilter.type.modify) {
+      builder = quickFilter.type.modify({
+        builder,
+        value: { values, missingValue }
+      });
+    } else if (quickFilter.column) {
+      if (missingValue) {
+        builder.whereNull(quickFilter.column);
+      } else if (values.length > 0) {
+        builder.whereIn(quickFilter.column, values);
       }
-
-      if (!!quickFilter.column && value != undefined) {
+    }
+  } else if (quickFilter.type.key == "number") {
+    let value = quickFilter.type.value, missingValue = quickFilter.type.missingValue;
+    if (clearPreaviousValue) {
+      builder = handleClearQuickFilter(quickFilter, false);
+    }
+    quickFilter.type.value = value;
+    quickFilter.type.missingValue = missingValue;
+    if (quickFilter.type.modify) {
+      builder = quickFilter.type.modify({
+        builder,
+        value: { value, missingValue }
+      });
+    }
+    if (quickFilter.column) {
+      if (missingValue) {
+        builder.whereNull(quickFilter.column);
+      } else if (!!value) {
         builder.where(quickFilter.column, value);
       }
-    } else if (quickFilter.type.key == "country") {
-      let value = quickFilter.type.selected,
-        missingValue = quickFilter.type.missingValue;
-      if (clearPreaviousValue) {
-        builder = handleClearQuickFilter(quickFilter, false);
-      }
-      quickFilter.type.selected = value;
-      quickFilter.type.missingValue = missingValue;
-
-      const values = value?.map((item) => item.value);
-      if (quickFilter.type.modify) {
-        builder = quickFilter.type.modify({
-          builder,
-          value: { values, missingValue },
-        });
-      }
-
-      if (!!quickFilter.column) {
-        if (missingValue) {
-          builder.whereNull(quickFilter.column);
-        } else if (!!values && values.length > 0) {
-          builder.whereIn(quickFilter.column, values);
-        }
-      }
-    } else if (quickFilter.type.key == "date") {
-      let from = quickFilter.type.from,
-        to = quickFilter.type.to;
-      if (clearPreaviousValue) {
-        builder = handleClearQuickFilter(quickFilter, false);
-      }
-      quickFilter.type.from = from;
-      quickFilter.type.to = to;
-
-      if (quickFilter.type.modify) {
-        builder = quickFilter.type.modify({
-          builder,
-          value: { from, to },
-        });
-      } else if (!!quickFilter.column) {
-        if (!!from) {
-          builder.where(
-            quickFilter.column,
-            ">=",
-            DateTime.fromJSDate(from).setLocale('it-IT').startOf('day').toString()
-          );
-        }
-        if (!!to) {
-          builder.where(
-            quickFilter.column,
-            "<=",
-            DateTime.fromJSDate(to).setLocale('it-IT').endOf('day').toString()          );
-        }
-      }
-    } else if (quickFilter.type.key == "multi-select") {
-      let value = quickFilter.type.values,
-        missingValue = quickFilter.type.missingValue;
-      if (clearPreaviousValue) {
-        builder = handleClearQuickFilter(quickFilter, false);
-      }
-      quickFilter.type.values = value;
-      quickFilter.type.missingValue = missingValue;
-
-      const values = value.map(item => item.value);
-
-      if (quickFilter.type.modify) {
-        builder = quickFilter.type.modify({
-          builder,
-          value: { values: values, missingValue },
-        });
-      } else if (quickFilter.column) {
-        if (missingValue) {
-          builder.whereNull(quickFilter.column);
-        } else if (values.length > 0) {
-          builder.whereIn(quickFilter.column, values);
-        }
-      }
-    } else if (quickFilter.type.key == "number") {
-      let value = quickFilter.type.value,
-        missingValue = quickFilter.type.missingValue;
-      if (clearPreaviousValue) {
-        builder = handleClearQuickFilter(quickFilter, false);
-      }
-      quickFilter.type.value = value;
-      quickFilter.type.missingValue = missingValue;
-
-      if (quickFilter.type.modify) {
-        builder = quickFilter.type.modify({
-          builder,
-          value: { value, missingValue },
-        });
-      }
-
-      if (quickFilter.column) {
-        if (missingValue) {
-          builder.whereNull(quickFilter.column);
-        } else if (!!value) {
-          builder.where(quickFilter.column, value);
-        }
-      }
     }
-
-    return builder;
   }
-
-  function updateFilterValues(filter: Filter, updateMultiFilterValues: (filterName: string, newValue: any, newValid: boolean, newMode?: NumberMode | StringMode | SelectMode | DateMode) => void) {
-    let newValue: any = {},
-      newValid: boolean = false,
-      newMode = filter.type == 'date' ||
-        filter.type == 'number' ||
-        filter.type == 'select' ||
-        filter.type == 'string' ?
-          filter.mode :
-          undefined
-    if(filter.type == 'select') {
-      newValue = filter.values 
-      if(newValue.length > 0) {
-        newValid = true
-      }
-    } else if('mode' in filter && filter.mode == 'between') {
-      newValue.to = filter.to
-      newValue.from = filter.from
-      if(!!newValue.from || !!newValue.to) {
-        newValid = true
-      }
-    } else {
-      newValue = filter.value
-      if(!!newValue) {
-        newValid = true
-      }
+  return builder;
+}
+function updateFilterValues(filter, updateMultiFilterValues) {
+  let newValue = {}, newValid = false, newMode = filter.type == "date" || filter.type == "number" || filter.type == "select" || filter.type == "string" ? filter.mode : void 0;
+  if (filter.type == "select") {
+    newValue = filter.values;
+    if (newValue.length > 0) {
+      newValid = true;
     }
-    updateMultiFilterValues(filter.name, newValue, newValid, newMode)
-  }
-
-  function handleRemoveAllFilters() {
-    dispatch('removeAllFilters', {})
-    handleSearchChange(searchText);
-  }
-
-  function handleRemoveFilter(filter: Filter) {
-    dispatch('removeFilter', { filter})
-    handleSearchChange(searchText);
-  }
-
-  async function handleLoadForward() {
-    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
-
-      await tick()
-      const anchorElementAfter = findAnchorElement(anchorUniqueKey)
-      const anchorOffsetAfter = anchorElementAfter?.getBoundingClientRect().top || 0
-      const offsetDiff = anchorOffsetAfter - anchorOffsetBefore
-      tableContainer.scrollTop += offsetDiff
-
-      userScrolling = true
+  } else if ("mode" in filter && filter.mode == "between") {
+    newValue.to = filter.to;
+    newValue.from = filter.from;
+    if (!!newValue.from || !!newValue.to) {
+      newValid = true;
     }
-
-    if(totalCachedSections - sectionThreshold <= currentSectionNumber 
-      && !loading 
-      && totalRows > rows.length
-    ) {
-      dispatch("fetchData", {});
+  } else {
+    newValue = filter.value;
+    if (!!newValue) {
+      newValid = true;
     }
   }
-
-  async function handleLoadBackward() {
-    if(currentSectionNumber > 0) {
-      userScrolling = false
-  
-      const anchorIndex = 0
-      const anchorUniqueKey = renderedRows[anchorIndex].item[uniqueKey]
-      const anchorElement = findAnchorElement(anchorUniqueKey)
-      const anchorOffsetBefore = anchorElement?.getBoundingClientRect().top || 0
-  
-      let removedRowCount = 0
-  
-      for (let i = renderedRows.length - 1; removedRowCount < sectionRowsNumber; i--) {
-        let row = tableBody.children.item(i)
-        removedRowCount++
-  
-        const rowKey = row?.getAttribute("data-key")
-        const isExpanded = expandedRows.some(r => r.item[uniqueKey] == rowKey)
-        
-        if (isExpanded) {
-          i--
-        }
+  updateMultiFilterValues(filter.name, newValue, newValid, newMode);
+}
+function handleRemoveAllFilters() {
+  dispatch("removeAllFilters", {});
+  handleSearchChange(searchText);
+}
+function handleRemoveFilter(filter) {
+  dispatch("removeFilter", { filter });
+  handleSearchChange(searchText);
+}
+async function handleLoadForward() {
+  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
-  
-      await tick()
-      const anchorElementAfter = findAnchorElement(anchorUniqueKey)
-      const anchorOffsetAfter = anchorElementAfter?.getBoundingClientRect().top || 0
-      const offsetDiff = anchorOffsetAfter - anchorOffsetBefore
-      tableContainer.scrollTop += offsetDiff
-  
-      userScrolling = true
     }
+    currentSectionNumber = currentSectionNumber + 1;
+    await tick();
+    const anchorElementAfter = findAnchorElement(anchorUniqueKey);
+    const anchorOffsetAfter = anchorElementAfter?.getBoundingClientRect().top || 0;
+    const offsetDiff = anchorOffsetAfter - anchorOffsetBefore;
+    tableContainer.scrollTop += offsetDiff;
+    userScrolling = true;
   }
-
-  function findAnchorElement(key: keyof Item) {
-    for (let i = 0; i < tableBody.children.length; i++) {
-      const child = tableBody.children.item(i)
-      if (child?.getAttribute("data-key") == key) {
-        return child
+  if (totalCachedSections - sectionThreshold <= currentSectionNumber && !loading && totalRows > rows.length) {
+    dispatch("fetchData", {});
+  }
+}
+async function handleLoadBackward() {
+  if (currentSectionNumber > 0) {
+    userScrolling = false;
+    const anchorIndex = 0;
+    const anchorUniqueKey = renderedRows[anchorIndex].item[uniqueKey];
+    const anchorElement = findAnchorElement(anchorUniqueKey);
+    const anchorOffsetBefore = anchorElement?.getBoundingClientRect().top || 0;
+    let removedRowCount = 0;
+    for (let i = renderedRows.length - 1; removedRowCount < sectionRowsNumber; i--) {
+      let row = tableBody.children.item(i);
+      removedRowCount++;
+      const rowKey = row?.getAttribute("data-key");
+      const isExpanded = expandedRows.some((r) => r.item[uniqueKey] == rowKey);
+      if (isExpanded) {
+        i--;
       }
     }
-    return undefined
+    currentSectionNumber = currentSectionNumber - 1;
+    await tick();
+    const anchorElementAfter = findAnchorElement(anchorUniqueKey);
+    const anchorOffsetAfter = anchorElementAfter?.getBoundingClientRect().top || 0;
+    const offsetDiff = anchorOffsetAfter - anchorOffsetBefore;
+    tableContainer.scrollTop += offsetDiff;
+    userScrolling = true;
   }
-
-  function resize(node: HTMLElement) {
-    let th: HTMLElement | null = node.parentElement
-    let resizingInner = false
-
-    if(!!th) {
-      let { width } = th.getBoundingClientRect()
-
-      function mouseMoveHandler(e: MouseEvent) {
-        if (resizingInner && !!th && !!tableContainer) {
-          width += e.movementX;
-          const { paddingLeft, paddingRight } = getComputedStyle(th);
-
-          const minWidth: string | undefined = headers.find(h => h.value === th.id)?.minWidth;
-          let minWidthPx: number | undefined;
-          if (!!minWidth && minWidth.endsWith('px')) {
-            minWidthPx = parseInt(minWidth, 10);
-          }
-
-          const maxWidth: string | undefined = headers.find(h => h.value === th.id)?.maxWidth;
-          let maxWidthPx: number | undefined;
-          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 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;
+}
+function resize(node) {
+  let th = node.parentElement;
+  let resizingInner = false;
+  if (!!th) {
+    let mouseMoveHandler = function(e) {
+      if (resizingInner && !!th && !!tableContainer) {
+        width += e.movementX;
+        const { paddingLeft, paddingRight } = getComputedStyle(th);
+        const minWidth = headers.find((h) => h.value === th.id)?.minWidth;
+        let minWidthPx;
+        if (!!minWidth && minWidth.endsWith("px")) {
+          minWidthPx = parseInt(minWidth, 10);
         }
-      }
-      
-
-      function mouseUpHandler(e: MouseEvent, setResize: boolean = true) {
-        if(!!th) {
-          resizingInner = false
-          let { paddingLeft, paddingRight } = getComputedStyle(th)
-          width = th.getBoundingClientRect().width - parseFloat(paddingLeft) - parseFloat(paddingRight)
-          if(setResize){
-            setTimeout(() => resizing = false, 20)
-          }
-          dispatch('columnResize', {
-            id: th.id,
-            newWidthPx: width
-          })
+        const maxWidth = headers.find((h) => h.value === th.id)?.maxWidth;
+        let maxWidthPx;
+        if (!!maxWidth && maxWidth.endsWith("px")) {
+          maxWidthPx = parseInt(maxWidth, 10);
         }
-      }
-
-      function mouseDownHandler(e: MouseEvent) {
-        if(!!th) {
-          resizing = true
-          resizingInner = true
-          let { paddingLeft, paddingRight } = getComputedStyle(th)
-          width = th.getBoundingClientRect().width - parseFloat(paddingLeft) - parseFloat(paddingRight)
+        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;
         }
       }
-
-      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)
+    }, mouseUpHandler = function(e, setResize = true) {
+      if (!!th) {
+        resizingInner = false;
+        let { paddingLeft, paddingRight } = getComputedStyle(th);
+        width = th.getBoundingClientRect().width - parseFloat(paddingLeft) - parseFloat(paddingRight);
+        if (setResize) {
+          setTimeout(() => resizing = false, 20);
         }
+        dispatch("columnResize", {
+          id: th.id,
+          newWidthPx: width
+        });
       }
-    }
+    }, mouseDownHandler = function(e) {
+      if (!!th) {
+        resizing = true;
+        resizingInner = true;
+        let { paddingLeft, paddingRight } = getComputedStyle(th);
+        width = th.getBoundingClientRect().width - parseFloat(paddingLeft) - parseFloat(paddingRight);
+      }
+    };
+    let { width } = th.getBoundingClientRect();
+    node.addEventListener("mousedown", mouseDownHandler);
+    document.addEventListener("mouseup", mouseUpHandler);
+    document.addEventListener("mousemove", mouseMoveHandler);
+    return {
+      destroy() {
+        node.removeEventListener("mousedown", mouseDownHandler);
+        document.removeEventListener("mouseup", mouseUpHandler);
+        document.removeEventListener("mousemove", mouseMoveHandler);
+      }
+    };
   }
-
-  $: if (
-    !!tableContainer &&
-    headersToShowInTable.length > 0 &&
-    resizedColumnSizeWithPadding &&
-    headersToShow.length > 0 &&
-    mainHeader
-  ) {
+}
+$:
+  if (!!tableContainer && headersToShowInTable.length > 0 && resizedColumnSizeWithPadding && headersToShow.length > 0 && mainHeader) {
     tick().then(updateRemainingWidth);
   }
-  
-  async function updateRemainingWidth() {
-    if(tableContainer != null && !!tableContainer) {
-      const containerWidth = tableContainer?.getBoundingClientRect().width - 26;
-
-      if(containerWidth){
-        const totalResizableWidth = headersToShowInTable.reduce((sum, head) => {
-          let th = headersHTML[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.customize-headers'))
-          .reduce((sum, th) => sum + th.getBoundingClientRect().width + 1, 0);
-    
-        remainingWidth = Math.max(0, containerWidth - totalResizableWidth - extraStaticWidth);
-      }
+async function updateRemainingWidth() {
+  if (tableContainer != null && !!tableContainer) {
+    const containerWidth = tableContainer?.getBoundingClientRect().width - 26;
+    if (containerWidth) {
+      const totalResizableWidth = headersToShowInTable.reduce((sum, head) => {
+        let th = headersHTML[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.customize-headers")).reduce((sum, th) => sum + th.getBoundingClientRect().width + 1, 0);
+      remainingWidth = Math.max(0, containerWidth - totalResizableWidth - extraStaticWidth);
     }
   }
-
-  function resizeHeader(th: HTMLElement, header: { value: string, minWidth?: string, maxWidth?: string }){
-    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;
+}
+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);
     }
-    let { paddingLeft, paddingRight } = getComputedStyle(th);
-    let width = resizedColumnSizeWithPadding[header.value] - parseFloat(paddingLeft) - parseFloat(paddingRight);
-    th.style.width = `${width}px`
+    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)}
@@ -1369,7 +975,7 @@
   </div>
   {/if}
 
-  <div class="outer-container">
+  <div class="outer-container {clazz.container}">
     <div class="inner-container" class:hide-scrollbar={hideScrollbar} bind:this={tableContainer} on:scroll>
     <InfiniteScroll
       on:loadMore={handleLoadBackward}
@@ -1378,7 +984,7 @@
       direction='backward'
     />
     <table style="display: table;" class="dynamic-table" bind:this={tableHTML}>
-      <thead class="table-header" bind:this={mainHeader}>
+      <thead class="table-header {clazz.header}" bind:this={mainHeader}>
         <tr>
           {#if !!showSelect && !showExpand && rows.length > 0}
             <th
@@ -1466,7 +1072,7 @@
               style:width={remainingWidth + 'px'}
               class="filler"
               aria-hidden="true"
-            />
+            ></th>
           {/if}
           {#if customizeHeaders || $$slots.rowActions || $$slots.append}
             <th
@@ -1499,7 +1105,7 @@
               style:font-size="1.2em"
               style:padding="0px"
             >
-              <div class="loader-line" />
+              <div class="loader-line" ></div>
             </th>
           </tr>
         {/if}
@@ -1522,7 +1128,7 @@
         {:else}
           {#each renderedRows as row, indexRow}
             <tr
-              class="item-row"
+              class="item-row {clazz.row}"
               data-key={row.item[uniqueKey]}
               style:background-color={
                 !!row.item.disableEdit
@@ -1556,6 +1162,7 @@
                         ) != -1
                     }
                     disabled={disabled || loading}
+                    on:click={e => e.stopPropagation()}
                     on:change={(e) => handleSelect(row.item, e.detail.shiftKeyPressed)}
                   />
                 </td>
@@ -1570,7 +1177,10 @@
                       : "mdi-chevron-up"}
                     click
                     --icon-size="24px"
-                    on:click={() => expandRow(row)}
+                    on:click={e => {
+                      e?.stopPropagation()
+                      expandRow(row)
+                    }}
                   />
                 </td>
               {/if}
@@ -1589,6 +1199,7 @@
                       false
                     );
                   }}
+                  class={clazz.cell}
                 >
                   {#if header.type.key == "custom"}
                     <slot
@@ -1623,8 +1234,8 @@
                   {/if}
                 </td>
               {/each}
-              {#if remainingWidth}
-                <td/>
+              {#if remainingWidth && (customizeHeaders || $$slots.rowActions || $$slots.append || resizableColumns)}
+                <td></td>
               {/if}
               {#if $$slots.rowActions || $$slots.append}
                 <td class={clazz.cell || ""}>
@@ -1770,338 +1381,357 @@
   </div>
 {/if}
 
-<Menu
+<MenuOrDrawer
   bind:open={openCellEditor}
-  activator={cellEditorActivator}
-  bind:menuElement={menuElementCellEditor}
-  _top={undefined}
-  openingId="cell-editor"
+  menuProps={{
+    activator: cellEditorActivator,
+    openingId: "cell-editor",
+  }}
+  drawerProps={{
+    _space: '60vh',
+    _borderRadius: '10px',
+  }}
+  let:isMenu
 >
-  <div
-    class="cell-editor-container"
-    bind:this={cellEditorContainer}
-  >
-    <div style:grid-column="1 / 3">
-      {#if cellEditorInfoActive.type.key === "string"}
-        <LabelAndTextField
-          label={cellEditorInfoActive.title}
-          description={cellEditorInfoActive.description}
-          name={cellEditorInfoActive.title}
-          info={cellEditorInfoActive.info}
-          type="text"
-          orientation="horizontal"
-          bind:value={cellEditorInfoActive.value}
-          --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))'
-        />
-      {:else if cellEditorInfoActive.type.key === "number"}
-        <LabelAndTextField
-          label={cellEditorInfoActive.title}
-          description={cellEditorInfoActive.description}
-          name={cellEditorInfoActive.title}
-          info={cellEditorInfoActive.info}
-          type="number"
-          orientation="horizontal"
-          error={saveEditDisabled}
-          bind:value={cellEditorInfoActive.value}
-          --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))'
-        />
-      {:else if cellEditorInfoActive.type.key === "select"}
-        <LabelAndSelect
-          label={cellEditorInfoActive.title}
-          description={cellEditorInfoActive.description}
-          name={cellEditorInfoActive.title}
-          info={cellEditorInfoActive.info}
-          options={cellEditorInfoActive.type.params.options}
-          orientation="horizontal"
-          bind:value={cellEditorInfoActive.value}
-        />
-      {:else if cellEditorInfoActive.type.key === "boolean"}
-        <div class="container">
-          <Checkbox
-            id={cellEditorInfoActive.title}
+  {#if cellEditorInfoActive}
+    <div
+      class:cell-editor-container={isMenu}
+      style:padding='10px'
+      bind:this={cellEditorContainer}
+    >
+      <div style:grid-column="1 / 3">
+        {#if cellEditorInfoActive.type.key === "string"}
+          <LabelAndTextField
+            label={cellEditorInfoActive.title}
+            description={cellEditorInfoActive.description}
+            name={cellEditorInfoActive.title}
+            info={cellEditorInfoActive.info}
+            type="text"
+            orientation="horizontal"
             bind:value={cellEditorInfoActive.value}
+            --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))'
           />
-          <label style:margin-left="0.7rem" for={cellEditorInfoActive.title}
-            >{cellEditorInfoActive.title}
-          </label>
-        </div>
-      {/if}
-    </div>
+        {:else if cellEditorInfoActive.type.key === "number"}
+          <LabelAndTextField
+            label={cellEditorInfoActive.title}
+            description={cellEditorInfoActive.description}
+            name={cellEditorInfoActive.title}
+            info={cellEditorInfoActive.info}
+            type="number"
+            orientation="horizontal"
+            error={saveEditDisabled}
+            bind:value={cellEditorInfoActive.value}
+            --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))'
+          />
+        {:else if cellEditorInfoActive.type.key === "select"}
+          <LabelAndSelect
+            label={cellEditorInfoActive.title}
+            description={cellEditorInfoActive.description}
+            name={cellEditorInfoActive.title}
+            info={cellEditorInfoActive.info}
+            options={cellEditorInfoActive.type.params.options}
+            orientation="horizontal"
+            bind:value={cellEditorInfoActive.value}
+          />
+        {:else if cellEditorInfoActive.type.key === "boolean"}
+          <div class="container">
+            <Checkbox
+              id={cellEditorInfoActive.title}
+              bind:value={cellEditorInfoActive.value}
+            />
+            <label style:margin-left="0.7rem" for={cellEditorInfoActive.title}
+              >{cellEditorInfoActive.title}
+            </label>
+          </div>
+        {/if}
+      </div>
 
-    <div style:margin-top="10px" style:grid-row="2" style:grid-column="1 / 3">
-      <Divider --divider-color=rgb(var(--global-color-contrast-100) />
-    </div>
-    <div style:grid-row="3" style:grid-column="2" style:margin-top="-15px">
-      <ConfirmOrCancelButtons
-        confirmDisable={saveEditDisabled}
-        confirmText="Save"
-        cancelText="Cancel"
-        on:cancel-click={handleCancelClick}
-        on:confirm-click={handleSaveClick}
-      />
+      <div style:grid-column="2" style:margin-top="-15px">
+        <ConfirmOrCancelButtons
+          confirmDisable={saveEditDisabled}
+          confirmText="Save"
+          cancelText="Cancel"
+          on:cancel-click={handleCancelClick}
+          on:confirm-click={handleSaveClick}
+        />
+      </div>
     </div>
-  </div>
-</Menu>
+  {/if}
+</MenuOrDrawer>
 
-<Menu
+<MenuOrDrawer
   bind:open={openQuickFilter}
-  activator={quickFilterActivator}
-  bind:menuElement={menuElementQuickFilters}
-  anchor="bottom"
-  openingId="quick-filter"
-  closeOnClickOutside
+  menuProps={{
+    activator: quickFilterActivator,
+    anchor: 'bottom',
+    openingId: 'quick-filter',
+    closeOnClickOutside: true
+  }}
+  drawerProps={{
+    _space: '60vh',
+    _borderRadius: '10px',
+  }}
+  let:isMenu
+  let:isDrawer
 >
-  <div
-    class="quick-filter-container"
-  >
-    <div style:grid-column="1 / 3">
-      {#if quickFilterActive.type.key == 'custom'}
-        <slot name="custom-quick-filter" quickFilter={quickFilterActive} {setQuickFilterMissingValue}>
-        </slot>
-      {:else if quickFilterActive.type.key === "string"}
-        <div class="space-between" style="font-weight: 500;">
-          {quickFilterActive.title}
-          {#if !!quickFilterActive.type.missingLabel}
-            <button
-              on:click={() =>
-                setQuickFilterMissingValue(quickFilterActive)}
-              >{quickFilterActive.type.missingLabel}</button
-            >
-          {/if}
-        </div>
-        <LabelAndTextField
-          description={quickFilterActive.description}
-          name={quickFilterActive.title}
-          info={quickFilterActive.info}
-          type="text"
-          bind:value={quickFilterActive.type.value}          
-          --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))'
-        />
-      {:else if quickFilterActive.type.key === "number"}
-        <div class="space-between" style="font-weight: 500; margin-bottom: 8px;">
-          {quickFilterActive.title}
-          {#if !!quickFilterActive.type.missingLabel}
-            <button
-              on:click={() =>
-                setQuickFilterMissingValue(quickFilterActive)}
-              >{quickFilterActive.type.missingLabel}</button
-            >
-          {/if}
-        </div>
-        <LabelAndTextField
-          description={quickFilterActive.description}
-          name={quickFilterActive.title}
-          info={quickFilterActive.info}
-          type="number"
-          error={saveEditDisabled}
-          bind:value={quickFilterActive.type.value}          
-          --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))'
-        />
-      {:else if quickFilterActive.type.key === "multi-select"}
-        <div class="space-between" style="font-weight: 500; margin-bottom: 8px;">
-          {quickFilterActive.title}
-          {#if !!quickFilterActive.type.missingLabel}
-            <button
-              on:click={() =>
-                setQuickFilterMissingValue(quickFilterActive)}
-              >{quickFilterActive.type.missingLabel}</button
-            >
-          {/if}
-        </div>
-        <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">
-            <button
-              on:click={() => setQuickFilterValue(quickFilterActive, true)}
-            >
-              {quickFilterActive.type.params.labelTrue}
-            </button>
-            <button
-              on:click={() => setQuickFilterValue(quickFilterActive, false)}
-            >
-              {quickFilterActive.type.params.labelFalse}
-            </button>
-            <button
-              on:click={() => setQuickFilterValue(quickFilterActive, undefined)}
-            >
-              {lang == 'en' ? 'All' : 'Tutti'}
-            </button>
+  {#if quickFilterActive}
+    <div
+      class:quick-filter-container={isMenu}
+      style:padding='10px'
+    >
+      <div style:grid-column="1 / 3">
+        {#if quickFilterActive.type.key == 'custom'}
+          <slot name="custom-quick-filter" quickFilter={quickFilterActive} {setQuickFilterMissingValue}>
+          </slot>
+        {:else if quickFilterActive.type.key === "string"}
+          <div class="space-between" style="font-weight: 500;">
+            {quickFilterActive.title}
+            {#if !!quickFilterActive.type.missingLabel}
+              <button
+                on:click={() =>
+                  setQuickFilterMissingValue(quickFilterActive)}
+                >{quickFilterActive.type.missingLabel}</button
+              >
+            {/if}
           </div>
-        {/if}
-      {:else if quickFilterActive.type.key === "country"}
-        <div class="space-between" style="font-weight: 500; margin-bottom: 8px;">
-          {quickFilterActive.title}
-          {#if !!quickFilterActive.type.missingLabel}
-            <button
-              on:click={() =>
-                setQuickFilterMissingValue(quickFilterActive)}
-              >{quickFilterActive.type.missingLabel}</button
-            >
-          {/if}
-        </div>
-        <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-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))"
+          <LabelAndTextField
+            description={quickFilterActive.description}
+            name={quickFilterActive.title}
+            info={quickFilterActive.info}
+            type="text"
+            bind:value={quickFilterActive.type.value}          
+            --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>
-      {:else if quickFilterActive.type.key === "date"}
-        <div style="font-weight: 500; margin-bottom: 8px;">
-          {quickFilterActive.title}
-        </div>
-        <div on:click|stopPropagation role="presentation" tabindex="-1">
-          <div>
-            <DatePickerTextField
-              bind:selectedDate={quickFilterActive.type.from}
-              placeholder={lang == 'en' ? "From" : 'Da'}
-              --simple-textfield-width="100%"
-              --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))'
-              flipOnOverflow
-              bind:menuOpened={calendarOpened}
-              on:day-click={() => (calendarOpened = false)}
-            >
-              <svelte:fragment slot="append-inner">
-                <Icon
-                  name="mdi-close-circle"
-                  click
-                  on:click={() => {
-                    if (
-                      !!quickFilterActive &&
-                      quickFilterActive.type.key === "date"
-                    ) {
-                      quickFilterActive.type.from = undefined;
-                    }
-                  }}
-                />
-              </svelte:fragment>
-            </DatePickerTextField>
+        {:else if quickFilterActive.type.key === "number"}
+          <div class="space-between" style="font-weight: 500; margin-bottom: 8px;">
+            {quickFilterActive.title}
+            {#if !!quickFilterActive.type.missingLabel}
+              <button
+                on:click={() =>
+                  setQuickFilterMissingValue(quickFilterActive)}
+                >{quickFilterActive.type.missingLabel}</button
+              >
+            {/if}
           </div>
-          <div>
-            <DatePickerTextField
-              bind:selectedDate={quickFilterActive.type.to}
-              placeholder={lang == 'en' ? "To" : 'A'}
-              --simple-textfield-width="100%"
-              --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))'
-              flipOnOverflow
-              bind:menuOpened={calendarOpened2}
-              on:day-click={() => (calendarOpened2 = false)}
+          <LabelAndTextField
+            description={quickFilterActive.description}
+            name={quickFilterActive.title}
+            info={quickFilterActive.info}
+            type="number"
+            error={saveEditDisabled}
+            bind:value={quickFilterActive.type.value}          
+            --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))'
+          />
+        {:else if quickFilterActive.type.key === "multi-select"}
+          <div class="space-between" style="font-weight: 500; margin-bottom: 8px;">
+            {quickFilterActive.title}
+            {#if !!quickFilterActive.type.missingLabel}
+              <button
+                on:click={() =>
+                  setQuickFilterMissingValue(quickFilterActive)}
+                >{quickFilterActive.type.missingLabel}</button
+              >
+            {/if}
+          </div>
+          <div on:click|stopPropagation role="presentation" tabindex="-1">
+            <Autocomplete
+              multiple
+              items={quickFilterActive.type.items}
+              bind:values={quickFilterActive.type.values}
+              mobileDrawer={isDrawer}
+              --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="append-inner">
-                <Icon
-                  name="mdi-close-circle"
-                  click
-                  on:click={() => {
-                    if (
-                      !!quickFilterActive &&
-                      quickFilterActive.type.key === "date"
-                    ) {
-                      quickFilterActive.type.to = undefined;
-                    }
-                  }}
-                />
+              <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>
-            </DatePickerTextField>
+            </Autocomplete>
+          </div>
+        {:else if quickFilterActive.type.key === "boolean"}
+          {#if quickFilterActive.type.params}
+            <div class="vertical-quick-filters">
+              <button
+                on:click={() => setQuickFilterValue(quickFilterActive, true)}
+              >
+                {quickFilterActive.type.params.labelTrue}
+              </button>
+              <button
+                on:click={() => setQuickFilterValue(quickFilterActive, false)}
+              >
+                {quickFilterActive.type.params.labelFalse}
+              </button>
+              <button
+                on:click={() => setQuickFilterValue(quickFilterActive, undefined)}
+              >
+                {lang == 'en' ? 'All' : 'Tutti'}
+              </button>
+            </div>
+          {/if}
+        {:else if quickFilterActive.type.key === "country"}
+          <div class="space-between" style="font-weight: 500; margin-bottom: 8px;">
+            {quickFilterActive.title}
+            {#if !!quickFilterActive.type.missingLabel}
+              <button
+                on:click={() =>
+                  setQuickFilterMissingValue(quickFilterActive)}
+                >{quickFilterActive.type.missingLabel}</button
+              >
+            {/if}
+          </div>
+          <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,
+                mobileDrawer: isDrawer,
+              }}
+              --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))"
+            />
+          </div>
+        {:else if quickFilterActive.type.key === "date"}
+          <div style="font-weight: 500; margin-bottom: 8px;">
+            {quickFilterActive.title}
           </div>
+          <div on:click|stopPropagation role="presentation" tabindex="-1">
+            <div>
+              <DatePickerTextField
+                bind:selectedDate={quickFilterActive.type.from}
+                placeholder={lang == 'en' ? "From" : 'Da'}
+                --simple-textfield-width="100%"
+                --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))'
+                flipOnOverflow
+                mobileDialog={isDrawer}
+                bind:menuOpened={calendarOpened}
+                on:day-click={() => (calendarOpened = false)}
+              >
+                <svelte:fragment slot="append-inner">
+                  <Icon
+                    name="mdi-close-circle"
+                    click
+                    on:click={() => {
+                      if (
+                        !!quickFilterActive &&
+                        quickFilterActive.type.key === "date"
+                      ) {
+                        quickFilterActive.type.from = undefined;
+                      }
+                    }}
+                  />
+                </svelte:fragment>
+              </DatePickerTextField>
+            </div>
+            <div>
+              <DatePickerTextField
+                bind:selectedDate={quickFilterActive.type.to}
+                placeholder={lang == 'en' ? "To" : 'A'}
+                --simple-textfield-width="100%"
+                --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))'
+                flipOnOverflow
+                mobileDialog={isDrawer}
+                bind:menuOpened={calendarOpened2}
+                on:day-click={() => (calendarOpened2 = false)}
+              >
+                <svelte:fragment slot="append-inner">
+                  <Icon
+                    name="mdi-close-circle"
+                    click
+                    on:click={() => {
+                      if (
+                        !!quickFilterActive &&
+                        quickFilterActive.type.key === "date"
+                      ) {
+                        quickFilterActive.type.to = undefined;
+                      }
+                    }}
+                  />
+                </svelte:fragment>
+              </DatePickerTextField>
+            </div>
+          </div>
+        {/if}
+      </div>
+
+      {#if quickFilterActive.type.key != "boolean"}
+        <div style:grid-column="2" style:margin-top="-10px">
+          <ConfirmOrCancelButtons
+            confirmDisable={saveEditDisabled}
+            confirmText={lang == 'en' ? "Apply" : 'Applica'}
+            cancelText={lang == 'en' ? "Cancel" : 'Annulla'}
+            on:cancel-click={handleCancelClick}
+            on:confirm-click={() => handleApplyClick(quickFilterActive, quickFilterActive.type.key == 'custom')}
+          />
         </div>
       {/if}
     </div>
-
-    {#if quickFilterActive.type.key != "boolean"}
-      <div style:grid-row="3" style:grid-column="2" style:margin-top="-10px">
-        <ConfirmOrCancelButtons
-          confirmDisable={saveEditDisabled}
-          confirmText={lang == 'en' ? "Apply" : 'Applica'}
-          cancelText={lang == 'en' ? "Cancel" : 'Annulla'}
-          on:cancel-click={handleCancelClick}
-          on:confirm-click={() => handleApplyClick(quickFilterActive, quickFilterActive.type.key == 'custom')}
-        />
-      </div>
-    {/if}
-  </div>
-</Menu>
+  {/if}
+</MenuOrDrawer>
 
 <MediaQuery let:sAndDown>
   <Drawer
@@ -2212,7 +1842,10 @@
       --dynamic-table-background-color,
       var(--dynamic-table-default-background-color)
     );
-    border-collapse: separate;
+    border-collapse: var(
+      --dynamic-table-border-collapse,
+      var(--dynamic-table-default-border-collapse)
+    );
   }
 
   .dynamic-table.dynamic-resizable {
@@ -2304,7 +1937,10 @@
   }
 
   table {
-    border-collapse: separate;
+    border-collapse: var(
+      --dynamic-table-border-collapse,
+      var(--dynamic-table-default-border-collapse)
+    );
     width: 100%;
   }
 
@@ -2319,7 +1955,10 @@
 
   td {
     padding-left: 10px;
-    border: 1px solid transparent;
+    border: var(
+      --dynamic-table-cell-border,
+      var(--dynamic-table-default-cell-border)
+    );
   }
 
   table.dynamic-table > tbody > tr > td {
@@ -2333,8 +1972,8 @@
   }
 
   table.dynamic-table > tbody > tr > td.expanded-row {
-  overflow: visible;
-}
+    overflow: visible;
+  }
 
   .hover-cell:hover, .hover-cell:focus, .cell-edit-activator {
     cursor: pointer;
@@ -2363,14 +2002,12 @@
     align-items: center;
     box-shadow: 2px 2px 2px 2px rgba(0, 0, 0, 0.2);
     position: fixed;
-    padding: 10px;
     border-radius: 10px;
     background-color: var(
       --dynamic-table-cell-editor-background-color,
       var(--dynamic-table-default-cell-editor-background-color)
     );
-    height: 200px;
-    width: 500px;
+    width: 400px;
   }
 
   .row-activator {
@@ -2387,7 +2024,6 @@
     align-items: center;
     box-shadow: 2px 2px 2px 2px rgba(0, 0, 0, 0.2);
     position: fixed;
-    padding: 10px;
     border-radius: 10px;
     background-color: var(
       --dynamic-table-quick-filter-background-color,