@likable-hair/svelte 4.2.4 → 4.3.0

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

@@ -1,951 +1,1524 @@
-<script lang="ts" generics="Item extends {[key: string]: any} = {[key: string]: any}, SubItem extends {[key: string]: any} = {[key: string]: any}">import { Checkbox, Chip, Converter, CountriesAutocomplete, DatePickerTextField, FilterBuilder, FlagIcon, Icon, MediaQuery, ToolTip } from "../../..";
-import { DateTime } from "luxon";
-import { onMount, tick } from "svelte";
-import { fade } from "svelte/transition";
-import {} from "../../simple/forms/Autocomplete.svelte";
-import Filters from "../search/Filters.svelte";
-import ConfirmOrCancelButtons from "../forms/ConfirmOrCancelButtons.svelte";
-import InfiniteScroll from "../../simple/common/InfiniteScroll.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 CircularLoader from "../../simple/loaders/CircularLoader.svelte";
-import NoData from "../../simple/common/NoData.svelte";
-import SearchBar from "../search/SearchBar.svelte";
-import MenuOrDrawer from "../common/MenuOrDrawer.svelte";
-import HeadersDrawer from "../common/HeadersDrawer.svelte";
-import lodash from "lodash";
-const deepEqual = lodash.isEqual;
-onMount(() => {
+<script lang="ts" generics="Item extends {[key: string]: any} = {[key: string]: any}, SubItem extends {[key: string]: any} = {[key: string]: any}">
+  import {
+    Checkbox,
+    Chip,
+    Converter,
+    CountriesAutocomplete,
+    DatePickerTextField,
+    FilterBuilder,
+    FlagIcon,
+    Icon,
+    MediaQuery,
+    ToolTip,
+    type PaginatedTable
+  } from "../../..";
+  import { DateTime } from "luxon";
+  import { onMount, tick, type ComponentProps, type Snippet } from "svelte";
+  import { fade } from "svelte/transition";
+  import { type Item as ItemAutocomplete } from "../../simple/forms/Autocomplete.svelte"
+  import Filters from "../search/Filters.svelte";
+  import ConfirmOrCancelButtons from "../forms/ConfirmOrCancelButtons.svelte";
+  import InfiniteScroll from "../../simple/common/InfiniteScroll.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 CircularLoader from "../../simple/loaders/CircularLoader.svelte";
+  import type { UIEventHandler } from "svelte/elements";
+  import NoData from "../../simple/common/NoData.svelte";
+  import SearchBar from "../search/SearchBar.svelte";
+  import MenuOrDrawer from "../common/MenuOrDrawer.svelte";
+  import HeadersDrawer from "../common/HeadersDrawer.svelte";
+  import lodash from "lodash";
+
+  const deepEqual = lodash.isEqual
+
+  onMount(() => {
     (async () => {
-        await tick();
-        if (rowAppendSnippet && headersHTML['row-append-header']) {
-            const actionCells = tableContainer?.querySelectorAll('.row-append-cell');
-            if (actionCells && actionCells.length > 0) {
-                let maxActionWidth = 0;
-                for (let i = 0; i < actionCells.length; i++) {
-                    const cellContent = actionCells[i];
-                    const width = cellContent.getBoundingClientRect().width;
-                    if (width > maxActionWidth) {
-                        maxActionWidth = width;
-                    }
-                }
-                const finalWidth = Math.max(Math.ceil(maxActionWidth), 40);
-                headersHTML['row-append-header'].style.width = `${finalWidth}px`;
-                headersHTML['row-append-header'].style.minWidth = `${finalWidth}px`;
-            }
-        }
-        updateHeaderHeight();
-        window.addEventListener('resize', updateHeaderHeight);
-        tableContainer?.addEventListener("scroll", setReachedBottomOrTop);
-        if (tableContainer?.scrollHeight && tableContainer.clientHeight) {
-            hideScrollbar = tableContainer.scrollHeight > tableContainer.clientHeight;
-        }
-        for (const head of headers) {
-            let th = headersHTML[head.value];
-            if (!!th) {
-                resizeHeader(th, head);
-            }
+      await tick()
+
+      resizeRowAppendHeader()
+
+      updateHeaderHeight();
+      window.addEventListener('resize', updateHeaderHeight);
+      tableContainer?.addEventListener("scroll", setReachedBottomOrTop);
+
+      if(tableContainer?.scrollHeight && tableContainer.clientHeight){
+        hideScrollbar = tableContainer.scrollHeight > tableContainer.clientHeight
+      }
+
+      for(const head of headers) {
+        let th = headersHTML[head.value]
+        if(!!th) {
+          resizeHeader(th, head)
         }
-        tableHTML?.classList.add('dynamic-resizable');
-        resizeObserver = new ResizeObserver(() => {
-            if (tableContainer) {
-                const rect = tableContainer.getBoundingClientRect();
-                containerWidth = rect.width;
-            }
-            calculateStickyMetrics();
-            updateRemainingWidth();
-            updateHeaderHeight();
-        });
+      }
+
+      resizeObserver = new ResizeObserver(() => {
         if (tableContainer) {
-            resizeObserver.observe(tableContainer);
+          const rect = tableContainer.getBoundingClientRect();
+          containerWidth = rect.width;
         }
-    })();
+
+        calculateStickyMetrics();
+        updateRemainingWidth();
+        updateHeaderHeight();
+      });
+
+      if(tableContainer){
+        resizeObserver.observe(tableContainer);
+      }
+    })()
+
     return () => {
-        window.removeEventListener('resize', updateHeaderHeight);
-        tableContainer?.removeEventListener("scroll", setReachedBottomOrTop);
-        resizeObserver?.disconnect();
-    };
-});
-function updateHeaderHeight() {
+      window.removeEventListener('resize', updateHeaderHeight);
+      tableContainer?.removeEventListener("scroll", setReachedBottomOrTop);
+      resizeObserver?.disconnect();
+    }
+  });
+
+  function updateHeaderHeight() {
     if (mainHeader) {
-        const headerHeight = mainHeader.getBoundingClientRect().height - 1;
-        document.documentElement.style.setProperty('--main-header-height', headerHeight + 'px');
+      const headerHeight = mainHeader.getBoundingClientRect().height - 1;
+      document.documentElement.style.setProperty('--main-header-height', headerHeight + 'px');
     }
-}
-function setReachedBottomOrTop() {
-    if (tableContainer) {
-        reachedBottom = tableContainer.scrollHeight - tableContainer.scrollTop === tableContainer.clientHeight;
-        reachedTop = tableContainer.scrollTop === 0;
-        hideScrollbar = tableContainer.scrollHeight > tableContainer.clientHeight;
+  }
+
+  function setReachedBottomOrTop(){
+    if(tableContainer) {
+      reachedBottom = tableContainer.scrollHeight - tableContainer.scrollTop === tableContainer.clientHeight
+      reachedTop = tableContainer.scrollTop === 0
+      hideScrollbar = tableContainer.scrollHeight > tableContainer.clientHeight
     }
-}
-$effect(() => {
-    if (reachedBottom && rows.length < totalRows) {
-        setTimeout(() => {
-            if (reachedBottom) {
-                handleLoadForward();
-            }
-        }, 30);
+  }
+
+  $effect(() => {
+    if(reachedBottom && rows.length < totalRows) {
+      setTimeout(() => {
+        if(reachedBottom) {
+          handleLoadForward()
+        }
+      }, 30)
     }
-});
-$effect(() => {
-    if (reachedTop && currentSectionNumber > 0) {
-        setTimeout(() => {
-            if (reachedTop) {
-                handleLoadBackward();
-            }
-        }, 30);
+  })
+
+  $effect(() => {
+    if(reachedTop && currentSectionNumber > 0) {
+      setTimeout(() => {
+        if(reachedTop) {
+          handleLoadBackward()
+        }
+      }, 30)
     }
-});
-let { headers = [], headersToShowInTable = $bindable(headers), subHeaders = [], customizeHeaders = false, rows = [], sortedBy = $bindable(), sortDirection = $bindable("asc"), cellEdit = false, lang = "en", dateLocale, noItemsText = lang == 'en' ? "No items to show" : 'Nessun elemento da visualizzare', showSelect = false, showActions = true, selectMode = "single", selectedItems = $bindable([]), unselectedItems = $bindable([]), selectedAll = $bindable(false), showExpand = false, loading = false, disabled = false, filters = $bindable([]), searchBarColumns, searchBarVisible = false, searchBarPlaceholder = lang == 'en' ? "Type to search..." : "Scrivi per cercare...", filtersVisible = false, multiEditTabs, quickFiltersVisible = false, editFilterMode = "one-edit", showActiveFilters = true, quickFilters = [], actionsForSelectedItems = [], quickActionsDisabled = false, totalRows = rows.length, searchText = $bindable(), renderedRowsNumber = 100, sectionRowsNumber = 20, sectionThreshold = 2, backwardThresholdPixel = 100, forwardThresholdPixel = 100, uniqueKey = 'id', numberOfResultsVisible = false, endLineVisible = false, resizableColumns = false, resizedColumnSizeWithPadding = $bindable({}), pinnableColumns, dynamicFilters = true, useSelectedItemsOnly = false, selectedAllDisabled = false, stickyMinContainerWidth = 1024, headerDrawerProps, filterLabels, class: clazz = {}, onapplyCustomQuickFilter, oncellClick, onfetchData, onfiltersChange, onsort, onremoveAllFilters, onremoveCustomQuickFilter, onremoveFilter, onrowClick, onsaveCellEdit, onsaveHeadersToShow, oncolumnResize, searchBarSnippet, customFilterChipSnippet, customFilterSnippet, filterAppendSnippet, onscroll, selectionSnippet: selectionInternalSnippet, itemLabelSnippet: itemLabelInternalSnippet, chipLabelSnippet, headerSnippet, headerLabelSnippet, rowAppendSnippet, customRowSnippet, subRowAppendSnippet, subHeaderLabelSnippet, subHeaderSnippet, subRowActionsSnippet, customSubRowSnippet, customQuickFilterSnippet, appendSnippet, headerDrawerContentSnippet, headerDrawerHeadersToAddSnippet, headerDrawerItemSnippet, } = $props();
-let openCellEditor = $state(false), cellEditorActivator = $state(), cellEditorContainer = $state(), cellEditorInfoActive = $state(), saveEditDisabled = $state(false), searchBarInput = $state(undefined), openQuickFilter = $state(false), quickFilterActivator = $state(), quickFilterActive = $state(), globalBuilder = new FilterBuilder(), calendarOpened = $state(false), calendarOpened2 = $state(false), selectedIndexes = [], cellEditorIndexRow = $state(), cellEditorIndexHeader = $state(), cellEditorSubItem = $state(), currentSectionNumber = $state(0), tableBody = $state(), tableContainer = $state(), tableHTML = $state(), headersHTML = $state({}), userScrolling = $state(true), reachedBottom = $state(false), reachedTop = false, resizing = false, remainingWidth = $state(0), hideScrollbar = $state(false), sortModify, mainHeader = $state(), resizeObserver, ignoreSelectAll = rows.length == totalRows && useSelectedItemsOnly, containerWidth = $state(0), totalStickyWidth = $state(0), colspan = $derived.by(() => {
-    return headersToShowInTable.length +
+  })
+
+  type RowItem = Item & {
+    disableEdit?: boolean,
+    rowDisableBackgroundColor?: string
+  };
+
+  type SubRowItem = SubItem & {
+    disableEdit?: boolean,
+    rowDisableBackgroundColor?: string
+  };
+
+  type Row = {
+    item: RowItem;
+    subItems: SubRowItem[];
+  };
+
+  type MenuStringType = {
+    key: "string";
+  };
+
+  type MenuNumberType = {
+    key: "number";
+    params?: {
+      min?: number;
+      max?: number;
+    };
+  };
+
+  type MenuDateType = {
+    key: "date";
+  };
+
+  type MenuSelectType = {
+    key: "select";
+    params: {
+      options: {
+        icon?: string;
+        value: string | number | undefined;
+        id?: number | undefined;
+        text: string;
+      }[];
+    };
+  };
+
+  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<typeof PaginatedTable>["headers"]>;
+  type Header = Headers[number] & {
+    cellEditorInfo?: CellEditorInfo;
+    info?: string;
+  };
+  type HeaderType = Header["type"];
+
+  interface Props {
+    headers?: Header[];
+    headersToShowInTable?: Header[];
+    subHeaders?: Header[];
+    customizeHeaders?: boolean;
+    rows?: Row[];
+    sortedBy?: string;
+    sortDirection?: "asc" | "desc";
+    cellEdit?: boolean;
+    noItemsText?: string;
+    showSelect?: boolean;
+    showActions?: boolean;
+    selectMode?: "single" | "multiple";
+    selectedItems?: RowItem[];
+    unselectedItems?: RowItem[];
+    selectedAll?: boolean;
+    showExpand?: boolean;
+    loading?: boolean;
+    disabled?: boolean;
+    filters?: ComponentProps<typeof Filters>["filters"];
+    multiEditTabs?: ComponentProps<typeof Filters>['multiEditTabs']
+    searchBarColumns?: string[];
+    searchBarVisible?: boolean;
+    searchBarPlaceholder?: string;
+    filtersVisible?: boolean;
+    quickFiltersVisible?: boolean;
+    lang?: "it" | "en";
+    dateLocale?: "it" | "en";
+    editFilterMode?: "one-edit" | "multi-edit";
+    showActiveFilters?: boolean;
+    quickFilters?: QuickFilter[];
+    actionsForSelectedItems?: Action[];
+    quickActionsDisabled?: boolean;
+    totalRows?: number;
+    searchText?: string;
+    renderedRowsNumber?: number;
+    sectionRowsNumber?: number;
+    sectionThreshold?: number;
+    backwardThresholdPixel?: number;
+    forwardThresholdPixel?: number;
+    uniqueKey?: keyof RowItem;
+    numberOfResultsVisible?: boolean;
+    endLineVisible?: boolean;
+    resizableColumns?: boolean;
+    resizedColumnSizeWithPadding?: { [value: string]: number };
+    pinnableColumns?: boolean;
+    dynamicFilters?: boolean;
+    useSelectedItemsOnly?: boolean;
+    selectedAllDisabled?: boolean;
+    stickyMinContainerWidth?: number;
+    headerDrawerProps?: ComponentProps<typeof HeadersDrawer>['drawerProps']
+    filterLabels?: Pick<ComponentProps<typeof Filters>,
+      'addFilterLabel' |
+      'applyFilterLabel' |
+      'filterTitleLabel' |
+      'cancelFilterLabel' |
+      'labelsMapper' |
+      'trueString' |
+      'falseString' |
+      'betweenSeparator'
+    >
+    class?: {
+      container?: string;
+      header?: string;
+      row?: string;
+      cell?: string;
+    }
+    onsort?: (event: {
+      detail: {
+        sortedBy: string | undefined;
+        sortDirection: string;
+      }
+    }) => void
+    onrowClick?: (event: {
+      detail: {
+        item: RowItem;
+      }
+    }) => void
+    oncellClick?: (event: {
+      detail: {
+        item: RowItem;
+      }
+    }) => void
+    onsaveCellEdit?: (event: {
+      detail: {
+        item: any;
+      }
+    }) => void
+    onsaveHeadersToShow?: ComponentProps<typeof HeadersDrawer>['onsaveHeadersToShow']
+    onfiltersChange?: (event: {
+      detail: {
+        builder: FilterBuilder;
+      }
+    }) => void
+    onfetchData?: () => void;
+    onremoveFilter?: (event: {
+      detail: {
+        filter: Filter
+      }
+    }) => void
+    onremoveAllFilters?: () => void;
+    onremoveCustomQuickFilter?: (event: {
+      detail: {
+        quickFilter: QuickFilter
+      }
+    }) => void 
+    onapplyCustomQuickFilter?: (event: {
+      detail: {
+        quickFilter: QuickFilter
+        setQuickFilterValue: (quickFilter: QuickFilter, value?: any) => void
+      }
+    }) => void
+    oncolumnResize?: (event: {
+      detail: {
+        id: string,
+        newWidthPx: number
+      }
+    }) => void
+    searchBarSnippet?: Snippet<[{
+      handleSearchChange: typeof handleSearchChange
+    }]>
+    filterAppendSnippet?: ComponentProps<typeof Filters>['appendSnippet']
+    customFilterChipSnippet?: ComponentProps<typeof Filters>['customChipSnippet']
+    customFilterSnippet?: Snippet<[{
+      filter: Filter | undefined,
+      mAndDown: boolean;
+      updateCustomFilterValues?: Parameters<NonNullable<ComponentProps<typeof Filters>['contentSnippet']>>[0]['updateMultiFilterValues'],
+      updateFunction?: Parameters<NonNullable<ComponentProps<typeof Filters>['customSnippet']>>[0]['updateFunction']
+    }]>
+    onscroll?: UIEventHandler<HTMLDivElement>
+    selectionSnippet?: ComponentProps<typeof Autocomplete>['selectionSnippet']
+    itemLabelSnippet?: ComponentProps<typeof Autocomplete>['itemLabelSnippet']
+    chipLabelSnippet?: Snippet<[{
+      selection: ItemAutocomplete
+    }]>
+    headerSnippet?: Snippet<[{
+      header: Header
+    }]>
+    headerLabelSnippet?: Snippet<[{
+      header: Header
+    }]>
+    rowAppendSnippet?: Snippet<[{
+      index: number,
+      row?: Row
+    }]>
+    customRowSnippet?: Snippet<[{
+      index: number,
+      columnIndex: number,
+      header: Header,
+      row: Row
+    }]>
+    subHeaderSnippet?: Snippet<[{
+      subHeader: Header
+    }]>
+    subHeaderLabelSnippet?: Snippet<[{
+      subHeader: Header
+    }]>
+    subRowAppendSnippet?: Snippet<[{
+      index: number,
+      row?: SubRowItem
+    }]>
+    subRowActionsSnippet?: Snippet<[{
+      index: number,
+      row?: SubRowItem
+    }]>
+    customSubRowSnippet?: Snippet<[{
+      index: number,
+      columnIndex: number,
+      header: Header,
+      row: SubRowItem
+    }]>
+    customQuickFilterSnippet?: Snippet<[{
+      quickFilter: QuickFilter,
+      setQuickFilterMissingValue: typeof setQuickFilterMissingValue
+    }]>
+    appendSnippet?: Snippet<[]>
+    headerDrawerContentSnippet?: ComponentProps<typeof HeadersDrawer>['contentSnippet']
+    headerDrawerHeadersToAddSnippet?: ComponentProps<typeof HeadersDrawer>['headersToAddSnippet']
+    headerDrawerItemSnippet?: ComponentProps<typeof HeadersDrawer>['itemSnippet']
+  }
+
+  let {
+    headers = [],
+    headersToShowInTable = $bindable(headers),
+    subHeaders = [],
+    customizeHeaders = false,
+    rows = [],
+    sortedBy = $bindable(),
+    sortDirection = $bindable("asc"),
+    cellEdit = false,
+    lang = "en",
+    dateLocale,
+    noItemsText = lang == 'en' ? "No items to show" : 'Nessun elemento da visualizzare',
+    showSelect = false,
+    showActions = true,
+    selectMode = "single",
+    selectedItems = $bindable([]),
+    unselectedItems = $bindable([]),
+    selectedAll = $bindable(false),
+    showExpand = false,
+    loading = false,
+    disabled = false,
+    filters = $bindable([]),
+    searchBarColumns,
+    searchBarVisible = false,
+    searchBarPlaceholder = lang == 'en' ? "Type to search..." : "Scrivi per cercare...",
+    filtersVisible = false,
+    multiEditTabs,
+    quickFiltersVisible = false,
+    editFilterMode = "one-edit",
+    showActiveFilters = true,
+    quickFilters = [],
+    actionsForSelectedItems = [],
+    quickActionsDisabled = false,
+    totalRows = rows.length,
+    searchText = $bindable(),
+    renderedRowsNumber = 100,
+    sectionRowsNumber = 20,
+    sectionThreshold = 2,
+    backwardThresholdPixel = 100,
+    forwardThresholdPixel = 100,
+    uniqueKey = 'id',
+    numberOfResultsVisible = false,
+    endLineVisible = false,
+    resizableColumns = false,
+    resizedColumnSizeWithPadding = $bindable({}),
+    pinnableColumns,
+    dynamicFilters = true,
+    useSelectedItemsOnly = false,
+    selectedAllDisabled = false,
+    stickyMinContainerWidth = 1024,
+    headerDrawerProps,
+    filterLabels,
+    class: clazz = {},
+    onapplyCustomQuickFilter,
+    oncellClick,
+    onfetchData,
+    onfiltersChange,
+    onsort,
+    onremoveAllFilters,
+    onremoveCustomQuickFilter,
+    onremoveFilter,
+    onrowClick,
+    onsaveCellEdit,
+    onsaveHeadersToShow,
+    oncolumnResize,
+    searchBarSnippet,
+    customFilterChipSnippet,
+    customFilterSnippet,
+    filterAppendSnippet,
+    onscroll,
+    selectionSnippet: selectionInternalSnippet,
+    itemLabelSnippet: itemLabelInternalSnippet,
+    chipLabelSnippet,
+    headerSnippet,
+    headerLabelSnippet,
+    rowAppendSnippet,
+    customRowSnippet,
+    subRowAppendSnippet,
+    subHeaderLabelSnippet,
+    subHeaderSnippet,
+    subRowActionsSnippet,
+    customSubRowSnippet,
+    customQuickFilterSnippet,
+    appendSnippet,
+    headerDrawerContentSnippet,
+    headerDrawerHeadersToAddSnippet,
+    headerDrawerItemSnippet,
+  }: Props = $props();
+
+  let openCellEditor: boolean = $state(false),
+    cellEditorActivator: HTMLElement | undefined = $state(),
+    cellEditorContainer: HTMLElement | undefined = $state(),
+    cellEditorInfoActive: CellEditorInfo & {
+      value?: any;
+      item?: RowItem;
+    } | undefined = $state(),
+    saveEditDisabled: boolean = $state(false),
+    searchBarInput: HTMLElement | undefined = $state(undefined),
+    openQuickFilter: boolean = $state(false),
+    quickFilterActivator: HTMLElement | undefined = $state(),
+    quickFilterActive: QuickFilter | undefined = $state(),
+    globalBuilder: FilterBuilder = new FilterBuilder(),
+    calendarOpened: boolean = $state(false),
+    calendarOpened2: boolean = $state(false),
+    selectedIndexes: number[] = [],
+    cellEditorIndexRow: number | undefined = $state(),
+    cellEditorIndexHeader: number | undefined = $state(),
+    cellEditorSubItem: boolean | undefined = $state(),
+    currentSectionNumber = $state(0),
+    tableBody: HTMLElement | undefined = $state(),
+    tableContainer: HTMLElement | undefined = $state(),
+    tableHTML: HTMLElement | undefined = $state(),
+    headersHTML: { [value: string]: HTMLElement } = $state({}),
+    userScrolling = $state(true),
+    reachedBottom = $state(false),
+    reachedTop = false,
+    resizing = false,
+    remainingWidth = $state(0),
+    hideScrollbar = $state(false),
+    sortModify: Header['sortModify'],
+    mainHeader: Element | undefined = $state(),
+    resizeObserver: ResizeObserver,
+    ignoreSelectAll = rows.length == totalRows && useSelectedItemsOnly,
+    containerWidth: number = $state(0),
+    totalStickyWidth: number = $state(0),
+    colspan = $derived.by(() => {
+      return headersToShowInTable.length +
         (!!showSelect && !showExpand && rows.length > 0 ? 1 : 0) +
         (showExpand ? 1 : 0) +
         (remainingWidth ? 1 : 0) +
-        (customizeHeaders || rowAppendSnippet ? 1 : 0);
-});
-let stickyEnabled = $derived.by(() => {
-    if (containerWidth <= stickyMinContainerWidth)
-        return false;
-    if (totalStickyWidth >= containerWidth)
-        return false;
+        (customizeHeaders || rowAppendSnippet ? 1 : 0)
+    })
+
+  let stickyEnabled = $derived.by(() => {
+    if (containerWidth <= stickyMinContainerWidth) return false;
+    if (totalStickyWidth >= containerWidth) return false;
     return true;
-});
-const organizedHeaders = () => {
+  });
+
+  const organizedHeaders = () => {
     let pinnedFixedHeaders = headers.filter(h => h.pinned).map(h => ({
-        ...h,
-        locked: true,
-    }));
-    let pinnedByUserHeaders = headersToShowInTable.filter(h => h.pinned
-        && !pinnedFixedHeaders.find(fixed => fixed.value == h.value));
-    let otherHeaders = headersToShowInTable.filter(h => !pinnedFixedHeaders.find(fixed => fixed.value == h.value)
-        && !pinnedByUserHeaders.find(fixed => fixed.value == h.value));
+      ...h,
+      locked: true,
+    }))
+    let pinnedByUserHeaders = headersToShowInTable.filter(h => 
+      h.pinned
+      && !pinnedFixedHeaders.find(fixed => fixed.value == h.value)
+    )
+    let otherHeaders = headersToShowInTable.filter(h =>
+      !pinnedFixedHeaders.find(fixed => fixed.value == h.value)
+      && !pinnedByUserHeaders.find(fixed => fixed.value == h.value)
+    )
     return [
-        ...pinnedFixedHeaders,
-        ...pinnedByUserHeaders,
-        ...otherHeaders
+      ...pinnedFixedHeaders,
+      ...pinnedByUserHeaders,
+      ...otherHeaders
     ];
-};
-$effect(() => {
-    if (!deepEqual(organizedHeaders(), headersToShowInTable)) {
-        headersToShowInTable = organizedHeaders();
+  }
+
+  $effect(() => {
+    if(!deepEqual(organizedHeaders(), headersToShowInTable)) {
+      headersToShowInTable = organizedHeaders()
     }
-});
-function calculateStickyMetrics() {
+  });
+
+  function calculateStickyMetrics() {
     let width = 0;
+    
     const hasPinnedData = headersToShowInTable.find(h => h.pinned);
+
     if (hasPinnedData) {
-        if (headersHTML['select'])
-            width += headersHTML['select'].getBoundingClientRect().width;
-        if (headersHTML['expand'])
-            width += headersHTML['expand'].getBoundingClientRect().width;
+      if (headersHTML['select']) width += headersHTML['select'].getBoundingClientRect().width;
+      if (headersHTML['expand']) width += headersHTML['expand'].getBoundingClientRect().width;
     }
+
     headersToShowInTable.forEach(head => {
-        if (head.pinned) {
-            const stored = resizedColumnSizeWithPadding[head.value];
-            if (stored) {
-                width += stored;
-            }
-            else if (headersHTML[head.value]) {
-                width += headersHTML[head.value].getBoundingClientRect().width;
-            }
+      if (head.pinned) {
+        const stored = resizedColumnSizeWithPadding[head.value];
+        if (stored) {
+          width += stored;
+        } else if (headersHTML[head.value]) {
+          width += headersHTML[head.value].getBoundingClientRect().width;
         }
+      }
     });
+
     if (customizeHeaders && headersHTML['row-append-header']) {
-        width += headersHTML['row-append-header'].getBoundingClientRect().width;
+      width += headersHTML['row-append-header'].getBoundingClientRect().width;
     }
+
     totalStickyWidth = width;
-}
-const DEFAULT_MIN_WIDTH_PX = 130, DEFAULT_MAX_WIDTH_PX = 400;
-let totalSections = $derived((totalRows - renderedRowsNumber) / sectionRowsNumber);
-let hasMoreToRender = $derived(totalSections > currentSectionNumber);
-let totalCachedSections = $derived((rows.length - renderedRowsNumber) / sectionRowsNumber);
-let renderedRows = $derived(rows.slice(currentSectionNumber * sectionRowsNumber, currentSectionNumber * sectionRowsNumber + renderedRowsNumber));
-let openHeaderDrawer = $state(false), availableHeaders = $derived.by(() => {
-    return !!headers
+  }
+
+  const DEFAULT_MIN_WIDTH_PX = 60,
+    DEFAULT_MAX_WIDTH_PX = 400
+  
+  let totalSections = $derived((totalRows - renderedRowsNumber) / sectionRowsNumber)
+  let hasMoreToRender = $derived(totalSections > currentSectionNumber)
+  let totalCachedSections = $derived((rows.length - renderedRowsNumber) / sectionRowsNumber)
+  let renderedRows = $derived(rows.slice(currentSectionNumber * sectionRowsNumber, currentSectionNumber * sectionRowsNumber + renderedRowsNumber))
+
+  let openHeaderDrawer: boolean = $state(false),
+    availableHeaders = $derived.by(() => {
+      return !!headers
         ? headers.filter((h) => {
             return !headersToShowInTable.find((hst) => hst.value == h.value);
-        })
-        : [];
-}), infoActivators = $state(Array(headersToShowInTable.length));
-let expandedRows = $state([]);
-function handleHeaderClick(header) {
+          })
+        : []
+    }),
+    infoActivators = $state(Array(headersToShowInTable.length))
+
+  let expandedRows: Row[] = $state([]);    
+
+  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);
-        if (onsort) {
-            onsort({
-                detail: {
-                    sortedBy,
-                    sortDirection,
-                }
-            });
+      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);
+
+      if(onsort) {
+        onsort({
+          detail: {
+            sortedBy,
+            sortDirection,
+          }
+        })
+      }
     }
