@likable-hair/svelte 3.3.30 → 3.3.32

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

@@ -1,800 +1,1194 @@
-<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);
-    }
-  }
-  tableHTML.classList.add("dynamic-resizable");
-  resizeObserver = new ResizeObserver(() => {
-    updateRemainingWidth();
+<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";
+  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)
+      }
+    }
+
+    tableHTML.classList.add('dynamic-resizable')
+
+    resizeObserver = new ResizeObserver(() => {
+      updateRemainingWidth();
+      updateHeaderHeight();
+    });
+    resizeObserver.observe(tableContainer);
+
+    return () => {
+      window.removeEventListener('resize', updateHeaderHeight);
+      tableContainer.removeEventListener("scroll", setReachedBottomOrTop);
+      resizeObserver?.disconnect();
+    }
   });
-  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");
-  }
-}
-function setReachedBottomOrTop() {
-  reachedBottom = tableContainer.scrollHeight - tableContainer.scrollTop === tableContainer.clientHeight;
-  reachedTop = tableContainer.scrollTop === 0;
-  hideScrollbar = tableContainer.scrollHeight > tableContainer.clientHeight;
-}
-$:
-  if (reachedBottom && rows.length < totalRows) {
+
+  function updateHeaderHeight() {
+    if (mainHeader) {
+      const headerHeight = mainHeader.getBoundingClientRect().height;
+      document.documentElement.style.setProperty('--main-header-height', headerHeight + 'px');
+    }
+  }
+
+  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, 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
   };
-}) : [], headersToShow = headersToShowInTable.map((h) => {
-  return {
-    id: h.value,
-    name: h.label
+
+  type MenuDateType = {
+    key: "date";
   };
-}), 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;
-      }
-    } else {
-      sortedBy = header.value;
-      sortDirection = "asc";
-      sortModify = header.sortModify;
+
+  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
+  };
+  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
     }
-    handleSearchChange(searchText);
-    dispatch("sort", {
-      sortedBy,
-      sortDirection
+    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,
+    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 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);
+
+  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
       }
+
+      handleSearchChange(searchText);
+
+      dispatch("sort", {
+        sortedBy,
+        sortDirection,
+      });
     }
   }
-  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];
-              }
+
+  function handleRowClick(item: { [key: string]: any }) {
+    if (disabled || loading) return;
+    dispatch("rowClick", {
+      item,
+    });
+  }
+
+  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) {
+      mouseEvent.stopPropagation()
+      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 {
-              if (!selectedItems.find((selectedItem) => selectedItem[uniqueKey] == rows[i].item[uniqueKey])) {
-                selectedItems = [...selectedItems, rows[i].item];
+              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]
+                }
               }
             }
           }
         }
-      } else {
-        if (selectedAll && !ignoreSelectAll) {
-          unselectedItems = [...unselectedItems, item];
-        } else {
-          selectedItems = [...selectedItems, item];
+        else {
+          if(selectedAll && !ignoreSelectAll) {
+            unselectedItems = [...unselectedItems, item];
+          } else {
+            selectedItems = [...selectedItems, item];
+          }
+          selectedIndexes.push(rows.findIndex(r => r.item[uniqueKey] == item[uniqueKey]))
         }
-        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.filter((i) => i[uniqueKey] != item[uniqueKey]);
+      } else {
+        selectedItems = selectedItems.filter((i) => i[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
     }
-    selectedIndexes = selectedIndexes.filter((r) => r != rows.findIndex((r2) => r2.item[uniqueKey] == item[uniqueKey]));
   }
-}
-function handleSelectAll() {
-  if (selectMode == "multiple") {
-    if (!selectedAll && ignoreSelectAll) {
-      selectedItems = rows.map((r) => r.item);
+
+  function expandRow(row: Row) {
+    let index = expandedRows.findIndex((r) => r.item[uniqueKey] == row.item[uniqueKey]);
+    if (index == -1) {
+      expandedRows = [...expandedRows, row];
     } else {
-      selectedItems = [];
+      expandedRows = expandedRows.filter((r) => r.item[uniqueKey] != row.item[uniqueKey]);
     }
-    selectedIndexes = [];
-    unselectedItems = [];
-    selectedAll = !selectedAll;
-  }
-}
-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]);
-  }
-}
-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 + "%");
-      }
-    });
+
+  function formatDate(
+    dateTime: DateTime,
+    dateFormat: Extract<HeaderType, { key: "date" }>["params"]
+  ): string {
+    return dateTime.setLocale(dateFormat.locale).toFormat(dateFormat.format);
   }
-  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 (!showExpand) {
+      totalBatchLength = rows.length;
+    } else {
+      totalBatchLength = rows.reduce(
+        (acc, row) => acc + row.subItems.length,
+        rows.length
+      );
     }
-    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 });
+
+    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;
     } else {
-      globalBuilder.orderBy(sortedBy, sortDirection || "asc");
+      saveEditDisabled = false;
     }
   }
-  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
-      );
+
+  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 + "%");
+        }
+      });
     }
+
+    return builder;
   }
