@likable-hair/svelte 4.2.5 → 4.3.0

package/dist/components/simple/lists/SimpleTable.svelte

@@ -1,287 +1,484 @@
-<script module lang="ts">export {};
+<script module lang="ts">
+  export type HeaderType = ColumnBoolean |
+    ColumnString |
+    ColumnNumber |
+    ColumnDate |
+    ColumnIcon |
+    ColumnCheckBox |
+    ColumnCustom
+
+  export type Header<Data = any> = {
+    value: string
+    label: string
+    type: HeaderType
+    width?: string
+    minWidth?: string
+    maxWidth?: string
+    sortable?: boolean
+    icon?: string
+    pinned?: boolean
+    locked?: boolean
+    sortModify?: (params: { builder: FilterBuilder, sortDirection: 'asc' | 'desc' }) => FilterBuilder
+    data?: Data
+  };
+
+  export type CalculateRowStyles<T> = (item: T) => {
+    backgroundColor?: string;
+    color?: string;
+    fontWeight?: string;
+  };
+
+  export type CalculateRowClasses<T> = (item: T) => string | undefined;
 </script>
 
-<script lang="ts" generics="Item extends {[key: string]: any}, Data">import '../../../css/main.css';
-import './SimpleTable.css';
-import Icon from '../media/Icon.svelte';
-import { onMount, tick } from 'svelte';
-import NoData from '../common/NoData.svelte';
-let { headers = [], items = [], sortedBy = $bindable(undefined), sortDirection = $bindable("asc"), resizableColumns = false, resizedColumnSizeWithPadding = $bindable({}), pointerOnRowHover = false, lang = 'en', doubleClickActive = false, doubleClickDelay = 250, noItemsText, loading, calculateRowStyles = undefined, calculateRowClasses = undefined, stickyMinContainerWidth = 1024, oncolumnResize, onrowClick, onrowDoubleClick, onsort, headerSnippet, headerLabelSnippet, appendSnippet, prependSnippet, stickyAppendSnippet, customSnippet, noDataSnippet, class: clazz = {}, } = $props();
-if (!onrowClick && !!onrowDoubleClick) {
-    throw new Error('cannot define an onrowDoubleClick event without defining an onrowClick event');
-}
-let clickTimeout = undefined, sortModify, tableContainer = $state(), mainHeader = $state(), remainingWidth = $state(0), containerWidth = $state(0), totalStickyWidth = $state(0), resizeObserver, headersHTML = $state({}), tableHTML = $state(), resizing = false, colspan = $derived.by(() => {
-    return headers.length +
-        (appendSnippet || stickyAppendSnippet ? 1 : 0) +
+<script lang="ts" generics="Item extends {[key: string]: any}, Data">
+  import '../../../css/main.css'
+  import './SimpleTable.css'
+  import Icon from '../media/Icon.svelte';
+  import { onMount, tick, type Snippet } from 'svelte';
+  import type { DateTime } from 'luxon';
+  import type { ColumnBoolean, ColumnCheckBox, ColumnCustom, ColumnDate, ColumnIcon, ColumnNumber, ColumnString } from './columnTypes';
+  import NoData from '../common/NoData.svelte';
+  import type { FilterBuilder } from '../../..';
+
+  type TableHeader = Header<Data>
+
+  interface Props {
+    headers: TableHeader[];
+    items: Item[];
+    sortedBy?: string;
+    sortDirection?: "asc" | "desc";
+    resizableColumns?: boolean;
+    resizedColumnSizeWithPadding?: { [value: string]: number };
+    pointerOnRowHover?: boolean;
+    lang?: 'it' | 'en'
+    noItemsText?: string
+    loading?: boolean
+    doubleClickActive?: boolean,
+    doubleClickDelay?: number;
+    calculateRowStyles?: CalculateRowStyles<Item> | undefined
+    calculateRowClasses?: CalculateRowClasses<Item> | undefined
+    stickyMinContainerWidth?: number;
+    onsort?: (event: {
+      detail: {
+        sortedBy: string | undefined,
+        sortDirection: string,
+        sortModify: Header['sortModify']
+      }
+    }) => void
+    onrowClick?: (event: {
+      detail: {
+        item: Item
+      }
+    }) => void
+    onrowDoubleClick?: (event: {
+      detail: {
+        item: Item
+      }
+    }) => void
+    oncolumnResize?: (event: {
+      detail: {
+        id: string,
+        newWidthPx: number
+      }
+    }) => void
+    headerSnippet?: Snippet<[{
+      head: TableHeader
+    }]>
+    headerLabelSnippet?: Snippet<[{
+      head: TableHeader
+    }]>
+    appendSnippet?: Snippet<[{
+      index: number
+      item?: Item
+    }]>
+    prependSnippet?: Snippet<[{
+      index: number
+      item?: Item
+    }]>
+    stickyAppendSnippet?: Snippet<[]>
+    customSnippet?: Snippet<[{
+      index: number
+      columnIndex: number
+      header: TableHeader
+      item: Item
+    }]>
+    noDataSnippet?: Snippet<[]>
+    class?:{
+      container?: string;
+      header?: string;
+      row?: string;
+      cell?: string;
+    }
+  }
+
+  let {
+    headers = [],
+    items = [],
+    sortedBy = $bindable(undefined),
+    sortDirection = $bindable("asc"),
+    resizableColumns = false,
+    resizedColumnSizeWithPadding = $bindable({}),
+    pointerOnRowHover = false,
+    lang = 'en',
+    doubleClickActive = false,
+    doubleClickDelay = 250,
+    noItemsText,
+    loading,
+    calculateRowStyles = undefined,
+    calculateRowClasses = undefined,
+    stickyMinContainerWidth = 1024, 
+    oncolumnResize,
+    onrowClick,
+    onrowDoubleClick,
+    onsort,
+    headerSnippet,
+    headerLabelSnippet,
+    appendSnippet,
+    prependSnippet,
+    stickyAppendSnippet,
+    customSnippet,
+    noDataSnippet,
+    class: clazz = {},
+  }: Props = $props();
+
+  if(!onrowClick && !!onrowDoubleClick) {
+    throw new Error('cannot define an onrowDoubleClick event without defining an onrowClick event')
+  }
+
+  let clickTimeout: NodeJS.Timeout | undefined = undefined,
+    sortModify: Header['sortModify'],
+    tableContainer: HTMLElement | undefined = $state(),
+    mainHeader: HTMLElement | undefined = $state(),
+    remainingWidth: number = $state(0),
+    containerWidth: number = $state(0),
+    totalStickyWidth: number = $state(0),
+    resizeObserver: ResizeObserver,
+    headersHTML: { [value: string]: HTMLElement } = $state({}),
+    tableHTML: HTMLElement | undefined = $state(),
+    resizing = false,
+    colspan = $derived.by(() => {
+      return headers.length +
+        (appendSnippet ||  stickyAppendSnippet ? 1 : 0) +
         (prependSnippet ? 1 : 0) +
         (remainingWidth ? 1 : 0);
-});
-let stickyEnabled = $derived.by(() => {
-    if (containerWidth <= stickyMinContainerWidth)
-        return false;
-    if (totalStickyWidth >= containerWidth)
-        return false;
+    })
+
+  let stickyEnabled = $derived.by(() => {
+    if (containerWidth <= stickyMinContainerWidth) return false;
+    if (totalStickyWidth >= containerWidth) return false;
+
     return true;
-});
-const DEFAULT_MIN_WIDTH_PX = 60, DEFAULT_MAX_WIDTH_PX = 400;
-onMount(() => {
+  });
+
+  const DEFAULT_MIN_WIDTH_PX = 60,
+    DEFAULT_MAX_WIDTH_PX = 400
+
+  onMount(() => {
     (async () => {
-        await tick();
-        resizeObserver = new ResizeObserver(() => {
-            if (tableContainer) {
-                const rect = tableContainer.getBoundingClientRect();
-                containerWidth = rect.width;
-            }
-            calculateStickyMetrics();
-            updateRemainingWidth();
-        });
+      await tick()
+      
+      resizeObserver = new ResizeObserver(() => {
         if (tableContainer) {
-            resizeObserver.observe(tableContainer);
+          const rect = tableContainer.getBoundingClientRect();
+          containerWidth = rect.width;
         }
-        resizeRowAppendHeader();
-        for (const head of headers) {
-            let th = headersHTML[head.value];
-            if (!!th) {
-                resizeHeader(th, head);
-            }
+        
+        calculateStickyMetrics();
+        updateRemainingWidth();
+      });
+
+      if(tableContainer){
+        resizeObserver.observe(tableContainer);
+      }
+
+      resizeRowAppendHeader()
+
+      for(const head of headers) {
+        let th = headersHTML[head.value]
+        if(!!th) {
+          resizeHeader(th, head)
         }
-        return () => {
-            resizeObserver?.disconnect();
-        };
-    })();
-});
-function calculateStickyMetrics() {
+      }
+
+
+      return () => {
+        resizeObserver?.disconnect();
+      };
+    })()
+  })
+  
+  function calculateStickyMetrics() {
     let width = 0;
+
     if (prependSnippet && headersHTML['prepend']) {
-        width += headersHTML['prepend'].getBoundingClientRect().width;
+      width += headersHTML['prepend'].getBoundingClientRect().width;
     }
+
     headers.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 (stickyAppendSnippet && headersHTML['row-append-header']) {
-        width += headersHTML['row-append-header'].getBoundingClientRect().width;
+      width += headersHTML['row-append-header'].getBoundingClientRect().width;
     }
+
     totalStickyWidth = width;
-}
-function handleHeaderClick(header) {
-    if (header.sortable && !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;
-        }
-        if (onsort) {
-            onsort({
-                detail: {
-                    sortedBy,
-                    sortDirection,
-                    sortModify
-                }
-            });
+  }
+
+  function handleHeaderClick(header: TableHeader) {
+    if(header.sortable && !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
+      }
+      if(onsort) {
+        onsort({
+          detail: {
+            sortedBy,
+            sortDirection,
+            sortModify
+          }
+        })
+      }
     }
-}
-function handleRowClick(item) {
-    if (doubleClickActive) {
-        if (clickTimeout) {
-            clearTimeout(clickTimeout);
-            clickTimeout = undefined;
-            if (onrowDoubleClick) {
-                onrowDoubleClick({
-                    detail: {
-                        item
-                    }
-                });
+  }
+
+  function handleRowClick(item: Item) {
+    if(doubleClickActive) {
+      if (clickTimeout) {
+        clearTimeout(clickTimeout);
+        clickTimeout = undefined;
+    
+        if(onrowDoubleClick) {
+          onrowDoubleClick({
+            detail: {
+              item
             }
+          })
         }
-        else {
-            clickTimeout = setTimeout(() => {
-                if (onrowClick) {
-                    onrowClick({
-                        detail: {
-                            item
-                        }
-                    });
-                }
-                clickTimeout = undefined;
-            }, doubleClickDelay);
-        }
-    }
-    else {
-        if (onrowClick) {
+      } else {
+        clickTimeout = setTimeout(() => {
+          if(onrowClick) {
             onrowClick({
-                detail: {
-                    item
-                }
-            });
-        }
+              detail: {
+                item
+              }
+            })
+          }
+          clickTimeout = undefined;
+        }, doubleClickDelay);
+      }
+    } else {
+      if(onrowClick) {
+        onrowClick({
+          detail: {
+            item
+          }
+        })
+      }
     }
-}
-function formatDate(dateTime, dateFormat) {
-    return dateTime.setLocale(dateFormat.locale).toFormat(dateFormat.format);
-}
-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();
-                }
+  }
+
+  function formatDate(dateTime: DateTime, dateFormat: ColumnDate['params']): string  {
+    return dateTime.setLocale(dateFormat.locale).toFormat(dateFormat.format)
+  }
+
+
+  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(() => {
-    headers;
+  }
+
+  $effect(() => {
+    headers; 
     resizedColumnSizeWithPadding;
+
     tick().then(() => {
-        calculateStickyMetrics();
-        updateRemainingWidth();
+      calculateStickyMetrics();
+      updateRemainingWidth();
     });
-});
-async function updateRemainingWidth() {
-    if (tableContainer != null && !!tableContainer && mainHeader) {
-        const containerWidth = tableContainer?.getBoundingClientRect().width;
-        const scrollbarWidth = tableContainer.offsetWidth - tableContainer.clientWidth;
-        if (containerWidth) {
-            const totalResizableWidth = headers.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 - scrollbarWidth - totalResizableWidth - extraStaticWidth);
-        }
+  });
+
+  async function updateRemainingWidth() {
+    if(tableContainer != null && !!tableContainer && mainHeader) {
+      const containerWidth = tableContainer?.getBoundingClientRect().width;
+      const scrollbarWidth = tableContainer.offsetWidth - tableContainer.clientWidth
+
+      if(containerWidth){
+        const totalResizableWidth = headers.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 - scrollbarWidth - totalResizableWidth - extraStaticWidth);
+      }
     }
-}
-function resizeRowAppendHeader() {
+  }
+
+  function resizeRowAppendHeader() {
     if ((appendSnippet || stickyAppendSnippet) && 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`;
+      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]) {
-        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;
+      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`;
-}
+    th.style.width = `${width}px`
+  }
+
 </script>
 
 {#if !!items && Array.isArray(items)}