-}
-function handleRowClick(item) {
-    if (disabled || loading)
-        return;
-    if (onrowClick) {
-        onrowClick({
-            detail: {
-                item,
-            }
-        });
+  }
+
+  function handleRowClick(item: RowItem) {
+    if (disabled || loading) return;
+    if(onrowClick) {
+      onrowClick({
+        detail: {
+          item,
+        }
+      })
     }
-}
-function handleCellClick(mouseEvent, item, cellEditorInfo, value, indexRow, indexHeader, subItem) {
-    if (disabled || loading)
-        return;
+  }
+
+  function handleCellClick(
+    mouseEvent: MouseEvent & {
+      currentTarget: EventTarget & HTMLTableCellElement;
+    },
+    item: RowItem,
+    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;
-            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);
+      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 {
+              cellEditorContainer!.style.top = `${element.bottom}px`;
+            }
+
+            if (windowWidth - element.right < 400) {
+              cellEditorContainer!.style.right = `${
+                windowWidth - element.left - cellEditorActivator!.clientWidth
+              }px`;
             }
+          }, 0);
         }
+      }
     }
-    if (oncellClick) {
-        oncellClick({
-            detail: {
-                item,
-            }
-        });
+
+    if(oncellClick) {
+      oncellClick({
+        detail: {
+          item,
+        }
+      })
     }
-}
-function handleSaveClick() {
-    cellEditorIndexHeader = undefined;
-    cellEditorIndexRow = undefined;
-    cellEditorSubItem = undefined;
-    if (onsaveCellEdit) {
-        onsaveCellEdit({
-            detail: {
-                item: cellEditorInfoActive,
-            }
-        });
+  }
+
+  function handleSaveClick() {
+    cellEditorIndexHeader = undefined
+    cellEditorIndexRow = undefined
+    cellEditorSubItem = undefined
+
+    if(onsaveCellEdit) {
+      onsaveCellEdit({
+        detail: {
+          item: cellEditorInfoActive,
+        }
+      })
     }
+
     cellEditorActivator = undefined;
     openCellEditor = false;
-}
-function handleCancelClick() {
-    cellEditorIndexHeader = undefined;
-    cellEditorIndexRow = undefined;
-    cellEditorSubItem = undefined;
+  }
+
+  function handleCancelClick() {
+    cellEditorIndexHeader = undefined
+    cellEditorIndexRow = undefined
+    cellEditorSubItem = undefined
+
     cellEditorActivator = undefined;
     openCellEditor = false;
+
     quickFilterActivator = undefined;
     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]);
