@likable-hair/svelte 3.3.24 → 3.3.26

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

@@ -1,1193 +1,798 @@
-<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";
+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;
+      `
     };
+  }
+});
+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;
+let openCellEditor = false, cellEditorActivator, cellEditorContainer, menuElementCellEditor, menuElementQuickFilters, cellEditorInfoActive, saveEditDisabled = false, searchBarInput = void 0, openQuickFilter = false, quickFilterActivator, quickFilterActive, globalBuilder = new FilterBuilder(), calendarOpened = false, calendarOpened2 = false, selectedIndexes = [], cellEditorIndexRow, cellEditorIndexHeader, cellEditorSubItem, currentSectionNumber = 0, tableBody, tableContainer, 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 MenuDateType = {
-    key: "date";
-  };
-
-  type MenuSelectType = {
-    key: "select";
-    params: {
-      options: {
-        icon?: string;
-        value: string | number | undefined;
-        id?: number | undefined;
-        text: string;
-      }[];
-    };
-  };
-
-  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
-
-  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) {
+    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();
+  } else if (quickFilter.type.key == "boolean") {
+    let value = quickFilter.type.value;
+    if (clearPreaviousValue) {
+      builder = handleClearQuickFilter(quickFilter, false);
     }
-  }
-
-  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;
+    quickFilter.type.value = value;
+    if (quickFilter.type.modify) {
+      builder = quickFilter.type.modify({
+        builder,
+        value
+      });
     }
-    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;
+    if (!!quickFilter.column && value != void 0) {
+      builder.where(quickFilter.column, 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})
-    }
-    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);
+    if (!!quickFilter.column) {
+      if (missingValue) {
+        builder.whereNull(quickFilter.column);
+      } else if (!!values && values.length > 0) {
+        builder.whereIn(quickFilter.column, values);
       }
-      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,
-            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 - 30;
-
-      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 { paddingLeft, paddingRight } = getComputedStyle(th);
-    let width = resizedColumnSizeWithPadding[header.value] - parseFloat(paddingLeft) - parseFloat(paddingRight);
-    th.style.width = `${width}px`
+    let maxWidth = header.maxWidth, maxWidthPx = DEFAULT_MAX_WIDTH_PX;
+    if (!!maxWidth && maxWidth.endsWith("px")) {
+      maxWidthPx = parseInt(maxWidth, 10);
+    }
+    if (widthWihtPadding > maxWidthPx) {
+      widthWihtPadding = maxWidthPx;
+    }
+    resizedColumnSizeWithPadding[header.value] = widthWihtPadding;
   }
+  let { paddingLeft, paddingRight } = getComputedStyle(th);
+  let width = resizedColumnSizeWithPadding[header.value] - parseFloat(paddingLeft) - parseFloat(paddingRight);
+  th.style.width = `${width}px`;
+}
 </script>
 
 {#if !!rows && Array.isArray(rows) && !!headersToShowInTable && Array.isArray(headersToShowInTable)}
@@ -1206,112 +811,114 @@
   {/if}
 
   {#if searchBarVisible || filtersVisible || $$slots.appendFilterRow}
-    <div class="filter-container">
-      <div class="search-bar-container">
+    <MediaQuery let:mAndDown>
+      <div class="searchbar-and-filter-container {mAndDown ? 'mobile' : 'desktop'}">
         <slot name="search-bar" {handleSearchChange}>
           {#if searchBarVisible}
-          <div style="margin-right: 20px;">
-            <SimpleTextField
-              placeholder={searchBarPlaceholder}
-              appendInnerIcon="mdi-magnify"
-              bind:value={searchText}
-              bind:input={searchBarInput}
-              on:keydown={handleSearchBoxKeydown}
-              --simple-textfield-default-width="450px"
-              --simple-textfield-border-radius= 0.5rem
-              --simple-textfield-background-color= transparent
-              --simple-textfield-box-shadow= 'inset 0 0 0 1px rgb(var(--global-color-background-500))'
-              --simple-textfield-focus-box-shadow='inset 0 0 0 2px rgb(var(--global-color-primary-500))'
-            />
-          </div>
+            <div style="margin-right: {mAndDown ? '0px' : '20px'};">
+              <SimpleTextField
+                placeholder={searchBarPlaceholder}
+                appendInnerIcon="mdi-magnify"
+                bind:value={searchText}
+                bind:input={searchBarInput}
+                on:keydown={handleSearchBoxKeydown}
+                --simple-textfield-width={mAndDown ? "100%" : "450px"}
+                --simple-textfield-border-radius= 0.5rem
+                --simple-textfield-background-color= transparent
+                --simple-textfield-box-shadow= 'inset 0 0 0 1px rgb(var(--global-color-background-500))'
+                --simple-textfield-focus-box-shadow='inset 0 0 0 2px rgb(var(--global-color-primary-500))'
+              />
+            </div>
           {/if}
         </slot>
-
-        {#if filtersVisible}
-          <div>
-            {#if dynamicFilters}
-              <Filters
-                bind:filters
-                on:applyFilter={() => {
-                  handleSearchChange(searchText);
-                }}
-                on:removeFilter={e => { handleRemoveFilter(e.detail.filter) }}
-                on:removeAllFilters={() => handleRemoveAllFilters()}
-                --filters-default-wrapper-width="100%"
-                {lang}
-                {dateLocale}
-                {editFilterMode}
-                {showActiveFilters}
-              >
-                <svelte:fragment slot="append">
-                  <slot name="filter-append" />
-                </svelte:fragment>
-                <svelte:fragment slot="custom-chip" let:filter>
-                  <slot name="custom-filter-chip" {filter} />
-                </svelte:fragment>
-                <svelte:fragment
-                  slot="custom"
-                  let:filter
-                  let:updateFunction
-                  let:mAndDown
+        
+        <div class="filter-container">
+          {#if filtersVisible}
+            <div>
+              {#if dynamicFilters}
+                <Filters
+                  bind:filters
+                  on:applyFilter={() => {
+                    handleSearchChange(searchText);
+                  }}
+                  on:removeFilter={e => { handleRemoveFilter(e.detail.filter) }}
+                  on:removeAllFilters={() => handleRemoveAllFilters()}
+                  --filters-default-wrapper-width="100%"
+                  {lang}
+                  {dateLocale}
+                  {editFilterMode}
+                  {showActiveFilters}
+                  drawerSpace='40rem'
                 >
-                  <slot name="custom-filter" {filter} {updateFunction} {mAndDown} />
-                </svelte:fragment>
-
-                <svelte:fragment slot="content" let:mAndDown let:filters let:updateMultiFilterValues>
-                  {#key filters}
-                    <DynamicFilters
-                      {lang}
-                      {filters}                      
-                      {mAndDown}
-                      {updateMultiFilterValues}
-                      on:change={e => updateFilterValues(e.detail.filter, updateMultiFilterValues)}    
-                    >
-                      <svelte:fragment slot="custom" let:filter let:mAndDown let:updateCustomFilterValues>
-                        <slot name="custom-filter" {filter} {updateCustomFilterValues} {mAndDown}></slot>
-                      </svelte:fragment>
-                    </DynamicFilters>
-                  {/key}
-                </svelte:fragment>
-              </Filters>
-            {:else}
-              <Filters
-                bind:filters
-                on:applyFilter={() => {
-                  handleSearchChange(searchText);
-                }}
-                on:removeFilter={e => { handleRemoveFilter(e.detail.filter) }}
-                on:removeAllFilters={() => handleRemoveAllFilters()}
-                --filters-default-wrapper-width="100%"
-                {lang}
-                {dateLocale}
-                {editFilterMode}
-                {showActiveFilters}
-              >
-                <svelte:fragment slot="append">
-                  <slot name="filter-append" />
-                </svelte:fragment>
-                <svelte:fragment slot="custom-chip" let:filter>
-                  <slot name="custom-filter-chip" {filter} />
-                </svelte:fragment>
-                <svelte:fragment
-                  slot="custom"
-                  let:filter
-                  let:updateFunction
-                  let:mAndDown
+                  <svelte:fragment slot="append">
+                    <slot name="filter-append" />
+                  </svelte:fragment>
+                  <svelte:fragment slot="custom-chip" let:filter>
+                    <slot name="custom-filter-chip" {filter} />
+                  </svelte:fragment>
+                  <svelte:fragment
+                    slot="custom"
+                    let:filter
+                    let:updateFunction
+                    let:mAndDown
+                  >
+                    <slot name="custom-filter" {filter} {updateFunction} {mAndDown} />
+                  </svelte:fragment>
+  
+                  <svelte:fragment slot="content" let:mAndDown let:filters let:updateMultiFilterValues>
+                    {#key filters}
+                      <DynamicFilters
+                        {lang}
+                        {filters}                      
+                        {mAndDown}
+                        {updateMultiFilterValues}
+                        on:change={e => updateFilterValues(e.detail.filter, updateMultiFilterValues)}    
+                      >
+                        <svelte:fragment slot="custom" let:filter let:mAndDown let:updateCustomFilterValues>
+                          <slot name="custom-filter" {filter} {updateCustomFilterValues} {mAndDown}></slot>
+                        </svelte:fragment>
+                      </DynamicFilters>
+                    {/key}
+                  </svelte:fragment>
+                </Filters>
+              {:else}
+                <Filters
+                  bind:filters
+                  on:applyFilter={() => {
+                    handleSearchChange(searchText);
+                  }}
+                  on:removeFilter={e => { handleRemoveFilter(e.detail.filter) }}
+                  on:removeAllFilters={() => handleRemoveAllFilters()}
+                  --filters-default-wrapper-width="100%"
+                  {lang}
+                  {dateLocale}
+                  {editFilterMode}
+                  {showActiveFilters}
                 >
-                  <slot name="custom-static-filter" {filter} {updateFunction} {mAndDown}/>
-                </svelte:fragment>
-              </Filters>
-            {/if}
+                  <svelte:fragment slot="append">
+                    <slot name="filter-append" />
+                  </svelte:fragment>
+                  <svelte:fragment slot="custom-chip" let:filter>
+                    <slot name="custom-filter-chip" {filter} />
+                  </svelte:fragment>
+                  <svelte:fragment
+                    slot="custom"
+                    let:filter
+                    let:updateFunction
+                    let:mAndDown
+                  >
+                    <slot name="custom-static-filter" {filter} {updateFunction} {mAndDown}/>
+                  </svelte:fragment>
+                </Filters>
+              {/if}
+            </div>
+          {/if}
+          <div>
+            <slot name="appendFilterRow"></slot>
           </div>
-        {/if}
-      </div>
-
-      <div>
-        <slot name="appendFilterRow"></slot>
+        </div>
       </div>
-    </div>
+    </MediaQuery>
   {/if}
 
   {#if quickFiltersVisible || numberOfResultsVisible}
@@ -1683,26 +1290,9 @@
 
                       <tbody>
                         {#each row.subItems as subItem, indexSubItem}
-                          <tr
-                            on:click={() => handleRowClick(subItem)}
-                            class:row-activator={cellEditorIndexRow == indexSubItem && cellEditorSubItem}
-                          >
+                          <tr>
                             {#each subHeaders as subHeader, indexSubHeader}
-                              <td
-                                class:cell-edit-activator={cellEditorIndexHeader == indexSubHeader && cellEditorIndexRow == indexSubItem && cellEditorSubItem}
-                                class:hover-cell={cellEdit && !loading && !!subHeader.cellEditorInfo}
-                                on:click={(e) => {
-                                  handleCellClick(
-                                    e,
-                                    subItem,
-                                    subHeader.cellEditorInfo,
-                                    subItem[subHeader.value],
-                                    indexSubItem,
-                                    indexSubHeader,
-                                    true
-                                  );
-                                }}
-                              >
+                              <td>
                                 {#if subHeader.type.key == "custom"}
                                   <slot
                                     name="custom-subheader"
@@ -2034,6 +1624,9 @@
           />
         </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
@@ -2098,10 +1691,7 @@
     </div>
 
     {#if quickFilterActive.type.key != "boolean"}
-      <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">
+      <div style:grid-row="3" style:grid-column="2" style:margin-top="-10px">
         <ConfirmOrCancelButtons
           confirmDisable={saveEditDisabled}
           confirmText={lang == 'en' ? "Apply" : 'Applica'}
@@ -2442,22 +2032,40 @@
     flex-direction: row;
   }
 
-  .filter-container {
+  .searchbar-and-filter-container {
     display: flex;
+    margin-bottom: 16px;
+  }
+  
+  .searchbar-and-filter-container.desktop {
     flex-direction: row;
+  }
+  .searchbar-and-filter-container.mobile {
+    flex-direction: column;
+    gap: 8px;
+  }
+  .filter-container {
+    display: flex;
     justify-content: space-between;
-    margin-bottom: 20px;
+    flex-grow: 1;
   }
-
   .quick-filters {
     display: flex;
     flex-direction: row;
-    margin-bottom: 10px;
+    overflow-x: auto;
+    white-space: nowrap;
+    padding-bottom: 4px;
+    gap: 8px;
+  }
+  .quick-filters::-webkit-scrollbar:horizontal {
+    height: 12px;
   }
 
   .quick-filters-results-container {
     display: flex;
     justify-content: space-between;
+    gap: 8px;
+    margin-bottom: 8px;
   }
 
   .vertical-quick-filters {
@@ -2555,6 +2163,7 @@
     display: flex;
     align-items: center;
     gap: 4px;
+    min-width: 90px;
   }
   .resizer {
     position: absolute;