-  if (dispatchFiltersChange) {
-    quickFilters = quickFilters;
-    handleFiltersChange();
-  }
-  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;
+
+  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]);
       }
-    }
-  }, 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;
-  }
-  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;
+
+      handleFiltersChange();
+    }, 800);
   }
-}
-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);
-    }
-    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 (searchText != undefined) handleSearchChange(searchText);
+
+  function handleFiltersChange() {
+    if(!!tableContainer) {
+      userScrolling = false
+      currentSectionNumber = 0
+      tableContainer.scrollTop = 0
+      setTimeout(() => userScrolling = true, 20)
     }
-    quickFilter.type.value = value;
-    quickFilter.type.missingValue = missingValue;
-    if (quickFilter.type.modify) {
-      builder = quickFilter.type.modify({
-        builder,
-        value: { value, missingValue }
-      });
+
+    if (!!sortedBy) {
+      if(sortModify){
+        globalBuilder = sortModify({ builder: globalBuilder, sortDirection })
+      }
+      else {
+        globalBuilder.orderBy(sortedBy, sortDirection || "asc");
+      }
     }
-    if (!!quickFilter.column) {
-      if (missingValue) {
-        builder.whereNull(quickFilter.column);
-      } else if (!!value) {
-        builder.where(
-          quickFilter.column,
-          quickFilter.type.mode ?? "equal",
-          value
-        );
+    
+    dispatch("filtersChange", {
+      builder: globalBuilder,
+    });
+  }
+
+  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 })
       }
     }
-  } else if (quickFilter.type.key == "boolean") {
-    let value = quickFilter.type.value;
-    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;
-    if (quickFilter.type.modify) {
-      builder = quickFilter.type.modify({
-        builder,
-        value
-      });
+
+    if (dispatchFiltersChange) {
+      quickFilter.active = false;
     }
-    if (!!quickFilter.column && value != void 0) {
-      builder.where(quickFilter.column, value);
+
+    globalBuilder = searchTextBuilder(searchText);
+
+    for (let i = 0; i < quickFilters.length; i++) {
+      if (quickFilters[i].active) {
+        globalBuilder = quickFilterBuilder(
+          globalBuilder,
+          quickFilters[i],
+          false
+        );
+      }
     }
-  } else if (quickFilter.type.key == "country") {
-    let value = quickFilter.type.selected, missingValue = quickFilter.type.missingValue;
-    if (clearPreaviousValue) {
-      builder = handleClearQuickFilter(quickFilter, false);
+
+    if (dispatchFiltersChange) {
+      quickFilters = quickFilters;
+      handleFiltersChange();
     }
-    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 }
-      });
+
+    return globalBuilder;
+  }
+
+  function handleSearchBoxKeydown(e: KeyboardEvent) {
+    if (e.key == "Enter") {
+      handleFiltersChange();
     }
-    if (!!quickFilter.column) {
-      if (missingValue) {
-        builder.whereNull(quickFilter.column);
-      } else if (!!values && values.length > 0) {
-        builder.whereIn(quickFilter.column, values);
+  }
+
+  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 == "date") {
-    let from = quickFilter.type.from, to = quickFilter.type.to;
-    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.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()
-        );
-      }
+
+    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 if (quickFilter.type.key == "multi-select") {
-    let value = quickFilter.type.values, missingValue = quickFilter.type.missingValue;
-    if (clearPreaviousValue) {
-      builder = handleClearQuickFilter(quickFilter, false);
+    else {
+      quickFilter.active = true;
+      quickFilters = quickFilters;
+      globalBuilder = quickFilterBuilder(globalBuilder, quickFilter);
+  
+      handleFiltersChange();
+  
+      quickFilterActivator = undefined;
+      openQuickFilter = 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);
+  }
+
+  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);
       }
-    }
-  } 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) {
+      quickFilter.type.value = value;
+      quickFilter.type.missingValue = missingValue;
+
       builder = quickFilter.type.modify({
         builder,
-        value: { value, missingValue }
+        value: { value, missingValue },
       });
     }
-    if (quickFilter.column) {
-      if (missingValue) {
-        builder.whereNull(quickFilter.column);
-      } else if (!!value) {
+    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 (!!value) {
+          builder.where(
+            quickFilter.column,
+            quickFilter.type.mode ?? "equal",
+            value
+          );
+        }
+      }
+    } else if (quickFilter.type.key == "boolean") {
+      let value = quickFilter.type.value;
+      if (clearPreaviousValue) {
+        builder = handleClearQuickFilter(quickFilter, false);
+      }
+      quickFilter.type.value = value;
+
+      if (quickFilter.type.modify) {
+        builder = quickFilter.type.modify({
+          builder,
+          value,
+        });
+      }
+
+      if (!!quickFilter.column && value != undefined) {
         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;
   }
-  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;
+
+  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
+      }
     }
-  } else if ("mode" in filter && filter.mode == "between") {
-    newValue.to = filter.to;
-    newValue.from = filter.from;
-    if (!!newValue.from || !!newValue.to) {
-      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 {
-    newValue = filter.value;
-    if (!!newValue) {
-      newValid = true;
+
+    if(totalCachedSections - sectionThreshold <= currentSectionNumber 
+      && !loading 
+      && totalRows > rows.length
+    ) {
+      dispatch("fetchData", {});
     }
   }
-  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++;
+
+  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--
+        }
       }
+      
+      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;
-  }
-  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--;
+  }
+
+  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
       }
     }