+  }
+
+  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];
-                            }
-                        }
-                    }
-                }
+      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
             }
-            else {
-                if (selectedAll && !ignoreSelectAll) {
-                    unselectedItems = [...unselectedItems, item];
+            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 {
-                    selectedItems = [...selectedItems, item];
+              } else {
+                if(!selectedItems.find((selectedItem) => selectedItem[uniqueKey] == rows[i].item[uniqueKey])) {
+                  selectedItems = [...selectedItems, rows[i].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]));
+      }
+    } 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(r => r.item[uniqueKey] == item[uniqueKey]))
     }
-}
-function handleSelectAll() {
+  }
+
+  function handleSelectAll() {
     if (selectMode == "multiple") {
-        if (!selectedAll && ignoreSelectAll) {
-            selectedItems = rows.map(r => r.item);
-        }
-        else {
-            selectedItems = [];
-        }
-        selectedIndexes = [];
-        unselectedItems = [];
-        selectedAll = !selectedAll;
+      if(!selectedAll && ignoreSelectAll) {
+        selectedItems = rows.map(r => r.item)
+      }
+      else {
+        selectedItems = []
+      }
+      selectedIndexes = []
+      unselectedItems = []
+      selectedAll = !selectedAll
     }
-}
-function expandRow(row) {
+  }
+
+  function expandRow(row: 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]);
+      expandedRows = [...expandedRows, row];
+    } else {
+      expandedRows = expandedRows.filter((r) => r.item[uniqueKey] != row.item[uniqueKey]);
     }
