@witchcraft/ui 0.3.15 → 0.3.16

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "witchcraftUi",
   "configKey": "witchcraftUi",
-  "version": "0.3.15",
+  "version": "0.3.16",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

package/dist/module.mjs

@@ -22,7 +22,7 @@ const componentsInfo = globFiles([
   name: name.startsWith("Lib") ? name.replace("Lib", "PREFIX") : `PREFIX${name}`,
   filepath
 }));
-const module = defineNuxtModule({
+const module$1 = defineNuxtModule({
   meta: {
     name: "witchcraftUi",
     configKey: "witchcraftUi"
@@ -154,4 +154,4 @@ const module = defineNuxtModule({
   }
 });
 
-export { module as default };
+export { module$1 as default };

package/dist/runtime/components/LibTable/LibTable.vue

@@ -149,7 +149,10 @@
 			<tbody
 				:class="twMerge(
   `table--body`,
-  isPostSetup && mergedVirtualizerOpts.enabled && mergedVirtualizerOpts.method === 'dynamic' && `grid relative`
+  isPostSetup && mergedVirtualizerOpts.enabled && mergedVirtualizerOpts.method === 'dynamic' && `
+						grid
+						relative
+					`
 )"
 				:style="{
   ...mergedVirtualizerOpts.enabled && mergedVirtualizerOpts.method === 'dynamic' ? { height: `${totalSize}px` } : {}
@@ -162,9 +165,14 @@
 					<tr
 						:class="twMerge(
   `
-							table--row
-						`,
-  isPostSetup && mergedVirtualizerOpts.enabled && mergedVirtualizerOpts.method === 'dynamic' && `flex absolute w-full`
+								table--row
+							`,
+  isPostSetup && mergedVirtualizerOpts.enabled && mergedVirtualizerOpts.method === 'dynamic' && `
+								flex
+								absolute
+								w-full
+							`,
+  isPostSetup && mergedVirtualizerOpts.enabled && ` will-change-transform `
 )"
 						:style="{
   ...mergedVirtualizerOpts.enabled ? {

package/dist/runtime/directives/vResizableCols.js

@@ -1,6 +1,5 @@
 import { castType } from "@alanscodelog/utils/castType";
 import { override } from "@alanscodelog/utils/override";
-import { throttle } from "@alanscodelog/utils/throttle";
 import { unreachable } from "@alanscodelog/utils/unreachable";
 import { globalResizeObserver } from "../globalResizeObserver.js";
 const observer = globalResizeObserver;
@@ -11,16 +10,21 @@ const defaultOpts = {
   enabled: true
 };
 const callback = (_rect, el) => {
+  const $el = getElInfo(el);
+  if ($el.justResized) return;
   setColWidths(el);
-  positionGrips(el);
+  $el.justResized = true;
+  setTimeout(() => {
+    positionGrips(el);
+    $el.justResized = false;
+  }, 0);
 };
-const throttledCallback = throttle(callback);
 export const vResizableCols = {
   mounted(el, { value: opts = {} }) {
     const options = override({ ...defaultOpts }, opts);
     if (options.enabled) {
       setupColumns(el, options);
-      observer.observe(el, throttledCallback);
+      observer.observe(el, callback);
     }
   },
   updated(el, { value: opts = {} }) {
@@ -28,21 +32,18 @@ export const vResizableCols = {
     const info = el && options.enabled && getElInfo(el);
     const hasGrips = el && options.enabled && elMap.get(el)?.grips;
     const colsNotEqual = info && info.colCount !== options.colCount;
-    if (hasGrips && !options.enabled || colsNotEqual) {
+    if (!options.enabled || colsNotEqual) {
       teardownColumns(el);
-      observer.unobserve(el, throttledCallback);
+      observer.unobserve(el, callback);
     }
     if (!hasGrips && options.enabled || colsNotEqual) {
       setupColumns(el, options);
-      observer.observe(el, throttledCallback);
+      observer.observe(el, callback);
     }
   },
   unmounted(el) {
-    const hasGrips = elMap.has(el) && elMap.get(el).grips;
-    if (hasGrips) {
-      teardownColumns(el);
-      globalResizeObserver.unobserve(el, throttledCallback);
-    }
+    teardownColumns(el);
+    globalResizeObserver.unobserve(el, callback);
   },
   getSSRProps() {
     return {};
@@ -105,6 +106,7 @@ function createPointerMoveHandler(el) {
     const $el = getElInfo(el);
     if ($el.isDragging) {
       e.preventDefault();
+      $el.fluidWidthsAsPercentOfFluidWidth = void 0;
       const { col, colNext } = getCols(el);
       if (col !== null) {
         const leftBox = getBox(col);
@@ -131,7 +133,11 @@ function createPointerMoveHandler(el) {
             setWidth(col, newWidth, el);
           }
         }
-        positionGrips(el);
+        $el.justResized = true;
+        setTimeout(() => {
+          positionGrips(el);
+          $el.justResized = false;
+        }, 0);
       }
     }
   };
@@ -173,9 +179,9 @@ function getTestGripSize(el) {
   el.removeChild(testGrip);
   return dynamicMinWidth;
 }
-function getElInfo(el) {
+function getElInfo(el, { throwIfMissing = true } = {}) {
   const $el = elMap.get(el);
-  if (!$el) unreachable("El went missing.");
+  if (!$el && throwIfMissing) unreachable("El went missing.");
   return $el;
 }
 function getColEls(el) {
@@ -212,18 +218,22 @@ function setupColumns(el, opts) {
     el.appendChild(grip);
     $el.grips.set(grip, i);
   }
-  positionGrips(el);
-  el.classList.add("resizable-cols-setup");
-  opts.onSetup?.(el);
+  $el.justResized = true;
+  setTimeout(() => {
+    positionGrips(el);
+    $el.justResized = false;
+    el.classList.add("resizable-cols-setup");
+    opts.onSetup?.(el);
+  }, 0);
 }
 function positionGrips(el) {
   let xPos = 0;
   const $el = getElInfo(el);
   for (const grip of $el.grips.keys()) {
     const col = $el.grips.get(grip);
-    const colEls = getColEls(el)[col];
-    if (!colEls) unreachable();
-    const colBox = getBox(colEls);
+    const colEl = getColEls(el)[col];
+    if (!colEl) unreachable();
+    const colBox = getBox(colEl);
     const gripBox = getBox(grip);
     grip.style.left = `${xPos + colBox.width - gripBox.width / 2}px`;
     xPos += colBox.width;
@@ -233,14 +243,71 @@ function setColWidths(el, children) {
   const $el = getElInfo(el);
   const header = children ?? getColEls(el).slice(0, $el.colCount);
   const len = $el.colCount;
+  const elWidth = getBox(el).width;
+  let fluidTotalPx = 0;
+  const fluid = {};
+  const doCalculateFixed = $el.fixedWidths === void 0;
+  const doCalculateFluid = $el.fluidWidthsAsPercentOfFluidWidth === void 0;
+  if (doCalculateFixed) {
+    $el.fixedWidths = { [-1]: 0 };
+  }
+  if (doCalculateFluid) {
+    $el.fluidWidthsAsPercentOfFluidWidth = {};
+  }
+  for (let i = 0; i < len; i++) {
+    const col = header[i];
+    castType(col);
+    if (col.classList.contains("no-resize")) {
+      if (doCalculateFixed) {
+        const w = getBox(col).width;
+        $el.fixedWidths[i] = w;
+        $el.fixedWidths[-1] += $el.fixedWidths[i];
+      }
+    } else {
+      if (doCalculateFluid) {
+        const w = getBox(col).width;
+        fluid[i] = w;
+        fluidTotalPx += w;
+      }
+    }
+  }
+  const totalFluidCount = len - Object.keys($el.fixedWidths).length;
+  if (doCalculateFluid) {
+    for (let i = 0; i < len; i++) {
+      if ($el.fixedWidths[i] !== void 0) continue;
+      $el.fluidWidthsAsPercentOfFluidWidth[i] = fluid[i] / fluidTotalPx;
+    }
+  }
+  const fixedTotalPx = $el.fixedWidths[-1];
+  const minFlexWidth = totalFluidCount * $el.margin;
+  const minTotalWidth = minFlexWidth + fixedTotalPx;
+  let leftOverFluidWidth = elWidth - fixedTotalPx;
+  if (leftOverFluidWidth < minFlexWidth) {
+    leftOverFluidWidth = minFlexWidth;
+  }
   let width = 0;
-  const minTotalWidth = len * $el.margin;
   for (let i = 0; i < len; i++) {
     const col = header[i];
     castType(col);
     const colBox = getBox(col);
-    setWidth(col, colBox.width, el);
-    width += getBox(col).width;
+    if ($el.fixedWidths[i] !== void 0) {
+      setWidth(col, $el.fixedWidths[i], el);
+      width += $el.fixedWidths[i];
+    } else {
+      if ($el.fitWidth) {
+        if (!$el.widths.value[i]) {
+          setWidth(col, colBox.width, el);
+          width += getBox(col).width;
+          continue;
+        }
+        const newInPx = $el.fluidWidthsAsPercentOfFluidWidth[i] * leftOverFluidWidth;
+        setWidth(col, newInPx, el);
+        width += getBox(col).width;
+      } else {
+        setWidth(col, colBox.width, el);
+        width += getBox(col).width;
+      }
+    }
   }
   if (width < minTotalWidth) {
     el.style.minWidth = `${minTotalWidth}px`;
@@ -249,15 +316,17 @@ function setColWidths(el, children) {
   }
 }
 function teardownColumns(el) {
-  const $el = getElInfo(el);
-  el.removeEventListener("pointerdown", $el.pointerDownHandler);
-  document.removeEventListener("pointermove", $el.pointerMoveHandler);
-  document.removeEventListener("pointerup", $el.pointerUpHandler);
-  for (const key of Object.keys($el)) {
-    delete $el[key];
+  const $el = getElInfo(el, { throwIfMissing: false });
+  if ($el) {
+    el.removeEventListener("pointerdown", $el.pointerDownHandler);
+    document.removeEventListener("pointermove", $el.pointerMoveHandler);
+    document.removeEventListener("pointerup", $el.pointerUpHandler);
+    for (const key of Object.keys($el)) {
+      delete $el[key];
+    }
+    $el.onTeardown?.(el);
+    elMap.delete(el);
   }
-  elMap.delete(el);
   el.classList.remove("resizable-cols-setup");
   removeGrips(el);
-  $el.onTeardown?.(el);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@witchcraft/ui",
-  "version": "0.3.15",
+  "version": "0.3.16",
   "description": "Vue component library.",
   "type": "module",
   "main": "./dist/runtime/main.lib.js",
@@ -178,7 +178,7 @@
     "storybook": "BROWSER=none storybook dev -p 6006",
     "storybook:clear-cache": "BROWSER=none storybook dev -p 6006 --no-manager-cache",
     "storybook:build": "pnpm nuxt prepare && storybook build -o docs/storybook",
-    "storybook:test": "pnpm storybook:build && pnpm concurrently -k -s first -n \"SB,TEST\" -c \"magenta,blue\" \"pnpm http-server docs/storybook --port 6006 --silent\" \"pnpm wait-on tcp:6006 && pnpm test-storybook\"",
+    "storybook:test": "pnpm storybook:build && pnpm concurrently -k -s first -n \"SB,TEST\" -c \"magenta,blue\" \"pnpm http-server docs/storybook --port 6006 --silent\" \"pnpm wait-on tcp:6006 && pnpm test-storybook --excludeTags 'skip-smoke-test'\"",
     "test": "pnpm storybook:test && pnpm lint:types",
     "test:dev": "pnpm concurrently -k -s first -n \"SB,TEST\" -c \"magenta,blue\" \"pnpm storybook\" \"pnpm wait-on tcp:6006 && pnpm test-storybook --watch\"",
     "doc": "pnpm test && pnpm storybook:build",

package/src/module.ts

@@ -177,7 +177,9 @@ export default defineNuxtModule<ModuleOptions>({
 		nuxt.hook("vite:extendConfig", async config => {
 			if (options.includeUnpluginIconsPlugins) {
 				logger.info(`Adding unplugin-icons`)
+				// @ts-expect-error .
 				config.plugins ??= []
+				// @ts-expect-error .
 				config.plugins = [
 					...(
 						options.includeUnpluginIconsPlugins
@@ -199,6 +201,7 @@ export default defineNuxtModule<ModuleOptions>({
 					tailwindcss() as any,
 					...config.plugins
 				]
+				// @ts-expect-error .
 				config.optimizeDeps ??= {}
 				config.optimizeDeps.exclude ??= []
 				config.optimizeDeps.exclude.push("~icons")

package/src/runtime/components/LibTable/LibTable.stories.ts

@@ -26,8 +26,8 @@ export const Primary: Story = {
 		components,
 		setup: () => {
 			const show = ref(true)
+			const debugGrips = ref(false)
 			// careful, storybook passes refs as is causing issues
-			//
 			const argsReactive = reactive({
 				...args,
 				resizable: {
@@ -38,24 +38,26 @@ export const Primary: Story = {
 
 			return {
 				args: argsReactive,
+				debugGrips,
 				show
 			}
 		},
 		template: `
 				<div class="p-2 flex flex-col gap-2 border rounded-md mb-10">
 					Controls:
-					<div class="flex gap-2 w-full">
-						<LibButton class="flex-1" @click="args.resizable.enabled = !args.resizable.enabled">Toggle Resizable (currently {{args.resizable.enabled}})</LibButton>
-					</div>
+					<LibButton class="flex-1" @click="args.resizable.enabled = !args.resizable.enabled">Toggle Resizable (currently {{args.resizable.enabled}})</LibButton>
 					<LibButton @click="args.stickyHeader = !args.stickyHeader">Toggle Sticky Header (currently {{args.stickyHeader}})</LibButton>
 					<LibButton @click="show = !show">Toggle Table</LibButton>
+					<LibButton @click="debugGrips = !debugGrips">Toggle Debug Grips (currently {{debugGrips}})</LibButton>
+				</div>
+				<div :class="debugGrips ? ' [&_.grip]:bg-red-500': ''">
+					<lib-table
+						v-if="show"
+						v-bind="args"
+					>
+						${(args as any).slots}
+					</lib-table>
 				</div>
-				<lib-table
-					v-if="show"
-					v-bind="args"
-				>
-					${(args as any).slots}
-				</lib-table>
 		`
 	}),
 	args: {
@@ -235,6 +237,9 @@ export const VirtualizedDynamicHeightExperimental: Story = {
 			prop2: `Item${i + 1} Prop 2: ${faker.helpers.arrayElement(fakerSentences)}`,
 			prop3: `Item${i + 1} Prop 3: ${faker.helpers.arrayElement(fakerSentences)}`
 		}))
+	},
+	parameters: {
+		tags: ["skip-smoke-test"]
 	}
 }
 
@@ -268,22 +273,30 @@ export const VirtualizedFitWidthFalse: Story = {
 export const ThreeColSomeColsNotResizable: Story = {
 	render: args => ({
 		components,
-		setup: () => ({ args }),
+		setup: () => {
+			const debugGrips = ref(false)
+			return { args, debugGrips }
+		},
 		template: `
-			<lib-table
-				v-bind="args"
-			>
-			</lib-table>
-			<br>
-			<lib-table
-			v-bind="{...args, colConfig:args.colConfig2}"
-			>
-			</lib-table>
-			<br>
-			<lib-table
-				v-bind="{...args, colConfig:args.colConfig3}"
-			>
-			</lib-table>
+		<div class="flex flex-col gap-2 w-full border rounded-md mb-10">
+			<WButton @click="debugGrips = !debugGrips">Toggle Debug Grips (currently {{debugGrips}})</WButton>
+		</div>
+		<div :class="debugGrips ? ' [&_.grip]:bg-red-500': ''">
+			<div class="flex flex-col gap-2 w-full">
+				<lib-table
+					v-bind="args"
+				>
+				</lib-table>
+				<lib-table
+				v-bind="{...args, colConfig:args.colConfig2}"
+				>
+				</lib-table>
+				<lib-table
+					v-bind="{...args, colConfig:args.colConfig3}"
+				>
+				</lib-table>
+			</div>
+		</div>
 		`
 	}),
 	args: {
@@ -298,26 +311,7 @@ export const ThreeColSomeColsNotResizable: Story = {
 	} as any
 }
 export const FourColSomeColsNotResizable: Story = {
-	render: args => ({
-		components,
-		setup: () => ({ args }),
-		template: `
-				<lib-table
-					v-bind="args"
-				>
-				</lib-table>
-				<br>
-				<lib-table
-				v-bind="{...args, colConfig:args.colConfig2}"
-				>
-			</lib-table>
-			<br>
-				<lib-table
-					v-bind="{...args, colConfig:args.colConfig3}"
-				>
-				</lib-table>
-		`
-	}),
+	render: ThreeColSomeColsNotResizable.render,
 	args: {
 		cols: ["prop1", "prop2", "prop3", "prop4"],
 		values: [

package/src/runtime/components/LibTable/LibTable.vue

@@ -150,8 +150,10 @@
 			<tbody
 				:class="twMerge(
 					`table--body`,
-					isPostSetup && mergedVirtualizerOpts.enabled && mergedVirtualizerOpts.method === 'dynamic'
-						&& `grid relative`
+					isPostSetup && mergedVirtualizerOpts.enabled && mergedVirtualizerOpts.method === 'dynamic' && `
+						grid
+						relative
+					`
 				)"
 				:style="{
 					...(mergedVirtualizerOpts.enabled && mergedVirtualizerOpts.method === 'dynamic'
@@ -165,9 +167,14 @@
 				>
 					<tr
 						:class="twMerge(`
-							table--row
-						`, isPostSetup && mergedVirtualizerOpts.enabled && mergedVirtualizerOpts.method === 'dynamic'
-							&& `flex absolute w-full`
+								table--row
+							`,
+							isPostSetup && mergedVirtualizerOpts.enabled && mergedVirtualizerOpts.method === 'dynamic' && `
+								flex
+								absolute
+								w-full
+							`,
+							isPostSetup && mergedVirtualizerOpts.enabled && ` will-change-transform `
 						)"
 						:style="{
 							...(mergedVirtualizerOpts.enabled

package/src/runtime/directives/vResizableCols.ts

@@ -1,6 +1,5 @@
 import { castType } from "@alanscodelog/utils/castType"
 import { override } from "@alanscodelog/utils/override"
-import { throttle } from "@alanscodelog/utils/throttle"
 import { unreachable } from "@alanscodelog/utils/unreachable"
 import type { Directive, Ref } from "vue"
 
@@ -23,6 +22,9 @@ type Data = {
 	widths: Ref<string[]>
 	selector: string
 	onTeardown?: (el: Element) => void
+	fixedWidths?: Record<number, number>
+	fluidWidthsAsPercentOfFluidWidth?: Record<number, number>
+	justResized?: boolean
 }
 const elMap = new WeakMap<HTMLElement, Data>()
 type RawOpts = { value: Partial<ResizableOptions> }
@@ -35,11 +37,19 @@ const defaultOpts: Omit<ResizableOptions, "colCount" | "widths" | "selector"> =
 	enabled: true
 }
 
+// note that while it would be nice to throttle this it seems to loose the reference to the original element
+// haven't found where the issue is yet #future
 const callback: ResizeCallback = (_rect: DOMRectReadOnly, el: Element): void => {
+	const $el = getElInfo(el as ResizableElement)
+	if ($el.justResized) return
 	setColWidths(el as ResizableElement)
-	positionGrips(el as ResizableElement)
+	$el.justResized = true
+	setTimeout(() => {
+		positionGrips(el as ResizableElement)
+		$el.justResized = false
+	}, 0)
 }
-const throttledCallback = throttle(callback)
+
 /**
  * Allow a table like element to be resized along it's columns.
  *
@@ -104,7 +114,7 @@ export const vResizableCols: Directive = {
 
 		if (options.enabled) {
 			setupColumns(el, options)
-			observer.observe(el, throttledCallback)
+			observer.observe(el, callback)
 		}
 	},
 	updated(el: ResizableElement, { value: opts = {} }: RawOpts) {
@@ -113,22 +123,19 @@ export const vResizableCols: Directive = {
 		const hasGrips = el && options.enabled && elMap.get(el)?.grips
 		// todo, we should probably check by name
 		const colsNotEqual = (info && info.colCount !== options.colCount)
-		if ((hasGrips && !options.enabled) || colsNotEqual) {
+		if (!options.enabled || colsNotEqual) {
 			teardownColumns(el)
-			observer.unobserve(el, throttledCallback)
+			observer.unobserve(el, callback)
 		}
 
 		if ((!hasGrips && options.enabled) || colsNotEqual) {
 			setupColumns(el, options)
-			observer.observe(el, throttledCallback)
+			observer.observe(el, callback)
 		}
 	},
 	unmounted(el: ResizableElement) {
-		const hasGrips = elMap.has(el) && elMap.get(el)!.grips
-		if (hasGrips) {
-			teardownColumns(el)
-			globalResizeObserver.unobserve(el, throttledCallback)
-		}
+		teardownColumns(el)
+		globalResizeObserver.unobserve(el, callback)
 	},
 	getSSRProps() {
 		return {}
@@ -203,6 +210,8 @@ function createPointerMoveHandler(el: ResizableElement) {
 		if ($el.isDragging) {
 			e.preventDefault()
 
+			$el.fluidWidthsAsPercentOfFluidWidth = undefined
+
 			const { col, colNext } = getCols(el)
 
 			if (col !== null) {
@@ -236,7 +245,11 @@ function createPointerMoveHandler(el: ResizableElement) {
 					}
 				}
 
-				positionGrips(el)
+				$el.justResized = true
+				setTimeout(() => {
+					positionGrips(el)
+					$el.justResized = false
+				}, 0)
 			}
 		}
 	}
@@ -282,10 +295,10 @@ function getTestGripSize(el: ResizableElement): number {
 	return dynamicMinWidth
 }
 
-function getElInfo(el: ResizableElement): Data {
+function getElInfo<T extends boolean = true>(el: ResizableElement, { throwIfMissing = true as T }: { throwIfMissing?: T } = {}): T extends true ? Data : Data | undefined {
 	const $el = elMap.get(el)
-	if (!$el) unreachable("El went missing.")
-	return $el
+	if (!$el && throwIfMissing) unreachable("El went missing.")
+	return $el as any
 }
 function getColEls(el: ResizableElement): HTMLElement[] {
 	const $el = elMap.get(el)
@@ -325,9 +338,13 @@ function setupColumns(el: ResizableElement, opts: ResizableOptions): void {
 		el.appendChild(grip)
 		$el.grips.set(grip, i)
 	}
-	positionGrips(el)
-	el.classList.add("resizable-cols-setup")
-	opts.onSetup?.(el)
+	$el.justResized = true
+	setTimeout(() => {
+		positionGrips(el)
+		$el.justResized = false
+		el.classList.add("resizable-cols-setup")
+		opts.onSetup?.(el)
+	}, 0)
 }
 
 function positionGrips(el: ResizableElement): void {
@@ -335,9 +352,9 @@ function positionGrips(el: ResizableElement): void {
 	const $el = getElInfo(el)
 	for (const grip of $el.grips.keys()) {
 		const col = $el.grips.get(grip)!
-		const colEls = getColEls(el)[col]
-		if (!colEls) unreachable()
-		const colBox = getBox(colEls)
+		const colEl = getColEls(el)[col]
+		if (!colEl) unreachable()
+		const colBox = getBox(colEl)
 		const gripBox = getBox(grip)
 
 		grip.style.left = `${xPos + colBox.width - (gripBox.width / 2)}px`
@@ -349,8 +366,60 @@ function setColWidths(el: ResizableElement, children?: Element[]): void {
 	const $el = getElInfo(el)
 	const header = children ?? getColEls(el).slice(0, $el.colCount)
 	const len = $el.colCount
+	const elWidth = getBox(el).width
+
+
+	let fluidTotalPx = 0
+	const fluid: Record<number, number> = {}
+
+	const doCalculateFixed = $el.fixedWidths === undefined
+	const doCalculateFluid = $el.fluidWidthsAsPercentOfFluidWidth === undefined
+
+	if (doCalculateFixed) {
+		$el.fixedWidths = { [-1]: 0 } // fixedTotalWidth
+	}
+	if (doCalculateFluid) {
+		$el.fluidWidthsAsPercentOfFluidWidth = {}
+	}
+	for (let i = 0; i < len; i++) {
+		const col = header[i]
+		castType<HTMLElement>(col)
+		if (col.classList.contains("no-resize")) {
+			if (doCalculateFixed) {
+				const w = getBox(col).width
+				$el.fixedWidths![i] = w
+				$el.fixedWidths![-1]! += $el.fixedWidths![i]!
+			}
+		} else {
+			if (doCalculateFluid) {
+				const w = getBox(col).width
+				fluid[i] = w
+				fluidTotalPx += w
+			}
+		}
+	}
+
+	const totalFluidCount = len - Object.keys($el.fixedWidths!).length
+
+	if (doCalculateFluid) {
+		for (let i = 0; i < len; i++) {
+			if ($el.fixedWidths![i] !== undefined) continue
+			$el.fluidWidthsAsPercentOfFluidWidth![i] = fluid[i]! / fluidTotalPx
+		}
+	}
+
+	const fixedTotalPx = $el.fixedWidths![-1]!
+	const minFlexWidth = (totalFluidCount * $el.margin)
+	const minTotalWidth = minFlexWidth + fixedTotalPx
+
+
+	let leftOverFluidWidth = elWidth - fixedTotalPx
+	if (leftOverFluidWidth < minFlexWidth) {
+		leftOverFluidWidth = minFlexWidth
+	}
+
 	let width = 0
-	const minTotalWidth = len * $el.margin
+
 	for (let i = 0; i < len; i++) {
 		const col = header[i]
 		castType<HTMLElement>(col)
@@ -358,9 +427,24 @@ function setColWidths(el: ResizableElement, children?: Element[]): void {
 		 * only works if parent table does NOT use `box-sizing:border-box` and either has no border or does `width: calc(100% - BORDERWIDTH*2)`
 		 */
 		const colBox = getBox(col)
-
-		setWidth(col, colBox.width, el)
-		width += getBox(col).width
+		if ($el.fixedWidths![i] !== undefined) {
+			setWidth(col, $el.fixedWidths![i]!, el)
+			width += $el.fixedWidths![i]!
+		} else {
+			if ($el.fitWidth) {
+				if (!$el.widths.value[i]) {
+					setWidth(col, colBox.width, el)
+					width += getBox(col).width
+					continue
+				}
+				const newInPx = $el.fluidWidthsAsPercentOfFluidWidth![i]! * leftOverFluidWidth
+				setWidth(col, newInPx, el)
+				width += getBox(col).width
+			} else {
+				setWidth(col, colBox.width, el)
+				width += getBox(col).width
+			}
+		}
 	}
 
 	if (width < minTotalWidth) {
@@ -371,16 +455,19 @@ function setColWidths(el: ResizableElement, children?: Element[]): void {
 }
 
 function teardownColumns(el: ResizableElement): void {
-	const $el = getElInfo(el)
-
-	el.removeEventListener("pointerdown", $el.pointerDownHandler)
-	document.removeEventListener("pointermove", $el.pointerMoveHandler)
-	document.removeEventListener("pointerup", $el.pointerUpHandler)
-	for (const key of Object.keys($el)) {
-		delete $el[key as keyof typeof $el]
+	const $el = getElInfo(el, { throwIfMissing: false })
+
+	if ($el) {
+		el.removeEventListener("pointerdown", $el.pointerDownHandler)
+		document.removeEventListener("pointermove", $el.pointerMoveHandler)
+		document.removeEventListener("pointerup", $el.pointerUpHandler)
+		for (const key of Object.keys($el)) {
+			delete $el[key as keyof typeof $el]
+		}
+		$el.onTeardown?.(el)
+		elMap.delete(el)
 	}
-	elMap.delete(el)
+
 	el.classList.remove("resizable-cols-setup")
 	removeGrips(el)
-	$el.onTeardown?.(el)
 }