@soft-stech/bootsman-ui-shadcn 1.4.35 → 1.4.37

package/dist/lib/useResizeColumns.js

@@ -0,0 +1,89 @@
+import { ref as n } from "vue";
+import "vee-validate";
+import { useEventListener as R } from "@vueuse/core";
+function A() {
+  const u = n(!1), o = n(""), r = n(""), i = n(void 0), d = n(90), m = n(void 0), a = n(null), v = n(void 0), w = (e) => {
+    a.value && a.value.headRef && [...a.value.headRef.querySelectorAll("th")].forEach((l) => {
+      const s = l.id.split("_")[0];
+      e && e[s] && (l.style.width = e[s] + "px");
+    });
+  }, W = () => {
+    if (a.value && a.value.headRef)
+      return [...a.value.headRef.querySelectorAll("th")].reduce((l, s) => {
+        const h = s.id.split("_")[0];
+        return {
+          ...l,
+          [h]: {
+            cell: s,
+            initialWidth: s.offsetWidth
+          }
+        };
+      }, {});
+  }, g = (e, t) => {
+    if (t && (u.value = !0, o.value = e, i.value)) {
+      const l = i.value[e].cell;
+      let s = l.nextElementSibling;
+      s || (s = l.previousElementSibling), r.value = s ? s.id.split("_")[0] : "", v.value = R(document, "mousemove", z);
+    }
+  }, x = () => {
+    if (u.value && (u.value = !1, o.value = "", r.value = "", v.value && v.value(), i.value)) {
+      const e = {};
+      for (let t in i.value) {
+        const l = i.value[t], s = l.cell.hasAttribute("can-resize") ? Math.floor(l.cell.offsetWidth) <= d.value ? d.value : l.cell.offsetWidth : l.initialWidth;
+        l.cell.style.width = s + "px", e[t] = s;
+      }
+      m.value = e;
+    }
+  }, y = (e) => {
+    if (!e.nextElementSibling) {
+      const t = e.querySelector(".header-cell_wrapper");
+      if (t)
+        return parseInt(window.getComputedStyle(t).paddingRight);
+    }
+    return 0;
+  }, c = (e, t, l) => {
+    if (!e || !t) {
+      o.value = "", r.value = "";
+      return;
+    }
+    const s = l.movementX, h = s < 0 ? "left" : "right", f = Math.floor(parseInt(e.style.width)) + s, p = Math.floor(parseInt(t.style.width)) - s;
+    if (h === "left")
+      if (f <= d.value || !e.hasAttribute("can-resize")) {
+        const C = e.previousElementSibling;
+        c(C, t, l);
+      } else
+        e.style.width = f + "px", t.style.width = p + "px";
+    else if (p <= d.value + y(t) || !t.hasAttribute("can-resize")) {
+      const C = t.nextElementSibling;
+      c(e, C, l);
+    } else
+      e.style.width = f + "px", t.style.width = p + "px";
+  }, z = (e) => {
+    if (e.preventDefault(), i.value) {
+      const t = i.value[o.value]?.cell, l = i.value[r.value]?.cell;
+      c(t, l, e);
+    }
+  };
+  return {
+    tableHeaderElement: a,
+    calculatedColumnSizing: m,
+    isResizing: u,
+    resizingCellId: o,
+    handleResizeControlMouseDown: g,
+    handleResizeControlMouseUp: x,
+    resetCells: () => {
+      if (i.value)
+        for (let e in i.value)
+          i.value[e].cell.style.width = i.value[e].initialWidth + "px";
+    },
+    setInitialColumnWidths: () => {
+      if (i.value = W(), i.value)
+        for (let e in i.value)
+          i.value[e].cell.style.width || (i.value[e].cell.style.width = i.value[e].initialWidth + "px");
+    },
+    setProvidedCellWidths: w
+  };
+}
+export {
+  A as useResizeColumns
+};

package/dist/lib/utils.js