-}
-function formatDate(dateTime, dateFormat) {
+  }
+
+  function formatDate(
+    dateTime: DateTime,
+    dateFormat: Extract<HeaderType, { key: "date" }>["params"]
+  ): string {
     return dateTime.setLocale(dateFormat.locale).toFormat(dateFormat.format);
-}
-$effect(() => {
-    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 {
-        saveEditDisabled = false;
-    }
-});
-function searchTextBuilder(searchText) {
-    let builder;
+  }
+
+  $effect(() => {
+    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 {
+      saveEditDisabled = false;
+    }
+  })
+
+  function searchTextBuilder(searchText?: string) {
+    let builder: FilterBuilder;
+
     let converter = new Converter();
     builder = converter.createBuilder({
-        filters: filters || [],
+      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 + "%");
-            }
-        });
+      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;
-}
-let syncTimer;
-function handleSearchChange(searchText) {
+  }
+
+  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();
+      globalBuilder = searchTextBuilder(searchText);
+      for (let i = 0; i < quickFilters.length; i++) {
+        globalBuilder = quickFilterBuilder(globalBuilder, quickFilters[i]);
+      }
+
+      handleFiltersChange();
     }, 800);
-}
-$effect(() => {
-    if (searchText != undefined)
-        handleSearchChange(searchText);
-});
-function handleFiltersChange() {
-    if (!!tableContainer) {
-        userScrolling = false;
-        currentSectionNumber = 0;
-        tableContainer.scrollTop = 0;
-        setTimeout(() => userScrolling = true, 20);
-    }
+  }
+
+  $effect(() => {
+    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");
-        }
+      if(sortModify){
+        globalBuilder = sortModify({ builder: globalBuilder, sortDirection })
+      }
+      else {
+        globalBuilder.orderBy(sortedBy, sortDirection || "asc");
+      }
     }
