@bexis2/bexis2-core-ui 0.2.30 → 0.2.32

package/dist/css/themes/theme-vintage.css

@@ -1,125 +1,125 @@
-/* https://fonts.google.com/specimen/Abril+Fatface?query=Abril+Fatface&noto.query=Abril */
-@import url('https://fonts.googleapis.com/css2?family=Abril+Fatface&display=swap');
-/* https://fonts.google.com/noto/specimen/Noto+Sans?query=sans */
-@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100;0,200;0,300;0,400;1,100;1,200;1,300&display=swap');
-
-:root {
-	/* =~= Theme Styles =~= */
-	--theme-font-family-base: 'Noto Sans', sans-serif;
-	--theme-font-family-heading: 'Abril Fatface', cursive;
-	--theme-font-color-base: var(--color-primary-900);
-	--theme-font-color-dark: var(--color-primary-100);
-	--theme-rounded-base: 2px;
-	--theme-rounded-container: 4px;
-	--theme-border-base: 1px;
-	/* =~= Theme On-X Colors =~= */
-	--on-primary: 0 0 0;
-	--on-secondary: 0 0 0;
-	--on-tertiary: 0 0 0;
-	--on-success: 0 0 0;
-	--on-warning: 0 0 0;
-	--on-error: 0 0 0;
-	--on-surface: 255 255 255;
-	/* =~= Theme Colors  =~= */
-	/* primary | #ea861a */
-	--color-primary-50: 252 237 221; /* ⬅ #fceddd */
-	--color-primary-100: 251 231 209; /* ⬅ #fbe7d1 */
-	--color-primary-200: 250 225 198; /* ⬅ #fae1c6 */
-	--color-primary-300: 247 207 163; /* ⬅ #f7cfa3 */
-	--color-primary-400: 240 170 95; /* ⬅ #f0aa5f */
-	--color-primary-500: 234 134 26; /* ⬅ #ea861a */
-	--color-primary-600: 211 121 23; /* ⬅ #d37917 */
-	--color-primary-700: 176 101 20; /* ⬅ #b06514 */
-	--color-primary-800: 140 80 16; /* ⬅ #8c5010 */
-	--color-primary-900: 115 66 13; /* ⬅ #73420d */
-	/* secondary | #97cea5 */
-	--color-secondary-50: 239 248 242; /* ⬅ #eff8f2 */
-	--color-secondary-100: 234 245 237; /* ⬅ #eaf5ed */
-	--color-secondary-200: 229 243 233; /* ⬅ #e5f3e9 */
-	--color-secondary-300: 213 235 219; /* ⬅ #d5ebdb */
-	--color-secondary-400: 182 221 192; /* ⬅ #b6ddc0 */
-	--color-secondary-500: 151 206 165; /* ⬅ #97cea5 */
-	--color-secondary-600: 136 185 149; /* ⬅ #88b995 */
-	--color-secondary-700: 113 155 124; /* ⬅ #719b7c */
-	--color-secondary-800: 91 124 99; /* ⬅ #5b7c63 */
-	--color-secondary-900: 74 101 81; /* ⬅ #4a6551 */
-	/* tertiary | #06b6d4 */
-	--color-tertiary-50: 218 244 249; /* ⬅ #daf4f9 */
-	--color-tertiary-100: 205 240 246; /* ⬅ #cdf0f6 */
-	--color-tertiary-200: 193 237 244; /* ⬅ #c1edf4 */
-	--color-tertiary-300: 155 226 238; /* ⬅ #9be2ee */
-	--color-tertiary-400: 81 204 225; /* ⬅ #51cce1 */
-	--color-tertiary-500: 6 182 212; /* ⬅ #06b6d4 */
-	--color-tertiary-600: 5 164 191; /* ⬅ #05a4bf */
-	--color-tertiary-700: 5 137 159; /* ⬅ #05899f */
-	--color-tertiary-800: 4 109 127; /* ⬅ #046d7f */
-	--color-tertiary-900: 3 89 104; /* ⬅ #035968 */
-	/* success | #84cb5d */
-	--color-success-50: 237 247 231; /* ⬅ #edf7e7 */
-	--color-success-100: 230 245 223; /* ⬅ #e6f5df */
-	--color-success-200: 224 242 215; /* ⬅ #e0f2d7 */
-	--color-success-300: 206 234 190; /* ⬅ #ceeabe */
-	--color-success-400: 169 219 142; /* ⬅ #a9db8e */
-	--color-success-500: 132 203 93; /* ⬅ #84cb5d */
-	--color-success-600: 119 183 84; /* ⬅ #77b754 */
-	--color-success-700: 99 152 70; /* ⬅ #639846 */
-	--color-success-800: 79 122 56; /* ⬅ #4f7a38 */
-	--color-success-900: 65 99 46; /* ⬅ #41632e */
-	/* warning | #f2ac23 */
-	--color-warning-50: 253 243 222; /* ⬅ #fdf3de */
-	--color-warning-100: 252 238 211; /* ⬅ #fceed3 */
-	--color-warning-200: 252 234 200; /* ⬅ #fceac8 */
-	--color-warning-300: 250 222 167; /* ⬅ #fadea7 */
-	--color-warning-400: 246 197 101; /* ⬅ #f6c565 */
-	--color-warning-500: 242 172 35; /* ⬅ #f2ac23 */
-	--color-warning-600: 218 155 32; /* ⬅ #da9b20 */
-	--color-warning-700: 182 129 26; /* ⬅ #b6811a */
-	--color-warning-800: 145 103 21; /* ⬅ #916715 */
-	--color-warning-900: 119 84 17; /* ⬅ #775411 */
-	/* error | #d57e78 */
-	--color-error-50: 249 236 235; /* ⬅ #f9eceb */
-	--color-error-100: 247 229 228; /* ⬅ #f7e5e4 */
-	--color-error-200: 245 223 221; /* ⬅ #f5dfdd */
-	--color-error-300: 238 203 201; /* ⬅ #eecbc9 */
-	--color-error-400: 226 165 161; /* ⬅ #e2a5a1 */
-	--color-error-500: 213 126 120; /* ⬅ #d57e78 */
-	--color-error-600: 192 113 108; /* ⬅ #c0716c */
-	--color-error-700: 160 95 90; /* ⬅ #a05f5a */
-	--color-error-800: 128 76 72; /* ⬅ #804c48 */
-	--color-error-900: 104 62 59; /* ⬅ #683e3b */
-	/* surface | #3f3731 */
-	--color-surface-50: 226 225 224; /* ⬅ #e2e1e0 */
-	--color-surface-100: 217 215 214; /* ⬅ #d9d7d6 */
-	--color-surface-200: 207 205 204; /* ⬅ #cfcdcc */
-	--color-surface-300: 178 175 173; /* ⬅ #b2afad */
-	--color-surface-400: 121 115 111; /* ⬅ #79736f */
-	--color-surface-500: 63 55 49; /* ⬅ #3f3731 */
-	--color-surface-600: 57 50 44; /* ⬅ #39322c */
-	--color-surface-700: 47 41 37; /* ⬅ #2f2925 */
-	--color-surface-800: 38 33 29; /* ⬅ #26211d */
-	--color-surface-900: 31 27 24; /* ⬅ #1f1b18 */
-}
-
-[data-theme='vintage'] h1,
-[data-theme='vintage'] h2,
-[data-theme='vintage'] h3,
-[data-theme='vintage'] h4,
-[data-theme='vintage'] h5,
-[data-theme='vintage'] h6 {
-	letter-spacing: 1px;
-}
-
-/* Applied to body with `<body data-theme="vintage">` */
-/* Created with: https://csshero.org/mesher/ */
-[data-theme='vintage'] {
-	/* prettier-ignore */
-	background-image:
-		radial-gradient(at 100% 0%, hsla(135,34%,70%,0.20) 0px, transparent 50%),
-		radial-gradient(at 85% 100%, hsla(31,83%,50%,0.20) 0px, transparent 50%);
-}
-.dark [data-theme='vintage'] {
-	/* prettier-ignore */
-	background-image:
-		radial-gradient(at 100% 0%, hsla(135,34%,70%,0.14) 0px, transparent 50%),
-		radial-gradient(at 85% 100%, hsla(31,83%,50%,0.14) 0px, transparent 50%);
-}
+/* https://fonts.google.com/specimen/Abril+Fatface?query=Abril+Fatface&noto.query=Abril */
+@import url('https://fonts.googleapis.com/css2?family=Abril+Fatface&display=swap');
+/* https://fonts.google.com/noto/specimen/Noto+Sans?query=sans */
+@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100;0,200;0,300;0,400;1,100;1,200;1,300&display=swap');
+
+:root {
+	/* =~= Theme Styles =~= */
+	--theme-font-family-base: 'Noto Sans', sans-serif;
+	--theme-font-family-heading: 'Abril Fatface', cursive;
+	--theme-font-color-base: var(--color-primary-900);
+	--theme-font-color-dark: var(--color-primary-100);
+	--theme-rounded-base: 2px;
+	--theme-rounded-container: 4px;
+	--theme-border-base: 1px;
+	/* =~= Theme On-X Colors =~= */
+	--on-primary: 0 0 0;
+	--on-secondary: 0 0 0;
+	--on-tertiary: 0 0 0;
+	--on-success: 0 0 0;
+	--on-warning: 0 0 0;
+	--on-error: 0 0 0;
+	--on-surface: 255 255 255;
+	/* =~= Theme Colors  =~= */
+	/* primary | #ea861a */
+	--color-primary-50: 252 237 221; /* ⬅ #fceddd */
+	--color-primary-100: 251 231 209; /* ⬅ #fbe7d1 */
+	--color-primary-200: 250 225 198; /* ⬅ #fae1c6 */
+	--color-primary-300: 247 207 163; /* ⬅ #f7cfa3 */
+	--color-primary-400: 240 170 95; /* ⬅ #f0aa5f */
+	--color-primary-500: 234 134 26; /* ⬅ #ea861a */
+	--color-primary-600: 211 121 23; /* ⬅ #d37917 */
+	--color-primary-700: 176 101 20; /* ⬅ #b06514 */
+	--color-primary-800: 140 80 16; /* ⬅ #8c5010 */
+	--color-primary-900: 115 66 13; /* ⬅ #73420d */
+	/* secondary | #97cea5 */
+	--color-secondary-50: 239 248 242; /* ⬅ #eff8f2 */
+	--color-secondary-100: 234 245 237; /* ⬅ #eaf5ed */
+	--color-secondary-200: 229 243 233; /* ⬅ #e5f3e9 */
+	--color-secondary-300: 213 235 219; /* ⬅ #d5ebdb */
+	--color-secondary-400: 182 221 192; /* ⬅ #b6ddc0 */
+	--color-secondary-500: 151 206 165; /* ⬅ #97cea5 */
+	--color-secondary-600: 136 185 149; /* ⬅ #88b995 */
+	--color-secondary-700: 113 155 124; /* ⬅ #719b7c */
+	--color-secondary-800: 91 124 99; /* ⬅ #5b7c63 */
+	--color-secondary-900: 74 101 81; /* ⬅ #4a6551 */
+	/* tertiary | #06b6d4 */
+	--color-tertiary-50: 218 244 249; /* ⬅ #daf4f9 */
+	--color-tertiary-100: 205 240 246; /* ⬅ #cdf0f6 */
+	--color-tertiary-200: 193 237 244; /* ⬅ #c1edf4 */
+	--color-tertiary-300: 155 226 238; /* ⬅ #9be2ee */
+	--color-tertiary-400: 81 204 225; /* ⬅ #51cce1 */
+	--color-tertiary-500: 6 182 212; /* ⬅ #06b6d4 */
+	--color-tertiary-600: 5 164 191; /* ⬅ #05a4bf */
+	--color-tertiary-700: 5 137 159; /* ⬅ #05899f */
+	--color-tertiary-800: 4 109 127; /* ⬅ #046d7f */
+	--color-tertiary-900: 3 89 104; /* ⬅ #035968 */
+	/* success | #84cb5d */
+	--color-success-50: 237 247 231; /* ⬅ #edf7e7 */
+	--color-success-100: 230 245 223; /* ⬅ #e6f5df */
+	--color-success-200: 224 242 215; /* ⬅ #e0f2d7 */
+	--color-success-300: 206 234 190; /* ⬅ #ceeabe */
+	--color-success-400: 169 219 142; /* ⬅ #a9db8e */
+	--color-success-500: 132 203 93; /* ⬅ #84cb5d */
+	--color-success-600: 119 183 84; /* ⬅ #77b754 */
+	--color-success-700: 99 152 70; /* ⬅ #639846 */
+	--color-success-800: 79 122 56; /* ⬅ #4f7a38 */
+	--color-success-900: 65 99 46; /* ⬅ #41632e */
+	/* warning | #f2ac23 */
+	--color-warning-50: 253 243 222; /* ⬅ #fdf3de */
+	--color-warning-100: 252 238 211; /* ⬅ #fceed3 */
+	--color-warning-200: 252 234 200; /* ⬅ #fceac8 */
+	--color-warning-300: 250 222 167; /* ⬅ #fadea7 */
+	--color-warning-400: 246 197 101; /* ⬅ #f6c565 */
+	--color-warning-500: 242 172 35; /* ⬅ #f2ac23 */
+	--color-warning-600: 218 155 32; /* ⬅ #da9b20 */
+	--color-warning-700: 182 129 26; /* ⬅ #b6811a */
+	--color-warning-800: 145 103 21; /* ⬅ #916715 */
+	--color-warning-900: 119 84 17; /* ⬅ #775411 */
+	/* error | #d57e78 */
+	--color-error-50: 249 236 235; /* ⬅ #f9eceb */
+	--color-error-100: 247 229 228; /* ⬅ #f7e5e4 */
+	--color-error-200: 245 223 221; /* ⬅ #f5dfdd */
+	--color-error-300: 238 203 201; /* ⬅ #eecbc9 */
+	--color-error-400: 226 165 161; /* ⬅ #e2a5a1 */
+	--color-error-500: 213 126 120; /* ⬅ #d57e78 */
+	--color-error-600: 192 113 108; /* ⬅ #c0716c */
+	--color-error-700: 160 95 90; /* ⬅ #a05f5a */
+	--color-error-800: 128 76 72; /* ⬅ #804c48 */
+	--color-error-900: 104 62 59; /* ⬅ #683e3b */
+	/* surface | #3f3731 */
+	--color-surface-50: 226 225 224; /* ⬅ #e2e1e0 */
+	--color-surface-100: 217 215 214; /* ⬅ #d9d7d6 */
+	--color-surface-200: 207 205 204; /* ⬅ #cfcdcc */
+	--color-surface-300: 178 175 173; /* ⬅ #b2afad */
+	--color-surface-400: 121 115 111; /* ⬅ #79736f */
+	--color-surface-500: 63 55 49; /* ⬅ #3f3731 */
+	--color-surface-600: 57 50 44; /* ⬅ #39322c */
+	--color-surface-700: 47 41 37; /* ⬅ #2f2925 */
+	--color-surface-800: 38 33 29; /* ⬅ #26211d */
+	--color-surface-900: 31 27 24; /* ⬅ #1f1b18 */
+}
+
+[data-theme='vintage'] h1,
+[data-theme='vintage'] h2,
+[data-theme='vintage'] h3,
+[data-theme='vintage'] h4,
+[data-theme='vintage'] h5,
+[data-theme='vintage'] h6 {
+	letter-spacing: 1px;
+}
+
+/* Applied to body with `<body data-theme="vintage">` */
+/* Created with: https://csshero.org/mesher/ */
+[data-theme='vintage'] {
+	/* prettier-ignore */
+	background-image:
+		radial-gradient(at 100% 0%, hsla(135,34%,70%,0.20) 0px, transparent 50%),
+		radial-gradient(at 85% 100%, hsla(31,83%,50%,0.20) 0px, transparent 50%);
+}
+.dark [data-theme='vintage'] {
+	/* prettier-ignore */
+	background-image:
+		radial-gradient(at 100% 0%, hsla(135,34%,70%,0.14) 0px, transparent 50%),
+		radial-gradient(at 85% 100%, hsla(31,83%,50%,0.14) 0px, transparent 50%);
+}