@@ -1,4 +1,4 @@
-import { g as m, t as r, v as e } from "../utils-wXObAngY.js";
+import { g as m, t as r, v as e } from "../utils-C11OfLQK.js";
 import "vue";
 export {
   m as cn,

package/dist/{utils-wXObAngY.js → utils-C11OfLQK.js}

@@ -2564,12 +2564,12 @@ const Pt = (e, t) => {
     xt,
     {
       variant: "none",
-      class: "text-foreground px-0 text-sm font-semibold",
+      class: "text-foreground px-0 text-sm font-semibold h-full",
       onClick: () => e.toggleSorting(e.getIsSorted() === "asc")
     },
     () => [
       S("div", { class: "whitespace-normal break-normal" }, [t]),
-      S(r, { class: "ml-2 h-4 w-4 text-muted-foreground" })
+      S(r, { class: "ml-1 h-4 w-4 text-muted-foreground shrink-0" })
     ]
   );
 };

package/dist/{variables-D2BA1gyr.js → variables-4ez0MWno.js}

@@ -5,20 +5,20 @@ import "vee-validate";
 import "@vueuse/core";
 import "./BuiCalendar.vue_vue_type_style_index_0_lang-DK4yUiXC.js";
 import { BuiInput as C } from "./components/ui/input/index.js";
-import { _ as N } from "./BuiSelect.vue_vue_type_script_setup_true_lang-BTaLx9te.js";
+import { _ as N } from "./BuiSelect.vue_vue_type_script_setup_true_lang-CFmk7_AN.js";
 import { _ as w } from "./BuiSelectValue.vue_vue_type_script_setup_true_lang-BNN6bEtZ.js";
-import { _ as U } from "./BuiSelectTrigger.vue_vue_type_script_setup_true_lang-bER8QXmg.js";
-import { _ as b } from "./BuiSelectContent.vue_vue_type_script_setup_true_lang-BCXA7689.js";
-import { _ as h } from "./BuiSelectItem.vue_vue_type_script_setup_true_lang-B1Xy1bfi.js";
+import { _ as U } from "./BuiSelectTrigger.vue_vue_type_script_setup_true_lang-BPAHSkB4.js";
+import { _ as b } from "./BuiSelectContent.vue_vue_type_script_setup_true_lang-C191NkOr.js";
+import { _ as h } from "./BuiSelectItem.vue_vue_type_script_setup_true_lang-CLHtKjGO.js";
 import "@tanstack/vue-table";
 import "./components/ui/toast/use-toast.js";
 import "@vee-validate/zod";
 import "zod";
 import "./index-BGsblnmA.js";
