@bexis2/bexis2-core-ui 0.2.15 → 0.2.17

package/README.md

@@ -1,7 +1,18 @@
 # bexis-core-ui
+## v0.2.17
+- Multiselect
+  - fix target bind bug
+
+## v0.2.16
+- Table
+  - width - fit to screen
+  - Cell - drag to change the height
+  - define a height to scroll the content
+  - header allways on top whie scrolling
+
 ## v0.2.15
 - Page - centered -> min width defined
-- MultiSelect -> add crealable 
+- MultiSelect -> add clearable 
 
 ## v0.2.14
 - change fileUploaderModel to  FileUploaderType

package/dist/components/Table/Table.svelte

@@ -8,7 +8,7 @@ import {
   addTableFilter
 } from "svelte-headless-table/plugins";
 import { computePosition, autoUpdate, offset, shift, flip, arrow } from "@floating-ui/dom";
-import { storePopup } from "@skeletonlabs/skeleton";
+import { SlideToggle, storePopup } from "@skeletonlabs/skeleton";
 storePopup.set({ computePosition, autoUpdate, offset, shift, flip, arrow });
 import TableFilter from "./TableFilter.svelte";
 import TablePagination from "./TablePagination.svelte";
@@ -18,10 +18,12 @@ let {
   id: tableId,
   data,
   columns,
+  height = null,
   optionsComponent,
   defaultPageSize = 10,
   pageSizes = [5, 10, 15, 20]
 } = config;