-    if (onfiltersChange) {
-        onfiltersChange({
-            detail: {
-                builder: globalBuilder,
-            }
-        });
+
+    if(onfiltersChange) {
+      onfiltersChange({
+        detail: {
+          builder: globalBuilder,
+        }
+      })
     }
-}
-function handleClearQuickFilter(quickFilter, dispatchFiltersChange = true) {
+  }
+
+  function handleClearQuickFilter(
+    quickFilter: QuickFilter,
+    dispatchFiltersChange: boolean = true
+  ) {
     if (quickFilter.type.key == 'custom') {
-        quickFilter.type.value = undefined;
-        quickFilter.type.missingValue = undefined;
-        if (dispatchFiltersChange) {
-            if (onremoveCustomQuickFilter) {
-                onremoveCustomQuickFilter({
-                    detail: {
-                        quickFilter
-                    }
-                });
+      quickFilter.type.value = undefined;
+      quickFilter.type.missingValue = undefined;
+      if(dispatchFiltersChange) {
+        if(onremoveCustomQuickFilter) {
+          onremoveCustomQuickFilter({
+            detail: {
+              quickFilter
             }
+          })
         }
+      }
     }
     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 = 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;
     }
+
     if (dispatchFiltersChange) {
-        quickFilter.active = false;
+      quickFilter.active = false;
     }
+
     globalBuilder = searchTextBuilder(searchText);
+
     for (let i = 0; i < quickFilters.length; i++) {
-        if (quickFilters[i].active) {
-            globalBuilder = quickFilterBuilder(globalBuilder, quickFilters[i], false);
-        }
+      if (quickFilters[i].active) {
+        globalBuilder = quickFilterBuilder(
+          globalBuilder,
+          quickFilters[i],
+          false
+        );
+      }
     }
+
     if (dispatchFiltersChange) {
-        quickFilters = quickFilters.map(f => {
-            if (f.title == quickFilter.title) {
-                return { ...quickFilter };
-            }
-            return f;
-        });
-        handleFiltersChange();
+      quickFilters = quickFilters.map(f => {
+        if (f.title == quickFilter.title) {
+          return { ...quickFilter }
+        }
+        return f
+      });
+      handleFiltersChange();
     }
+
     return globalBuilder;
-}
-function handleSearchBoxKeydown(e) {
+  }
+
+  function handleSearchBoxKeydown(e: KeyboardEvent) {
     if (e.key == "Enter") {
-        handleFiltersChange();
+      handleFiltersChange();
     }
-}
-function handleQuickFilterClick(mouseEvent, quickFilter) {
+  }
+
+  function handleQuickFilterClick(
+    mouseEvent: MouseEvent & {
+      currentTarget: EventTarget & HTMLButtonElement;
+    },
+    quickFilter?: QuickFilter
+  ) {
     handleCancelClick();
     setTimeout(() => {
-        if (quickFilter) {
-            if (!quickFilterActivator) {
-                let target = mouseEvent.target;
-                quickFilterActivator = target;
-                quickFilterActive = quickFilter;
-                openQuickFilter = !openQuickFilter;
-            }
+      if (quickFilter) {
+        if (!quickFilterActivator) {
+          let target = mouseEvent.target as unknown as HTMLElement;
+          quickFilterActivator = target;
+          quickFilterActive = quickFilter;
+          openQuickFilter = !openQuickFilter;
         }
+      }
     }, 300);
-}
-function setQuickFilterMissingValue(quickFilter) {
+  }
+
+  function setQuickFilterMissingValue(quickFilter: QuickFilter) {
     if (quickFilter.type.key == 'custom') {
-        quickFilter.type.missingValue = true;
-        quickFilter.type.value = undefined;
+      quickFilter.type.missingValue = true;
+      quickFilter.type.value = undefined;
     }
     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.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;
     }
+
     handleApplyClick(quickFilter);
-}
-function setQuickFilterValue(quickFilter, value) {
+  }
+
+  function setQuickFilterValue(quickFilter: QuickFilter, value?: any) {
     if (quickFilter.type.key == "custom") {
-        quickFilter.type.value = value;
-    }
+      quickFilter.type.value = value;
+    } 
     else if (quickFilter.type.key == "boolean") {
-        quickFilter.type.value = value;
-    }
+      quickFilter.type.value = value;
+    } 
+
     handleApplyClick(quickFilter);