-    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) {
-  for (let i = 0; i < tableBody.children.length; i++) {
-    const child = tableBody.children.item(i);
-    if (child?.getAttribute("data-key") == key) {
-      return child;
-    }
+    return undefined
   }
-  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);
-        }
-        const maxWidth = headers.find((h) => h.value === th.id)?.maxWidth;
-        let maxWidthPx;
-        if (!!maxWidth && maxWidth.endsWith("px")) {
-          maxWidthPx = parseInt(maxWidth, 10);
-        }
-        const actualMinWidth = (minWidthPx || DEFAULT_MIN_WIDTH_PX) - parseFloat(paddingLeft) - parseFloat(paddingRight);
-        const actualMaxWidth = (maxWidthPx || DEFAULT_MAX_WIDTH_PX) - parseFloat(paddingLeft) - parseFloat(paddingRight);
-        if (width > actualMinWidth && width < actualMaxWidth) {
-          th.style.width = width + "px";
-          resizedColumnSizeWithPadding[th.id] = th.getBoundingClientRect().width;
-          resizedColumnSizeWithPadding = resizedColumnSizeWithPadding;
+
+  function 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
+          }
         }
       }
-    }, 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);
+      
+
+      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
+          })
         }
-        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);
+
+      function mouseDownHandler(e: MouseEvent) {
+        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);
+
+      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, header) {
-  if (!resizedColumnSizeWithPadding[header.value]) {
-    let widthWihtPadding = th.getBoundingClientRect().width;
-    let minWidth = header.minWidth, minWidthPx = DEFAULT_MIN_WIDTH_PX;
-    if (!!minWidth && minWidth.endsWith("px")) {
-      minWidthPx = parseInt(minWidth, 10);
-    }
-    if (widthWihtPadding < minWidthPx) {
-      widthWihtPadding = minWidthPx;
-    }
-    let maxWidth = header.maxWidth, maxWidthPx = DEFAULT_MAX_WIDTH_PX;
-    if (!!maxWidth && maxWidth.endsWith("px")) {
-      maxWidthPx = parseInt(maxWidth, 10);
-    }
-    if (widthWihtPadding > maxWidthPx) {
-      widthWihtPadding = maxWidthPx;
+
+  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;
     }
-    resizedColumnSizeWithPadding[header.value] = widthWihtPadding;
+    let { paddingLeft, paddingRight } = getComputedStyle(th);
+    let width = resizedColumnSizeWithPadding[header.value] - parseFloat(paddingLeft) - parseFloat(paddingRight);
+    th.style.width = `${width}px`
   }
-  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)}
@@ -965,10 +1359,15 @@ function resizeHeader(th, header) {
         {#if !loading}
           {totalRows || rows.length}
         {:else}
-          <CircularLoader 
-            {loading}
-            --circular-loader-height='10px'
-          ></CircularLoader>
+          <div
+            style:display=flex
+            style:align-items=center
+          >
+            <CircularLoader 
+              {loading}
+              --circular-loader-height='10px'
+            ></CircularLoader>
+          </div>
         {/if}
       </div>
     {/if}
@@ -1032,24 +1431,10 @@ function resizeHeader(th, header) {
                   {#if !!head.info}
                     <Icon						
                       name="mdi-help-circle-outline"
-                      --icon-size="16px"
+                      --icon-size="14px"
                     />
                   {/if}
                 </span>
-                {#if !!head.info}
-                  <ToolTip
-                    appearTimeout={1000}
-                    activator={infoActivators[index]}
-                  >
-                    <div
-                      style:background-color='rgb(var(--global-color-background-300), .95)'
-                      style:border-radius="5px"
-                      style:padding="10px"
-                    >
-                      {head.info}
-                    </div>
-                  </ToolTip>
-                {/if}
                 {#if head.sortable}
                   <span
                     class="header-sort-icon"
@@ -1066,6 +1451,20 @@ function resizeHeader(th, header) {
                 {/if}
               </slot>
             </th>
+            {#if !!head.info}
+              <ToolTip
+                appearTimeout={1000}
+                activator={infoActivators[index]}
+              >
+                <div
+                  style:background-color='rgb(var(--global-color-background-300), .95)'
+                  style:border-radius="5px"
+                  style:padding="10px"
+                >
+                  {head.info}
+                </div>
+              </ToolTip>
+            {/if}
           {/each}
           {#if remainingWidth}
             <th
@@ -1902,8 +2301,14 @@ function resizeHeader(th, header) {
   }
 
   .header-label {
-    margin-right: 5px;
-    font-size: small;
+    margin-right: var(
+      --dynamic-table-header-label-margin,
+      var(--dynamic-table-default-label-margin)
+    );
+    font-size: var(
+      --dynamic-table-header-label-font-size,
+      var(--dynamic-table-default-label-font-size)
+    );
   }
 
   .header-sort-icon {