package/dist/models/Models.d.ts

@@ -74,6 +74,8 @@ export interface Column {
     disableSorting?: boolean;
     colFilterFn?: ColumnFilterFn;
     colFilterComponent?: typeof SvelteComponent;
+    minWidth?: number;
+    fixedWidth?: number;
 }
 export interface Columns {
     [key: string]: Column;
@@ -81,6 +83,7 @@ export interface Columns {
 export interface TableConfig<T> {
     id: string;
     data: Writable<T[]>;
+    resizable?: 'rows' | 'columns' | 'both';
     toggle?: boolean;
     fitToScreen?: boolean;
     height?: null | number;

package/dist/services/BaseCaller.js

@@ -1,16 +1,16 @@
-// Implementations for all the calls for the pokemon endpoints.
-//import Api from "./Api";
-import { host } from '../stores/apiStores';
-
-// go to a internal action
-export const goTo = async (url, intern = true) => {
-	if (intern == true) {
-		// go to inside bexis2
-		if (window != null && host != null && url != null) {
-			window.open(host + url, '_self')?.focus();
-		}
-	} // go to a external page
-	else {
-		window.open(url, '_blank')?.focus();
-	}
-};
+// Implementations for all the calls for the pokemon endpoints.
+//import Api from "./Api";
+import { host } from '../stores/apiStores';
+
+// go to a internal action
+export const goTo = async (url, intern = true) => {
+	if (intern == true) {
+		// go to inside bexis2
+		if (window != null && host != null && url != null) {
+			window.open(host + url, '_self')?.focus();
+		}
+	} // go to a external page
+	else {
+		window.open(url, '_blank')?.focus();
+	}
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bexis2/bexis2-core-ui",
-  "version": "0.2.30",
+  "version": "0.2.32",
   "private": false,
   "scripts": {
     "dev": "vite dev",
@@ -60,6 +60,7 @@
     "@codemirror/lang-html": "^6.4.5",
     "@codemirror/lang-javascript": "^6.1.9",
     "@codemirror/lang-json": "^6.0.1",
+    "@codemirror/lint": "^6.4.2",
     "@codemirror/theme-one-dark": "^6.1.2",
     "@floating-ui/dom": "^1.2.7",
     "@fortawesome/fontawesome-free": "^6.2.1",
@@ -70,6 +71,7 @@
     "codemirror": "^6.0.1",
     "delay": "^6.0.0",
     "dotenv": "^16.3.1",
+    "eslint4b-prebuilt": "^6.7.2",
     "highlight.js": "^11.8.0",
     "highlightjs-svelte": "^1.0.6",
     "svelte": "^3.54.0",

package/src/lib/TableView.svelte

@@ -1 +1 @@
-<h1>table</h1>
+<h1>table</h1>

package/src/lib/components/CodeEditor/CodeEditor.svelte

@@ -3,16 +3,19 @@
 
 	import CodeMirror from 'svelte-codemirror-editor';
 	import Fa from 'svelte-fa/src/fa.svelte';
+	import Linter from 'eslint4b-prebuilt';
 	import { html } from '@codemirror/lang-html';
-	import { javascript } from '@codemirror/lang-javascript';
-	import { json } from '@codemirror/lang-json';
+	import { javascript, esLint } from '@codemirror/lang-javascript';
+	import { lintGutter, linter } from '@codemirror/lint';
+	import { json, jsonParseLinter } from '@codemirror/lang-json';
 	import { oneDark } from '@codemirror/theme-one-dark';
 	import { Modal, modalStore } from '@skeletonlabs/skeleton';
 	import { faMoon, faSave, faSun } from '@fortawesome/free-regular-svg-icons';
 	import { faArrowRotateLeft, faXmark } from '@fortawesome/free-solid-svg-icons';
 	import type { ThemeSpec } from 'svelte-codemirror-editor';
 	import type { ModalSettings } from '@skeletonlabs/skeleton';
-  
+	import type { Extension } from '@codemirror/state';
+
 	export let id: string;
 	export let title = '';
 	export let initialValue = '';
@@ -21,6 +24,7 @@
 	export let dark = true;
 	export let toggle = true;
 	export let actions = true;
+	export let isValid = false;
 	export let styles: ThemeSpec = {
 		'&': {
 			borderRadius: '0.5rem',
@@ -39,14 +43,43 @@
 		body: 'Unsaved changes will be lost. Are you sure you want to continue?',
 		response: (r: boolean) => (r ? (value = initialValue) : null)
 	};
-</script>
 
-<div class="items-center justify-center">
+	const extensions: Extension[] =
+		language === 'js'
+			? [linter(esLint(new Linter())), lintGutter()]
+			: language === 'json'
+			? [linter(jsonParseLinter()), lintGutter()]
+			: [];
+
+	const isValidJSON = (str: string) => {
+		try {
+			JSON.parse(str);
+		} catch (e) {
+			return false;
+		}
+		return true;
+	};
 
-	<h1 class="h1 font-semibold text-primary-500 mb-3" id="{id}-title">{title}</h1>
+	const isValidJS = (str: string) => {
+		try {
+			new Function(str);
+		} catch (e) {
+			return false;
+		}
+		return true;
+	};
+
+	$: isValid =
+		language === 'json' ? isValidJSON(value) : language === 'js' ? isValidJS(value) : true;
+</script>
+
+<div class="grid items-stretch justify-stretch gap-1">
+	<label class="label" for="{id}-editor" id="{id}-title">
+		<span>{title}</span>
+	</label>
 	<slot id="{id}-description" />
-	<div class="grid gap-1 w-full h-full mt-5">
-		<div class="rounded-lg shadow-lg w-full" id="{id}-editor">
+	<div class="grid gap-1 w-full h-full">
+		<div class="rounded-lg shadow-lg w-full overflow-auto" id="{id}-editor">
 			<CodeMirror
 				bind:value
 				lang={language === 'html'
@@ -57,11 +90,11 @@
 				theme={dark ? oneDark : null}
 				class="flex w-full"
 				{styles}
+				{extensions}
 			/>
 		</div>
 	</div>
 
-
 	<div class="flex justify-between gap-2 items-center mt-3" id="{id}-footer">
 		<div class="flex gap-2">
 			<button
@@ -96,6 +129,7 @@
 				<button
 					class="btn variant-filled-primary"
 					id="{id}-save"
+					disabled={!isValid}
 					on:click|preventDefault={() => dispatch('save')}><Fa icon={faSave} /></button
 				>
 			</div>

package/src/lib/components/ListView.svelte

@@ -1,11 +1,11 @@
-<script lang="ts">
-	type x = {
-		name: string;
-	};
-
-	let result: x = { name: 'david' };
-</script>
-
-<h1>MyList</h1>
-{result.name}
-<b>from bexis-lib</b>
+<script lang="ts">
+	type x = {
+		name: string;
+	};
+
+	let result: x = { name: 'david' };
+</script>
+
+<h1>MyList</h1>
+{result.name}
+<b>from bexis-lib</b>

package/src/lib/components/Table/Table.svelte

@@ -24,6 +24,7 @@
 		id: tableId,
 		data,
 		columns,
+		resizable = 'none',
 		height = null,
 		optionsComponent,
 		defaultPageSize = 10,
@@ -48,7 +49,7 @@
 	});
 
 	const allCols: { [key: string]: any } = {};
-	
+
 	$data.forEach((item) => {
 		Object.keys(item).forEach((key) => {
 			if (!allCols[key]) {
@@ -133,7 +134,7 @@
 						header: key,
 						accessor: accessor,
 						cell: ({ value }) => {
-							return (value === undefined) ? "" : value;
+							return value ? value : '';
 						},
 						plugins: {
 							sort: {
@@ -158,7 +159,7 @@
 	if (optionsComponent !== undefined) {
 		tableColumns.push(
 			table.display({
-				id: 'actionsColumn',
+				id: 'optionsColumn',
 				header: '',
 				cell: ({ row }, _) => {
 					return createRender(optionsComponent!, {
@@ -175,13 +176,72 @@
 	const { headerRows, pageRows, tableAttrs, tableBodyAttrs, pluginStates } =
 		table.createViewModel(createdTableColumns);
 	const { filterValue } = pluginStates.tableFilter;
+
+	const minWidth = (id: string) => {
+		if (columns && id in columns) {
+			return columns[id].minWidth ?? 0;
+		}
+		return 0;
+	};
+
+	const fixedWidth = (id: string) => {
+		if (columns && id in columns) {
+			return columns[id].fixedWidth ?? 0;
+		}
+		return 0;
+	};
+
+	const cellStyle = (id: string) => {
+		const minW = minWidth(id);
+		const fixedW = fixedWidth(id);
+		const styles: string[] = [];
+
+		minW && styles.push(`min-width: ${minW}px`);
+		fixedW && styles.push(`width: ${fixedW}px`);
+
+		return styles.join(';');
+	};
+
+	const resetResize = () => {
+		if (resizable === 'columns' || resizable === 'both') {
+			$headerRows.forEach((row) => {
+				row.cells.forEach((cell) => {
+					const minW = minWidth(cell.id);
+					const fixedW = fixedWidth(cell.id);
+
+					fixedW &&
+						document
+							.getElementById(`th-${tableId}-${cell.id}`)
+							?.style.setProperty('width', `${fixedW}px`);
+					minW &&
+						document
+							.getElementById(`th-${tableId}-${cell.id}`)
+							?.style.setProperty('min-width', `${minW}px`);
+
+					!minW &&
+						!fixedW &&
+						document.getElementById(`th-${tableId}-${cell.id}`)?.style.setProperty('width', 'auto');
+				});
+			});
+		}
+
+		if (resizable === 'rows' || resizable === 'both') {
+			$pageRows.forEach((row) => {
+				row.cells.forEach((cell) => {
+					document
+						.getElementById(`${tableId}-${cell.id}-${row.id}`)
+						?.style.setProperty('height', 'auto');
+				});
+			});
+		}
+	};
 </script>
 
 <div class="grid gap-2 overflow-auto" class:w-fit={!fitToScreen} class:w-full={fitToScreen}>
 	<div class="table-container">
 		{#if $data.length > 0}
 			<input
-				class="input p-2 mb-2 border border-primary-500"
+				class="input p-2 border border-primary-500"
 				type="text"
 				bind:value={$filterValue}
 				placeholder="Search rows..."
@@ -189,24 +249,37 @@
 			/>
 		{/if}
 
-		{#if toggle}
-			<SlideToggle
-				name="slider-label"
-				active="bg-primary-500"
-				size="sm"
-				checked={fitToScreen}
-				id="{tableId}-toggle"
-				on:change={() => (fitToScreen = !fitToScreen)}>Fit to screen</SlideToggle
-			>
-		{/if}
+		<div class="flex justify-between items-center py-2 w-full">
+			<div>
+				{#if toggle}
+					<SlideToggle
+						name="slider-label"
+						active="bg-primary-500"
+						size="sm"
+						checked={fitToScreen}
+						id="{tableId}-toggle"
+						on:change={() => (fitToScreen = !fitToScreen)}>Fit to screen</SlideToggle
+					>
+				{/if}
+			</div>
+			<div>
+				{#if resizable !== 'none'}
+					<button
+						type="button"
+						class="btn btn-sm variant-filled-primary rounded-full order-last"
+						on:click|preventDefault={resetResize}>Reset sizing</button
+					>
+				{/if}
+			</div>
+		</div>
 
 		<div class="overflow-auto" style="height: {height}px">
 			<table
 				{...$tableAttrs}
-				class="table table-compact bg-tertiary-200 overflow-clip"
+				class="table table-auto table-compact bg-tertiary-500/30 overflow-clip"
 				id="{tableId}-table"
 			>
-				<thead class={height != null ? `sticky top-0` : ''}>
+				<thead class=" {height != null ? `sticky top-0` : ''}">
 					{#each $headerRows as headerRow (headerRow.id)}
 						<Subscribe
 							rowAttrs={headerRow.attrs()}
@@ -214,11 +287,19 @@
 							rowProps={headerRow.props()}
 							let:rowProps
 						>
-							<tr {...rowAttrs} class="bg-primary-300">
+							<tr {...rowAttrs} class="bg-primary-300 items-stretch">
 								{#each headerRow.cells as cell (cell.id)}
 									<Subscribe attrs={cell.attrs()} props={cell.props()} let:props let:attrs>
-										<th scope="col" class="!p-2 w-min" {...attrs}>
-											<div class="flex w-full justify-between items-center">
+										<th
+											scope="col"
+											class="!p-2 overflow-auto"
+											class:resize-x={(resizable === 'columns' || resizable === 'both') &&
+												!fixedWidth(cell.id)}
+											{...attrs}
+											id="th-{tableId}-{cell.id}"
+											style={cellStyle(cell.id)}
+										>
+											<div class="flex justify-between items-center">
 												<div class="flex gap-1 whitespace-pre-wrap">
 													<span
 														class:underline={props.sort.order}
@@ -258,18 +339,18 @@
 				<tbody class="overflow-auto" {...$tableBodyAttrs}>
 					{#each $pageRows as row (row.id)}
 						<Subscribe rowAttrs={row.attrs()} let:rowAttrs>
-							<tr {...rowAttrs} id="{tableId}-row-{row.id}">
-								{#each row.cells as cell (cell?.id)}
+							<tr {...rowAttrs} id="{tableId}-row-{row.id}" class="">
+								{#each row.cells as cell, index (cell?.id)}
 									<Subscribe attrs={cell.attrs()} let:attrs>
 										<td
 											{...attrs}
-											class="!p-2 w-max focus:resize"
+											class="!p-2 overflow-auto {index === 0 &&
+											(resizable === 'rows' || resizable === 'both')
+												? 'resize-y'
+												: ''}"
 											id="{tableId}-{cell.id}-{row.id}"
 										>
-											<div
-												class="flex items-center h-max overflow-x-auto resize-none hover:resize"
-												class:max-w-md={!fitToScreen}
-											>
+											<div class="flex items-center h-max overflow-x-auto">
 												<Render of={cell.render()} />
 											</div>
 										</td>