-}
-function handleApplyClick(quickFilter, dispatchCustomFilterClick = false) {
-    if (quickFilter.type.key == 'custom' && dispatchCustomFilterClick) {
-        if (onapplyCustomQuickFilter) {
-            onapplyCustomQuickFilter({
-                detail: {
-                    quickFilter,
-                    setQuickFilterValue
-                }
-            });
-        }
+  }
+
+  function handleApplyClick(quickFilter: QuickFilter, dispatchCustomFilterClick: boolean = false) {
+    if(quickFilter.type.key == 'custom' && dispatchCustomFilterClick) {
+      if(onapplyCustomQuickFilter) {
+        onapplyCustomQuickFilter({
+          detail: {
+            quickFilter,
+            setQuickFilterValue
+          }
+        })
+      }
     }
     else {
-        quickFilter.active = true;
-        quickFilters = quickFilters.map(f => {
-            if (f.title == quickFilter.title) {
-                return { ...quickFilter };
-            }
-            return f;
-        });
-        globalBuilder = quickFilterBuilder(globalBuilder, quickFilter);
-        handleFiltersChange();
-        quickFilterActivator = undefined;
-        openQuickFilter = false;
+      quickFilter.active = true
+      quickFilters = quickFilters.map(f => {
+        if (f.title == quickFilter.title) {
+          return { ...quickFilter }
+        }
+        return f
+      })
+      globalBuilder = quickFilterBuilder(globalBuilder, quickFilter);
+  
+      handleFiltersChange();
+  
+      quickFilterActivator = undefined;
+      openQuickFilter = false;
     }
-}
-function quickFilterBuilder(builder, quickFilter, clearPreaviousValue = true) {
+  }
+
+  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;
-        builder = quickFilter.type.modify({
-            builder,
-            value: { value, missingValue },
-        });
+      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);
-        }
-        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);
+      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
+          );
         }