-import { _ as q } from "./BuiPaginationFirst.vue_vue_type_script_setup_true_lang-DdBOGHt6.js";
-import { _ as E } from "./BuiPaginationLast.vue_vue_type_script_setup_true_lang-CUk7ZCnP.js";
-import { _ as j } from "./BuiPaginationNext.vue_vue_type_script_setup_true_lang-B0Z-kfzf.js";
-import { _ as D } from "./BuiPaginationPrev.vue_vue_type_script_setup_true_lang-BtRpcXGP.js";
+import { _ as q } from "./BuiPaginationFirst.vue_vue_type_script_setup_true_lang-Cldzpica.js";
+import { _ as E } from "./BuiPaginationLast.vue_vue_type_script_setup_true_lang-DAMRrI27.js";
+import { _ as j } from "./BuiPaginationNext.vue_vue_type_script_setup_true_lang-CQ0gejml.js";
+import { _ as D } from "./BuiPaginationPrev.vue_vue_type_script_setup_true_lang-DuI0BC1U.js";
 const F = { class: "text-sm text-muted-foreground" }, L = { class: "text-sm text-muted-foreground" }, ie = /* @__PURE__ */ V({
   __name: "BuiPaginationCommon",
   props: /* @__PURE__ */ $({

package/dist/{x-CQmEIBuk.js → x-BCuyj3Zc.js}

@@ -1,4 +1,4 @@
-import { h as e } from "./utils-wXObAngY.js";
+import { h as e } from "./utils-C11OfLQK.js";
 /**
  * @license lucide-vue-next v0.441.0 - ISC
  *

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@soft-stech/bootsman-ui-shadcn",
-  "version": "1.4.35",
+  "version": "1.4.37",
   "type": "module",
   "files": [
     "dist",
@@ -27,6 +27,7 @@
     "@vueuse/integrations": "^13.0.0",
     "class-variance-authority": "0.7.0",
     "clsx": "2.1.1",
+    "lodash-es": "^4.17.21",
     "lucide-vue-next": "0.441.0",
     "radix-vue": "1.9.8",
     "sortablejs": "^1",
@@ -40,6 +41,7 @@
     "@rushstack/eslint-patch": "1.10.4",
     "@tsconfig/node18": "18.2.4",
     "@types/jsdom": "21.1.7",
+    "@types/lodash-es": "^4.17.12",
     "@types/node": "20.12.14",
     "@vitejs/plugin-vue": "5.1.3",
     "@vitest/coverage-v8": "2.1.1",

package/src/components/stories/BuiDataTable.story.vue

@@ -8,7 +8,6 @@ import type {
   PaginationState,
   Row,
   RowSelectionState,
-  ColumnSizingState,
   VisibilityState,
   ColumnOrderState
 } from '@tanstack/vue-table'
@@ -69,11 +68,12 @@ const columns: ColumnDef<Task>[] = [
   },
   {
     accessorKey: 'title',
-    header: 'Title'
+    header: 'Title',
+    enableResizing: false
   },
   {
     accessorKey: 'status',
-    header: ({ column }) => tableColumnSortCommon(column, 'Status'),
+    header: ({ column }) => tableColumnSortCommon(column, 'Очень длинный заголовок для статуса'),
     meta: { title: 'Статус таска' }
   },
   {
@@ -108,7 +108,7 @@ function updateSelection(val: RowSelectionState) {
 }
 
 const columnVisibility = ref<VisibilityState>({ hiddenColumn: false })
-const columnSizing = ref<ColumnSizingState>({ title: 300 })
+const columnSizing = ref<Record<string, number>>({ title: 350, status: 200 })
 const columnOrder = ref<ColumnOrderState>()
 
 type GroupBy = 'none' | 'status' | 'priority'
@@ -190,8 +190,8 @@ function groupName(group: string | number) {
         :data="sortedData"
         v-model:sorting="sorting"
         v-model:pagination="pagination"
-        v-model:column-sizing="columnSizing"
         v-model:column-visibility="columnVisibility"
+        v-model:column-sizing="columnSizing"
         v-model:column-order="columnOrder"
         @update:selection="updateSelection"
         :total-items="totalItems"

package/src/components/ui/table/BuiDataTable.vue

@@ -11,7 +11,6 @@ import type {
   Column,
   ColumnDef,
   ColumnOrderState,
-  ColumnSizingState,
   PaginationState,
   Row,
   RowSelectionState,
@@ -25,7 +24,7 @@ import {
   getSortedRowModel,
   useVueTable
 } from '@tanstack/vue-table'
-import { computed, watchEffect, ref, watch } from 'vue'
+import { computed, watchEffect, ref, watch, onMounted, onBeforeMount, onUnmounted } from 'vue'
 import {
   BuiTable,
   BuiTableBody,
@@ -48,6 +47,9 @@ import { BuiPopover, BuiPopoverContent, BuiPopoverTrigger } from '@/components/u
 import { BuiScrollArea } from '@/components/ui/scroll-area'
 import { BuiButton } from '@/components/ui/button'
 import { Settings2Icon } from 'lucide-vue-next'
+import { useElementSize, useEventListener } from '@vueuse/core'
+import { useResizeColumns } from '@/lib/useResizeColumns'
+import { isEqual } from 'lodash-es'
 
 const NO_GROUP_KEY = '#UNDEFINED#'
 
@@ -66,6 +68,7 @@ const props = withDefaults(
     renderSubComponent?: (row: Row<TData>) => (() => any) | undefined
     freezeHeader?: boolean
     enableColumnListControl?: boolean
+    enableColumnResizing?: boolean
     columnSearchPlaceholder?: string
     columnSearchNotFound?: string
     columnResetVisibility?: string
@@ -83,7 +86,8 @@ const props = withDefaults(
     totalItems: 0,
     columnSearchPlaceholder: 'Column name',
     columnSearchNotFound: 'Not found',
-    columnResetVisibility: 'Reset column visibility'
+    columnResetVisibility: 'Reset column visibility',
+    enableColumnResizing: true
   }
 )
 
@@ -91,8 +95,8 @@ const sorting = defineModel<SortingState>('sorting')
 const pagination = defineModel<PaginationState>('pagination')
 const rowSelection = defineModel<RowSelectionState>('selection')
 const columnVisibility = defineModel<VisibilityState>('columnVisibility')
-const columnSizing = defineModel<ColumnSizingState>('columnSizing')
 const columnOrder = defineModel<ColumnOrderState>('columnOrder')
+const columnSizing = defineModel<Record<string, number>>('columnSizing')
 const computedItems = computed(() =>
   props.manualPagination ? props.totalItems : props.data.length
 )
@@ -127,18 +131,12 @@ const table = useVueTable({
   onColumnVisibilityChange: (updaterOrValue) => {
     valueUpdater(updaterOrValue, columnVisibility)
   },
-  onColumnSizingChange: (updaterOrValue) => {
-    valueUpdater(updaterOrValue, columnSizing)
-  },
   onColumnOrderChange: (updaterOrValue) => {
     valueUpdater(updaterOrValue, columnOrder)
   },
   autoResetPageIndex: false,
   manualPagination: props.manualPagination, // set to false to enable client-side pagination
   manualSorting: props.manualSorting,
-  enableColumnResizing: true,
-  columnResizeMode: 'onChange',
-  columnResizeDirection: 'ltr',
   state: {
     get sorting() {
       return sorting.value
@@ -152,9 +150,6 @@ const table = useVueTable({
     get columnVisibility() {
       return columnVisibility.value
     },
-    get columnSizing() {
-      return columnSizing.value
-    },
     get columnOrder() {
       return columnOrder.value
     }
@@ -237,6 +232,42 @@ const tableHeaders = computed(() =>
 watch(columnsListIds, () => {
   table.setColumnOrder(columnsListIds.value)
 })
+
+const tableHeaderRef = ref<InstanceType<typeof BuiTableHeader> | null>(null)
+const { height } = useElementSize(tableHeaderRef)
+
+const {
+  tableHeaderElement,
+  calculatedColumnSizing,
+  isResizing,
+  resizingCellId,
+  resetCells,
+  handleResizeControlMouseDown,
+  handleResizeControlMouseUp,
+  setInitialColumnWidths,
+  setProvidedCellWidths
+} = useResizeColumns()
+
+onBeforeMount(() => {
+  calculatedColumnSizing.value = columnSizing.value
+})
+
+onMounted(() => {
+  if (tableHeaderRef.value) {
+    tableHeaderElement.value = tableHeaderRef.value
+
+    setProvidedCellWidths(columnSizing.value)
+    setInitialColumnWidths()
+  }
+})
+
+watchEffect(() => {
+  if (!isEqual(calculatedColumnSizing.value, columnSizing.value)) {
+    columnSizing.value = calculatedColumnSizing.value
+  }
+})
+
+useEventListener(document, 'mouseup', handleResizeControlMouseUp)
 </script>
 
 <template>
@@ -247,7 +278,10 @@ watch(columnsListIds, () => {
     <template v-if="enableColumnListControl" #columnVisibility>
       <BuiPopover v-model:open="open">
         <BuiPopoverTrigger as-child>
-          <div class="absolute right-0 top-0 z-10 h-10 bg-background">
+          <div
+            class="absolute right-0 top-0 z-10 bg-background"
+            :style="{ height: `${height.toFixed(1)}px` }"
+          >
             <div
               class="flex h-full items-center border-b border-l border-border/[0.16] bg-foreground/[0.04] px-1"
             >
@@ -265,7 +299,9 @@ watch(columnsListIds, () => {
             <BuiCommandInput
               :placeholder="columnSearchPlaceholder"
               v-model="searchColumn"
-              @input="(event) => (searchColumn = event.target.value)"
+              @input="
+                (event: InputEvent) => (searchColumn = (event.target as HTMLInputElement)?.value)
+              "
             />
             <BuiCommandList>
               <BuiScrollArea class="h-[300px]">
@@ -286,12 +322,16 @@ watch(columnsListIds, () => {
         </BuiPopoverContent>
       </BuiPopover>
     </template>
-    <BuiTableHeader v-if="tableHeaders" :freeze-header="props.freezeHeader">
+    <BuiTableHeader v-if="tableHeaders" :freeze-header="props.freezeHeader" ref="tableHeaderRef">
       <BuiTableHead
-        v-for="header in tableHeaders"
+        v-for="(header, index) in tableHeaders"
         :key="header.id"
-        :style="{ ...getPinningStyle(header.column), width: header.getSize() + 'px' }"
+        :id="`${header.id}_cell`"
+        :style="{
+          ...getPinningStyle(header.column)
+        }"
         :freeze-header="props.freezeHeader"
+        :can-resize="header.column.getCanResize() ? true : undefined"
       >
         <FlexRender
           v-if="!header.isPlaceholder"
@@ -299,12 +339,15 @@ watch(columnsListIds, () => {
           :props="header.getContext()"
         />
         <div
-          @dblclick="() => header.column.resetSize()"
-          @mousedown="header.getResizeHandler()?.($event)"
+          v-if="
+            enableColumnResizing && index < tableHeaders.length - 1 && header.column.getCanResize()
+          "
+          @dblclick="resetCells"
+          @mousedown="() => handleResizeControlMouseDown(header.id, props.enableColumnResizing)"
           :className="
             cn(
               'absolute top-0 right-0 h-full w-1 bg-muted-foreground opacity-0 cursor-col-resize select-none touch-none hover:opacity-50',
-              header.column.getIsResizing() ? 'bg-primary opacity-50' : ''
+              isResizing && resizingCellId === header.id ? 'bg-primary opacity-50' : ''
             )
           "
         />

package/src/components/ui/table/BuiTableHead.vue

@@ -11,7 +11,7 @@ const props = defineProps<{
   <th
     :class="
       cn(
-        'h-10 text-left align-middle text-foreground [&:has([role=checkbox])]:pr-0 ',
+        'relative h-10 text-left align-middle text-foreground [&:has([role=checkbox])]:pr-0 ',
         props.class,
         props.freezeHeader ? 'bg-background p-0' : 'bg-foreground/[0.04] p-0'
       )
@@ -19,10 +19,14 @@ const props = defineProps<{
   >
     <div
       class="flex h-full items-center !border-b !border-border/[0.16]"
-      :class="{ 'bg-foreground/[0.04]': props.freezeHeader }"
+      :class="{
+        'bg-foreground/[0.04]': props.freezeHeader,
+        'header-cell_wrapper': !props.freezeHeader
+      }"
     >
       <div
-        class="flex h-8 w-full items-center whitespace-nowrap border-r border-border/[0.16] px-2 text-sm font-semibold"
+        class="flex h-full w-full items-center whitespace-nowrap border-r border-border/[0.16] px-2 text-sm font-semibold"
+        :class="{ 'header-cell_wrapper': props.freezeHeader }"
       >
         <slot />
       </div>

package/src/components/ui/table/BuiTableHeader.vue

@@ -1,5 +1,10 @@
 <script setup lang="ts">
 import { cn } from '@/lib/utils'
+import { ref } from 'vue'
+
+const headRef = ref<HTMLElement | null>(null)
+
+defineExpose({ headRef })
 
 const props = defineProps<{
   class?: string
@@ -9,6 +14,7 @@ const props = defineProps<{
 
 <template>
   <thead
+    ref="headRef"
     :class="
       cn(
         '[&_tr]:border-border/[0.16]',

package/src/lib/useResizeColumns.ts

@@ -0,0 +1,202 @@
+import { ref } from 'vue'
+import BuiTableHeader from '@/components/ui/table/BuiTableHeader.vue'
+import { useEventListener } from '@vueuse/core'
+
+export function useResizeColumns() {
+  const isResizing = ref<boolean>(false)
+  const resizingCellId = ref<string>('')
+  const neighborCellId = ref<string>('')
+  const cells = ref<
+    | {
+        [key: string]: { cell: HTMLTableCellElement; initialWidth: number }
+      }
+    | undefined
+  >(undefined)
+  const minCellWidth = ref<number>(90)
+  const calculatedColumnSizing = ref<Record<string, number> | undefined>(undefined)
+  const tableHeaderElement = ref<InstanceType<typeof BuiTableHeader> | null>(null)
+  const unregisterMouseMove = ref<Function | undefined>(undefined)
+
+  const setProvidedCellWidths = (columnSizing: Record<string, number> | undefined) => {
+    if (tableHeaderElement.value && tableHeaderElement.value.headRef) {
+      const headerCells = [...tableHeaderElement.value.headRef.querySelectorAll('th')]
+
+      //установить заданные как модель изначальные размеры
+      headerCells.forEach((cell) => {
+        const cellId = cell.id.split('_')[0]
+
+        if (columnSizing && columnSizing[cellId]) {
+          cell.style.width = columnSizing[cellId] + 'px'
+        }
+      })
+    }
+  }
+
+  const getCells = () => {
+    if (tableHeaderElement.value && tableHeaderElement.value.headRef) {
+      const headerCells = [...tableHeaderElement.value.headRef.querySelectorAll('th')]
+      const headerCellsWidths: {
+        [key: string]: { cell: HTMLTableCellElement; initialWidth: number }
+      } = headerCells.reduce((acc, cell) => {
+        const cellId = cell.id.split('_')[0]
+        return {
+          ...acc,
+          [cellId]: {
+            cell: cell,
+            initialWidth: cell.offsetWidth
+          }
+        }
+      }, {})
+
+      return headerCellsWidths
+    }
+
+    return undefined
+  }
+
+  const handleResizeControlMouseDown = (cellId: string, enableColumnResizing: boolean) => {
+    if (!enableColumnResizing) return
+
+    isResizing.value = true
+    resizingCellId.value = cellId
+
+    if (cells.value) {
+      const resizingCell = cells.value[cellId].cell
+      let neighborCell = resizingCell.nextElementSibling as HTMLTableCellElement
+
+      if (!neighborCell) {
+        neighborCell = resizingCell.previousElementSibling as HTMLTableCellElement
+      }
+
+      neighborCellId.value = neighborCell ? neighborCell.id.split('_')[0] : ''
+
+      unregisterMouseMove.value = useEventListener(document, 'mousemove', handleCellResize)
+    }
+  }
+
+  const handleResizeControlMouseUp = () => {
+    if (!isResizing.value) return
+
+    isResizing.value = false
+    resizingCellId.value = ''
+    neighborCellId.value = ''
+
+    if (unregisterMouseMove.value) {
+      unregisterMouseMove.value()
+    }
+
+    if (cells.value) {
+      const updatedColumnSizingValue: Record<string, number> = {}
+
+      for (let cell in cells.value) {
+        const currentCell = cells.value[cell]
+        const newWidth = !currentCell.cell.hasAttribute('can-resize')
+          ? currentCell.initialWidth
+          : Math.floor(currentCell.cell.offsetWidth) <= minCellWidth.value
+            ? minCellWidth.value
+            : currentCell.cell.offsetWidth
+
+        currentCell.cell.style.width = newWidth + 'px'
+        updatedColumnSizingValue[cell] = newWidth
+      }
+
+      calculatedColumnSizing.value = updatedColumnSizingValue
+    }
+  }
+  const getLastCellOnTheRightExtraSpace = (cell: HTMLTableCellElement) => {
+    if (!cell.nextElementSibling) {
+      const cellWrapperElement = cell.querySelector('.header-cell_wrapper') as HTMLElement | null
+
+      if (cellWrapperElement) {
+        return parseInt(window.getComputedStyle(cellWrapperElement).paddingRight)
+      }
+    }
+
+    return 0
+  }
+
+  const resizeCells = (
+    cell: HTMLTableCellElement | null,
+    neighborCell: HTMLTableCellElement | null,
+    e: MouseEvent
+  ) => {
+    if (!cell || !neighborCell) {
+      resizingCellId.value = ''
+      neighborCellId.value = ''
+
+      return
+    }
+
+    const movementX = e.movementX
+    const direction: 'left' | 'right' = movementX < 0 ? 'left' : 'right'
+    const newCellWidth = Math.floor(parseInt(cell.style.width)) + movementX
+    const newNeighborCellWidth = Math.floor(parseInt(neighborCell.style.width)) - movementX
+
+    if (direction === 'left') {
+      if (newCellWidth <= minCellWidth.value || !cell.hasAttribute('can-resize')) {
+        const nextCell = cell.previousElementSibling as HTMLTableCellElement | null
+
+        resizeCells(nextCell, neighborCell, e)
+      } else {
+        cell.style.width = newCellWidth + 'px'
+        neighborCell.style.width = newNeighborCellWidth + 'px'
+      }
+    } else {
+      if (
+        newNeighborCellWidth <=
+          minCellWidth.value + getLastCellOnTheRightExtraSpace(neighborCell) ||
+        !neighborCell.hasAttribute('can-resize')
+      ) {
+        const nextNeighborCell = neighborCell.nextElementSibling as HTMLTableCellElement | null
+
+        resizeCells(cell, nextNeighborCell, e)
+      } else {
+        cell.style.width = newCellWidth + 'px'
+        neighborCell.style.width = newNeighborCellWidth + 'px'
+      }
+    }
+  }
+
+  const handleCellResize = (e: MouseEvent) => {
+    e.preventDefault()
+
+    if (cells.value) {
+      const resizingCell = cells.value[resizingCellId.value]?.cell
+      const neighborCell = cells.value[neighborCellId.value]?.cell
+
+      resizeCells(resizingCell, neighborCell, e)
+    }
+  }
+
+  const resetCells = () => {
+    if (cells.value) {
+      for (let cell in cells.value) {
+        cells.value[cell].cell.style.width = cells.value[cell].initialWidth + 'px'
+      }
+    }
+  }
+
+  const setInitialColumnWidths = () => {
+    cells.value = getCells()
+
+    if (cells.value) {
+      for (let cell in cells.value) {
+        if (!cells.value[cell].cell.style.width) {
+          cells.value[cell].cell.style.width = cells.value[cell].initialWidth + 'px'
+        }
+      }
+    }
+  }
+
+  return {
+    tableHeaderElement,
+    calculatedColumnSizing,
+    isResizing,
+    resizingCellId,
+    handleResizeControlMouseDown,
+    handleResizeControlMouseUp,
+    resetCells,
+    setInitialColumnWidths,
+    setProvidedCellWidths
+  }
+}

package/src/lib/utils.ts

@@ -30,12 +30,12 @@ export const tableColumnSortCommon = (column: Column<any>, name: string) => {
     BuiButton,
     {
       variant: 'none',
-      class: 'text-foreground px-0 text-sm font-semibold',
+      class: 'text-foreground px-0 text-sm font-semibold h-full',
       onClick: () => column.toggleSorting(column.getIsSorted() === 'asc')
     },
     () => [
       h('div', { class: 'whitespace-normal break-normal' }, [name]),
-      h(icon, { class: 'ml-2 h-4 w-4 text-muted-foreground' })
+      h(icon, { class: 'ml-1 h-4 w-4 text-muted-foreground shrink-0' })
     ]
   )
 }