+let fitToScreen = true;
 const dispatch = createEventDispatcher();
 const actionDispatcher = (obj) => dispatch("action", obj);
 const table = createTable(data, {
@@ -128,88 +130,101 @@ if (optionsComponent !== void 0) {
 const createdTableColumns = table.createColumns(tableColumns);
 const { headerRows, pageRows, tableAttrs, tableBodyAttrs, pluginStates } = table.createViewModel(createdTableColumns);
 const { filterValue } = pluginStates.tableFilter;
-</script>
-
-<div class="grid gap-2">
-	<div class="table-container">
-		{#if $data.length > 0}
-			<input
-				class="input p-2 mb-2 border border-primary-500"
-				type="text"
-				bind:value={$filterValue}
-				placeholder="Search rows..."
-			/>
-		{/if}
-		<table {...$tableAttrs} class="table table-compact bg-tertiary-200">
-			<thead>
-				{#each $headerRows as headerRow (headerRow.id)}
-					<Subscribe
-						rowAttrs={headerRow.attrs()}
-						let:rowAttrs
-						rowProps={headerRow.props()}
-						let:rowProps
-					>
-						<tr {...rowAttrs} class="bg-primary-300">
-							{#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">
-											<div class="flex gap-1">
-												<span
-													class:underline={props.sort.order}
-													class:normal-case={cell.id !== cell.label}
-													class:cursor-pointer={!props.sort.disabled}
-													on:click={props.sort.toggle}
-													on:keydown={props.sort.toggle}
-												>
-													{cell.render()}
-												</span>
-												<div class="w-2">
-													{#if props.sort.order === 'asc'}
-														▾
-													{:else if props.sort.order === 'desc'}
-														▴
-													{/if}
-												</div>
-											</div>
-											{#if cell.isData()}
-												{#if props.colFilter?.render}
-													<div>
-														<Render of={props.colFilter.render} />
-													</div>
-												{/if}
-											{/if}
-										</div>
-									</th>
-								</Subscribe>
-							{/each}
-						</tr>
-					</Subscribe>
-				{:else}
-					<p class="items-center justify-center flex w-full p-10 italic">Nothing to show here.</p>
-				{/each}
-			</thead>
-
-			<tbody class="" {...$tableBodyAttrs}>
-				{#each $pageRows as row (row.id)}
-					<Subscribe rowAttrs={row.attrs()} let:rowAttrs>
-						<tr {...rowAttrs}>
-							{#each row.cells as cell (cell?.id)}
-								<Subscribe attrs={cell.attrs()} let:attrs>
-									<td {...attrs} class="!p-2 w-min">
-										<div class="flex items-center w-full h-full table-cell-fit">
-											<Render of={cell.render()} />
-										</div>
-									</td>
-								</Subscribe>
-							{/each}
-						</tr>
-					</Subscribe>
-				{/each}
-			</tbody>
-		</table>
-	</div>
-	{#if $data.length > 0}
-		<TablePagination pageConfig={pluginStates.page} {pageSizes} />
-	{/if}
-</div>
+</script>
+
+<div class="grid gap-2 overflow-auto" class:w-max={!fitToScreen} class:w-full={fitToScreen}>
+	<div class="table-container">
+		{#if $data.length > 0}
+			<input
+				class="input p-2 mb-2 border border-primary-500"
+				type="text"
+				bind:value={$filterValue}
+				placeholder="Search rows..."
+			/>
+		{/if}
+		<SlideToggle
+			name="slider-label"
+			active="bg-primary-500"
+			size="sm"
+			checked={fitToScreen}
+			on:change={() => (fitToScreen = !fitToScreen)}>Fit to screen</SlideToggle
+		>
+
+		<div class="overflow-auto" style="height: {height}px">
+			<table {...$tableAttrs} class="table table-compact bg-tertiary-200 overflow-clip">
+				<thead class={height != null ? `sticky top-0` : ''}>
+					{#each $headerRows as headerRow (headerRow.id)}
+						<Subscribe
+							rowAttrs={headerRow.attrs()}
+							let:rowAttrs
+							rowProps={headerRow.props()}
+							let:rowProps
+						>
+							<tr {...rowAttrs} class="bg-primary-300">
+								{#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">
+												<div class="flex gap-1 whitespace-pre-wrap">
+													<span
+														class:underline={props.sort.order}
+														class:normal-case={cell.id !== cell.label}
+														class:cursor-pointer={!props.sort.disabled}
+														on:click={props.sort.toggle}
+														on:keydown={props.sort.toggle}
+													>
+														{cell.render()}
+													</span>
+													<div class="w-2">
+														{#if props.sort.order === 'asc'}
+															▾
+														{:else if props.sort.order === 'desc'}
+															▴
+														{/if}
+													</div>
+												</div>
+												{#if cell.isData()}
+													{#if props.colFilter?.render}
+														<div class="">
+															<Render of={props.colFilter.render} />
+														</div>
+													{/if}
+												{/if}
+											</div>
+										</th>
+									</Subscribe>
+								{/each}
+							</tr>
+						</Subscribe>
+					{:else}
+						<p class="items-center justify-center flex w-full p-10 italic">Nothing to show here.</p>
+					{/each}
+				</thead>
+
+				<tbody class="overflow-auto" {...$tableBodyAttrs}>
+					{#each $pageRows as row (row.id)}
+						<Subscribe rowAttrs={row.attrs()} let:rowAttrs>
+							<tr {...rowAttrs}>
+								{#each row.cells as cell (cell?.id)}
+									<Subscribe attrs={cell.attrs()} let:attrs>
+										<td {...attrs} class="!p-2 w-max focus:resize">
+											<div
+												class="flex items-center h-max overflow-x-auto resize-none hover:resize"
+												class:max-w-md={!fitToScreen}
+											>
+												<Render of={cell.render()} />
+											</div>
+										</td>
+									</Subscribe>
+								{/each}
+							</tr>
+						</Subscribe>
+					{/each}
+				</tbody>
+			</table>
+		</div>
+	</div>
+	{#if $data.length > 0}
+		<TablePagination pageConfig={pluginStates.page} {pageSizes} />
+	{/if}
+</div>

package/dist/components/Table/TableFilter.svelte

@@ -115,8 +115,8 @@ if (type === "object") {
 		<Fa icon={faFilter} size="12" />
 	</button>
 
-	<div data-popup={`${popupId}`}>
-		<div class="card p-3 absolute grid gap-2 shadow-lg z-10 w-min bg-base-100">
+	<div data-popup={`${popupId}`} class="z-50">
+		<div class="card p-3 grid gap-2 shadow-lg w-min bg-base-100">
 			<button
 				class="btn variant-filled-primary btn-sm"
 				type="button"

package/dist/components/form/MultiSelect.svelte

@@ -26,6 +26,7 @@
 
 	$: value = null;
 	$: updateTarget(value);
+	$:target, setValue(target);
 
 	let groupBy;
 	$: groupBy;
@@ -73,70 +74,72 @@
 	}
 
 	onMount(async () => {
-		console.log('on mount multiselect');
-		////console.log(source);
-
-		//a) source is complex model is simple
-		if (complexSource && !complexTarget && isMulti) {
-			let items = [];
-			// event.detail will be null unless isMulti is true and user has removed a single item
-			for (let i in target) {
-				let t = target[i];
-				items.push(source.find((item) => item[itemId] === t));
-			}
-
-			isLoaded = true;
-			if (items.length > 0) {
-				value = items;
-			}
-			////console.log(value);
-			groupBy = (item) => item[itemGroup];
-		}
-
-		if (complexSource && complexTarget && isMulti) {
-			value = target;
-			isLoaded = true;
-			groupBy = (item) => item[itemGroup];
-		}
-
-		//b) simple liust and simple model
-		if (!complexSource && !complexTarget && isMulti) {
-			////console.log("source", source);
-			////console.log("target",target);
-			isLoaded = true;
-			//set target only if its nit empty
-			if (target != null && target !== undefined && target != '') {
-				value = target;
-			}
-		}
+			setValue(target);
+	});
 
-		if (!isMulti) {
-			//console.log("onmount",complexSource,complexTarget,value,target)
-			if (!complexSource && !complexTarget) {
-				value = {
-					value: target,
-					label: target
-				};
+function setValue(t)
+{
+	//a) source is complex model is simple
+	if (complexSource && !complexTarget && isMulti) {
+				let items = [];
+				// event.detail will be null unless isMulti is true and user has removed a single item
+				for (let i in t) {
+					let t = target[i];
+					items.push(source.find((item) => item[itemId] === t));
+				}
+
+				isLoaded = true;
+				if (items.length > 0) {
+					value = items;
+				}
+				////console.log(value);
+				groupBy = (item) => item[itemGroup];
 			}
 
-			if (complexSource && complexTarget) {
-				value = target;
+			if (complexSource && complexTarget && isMulti) {
+				value = t;
+				isLoaded = true;
 				groupBy = (item) => item[itemGroup];
 			}
 
-			if (complexSource && !complexTarget) {
-				//value = target
-				console.log(
-					'this case is currently not supported (complexSource,complexTarget,isMulti)',
-					complexSource,
-					complexTarget,
-					isMulti
-				);
+			//b) simple liust and simple model
+			if (!complexSource && !complexTarget && isMulti) {
+				////console.log("source", source);
+				////console.log("target",target);
+				isLoaded = true;
+				//set target only if its nit empty
+				if (t != null && t !== undefined && t != '') {
+					value = t;
+				}
 			}
 
-			isLoaded = true;
-		}
-	});
+			if (!isMulti) {
+				//console.log("onmount",complexSource,complexTarget,value,target)
+				if (!complexSource && !complexTarget) {
+					value = {
+						value: t,
+						label: t
+					};
+				}
+
+				if (complexSource && complexTarget) {
+					value = t;
+					groupBy = (item) => item[itemGroup];
+				}
+
+				if (complexSource && !complexTarget) {
+					//value = target
+					console.log(
+						'this case is currently not supported (complexSource,complexTarget,isMulti)',
+						complexSource,
+						complexTarget,
+						isMulti
+					);
+				}
+
+				isLoaded = true;
+			}
+}
 </script>
 
 <InputContainer {id} label={title} {feedback} {required} {help}>

package/dist/models/Models.d.ts

@@ -81,6 +81,7 @@ export interface Columns {
 export interface TableConfig<T> {
     id: string;
     data: Writable<T[]>;
+    height?: null | number;
     columns?: Columns;
     pageSizes?: number[];
     defaultPageSize?: number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bexis2/bexis2-core-ui",
-  "version": "0.2.15",
+  "version": "0.2.17",
   "private": false,
   "scripts": {
     "dev": "vite dev",

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

@@ -1,246 +1,262 @@
-<script lang="ts">
-	import { createEventDispatcher } from 'svelte';
-	import { createTable, Subscribe, Render, createRender } from 'svelte-headless-table';
-	import {
-		addSortBy,
-		addPagination,
-		addExpandedRows,
-		addColumnFilters,
-		addTableFilter
-	} from 'svelte-headless-table/plugins';
-	import { computePosition, autoUpdate, offset, shift, flip, arrow } from '@floating-ui/dom';
-	import { storePopup } from '@skeletonlabs/skeleton';
-
-	storePopup.set({ computePosition, autoUpdate, offset, shift, flip, arrow });
-
-	import TableFilter from './TableFilter.svelte';
-	import TablePagination from './TablePagination.svelte';
-	import { columnFilter, searchFilter } from './filter';
-	import type { TableConfig } from '$lib/models/Models';
-
-	export let config: TableConfig<any>;
-	let {
-		id: tableId,
-		data,
-		columns,
-		optionsComponent,
-		defaultPageSize = 10,
-		pageSizes = [5, 10, 15, 20]
-	} = config;
-
-	type AccessorType = keyof (typeof $data)[number];
-
-	const dispatch = createEventDispatcher();
-	const actionDispatcher = (obj) => dispatch('action', obj);
-
-	const table = createTable(data, {
-		colFilter: addColumnFilters(),
-		tableFilter: addTableFilter({
-			fn: searchFilter
-		}),
-		sort: addSortBy({ disableMultiSort: true }),
-		page: addPagination({ initialPageSize: defaultPageSize }),
-		expand: addExpandedRows()
-	});
-
-	const accessors: AccessorType[] =
-		$data.length > 0 ? (Object.keys($data[0]) as AccessorType[]) : [];
-
-	const tableColumns = [
-		...accessors
-			.filter((accessor) => {
-				const key = accessor as string;
-				if (columns !== undefined && key in columns && columns[key].exclude === true) {
-					return false;
-				}
-				return true;
-			})
-			.map((accessor) => {
-				const key = accessor as string;
-				if (columns !== undefined && key in columns) {
-					const {
-						header,
-						colFilterFn,
-						colFilterComponent,
-						instructions,
-						disableFiltering = false,
-						disableSorting = false
-					} = columns[key];
-
-					const { toSortableValueFn, toFilterableValueFn, toStringFn, renderComponent } =
-						instructions ?? {};
-
-					return table.column({
-						header: header ?? key,
-						accessor: accessor,
-						cell: ({ value, row }) => {
-							return renderComponent
-								? createRender(renderComponent, { value, row })
-								: toStringFn
-								? toStringFn(value)
-								: value;
-						},
-						plugins: {
-							sort: {
-								disable: disableSorting,
-								invert: true,
-								getSortValue: (row) => {
-									return toSortableValueFn ? toSortableValueFn(row) : row;
-								}
-							},
-							colFilter: !disableFiltering
-								? {
-										fn: ({ filterValue, value }) => {
-											const val = toFilterableValueFn ? toFilterableValueFn(value) : value;
-
-											return colFilterFn
-												? colFilterFn({ filterValue, value: val })
-												: columnFilter({ filterValue, value: val });
-										},
-										render: ({ filterValue, values, id }) => {
-											return createRender(colFilterComponent ?? TableFilter, {
-												filterValue,
-												id,
-												tableId,
-												values,
-												toFilterableValueFn
-											});
-										}
-								  }
-								: undefined,
-							tableFilter: {
-								getFilterValue: (row) => {
-									return toStringFn ? toStringFn(row) : row;
-								}
-							}
-						}
-					});
-				} else {
-					return table.column({
-						header: key,
-						accessor: accessor,
-						plugins: {
-							sort: {
-								invert: true
-							},
-							colFilter: {
-								fn: columnFilter,
-								render: ({ filterValue, values, id }) =>
-									createRender(TableFilter, {
-										filterValue,
-										id,
-										tableId,
-										values
-									})
-							}
-						}
-					});
-				}
-			})
-	];
-
-	if (optionsComponent !== undefined) {
-		tableColumns.push(
-			table.display({
-				id: 'options',
-				header: '',
-				cell: ({ row }, _) => {
-					return createRender(optionsComponent!, {
-						row: row.isData() ? row.original : null,
-						dispatchFn: actionDispatcher
-					});
-				}
-			}) as any
-		);
-	}
-
-	const createdTableColumns = table.createColumns(tableColumns);
-
-	const { headerRows, pageRows, tableAttrs, tableBodyAttrs, pluginStates } =
-		table.createViewModel(createdTableColumns);
-	const { filterValue } = pluginStates.tableFilter;
-</script>
-
-<div class="grid gap-2">
-	<div class="table-container">
-		{#if $data.length > 0}
-			<input
-				class="input p-2 mb-2 border border-primary-500"
-				type="text"
-				bind:value={$filterValue}
-				placeholder="Search rows..."
-			/>
-		{/if}
-		<table {...$tableAttrs} class="table table-compact bg-tertiary-200">
-			<thead>
-				{#each $headerRows as headerRow (headerRow.id)}
-					<Subscribe
-						rowAttrs={headerRow.attrs()}
-						let:rowAttrs
-						rowProps={headerRow.props()}
-						let:rowProps
-					>
-						<tr {...rowAttrs} class="bg-primary-300">
-							{#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">
-											<div class="flex gap-1">
-												<span
-													class:underline={props.sort.order}
-													class:normal-case={cell.id !== cell.label}
-													class:cursor-pointer={!props.sort.disabled}
-													on:click={props.sort.toggle}
-													on:keydown={props.sort.toggle}
-												>
-													{cell.render()}
-												</span>
-												<div class="w-2">
-													{#if props.sort.order === 'asc'}
-														▾
-													{:else if props.sort.order === 'desc'}
-														▴
-													{/if}
-												</div>
-											</div>
-											{#if cell.isData()}
-												{#if props.colFilter?.render}
-													<div>
-														<Render of={props.colFilter.render} />
-													</div>
-												{/if}
-											{/if}
-										</div>
-									</th>
-								</Subscribe>
-							{/each}
-						</tr>
-					</Subscribe>
-				{:else}
-					<p class="items-center justify-center flex w-full p-10 italic">Nothing to show here.</p>
-				{/each}
-			</thead>
-
-			<tbody class="" {...$tableBodyAttrs}>
-				{#each $pageRows as row (row.id)}
-					<Subscribe rowAttrs={row.attrs()} let:rowAttrs>
-						<tr {...rowAttrs}>
-							{#each row.cells as cell (cell?.id)}
-								<Subscribe attrs={cell.attrs()} let:attrs>
-									<td {...attrs} class="!p-2 w-min">
-										<div class="flex items-center w-full h-full table-cell-fit">
-											<Render of={cell.render()} />
-										</div>
-									</td>
-								</Subscribe>
-							{/each}
-						</tr>
-					</Subscribe>
-				{/each}
-			</tbody>
-		</table>
-	</div>
-	{#if $data.length > 0}
-		<TablePagination pageConfig={pluginStates.page} {pageSizes} />
-	{/if}
-</div>
+<script lang="ts">
+	import { createEventDispatcher } from 'svelte';
+	import { createTable, Subscribe, Render, createRender } from 'svelte-headless-table';
+	import {
+		addSortBy,
+		addPagination,
+		addExpandedRows,
+		addColumnFilters,
+		addTableFilter
+	} from 'svelte-headless-table/plugins';
+	import { computePosition, autoUpdate, offset, shift, flip, arrow } from '@floating-ui/dom';
+	import { SlideToggle, storePopup } from '@skeletonlabs/skeleton';
+
+	storePopup.set({ computePosition, autoUpdate, offset, shift, flip, arrow });
+
+	import TableFilter from './TableFilter.svelte';
+	import TablePagination from './TablePagination.svelte';
+	import { columnFilter, searchFilter } from './filter';
+	import type { TableConfig } from '$lib/models/Models';
+
+	export let config: TableConfig<any>;
+
+	let {
+		id: tableId,
+		data,
+		columns,
+		height = null,
+		optionsComponent,
+		defaultPageSize = 10,
+		pageSizes = [5, 10, 15, 20]
+	} = config;
+	let fitToScreen = true;
+
+	type AccessorType = keyof (typeof $data)[number];
+
+	const dispatch = createEventDispatcher();
+	const actionDispatcher = (obj) => dispatch('action', obj);
+
+	const table = createTable(data, {
+		colFilter: addColumnFilters(),
+		tableFilter: addTableFilter({
+			fn: searchFilter
+		}),
+		sort: addSortBy({ disableMultiSort: true }),
+		page: addPagination({ initialPageSize: defaultPageSize }),
+		expand: addExpandedRows()
+	});
+
+	const accessors: AccessorType[] =
+		$data.length > 0 ? (Object.keys($data[0]) as AccessorType[]) : [];
+
+	const tableColumns = [
+		...accessors
+			.filter((accessor) => {
+				const key = accessor as string;
+				if (columns !== undefined && key in columns && columns[key].exclude === true) {
+					return false;
+				}
+				return true;
+			})
+			.map((accessor) => {
+				const key = accessor as string;
+				if (columns !== undefined && key in columns) {
+					const {
+						header,
+						colFilterFn,
+						colFilterComponent,
+						instructions,
+						disableFiltering = false,
+						disableSorting = false
+					} = columns[key];
+
+					const { toSortableValueFn, toFilterableValueFn, toStringFn, renderComponent } =
+						instructions ?? {};
+
+					return table.column({
+						header: header ?? key,
+						accessor: accessor,
+						cell: ({ value, row }) => {
+							return renderComponent
+								? createRender(renderComponent, { value, row })
+								: toStringFn
+								? toStringFn(value)
+								: value;
+						},
+						plugins: {
+							sort: {
+								disable: disableSorting,
+								invert: true,
+								getSortValue: (row) => {
+									return toSortableValueFn ? toSortableValueFn(row) : row;
+								}
+							},
+							colFilter: !disableFiltering
+								? {
+										fn: ({ filterValue, value }) => {
+											const val = toFilterableValueFn ? toFilterableValueFn(value) : value;
+
+											return colFilterFn
+												? colFilterFn({ filterValue, value: val })
+												: columnFilter({ filterValue, value: val });
+										},
+										render: ({ filterValue, values, id }) => {
+											return createRender(colFilterComponent ?? TableFilter, {
+												filterValue,
+												id,
+												tableId,
+												values,
+												toFilterableValueFn
+											});
+										}
+								  }
+								: undefined,
+							tableFilter: {
+								getFilterValue: (row) => {
+									return toStringFn ? toStringFn(row) : row;
+								}
+							}
+						}
+					});
+				} else {
+					return table.column({
+						header: key,
+						accessor: accessor,
+						plugins: {
+							sort: {
+								invert: true
+							},
+							colFilter: {
+								fn: columnFilter,
+								render: ({ filterValue, values, id }) =>
+									createRender(TableFilter, {
+										filterValue,
+										id,
+										tableId,
+										values
+									})
+							}
+						}
+					});
+				}
+			})
+	];
+
+	if (optionsComponent !== undefined) {
+		tableColumns.push(
+			table.display({
+				id: 'options',
+				header: '',
+				cell: ({ row }, _) => {
+					return createRender(optionsComponent!, {
+						row: row.isData() ? row.original : null,
+						dispatchFn: actionDispatcher
+					});
+				}
+			}) as any
+		);
+	}
+
+	const createdTableColumns = table.createColumns(tableColumns);
+
+	const { headerRows, pageRows, tableAttrs, tableBodyAttrs, pluginStates } =
+		table.createViewModel(createdTableColumns);
+	const { filterValue } = pluginStates.tableFilter;
+</script>
+
+<div class="grid gap-2 overflow-auto" class:w-max={!fitToScreen} class:w-full={fitToScreen}>
+	<div class="table-container">
+		{#if $data.length > 0}
+			<input
+				class="input p-2 mb-2 border border-primary-500"
+				type="text"
+				bind:value={$filterValue}
+				placeholder="Search rows..."
+			/>
+		{/if}
+		<SlideToggle
+			name="slider-label"
+			active="bg-primary-500"
+			size="sm"
+			checked={fitToScreen}
+			on:change={() => (fitToScreen = !fitToScreen)}>Fit to screen</SlideToggle
+		>
+
+		<div class="overflow-auto" style="height: {height}px">
+			<table {...$tableAttrs} class="table table-compact bg-tertiary-200 overflow-clip">
+				<thead class={height != null ? `sticky top-0` : ''}>
+					{#each $headerRows as headerRow (headerRow.id)}
+						<Subscribe
+							rowAttrs={headerRow.attrs()}
+							let:rowAttrs
+							rowProps={headerRow.props()}
+							let:rowProps
+						>
+							<tr {...rowAttrs} class="bg-primary-300">
+								{#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">
+												<div class="flex gap-1 whitespace-pre-wrap">
+													<span
+														class:underline={props.sort.order}
+														class:normal-case={cell.id !== cell.label}
+														class:cursor-pointer={!props.sort.disabled}
+														on:click={props.sort.toggle}
+														on:keydown={props.sort.toggle}
+													>
+														{cell.render()}
+													</span>
+													<div class="w-2">
+														{#if props.sort.order === 'asc'}
+															▾
+														{:else if props.sort.order === 'desc'}
+															▴
+														{/if}
+													</div>
+												</div>
+												{#if cell.isData()}
+													{#if props.colFilter?.render}
+														<div class="">
+															<Render of={props.colFilter.render} />
+														</div>
+													{/if}
+												{/if}
+											</div>
+										</th>
+									</Subscribe>
+								{/each}
+							</tr>
+						</Subscribe>
+					{:else}
+						<p class="items-center justify-center flex w-full p-10 italic">Nothing to show here.</p>
+					{/each}
+				</thead>
+
+				<tbody class="overflow-auto" {...$tableBodyAttrs}>
+					{#each $pageRows as row (row.id)}
+						<Subscribe rowAttrs={row.attrs()} let:rowAttrs>
+							<tr {...rowAttrs}>
+								{#each row.cells as cell (cell?.id)}
+									<Subscribe attrs={cell.attrs()} let:attrs>
+										<td {...attrs} class="!p-2 w-max focus:resize">
+											<div
+												class="flex items-center h-max overflow-x-auto resize-none hover:resize"
+												class:max-w-md={!fitToScreen}
+											>
+												<Render of={cell.render()} />
+											</div>
+										</td>
+									</Subscribe>
+								{/each}
+							</tr>
+						</Subscribe>
+					{/each}
+				</tbody>
+			</table>
+		</div>
+	</div>
+	{#if $data.length > 0}
+		<TablePagination pageConfig={pluginStates.page} {pageSizes} />
+	{/if}
+</div>

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

@@ -123,8 +123,8 @@
 		<Fa icon={faFilter} size="12" />
 	</button>
 
-	<div data-popup={`${popupId}`}>
-		<div class="card p-3 absolute grid gap-2 shadow-lg z-10 w-min bg-base-100">
+	<div data-popup={`${popupId}`} class="z-50">
+		<div class="card p-3 grid gap-2 shadow-lg w-min bg-base-100">
 			<button
 				class="btn variant-filled-primary btn-sm"
 				type="button"

package/src/lib/components/form/MultiSelect.svelte

@@ -26,6 +26,7 @@
 
 	$: value = null;
 	$: updateTarget(value);
+	$:target, setValue(target);
 
 	let groupBy;
 	$: groupBy;
@@ -73,70 +74,72 @@
 	}
 
 	onMount(async () => {
-		console.log('on mount multiselect');
-		////console.log(source);
-
-		//a) source is complex model is simple
-		if (complexSource && !complexTarget && isMulti) {
-			let items = [];
-			// event.detail will be null unless isMulti is true and user has removed a single item
-			for (let i in target) {
-				let t = target[i];
-				items.push(source.find((item) => item[itemId] === t));
-			}
-
-			isLoaded = true;
-			if (items.length > 0) {
-				value = items;
-			}
-			////console.log(value);
-			groupBy = (item) => item[itemGroup];
-		}
-
-		if (complexSource && complexTarget && isMulti) {
-			value = target;
-			isLoaded = true;
-			groupBy = (item) => item[itemGroup];
-		}
-
-		//b) simple liust and simple model
-		if (!complexSource && !complexTarget && isMulti) {
-			////console.log("source", source);
-			////console.log("target",target);
-			isLoaded = true;
-			//set target only if its nit empty
-			if (target != null && target !== undefined && target != '') {
-				value = target;
-			}
-		}
+			setValue(target);
+	});
 
-		if (!isMulti) {
-			//console.log("onmount",complexSource,complexTarget,value,target)
-			if (!complexSource && !complexTarget) {
-				value = {
-					value: target,
-					label: target
-				};
+function setValue(t)
+{
+	//a) source is complex model is simple
+	if (complexSource && !complexTarget && isMulti) {
+				let items = [];
+				// event.detail will be null unless isMulti is true and user has removed a single item
+				for (let i in t) {
+					let t = target[i];
+					items.push(source.find((item) => item[itemId] === t));
+				}
+
+				isLoaded = true;
+				if (items.length > 0) {
+					value = items;
+				}
+				////console.log(value);
+				groupBy = (item) => item[itemGroup];
 			}
 
-			if (complexSource && complexTarget) {
-				value = target;
+			if (complexSource && complexTarget && isMulti) {
+				value = t;
+				isLoaded = true;
 				groupBy = (item) => item[itemGroup];
 			}
 
-			if (complexSource && !complexTarget) {
-				//value = target
-				console.log(
-					'this case is currently not supported (complexSource,complexTarget,isMulti)',
-					complexSource,
-					complexTarget,
-					isMulti
-				);
+			//b) simple liust and simple model
+			if (!complexSource && !complexTarget && isMulti) {
+				////console.log("source", source);
+				////console.log("target",target);
+				isLoaded = true;
+				//set target only if its nit empty
+				if (t != null && t !== undefined && t != '') {
+					value = t;
+				}
 			}
 
-			isLoaded = true;
-		}
-	});
+			if (!isMulti) {
+				//console.log("onmount",complexSource,complexTarget,value,target)
+				if (!complexSource && !complexTarget) {
+					value = {
+						value: t,
+						label: t
+					};
+				}
+
+				if (complexSource && complexTarget) {
+					value = t;
+					groupBy = (item) => item[itemGroup];
+				}
+
+				if (complexSource && !complexTarget) {
+					//value = target
+					console.log(
+						'this case is currently not supported (complexSource,complexTarget,isMulti)',
+						complexSource,
+						complexTarget,
+						isMulti
+					);
+				}
+
+				isLoaded = true;
+			}
+}
 </script>
 
 <InputContainer {id} label={title} {feedback} {required} {help}>

package/src/lib/models/Models.ts

@@ -1,133 +1,134 @@
-import type { SvelteComponent } from 'svelte';
-import type { ColumnFilterFn } from 'svelte-headless-table/lib/plugins';
-import type { Writable } from 'svelte/store';
-
-import {decimalCharacterType, orientationType,textMarkerType,textSeperatorType} from './Enums'
-
-// page
-export interface linkType {
-	label: string;
-	url: string;
-}
-
-// Form
-export interface inputType {
-	id: string;
-	label: string;
-	feedback: string[];
-	invalid: boolean;
-	valid: boolean;
-	required: boolean;
-	placeholder: string;
-}
-
-export interface fileInfoType {
-	name: string;
-	type: string;
-	length: number;
-	description: string;
-	validationHash: string;
-}
-
-export interface fileUploaderType {
-	accept: string[];
-	existingFiles: fileInfoType[];
-	descriptionType: number;
-	multiple: boolean;
-	maxSize: number;
-}
-
-export interface asciiFileReaderInfoType extends fileReaderInfoType {
-	cells: boolean[];
-	seperator: textSeperatorType;
-	textMarker: textMarkerType;
-}
-
-
-export interface fileReaderInfoType {
-	decimal: decimalCharacterType;
-	orientation: orientationType;
-	offset: number;
-	variables: number;
-	data: number;
-	unit: number;
-	description: number;
-	dateformat: string;
-}
-
-
-export interface filesType {
-	accepted: Blob[];
-	rejected: Blob[];
-}
-
-export type userType = {
-	name: string;
-};
-
-export interface fileObjType {
-	path: string;
-	lastModified: number;
-	lastModifiedDate: Date;
-	name: string;
-	size: number;
-	type: string;
-	webkitRelativePath: string;
-}
-
-export interface ColumnInstructions {
-	toStringFn?: (value: any) => string;
-	toSortableValueFn?: (value: any) => string | number;
-	toFilterableValueFn?: (value: any) => string | number | Date;
-	renderComponent?: typeof SvelteComponent;
-}
-
-// Table column type
-export interface Column {
-	header?: string;
-	exclude?: boolean; // false by default
-	instructions?: ColumnInstructions;
-	disableFiltering?: boolean; // false by default
-	disableSorting?: boolean; // false by default
-	colFilterFn?: ColumnFilterFn;
-	colFilterComponent?: typeof SvelteComponent;
-}
-
-export interface Columns {
-	[key: string]: Column;
-}
-
-// Table config type
-export interface TableConfig<T> {
-	id: string;
-	data: Writable<T[]>;
-	columns?: Columns;
-	pageSizes?: number[];
-	defaultPageSize?: number;
-	optionsComponent?: typeof SvelteComponent;
-}
-
-// lists
-export interface keyValuePairType {
-	id: number;
-	text: string;
-}
-
-export interface listItemType {
-	id: number;
-	text: string;
-	group: string;
-}
-
-//help
-export interface helpItemType {
-	id?: string;
-	name: string;
-	description: string;
-	link?: string;
-}
-
-export interface helpStoreType {
-	itemId?: string;
-	helpItems: helpItemType[];
-}
+import type { SvelteComponent } from 'svelte';
+import type { ColumnFilterFn } from 'svelte-headless-table/lib/plugins';
+import type { Writable } from 'svelte/store';
+
+import {decimalCharacterType, orientationType,textMarkerType,textSeperatorType} from './Enums'
+
+// page
+export interface linkType {
+	label: string;
+	url: string;
+}
+
+// Form
+export interface inputType {
+	id: string;
+	label: string;
+	feedback: string[];
+	invalid: boolean;
+	valid: boolean;
+	required: boolean;
+	placeholder: string;
+}
+
+export interface fileInfoType {
+	name: string;
+	type: string;
+	length: number;
+	description: string;
+	validationHash: string;
+}
+
+export interface fileUploaderType {
+	accept: string[];
+	existingFiles: fileInfoType[];
+	descriptionType: number;
+	multiple: boolean;
+	maxSize: number;
+}
+
+export interface asciiFileReaderInfoType extends fileReaderInfoType {
+	cells: boolean[];
+	seperator: textSeperatorType;
+	textMarker: textMarkerType;
+}
+
+
+export interface fileReaderInfoType {
+	decimal: decimalCharacterType;
+	orientation: orientationType;
+	offset: number;
+	variables: number;
+	data: number;
+	unit: number;
+	description: number;
+	dateformat: string;
+}
+
+
+export interface filesType {
+	accepted: Blob[];
+	rejected: Blob[];
+}
+
+export type userType = {
+	name: string;
+};
+
+export interface fileObjType {
+	path: string;
+	lastModified: number;
+	lastModifiedDate: Date;
+	name: string;
+	size: number;
+	type: string;
+	webkitRelativePath: string;
+}
+
+export interface ColumnInstructions {
+	toStringFn?: (value: any) => string;
+	toSortableValueFn?: (value: any) => string | number;
+	toFilterableValueFn?: (value: any) => string | number | Date;
+	renderComponent?: typeof SvelteComponent;
+}
+
+// Table column type
+export interface Column {
+	header?: string;
+	exclude?: boolean; // false by default
+	instructions?: ColumnInstructions;
+	disableFiltering?: boolean; // false by default
+	disableSorting?: boolean; // false by default
+	colFilterFn?: ColumnFilterFn;
+	colFilterComponent?: typeof SvelteComponent;
+}
+
+export interface Columns {
+	[key: string]: Column;
+}
+
+// Table config type
+export interface TableConfig<T> {
+	id: string;
+	data: Writable<T[]>;
+	height?: null | number;
+	columns?: Columns;
+	pageSizes?: number[];
+	defaultPageSize?: number;
+	optionsComponent?: typeof SvelteComponent;
+}
+
+// lists
+export interface keyValuePairType {
+	id: number;
+	text: string;
+}
+
+export interface listItemType {
+	id: number;
+	text: string;
+	group: string;
+}
+
+//help
+export interface helpItemType {
+	id?: string;
+	name: string;
+	description: string;
+	link?: string;
+}
+
+export interface helpStoreType {
+	itemId?: string;
+	helpItems: helpItemType[];
+}