-        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.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.column) {
-            if (missingValue) {
-                builder.whereNull(quickFilter.column);
-            }
-            else if (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()
+          );
         }
-    }
-    else if (quickFilter.type.key == "number") {
-        let value = quickFilter.type.value, missingValue = quickFilter.type.missingValue;
-        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;
-        quickFilter.type.missingValue = missingValue;
-        if (quickFilter.type.modify) {
-            builder = quickFilter.type.modify({
-                builder,
-                value: { value, missingValue },
-            });
+      }
+    } 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);
         }
-        if (quickFilter.column) {
-            if (missingValue) {
-                builder.whereNull(quickFilter.column);
-            }
-            else if (!!value) {
-                builder.where(quickFilter.column, value);
-            }
+      }
+    } 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, updateMultiFilterValues) {
-    let newValue = {}, newValid = false, newMode = filter.type == 'date' ||
+  }
+
+  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;
-        }
-    }
-    updateMultiFilterValues(filter.name, newValue, newValid, newMode);
-}
-function handleRemoveAllFilters() {
-    if (onremoveAllFilters) {
-        onremoveAllFilters();
+          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
+      }
+    }
+    updateMultiFilterValues(filter.name, newValue, newValid, newMode)
+  }
+
+  function handleRemoveAllFilters() {
+    if(onremoveAllFilters){
+      onremoveAllFilters()
     }
     handleSearchChange(searchText);
-}
-function handleRemoveFilter(filter) {
-    if (onremoveFilter) {
-        onremoveFilter({
-            detail: {
-                filter
-            }
-        });
+  }
+
+  function handleRemoveFilter(filter: Filter) {
+    if(onremoveFilter) {
+      onremoveFilter({
+        detail: {
+          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();
-        if (tableContainer) {
-            const anchorElementAfter = findAnchorElement(anchorUniqueKey);
-            const anchorOffsetAfter = anchorElementAfter?.getBoundingClientRect().top || 0;
-            const offsetDiff = anchorOffsetAfter - anchorOffsetBefore;
-            tableContainer.scrollTop += offsetDiff;
-            userScrolling = true;
+  }
+
+  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()
+
+      if(tableContainer) {
+        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) {
-        if (onfetchData) {
-            onfetchData();
-        }
+
+    if(totalCachedSections - sectionThreshold <= currentSectionNumber 
+      && !loading 
+      && totalRows > rows.length
+    ) {
+      if(onfetchData) {
+        onfetchData()
+      }
     }
-}
-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();
-        if (tableContainer) {
-            const anchorElementAfter = findAnchorElement(anchorUniqueKey);
-            const anchorOffsetAfter = anchorElementAfter?.getBoundingClientRect().top || 0;
-            const offsetDiff = anchorOffsetAfter - anchorOffsetBefore;
-            tableContainer.scrollTop += offsetDiff;
-            userScrolling = 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--
         }
+      }
+      
+      currentSectionNumber = currentSectionNumber - 1
+  
+      await tick()
+  
+      if(tableContainer) {
+        const anchorElementAfter = findAnchorElement(anchorUniqueKey)
+        const anchorOffsetAfter = anchorElementAfter?.getBoundingClientRect().top || 0
+        const offsetDiff = anchorOffsetAfter - anchorOffsetBefore
+        tableContainer.scrollTop += offsetDiff
+  
+        userScrolling = true
+      }
     }
-}
-function findAnchorElement(key) {
-    if (tableBody) {
-        for (let i = 0; i < tableBody.children.length; i++) {
-            const child = tableBody.children.item(i);
-            if (child?.getAttribute("data-key") == key) {
-                return child;
-            }
+  }
+
+  function findAnchorElement(key: keyof RowItem) {
+    if(tableBody) {
+      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;
-}
-function resize(node) {
-    let th = node.parentElement;
-    let resizingInner = false;
-    if (!!th) {
-        let { width } = th.getBoundingClientRect();
-        function mouseMoveHandler(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,
-                    };
-                    calculateStickyMetrics();
-                }
+    return undefined
+  }
+
+  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,
             }
+            calculateStickyMetrics();
+          }
         }
-        function mouseUpHandler(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);
-                }
-                if (oncolumnResize) {
-                    oncolumnResize({
-                        detail: {
-                            id: th.id,
-                            newWidthPx: width
-                        }
-                    });
-                }
-                calculateStickyMetrics();
-            }
+      }
+      
+
+      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)
+          }
+          if(oncolumnResize){
+            oncolumnResize({
+              detail: {
+                id: th.id,
+                newWidthPx: width
+              }
+            })
+          }
+          calculateStickyMetrics();
         }
-        function mouseDownHandler(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)
         }
-        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)
+        }
+      }
     }
-}
-$effect(() => {
+  }
+
+  $effect(() => {
     headersToShowInTable;
     resizedColumnSizeWithPadding;
     showSelect;
     showExpand;
     tick().then(() => {
-        calculateStickyMetrics();
-        updateRemainingWidth();
-    });
-});
-async function updateRemainingWidth() {
-    if (tableContainer != null && !!tableContainer && mainHeader) {
-        const containerWidth = tableContainer.getBoundingClientRect().width - 10;
-        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.row-append-header'))
-                .reduce((sum, th) => sum + th.getBoundingClientRect().width + 1, 0);
-            remainingWidth = Math.max(0, containerWidth - totalResizableWidth - extraStaticWidth + 18);
-        }
+      calculateStickyMetrics();
+      updateRemainingWidth();
+    })
+  });
+  
+  async function updateRemainingWidth() {
+    if(tableContainer != null && !!tableContainer && mainHeader) {
+      const containerWidth = tableContainer.getBoundingClientRect().width;
+
+      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;
+        }, 0);
+
+        resizeRowAppendHeader()
+    
+        const extraStaticWidth = Array.from(mainHeader.querySelectorAll('th.non-resizable, th.row-append-header'))
+          .reduce((sum, th) => sum + th.getBoundingClientRect().width, 0);
+    
+        remainingWidth = Math.max(0, containerWidth - totalResizableWidth - extraStaticWidth);
+      }
+    }
+  }
+
+  function resizeRowAppendHeader() {
+    if ((customizeHeaders || rowAppendSnippet) && headersHTML['row-append-header']) {
+      if(!!headersHTML['row-append-header'].style.width && headersHTML['row-append-header'].style.width != "0px") {
+        return
+      }
+
+      if (tableHTML) {
+        tableHTML.style.tableLayout = 'auto'
+      }
+
+      let widthWithPadding = headersHTML['row-append-header'].scrollWidth
+
+      if (tableHTML) {
+        tableHTML.style.tableLayout = 'fixed'
+      }
+      
+      headersHTML['row-append-header'].style.width = `${widthWithPadding}px`;
+      headersHTML['row-append-header'].style.minWidth = `${widthWithPadding}px`;
     }
-}
-function resizeHeader(th, header) {
+  }
+
+  function resizeHeader(th: HTMLElement, header: { value: string, minWidth?: string, maxWidth?: string }){
     if (!resizedColumnSizeWithPadding[header.value]) {
-        let widthWithPadding = th.getBoundingClientRect().width;
-        let minWidth = header.minWidth, minWidthPx = DEFAULT_MIN_WIDTH_PX;
-        if (!!minWidth && minWidth.endsWith('px')) {
-            minWidthPx = parseInt(minWidth, 10);
-        }
-        if (widthWithPadding < minWidthPx) {
-            widthWithPadding = minWidthPx;
-        }
-        let maxWidth = header.maxWidth, maxWidthPx = DEFAULT_MAX_WIDTH_PX;
-        if (!!maxWidth && maxWidth.endsWith('px')) {
-            maxWidthPx = parseInt(maxWidth, 10);
-        }
-        if (widthWithPadding > maxWidthPx) {
-            widthWithPadding = maxWidthPx;
-        }
-        resizedColumnSizeWithPadding[header.value] = widthWithPadding;
+
+      if (tableHTML) {
+        tableHTML.style.tableLayout = 'auto'
+      }
+
+      let widthWithPadding = th.scrollWidth
+
+      if (widthWithPadding == 0) {
+        return
+      }
+
+      if (tableHTML) {
+        tableHTML.style.tableLayout = 'fixed'
+      }
+
+      let minWidth = header.minWidth,
+        minWidthPx = DEFAULT_MIN_WIDTH_PX
+      if (!!minWidth && minWidth.endsWith('px')) {
+        minWidthPx = parseInt(minWidth, 10);
+      }
+      if(widthWithPadding < minWidthPx) {
+        widthWithPadding = minWidthPx
+      }
+
+      let maxWidth = header.maxWidth,
+        maxWidthPx = DEFAULT_MAX_WIDTH_PX
+      if (!!maxWidth && maxWidth.endsWith('px')) {
+        maxWidthPx = parseInt(maxWidth, 10);
+      }
+      if(widthWithPadding > maxWidthPx) {
+        widthWithPadding = maxWidthPx
+      }
+
+      resizedColumnSizeWithPadding[header.value] = widthWithPadding;
     }
     let { paddingLeft, paddingRight } = getComputedStyle(th);
     let width = resizedColumnSizeWithPadding[header.value] - parseFloat(paddingLeft) - parseFloat(paddingRight);
-    th.style.width = `${width}px`;
-}
-function handleSaveHeadersToShow(event) {
+    th.style.width = `${width}px`
+  }
+
+  function handleSaveHeadersToShow(event: Parameters<NonNullable<ComponentProps<typeof HeadersDrawer>['onsaveHeadersToShow']>>[0]) {
     headersToShowInTable = event.detail.headersToShow;
-    onsaveHeadersToShow?.(event);
-}
+    onsaveHeadersToShow?.(event)
+  }
 </script>
 
 {#if !!rows && Array.isArray(rows) && !!headersToShowInTable && Array.isArray(headersToShowInTable)}
@@ -1139,7 +1712,7 @@ function handleSaveHeadersToShow(event) {
       hasMore={currentSectionNumber > 0 && userScrolling}
       direction='backward'
     />
-    <table style="display: table;" class="dynamic-table" bind:this={tableHTML}>
+    <table style="display: table;" class="dynamic-table dynamic-resizable" bind:this={tableHTML}>
       <thead class="table-header {clazz.header}" bind:this={mainHeader}>
         <tr>
           {#if !!showSelect && !showExpand && rows.length > 0}
@@ -1251,6 +1824,7 @@ function handleSaveHeadersToShow(event) {
             <th
               style:width={remainingWidth + 'px'}
               class="filler"
+              style:padding=0
               aria-hidden="true"
             ></th>
           {/if}
@@ -1930,13 +2504,8 @@ function handleSaveHeadersToShow(event) {
     width: 100%;
   }
 
-  .hide-scrollbar {
-    -ms-overflow-style: none;
-    scrollbar-width: none;
-  }
-
   .hide-scrollbar::-webkit-scrollbar {
-    display: none;
+    width: 0px;
   }
 
   .dynamic-table {