@bexis2/bexis2-core-ui 0.4.21 → 0.4.23

package/README.md

@@ -1,4 +1,18 @@
 # bexis-core-ui
+## 0.4.23
+- Table
+  - fix resizing issues after page size or page index changes
+  - Add Select All and Deselect All in columns menu
+  - Convert JSON to CSV and export as CSV
+  - Export as JSON to fix special characters and encoding issues
+
+## 0.4.22
+- Facets
+  - Replace column class function with more efficient solution
+  - Sort options in ShowMore alphabetically
+Table
+  - Add titles for components for better accessibility
+  - Remove z-index from pagination buttons
 
 ## 0.4.21
 - change footer position in page component

package/dist/components/Facets/ShowMore.svelte

@@ -1,7 +1,7 @@
 <script>export let group;
 export let handleApply;
 export let handleCancel;
-let selected = structuredClone(group.children);
+let selected = Object.keys(group.children).sort((a, b) => group.children[a].displayName.localeCompare(group.children[b].displayName)).map((key) => ({ [key]: { ...group.children[key] } })).reduce((acc, val) => ({ ...acc, ...val }), {});
 const selectAll = () => {
   Object.keys(selected).forEach((key) => selected[key].selected = true);
 };
@@ -15,64 +15,44 @@ const onApply = () => {
   });
 };
 const onCancel = () => {
-  console.log(selected, group.children);
   selected = structuredClone(group.children);
   handleCancel(group.name);
 };
-const gridClass = (items) => {
-  const ceil = Math.ceil(Math.sqrt(items.length));
-  const max = Math.max(ceil, Math.floor(items.length / 3));
-  const classes = [
-    "grid-rows-1",
-    "grid-rows-2",
-    "grid-rows-3",
-    "grid-rows-4",
-    "grid-rows-5",
-    "grid-rows-6",
-    "grid-rows-7",
-    "grid-rows-8",
-    "grid-rows-9",
-    "grid-rows-10",
-    "grid-rows-11",
-    "grid-rows-12"
-  ];
-  if (max > 12) {
-    return "grid-rows-12";
-  } else return classes[max - 1 || 1];
-};
 </script>
 
-<div class="p-5 rounded-md max-w-6xl bg-surface-50 dark:bg-surface-800 border-primary-500 border-2">
-	<!-- Header -->
-	<h2 class="text-xl font-semibold">{group.displayName}</h2>
+<div class="w-full flex justify-center max-w-[800px]">
+	<div class="grow max-h-[500px]">
+		<div
+			class="p-5 rounded-md w-full bg-surface-50 dark:bg-surface-800 border-primary-500 border-2"
+		>
+			<!-- Header -->
+			<h2 class="text-xl font-semibold">{group.displayName}</h2>
 
-	<!-- Items -->
-	<div
-		class="{gridClass(
-			Object.keys(selected)
-		)} grid grid-flow-col gap-x-10 gap-y-2 py-10 px-2 h-full overflow-x-auto"
-	>
-		{#each Object.keys(selected) as key}
-			<label class="flex gap-3 items-center w-48">
-				<input type="checkbox" class="checkbox" bind:checked={selected[key].selected} />
-				<span
-					title={selected[key].displayName}
-					class="whitespace-nowrap break-before-avoid break-after-avoid truncate"
-					>{selected[key].displayName}</span
-				>
-			</label>
-		{/each}
-	</div>
+			<!-- Items -->
+			<div class="gap-x-10 space-y-2 py-6 px-[2px] max-h-[500px] columns-[192px] overflow-auto min-h">
+				{#each Object.keys(selected) as key}
+					<label class="flex gap-3 items-center w-48">
+						<input type="checkbox" class="checkbox" bind:checked={selected[key].selected} />
+						<span
+							title={selected[key].displayName}
+							class="whitespace-nowrap break-before-avoid break-after-avoid truncate"
+							>{selected[key].displayName}</span
+						>
+					</label>
+				{/each}
+			</div>
 
-	<!-- Footer -->
-	<div class="flex w-full justify-between gap-5">
-		<div class="flex gap-3">
-			<button class="btn btn-sm variant-filled-tertiary" on:click={selectNone}>None</button>
-			<button class="btn btn-sm variant-filled-tertiary" on:click={selectAll}>All</button>
-		</div>
-		<div class="flex gap-3">
-			<button class="btn btn-sm variant-filled-primary" on:click={onApply}>Apply</button>
-			<button class="btn btn-sm variant-filled-secondary" on:click={onCancel}>Cancel</button>
+			<!-- Footer -->
+			<div class="flex w-full justify-between gap-5">
+				<div class="flex gap-3">
+					<button class="btn btn-sm variant-filled-tertiary" on:click={selectNone}>None</button>
+					<button class="btn btn-sm variant-filled-tertiary" on:click={selectAll}>All</button>
+				</div>
+				<div class="flex gap-3">
+					<button class="btn btn-sm variant-filled-primary" on:click={onApply}>Apply</button>
+					<button class="btn btn-sm variant-filled-secondary" on:click={onCancel}>Cancel</button>
+				</div>
+			</div>
 		</div>
 	</div>
 </div>

package/dist/components/Table/ColumnsMenu.svelte

@@ -1,38 +1,65 @@
-<script>import { popup } from "@skeletonlabs/skeleton";
+<script>import Fa from "svelte-fa";
+import { faEye } from "@fortawesome/free-solid-svg-icons";
+import { popup } from "@skeletonlabs/skeleton";
 export let columns = [];
 export let tableId;
 const popupCombobox = {
   event: "click",
   target: `${tableId}-columns-menu`,
-  placement: "bottom"
+  placement: "bottom",
+  closeQuery: ""
+};
+const selectAll = () => {
+  columns = columns.map((column) => ({ ...column, visible: true }));
+};
+const deselectAll = () => {
+  columns = columns.map((column) => ({ ...column, visible: false }));
+  columns[0].visible = true;
 };
 </script>
 
 <button
 	type="button"
-	title="Hide or show columns"
-	class="btn btn-sm variant-filled-primary rounded-full order-last"
+	class="btn btn-sm variant-filled-primary rounded-full order-last gap-2"
 	aria-label="Open menu to hide/show columns"
-	use:popup={popupCombobox}>Columns</button
+	use:popup={popupCombobox}><Fa icon={faEye} /> Columns</button
 >
-
 <div
-	class="bg-white dark:bg-surface-500 p-4 rounded-md shadow-md z-10"
+	class="bg-white dark:bg-surface-500 p-4 px-5 rounded-md shadow-md z-10 border border-primary-500"
 	data-popup="{tableId}-columns-menu"
 >
+	<div class="flex items-center gap-4 pb-5 grow justify-between">
+		<button
+			on:click|preventDefault={selectAll}
+			type="button"
+			class="btn p-0 text-sm grow underline text-primary-600"
+		>
+			Select All
+		</button>
+		<div class="border border-r border-neutral-200 h-6" />
+		<button
+			on:click|preventDefault={deselectAll}
+			type="button"
+			class="btn p-0 text-sm grow underline text-neutral-500"
+		>
+			Deselect All
+		</button>
+	</div>
 	{#each columns as column}
 		<div class="flex gap-3 items-center">
 			<label for={column.id} class="cursor-pointer" title={column.label}></label>
 			<input
-				aria-label="Toggle column visibility for column {column.label}"
+				aria-label={`${column.visible ? 'Hide' : 'Show'} ${column.label} column`}
 				type="checkbox"
-				id = {column.id}
+				class="checkbox"
+				id={column.id}
 				bind:checked={column.visible}
+				title={`${column.visible ? 'Hide' : 'Show'} ${column.label} column`}
 				disabled={columns.filter((c) => c.visible).length === 1 && column.visible}
 			/>
 			<span>{column.label}</span>
 		</div>
 	{/each}
 
-	<div class="arrow bg-white dark:bg-surface-500" />
+	<div class="arrow bg-white dark:bg-surface-500 border-l border-t border-primary-500" />
 </div>

package/dist/components/Table/TableContent.svelte

@@ -1,7 +1,7 @@
-<script>import { createEventDispatcher } from "svelte";
+<script>import { afterUpdate, onDestroy, createEventDispatcher } from "svelte";
 import { readable, writable } from "svelte/store";
 import Fa from "svelte-fa";
-import { faXmark } from "@fortawesome/free-solid-svg-icons";
+import { faCompress, faDownload, faXmark } from "@fortawesome/free-solid-svg-icons";
 import { createTable, Subscribe, Render, createRender } from "svelte-headless-table";
 import {
   addSortBy,
@@ -25,10 +25,12 @@ import { columnFilter, searchFilter } from "./filter";
 import {
   cellStyle,
   exportAsCsv,
+  jsonToCsv,
   fixedWidth,
   normalizeFilters,
   resetResize,
-  convertServerColumns
+  convertServerColumns,
+  minWidth
 } from "./shared";
 import { Receive, Send } from "../../models/Models";
 export let config;
@@ -63,11 +65,14 @@ let {
 } = config;
 let searchValue = "";
 let isFetching = false;
+let tableRef;
 const serverSide = server !== void 0;
 const { baseUrl, entityId, versionId, sendModel = new Send() } = server ?? {};
 const filters = writable({});
 const dispatch = createEventDispatcher();
 const actionDispatcher = (obj) => dispatch("action", obj);
+const rowHeights = writable({});
+const colWidths = writable([]);
 const serverItems = serverSide ? writable(0) : void 0;
 const serverItemCount = serverSide ? readable(0, (set) => {
   serverItems.subscribe((val) => set(val));
@@ -89,7 +94,7 @@ const table = createTable(data, {
     serverItemCount
   }),
   expand: addExpandedRows(),
-  export: addDataExport({ format: "csv" })
+  export: addDataExport({ format: "json" })
 });
 const allCols = {};
 $data.forEach((item) => {
@@ -307,6 +312,94 @@ const sortServer = (order, id) => {
   $pageIndex = 0;
   updateTable();
 };
+const getMaxCellHeightInRow = () => {
+  if (!tableRef || resizable === "columns" || resizable === "none") return;
+  tableRef.querySelectorAll("tbody tr").forEach((row, index) => {
+    const cells = row.querySelectorAll("td");
+    let maxHeight = optionsComponent ? 56 : 44;
+    let minHeight = optionsComponent ? 56 : 44;
+    cells.forEach((cell) => {
+      const cellHeight = cell.getBoundingClientRect().height;
+      if (cellHeight > maxHeight) {
+        maxHeight = cellHeight + 2;
+      }
+      if (cellHeight < minHeight) {
+        minHeight = cellHeight + 2;
+      }
+    });
+    rowHeights.update((rh) => {
+      const id = +row.id.split(`${tableId}-row-`)[1];
+      return {
+        ...rh,
+        [id]: {
+          max: maxHeight - 24,
+          min: Math.max(minHeight - 24, rowHeight ?? 20)
+        }
+      };
+    });
+  });
+};
+const getMinCellWidthInColumn = () => {
+  if (!tableRef || resizable === "rows" || resizable === "none") return;
+  if ($colWidths.length === 0) {
+    $colWidths = Array.from({ length: $headerRows[0].cells.length }, () => 100);
+  }
+  colWidths.update((cw) => {
+    tableRef?.querySelectorAll("thead tr th span").forEach((cell, index) => {
+      cw[index] = cw[index] === 100 ? cell.getBoundingClientRect().width + 12 + 32 : cw[index];
+    });
+    return cw;
+  });
+};
+const resizeRowsObserver = new ResizeObserver(() => {
+  getMaxCellHeightInRow();
+});
+const resizeColumnsObserver = new ResizeObserver(() => {
+  getMinCellWidthInColumn();
+});
+const observeFirstCells = () => {
+  if (!tableRef) return;
+  $pageRows.forEach((row) => {
+    const cell = tableRef.querySelector(`#${tableId}-row-${row.id}`);
+    if (cell) {
+      resizeRowsObserver.observe(cell);
+    }
+  });
+  tableRef.querySelectorAll("tbody tr td:first-child").forEach((cell) => {
+    resizeRowsObserver.observe(cell);
+  });
+};
+const observeHeaderColumns = () => {
+  if (!tableRef) return;
+  tableRef.querySelectorAll("thead tr th").forEach((cell) => {
+    resizeColumnsObserver.observe(cell);
+  });
+};
+afterUpdate(() => {
+  if (resizable !== "rows" && resizable !== "both") {
+    return;
+  }
+  const e = tableRef?.querySelector(`#${tableId}-row-${$pageRows[0].id}`);
+  if (e) {
+    getDimensions();
+  }
+});
+onDestroy(() => {
+  resizeRowsObserver.disconnect();
+  resizeColumnsObserver.disconnect();
+});
+const getDimensions = () => {
+  if (!tableRef) return;
+  if (resizable === "none") return;
+  else if (resizable === "columns") {
+    observeHeaderColumns();
+  } else if (resizable === "rows") {
+    observeFirstCells();
+  } else {
+    observeHeaderColumns();
+    observeFirstCells();
+  }
+};
 $: sortKeys = pluginStates.sort.sortKeys;
 $: serverSide && updateTable();
 $: serverSide && sortServer($sortKeys[0]?.order, $sortKeys[0]?.id);
@@ -337,6 +430,7 @@ $: $hiddenColumnIds = shownColumns.filter((col) => !col.visible).map((col) => co
 							title="Search within all table rows"
 							bind:value={searchValue}
 							placeholder="Search rows..."
+							aria-label="Searchbox for searching rows"
 							id="{tableId}-search"
 						/><button
 							type="reset"
@@ -361,6 +455,7 @@ $: $hiddenColumnIds = shownColumns.filter((col) => !col.visible).map((col) => co
 						title="Search"
 						id="{tableId}-searchSubmit"
 						class="btn variant-filled-primary"
+						aria-label="Search"
 						on:click|preventDefault={() => {
 							if (serverSide && !sendModel) {
 								throw new Error('Server-side configuration is missing');
@@ -375,7 +470,8 @@ $: $hiddenColumnIds = shownColumns.filter((col) => !col.visible).map((col) => co
 			{/if}
 
 			<div
-				class="flex justify-between items-center w-full {search && 'py-2'} {!search &&
+				class="flex justify-between overflow-x-auto items-center w-full {search &&
+					'py-2'} {!search &&
 					(shownColumns.length > 0 || toggle || resizable !== 'none' || exportable) &&
 					'pb-2'}"
 			>
@@ -389,6 +485,10 @@ $: $hiddenColumnIds = shownColumns.filter((col) => !col.visible).map((col) => co
 							size="sm"
 							checked={fitToScreen}
 							id="{tableId}-toggle"
+							title={fitToScreen ? 'Fit table data to screen' : `Don't fit table data to screen`}
+							aria-label={fitToScreen
+								? 'Fit table data to screen'
+								: `Don't fit table data to screen`}
 							on:change={() => (fitToScreen = !fitToScreen)}>Fit to screen</SlideToggle
 						>
 					{/if}
@@ -398,20 +498,20 @@ $: $hiddenColumnIds = shownColumns.filter((col) => !col.visible).map((col) => co
 					{#if resizable !== 'none'}
 						<button
 							type="button"
-							title="Reset column and row sizing"
-							class="btn btn-sm variant-filled-primary rounded-full order-last"
+							class="btn btn-sm variant-filled-primary rounded-full order-last flex gap-2 items-center"
+							aria-label="Reset sizing of columns and rows"
 							on:click|preventDefault={() =>
 								resetResize($headerRows, $pageRows, tableId, columns, resizable)}
-							>Reset sizing</button
+							><Fa icon={faCompress} /> Reset sizing</button
 						>
 					{/if}
 					{#if exportable}
 						<button
 							type="button"
-							title="Export table data as CSV"
-							class="btn btn-sm variant-filled-primary rounded-full order-last"
-							on:click|preventDefault={() => exportAsCsv(tableId, $exportedData)}
-							>Export as CSV</button
+							class="btn btn-sm variant-filled-primary rounded-full order-last flex items-center gap-2"
+							aria-label="Export table data as CSV"
+							on:click|preventDefault={() => exportAsCsv(tableId, jsonToCsv($exportedData))}
+							><Fa icon={faDownload} /> Export as CSV</button
 						>
 					{/if}
 					{#if shownColumns.length > 0}
@@ -422,6 +522,7 @@ $: $hiddenColumnIds = shownColumns.filter((col) => !col.visible).map((col) => co
 
 			<div class="overflow-auto" style="height: {height}px">
 				<table
+					bind:this={tableRef}
 					{...$tableAttrs}
 					class="table table-auto table-compact bg-tertiary-500/30 dark:bg-tertiary-900/10 overflow-clip"
 					id="{tableId}-table"
@@ -438,14 +539,25 @@ $: $hiddenColumnIds = shownColumns.filter((col) => !col.visible).map((col) => co
 								let:rowProps
 							>
 								<tr {...rowAttrs} class="bg-primary-300 dark:bg-primary-800">
-									{#each headerRow.cells as cell (cell.id)}
+									{#each headerRow.cells as cell, index (cell.id)}
 										<Subscribe attrs={cell.attrs()} props={cell.props()} let:props let:attrs>
-											<th scope="col" class="!p-2" {...attrs} style={cellStyle(cell.id, columns)}>
+											<th
+												scope="col"
+												class="!p-2"
+												{...attrs}
+												style={`
+													width: ${cell.isData() ? 'auto' : '0'};
+													${cellStyle(cell.id, columns)}
+												`}
+											>
 												<div
 													class="overflow-auto"
 													class:resize-x={(resizable === 'columns' || resizable === 'both') &&
 														!fixedWidth(cell.id, columns)}
 													id="th-{tableId}-{cell.id}"
+													style={`
+														min-width: ${minWidth(cell.id, columns) ? minWidth(cell.id, columns) : $colWidths[index]}px;
+													`}
 												>
 													<div class="flex justify-between items-center">
 														<div class="flex gap-1 whitespace-pre-wrap">
@@ -458,6 +570,11 @@ $: $hiddenColumnIds = shownColumns.filter((col) => !col.visible).map((col) => co
 																class:cursor-pointer={!props.sort.disabled}
 																on:click={props.sort.toggle}
 																on:keydown={props.sort.toggle}
+																title={props.sort.order === 'asc'
+																	? `Sort by ${cell.label} column in descending order`
+																	: props.sort.order === 'desc'
+																	? `Remove sorting by ${cell.label} column`
+																	: `Sort by ${cell.label} column in ascending order`}
 															>
 																{cell.render()}
 															</span>
@@ -491,20 +608,42 @@ $: $hiddenColumnIds = shownColumns.filter((col) => !col.visible).map((col) => co
 								<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">
+											<td {...attrs} class="">
 												<div
-													class=" overflow-auto h-max {index === 0 &&
+													class=" h-full {index === 0 &&
 													(resizable === 'rows' || resizable === 'both')
-														? 'resize-y'
-														: ''}"
+														? 'resize-y overflow-auto'
+														: 'block'}"
 													id="{tableId}-{cell.id}-{row.id}"
+													style={`
+														min-height: ${$rowHeights && $rowHeights[+row.id] ? `${$rowHeights[+row.id].min}px` : 'auto'};
+														max-height: ${
+															index !== 0 && $rowHeights && $rowHeights[+row.id]
+																? `${$rowHeights[+row.id].max}px`
+																: 'auto'
+														};
+														height: ${$rowHeights && $rowHeights[+row.id] ? `${$rowHeights[+row.id].min}px` : 'auto'};
+													`}
 												>
 													<!-- Adding config for initial rowHeight, if provided -->
 													<div
-														class="flex items-center overflow-auto"
-														style="height: {rowHeight ? `${rowHeight}px` : 'auto'};"
+														class="flex items-start overflow-auto"
+														style={`
+															max-height: ${$rowHeights && $rowHeights[+row.id] ? `${$rowHeights[+row.id].max}px` : 'auto'};
+														`}
 													>
-														<div class="grow h-full"><Render of={cell.render()} /></div>
+														<div
+															class="grow overflow-auto"
+															style={cell.isData()
+																? `width: ${
+																		minWidth(cell.id, columns)
+																			? minWidth(cell.id, columns)
+																			: $colWidths[index]
+																  }px;`
+																: 'max-width: min-content;'}
+														>
+															<Render of={cell.render()} />
+														</div>
 													</div>
 												</div>
 											</td>

package/dist/components/Table/TableFilter.svelte

@@ -201,7 +201,7 @@ onMount(() => {
 		type="button"
 		use:popup={popupFeatured}
 		id="{popupId}-button"
-		aria-label="Open filter menu for column {id}"
+		aria-label="Open filter menu for {id} column"
 	>
 		<Fa icon={faFilter} size="12" />
 	</button>

package/dist/components/Table/TablePagination.svelte

@@ -39,7 +39,7 @@ $: goToPreviousPageDisabled = !$hasPreviousPage;
 $: $pageSize = pageSizeDropdownValue;
 </script>
 
-<div class="flex justify-between w-full items-stretch gap-10 z-50">
+<div class="flex justify-between w-full items-stretch gap-10">
 	<div class="flex justify-start">
 		<!-- <select
 			name="pageSize"
@@ -53,7 +53,7 @@ $: $pageSize = pageSizeDropdownValue;
 		</select> -->
 
 		<button
-			aria-label="Open menu to select number of items per page"
+			aria-label="Open menu to select number of items to display per page"
 			class="btn variant-filled-primary w-20 justify-between"
 			use:popup={pageSizePopup}
 		>

package/dist/components/Table/shared.d.ts

@@ -7,6 +7,7 @@ export declare const normalizeFilters: (filters: {
     [key: string]: { [key in FilterOptionsEnum]?: number | string | Date; };
 }) => Filter[];
 export declare const exportAsCsv: (tableId: string, exportedData: string) => void;
+export declare const jsonToCsv: (data: string) => string;
 export declare const resetResize: (headerRows: any, pageRows: any, tableId: string, columns: Columns | undefined, resizable: "none" | "rows" | "columns" | "both") => void;
 export declare const missingValuesFn: (key: number | string, missingValues: {
     [key: string | number]: string;

package/dist/components/Table/shared.js

@@ -52,6 +52,31 @@ export const exportAsCsv = (tableId, exportedData) => {
     anchor.click();
     document.body.removeChild(anchor);
 };
+export const jsonToCsv = (data) => {
+    const json = JSON.parse(data);
+    if (json.length === 0)
+        return '';
+    // Extract headers (keys)
+    const headers = Object.keys(json[0]);
+    // Escape and format a single cell
+    const escapeCsvCell = (value) => {
+        if (value === null || value === undefined)
+            return '';
+        let cell = String(value);
+        // Escape quotes by doubling them, and wrap the value in quotes if it contains special characters
+        if (/[",\n]/.test(cell)) {
+            cell = `"${cell.replace(/"/g, '""')}"`;
+        }
+        return cell;
+    };
+    // Create CSV rows
+    const rows = [
+        headers.join(','), // Header row
+        ...json.map((row) => headers.map(header => escapeCsvCell(row[header])).join(',')) // Data rows
+    ];
+    // Join rows with newlines
+    return rows.join('\n');
+};
 // Resetting the resized columns and/or rows
 export const resetResize = (headerRows, pageRows, tableId, columns, resizable) => {
     // Run only if resizable is not none

package/dist/components/form/MultiSelect.svelte

@@ -71,7 +71,7 @@
 		}
 
 		if (!complexSource && !complexTarget && isLoaded && !isMulti) {
-			console.log('🚀 ~ updateTarget ~ selection:', selection);
+			//console.log('🚀 ~ updateTarget ~ selection:', selection);
 			if (selection) {
 				target = selection.value;
 			}

package/package.json

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

package/src/lib/components/Facets/ShowMore.svelte

@@ -5,7 +5,10 @@
 	export let handleApply: (group: SelectedFacetGroup) => {};
 	export let handleCancel: (groupName: string) => {};
 
-	let selected = structuredClone(group.children);
+	let selected = Object.keys(group.children)
+		.sort((a, b) => group.children[a].displayName.localeCompare(group.children[b].displayName))
+		.map((key) => ({ [key]: { ...group.children[key] } }))
+		.reduce((acc, val) => ({ ...acc, ...val }), {});
 
 	const selectAll = () => {
 		Object.keys(selected).forEach((key) => (selected[key].selected = true));
@@ -23,67 +26,44 @@
 	};
 
 	const onCancel = () => {
-		console.log(selected, group.children);
 		selected = structuredClone(group.children);
 		handleCancel(group.name);
 	};
-
-	const gridClass = (items: any[]) => {
-		const ceil = Math.ceil(Math.sqrt(items.length));
-		const max = Math.max(ceil, Math.floor(items.length / 3));
-
-		const classes = [
-			'grid-rows-1',
-			'grid-rows-2',
-			'grid-rows-3',
-			'grid-rows-4',
-			'grid-rows-5',
-			'grid-rows-6',
-			'grid-rows-7',
-			'grid-rows-8',
-			'grid-rows-9',
-			'grid-rows-10',
-			'grid-rows-11',
-			'grid-rows-12'
-		];
-
-		if (max > 12) {
-			return 'grid-rows-12';
-		} else return classes[max - 1 || 1];
-	};
 </script>
 
-<div class="p-5 rounded-md max-w-6xl bg-surface-50 dark:bg-surface-800 border-primary-500 border-2">
-	<!-- Header -->
-	<h2 class="text-xl font-semibold">{group.displayName}</h2>
+<div class="w-full flex justify-center max-w-[800px]">
+	<div class="grow max-h-[500px]">
+		<div
+			class="p-5 rounded-md w-full bg-surface-50 dark:bg-surface-800 border-primary-500 border-2"
+		>
+			<!-- Header -->
+			<h2 class="text-xl font-semibold">{group.displayName}</h2>
 
-	<!-- Items -->
-	<div
-		class="{gridClass(
-			Object.keys(selected)
-		)} grid grid-flow-col gap-x-10 gap-y-2 py-10 px-2 h-full overflow-x-auto"
-	>
-		{#each Object.keys(selected) as key}
-			<label class="flex gap-3 items-center w-48">
-				<input type="checkbox" class="checkbox" bind:checked={selected[key].selected} />
-				<span
-					title={selected[key].displayName}
-					class="whitespace-nowrap break-before-avoid break-after-avoid truncate"
-					>{selected[key].displayName}</span
-				>
-			</label>
-		{/each}
-	</div>
+			<!-- Items -->
+			<div class="gap-x-10 space-y-2 py-6 px-[2px] max-h-[500px] columns-[192px] overflow-auto min-h">
+				{#each Object.keys(selected) as key}
+					<label class="flex gap-3 items-center w-48">
+						<input type="checkbox" class="checkbox" bind:checked={selected[key].selected} />
+						<span
+							title={selected[key].displayName}
+							class="whitespace-nowrap break-before-avoid break-after-avoid truncate"
+							>{selected[key].displayName}</span
+						>
+					</label>
+				{/each}
+			</div>
 
-	<!-- Footer -->
-	<div class="flex w-full justify-between gap-5">
-		<div class="flex gap-3">
-			<button class="btn btn-sm variant-filled-tertiary" on:click={selectNone}>None</button>
-			<button class="btn btn-sm variant-filled-tertiary" on:click={selectAll}>All</button>
-		</div>
-		<div class="flex gap-3">
-			<button class="btn btn-sm variant-filled-primary" on:click={onApply}>Apply</button>
-			<button class="btn btn-sm variant-filled-secondary" on:click={onCancel}>Cancel</button>
+			<!-- Footer -->
+			<div class="flex w-full justify-between gap-5">
+				<div class="flex gap-3">
+					<button class="btn btn-sm variant-filled-tertiary" on:click={selectNone}>None</button>
+					<button class="btn btn-sm variant-filled-tertiary" on:click={selectAll}>All</button>
+				</div>
+				<div class="flex gap-3">
+					<button class="btn btn-sm variant-filled-primary" on:click={onApply}>Apply</button>
+					<button class="btn btn-sm variant-filled-secondary" on:click={onCancel}>Cancel</button>
+				</div>
+			</div>
 		</div>
 	</div>
 </div>

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

@@ -1,4 +1,6 @@
 <script lang="ts">
+	import Fa from 'svelte-fa';
+	import { faEye } from '@fortawesome/free-solid-svg-icons';
 	import { popup } from '@skeletonlabs/skeleton';
 	import type { PopupSettings } from '@skeletonlabs/skeleton';
 
@@ -8,35 +10,62 @@
 	const popupCombobox: PopupSettings = {
 		event: 'click',
 		target: `${tableId}-columns-menu`,
-		placement: 'bottom'
+		placement: 'bottom',
+		closeQuery: ''
+	};
+
+	const selectAll = () => {
+		columns = columns.map((column) => ({ ...column, visible: true }));
+	};
+
+	const deselectAll = () => {
+		columns = columns.map((column) => ({ ...column, visible: false }));
+		columns[0].visible = true;
 	};
 </script>
 
 <button
 	type="button"
-	title="Hide or show columns"
-	class="btn btn-sm variant-filled-primary rounded-full order-last"
+	class="btn btn-sm variant-filled-primary rounded-full order-last gap-2"
 	aria-label="Open menu to hide/show columns"
-	use:popup={popupCombobox}>Columns</button
+	use:popup={popupCombobox}><Fa icon={faEye} /> Columns</button
 >
-
 <div
-	class="bg-white dark:bg-surface-500 p-4 rounded-md shadow-md z-10"
+	class="bg-white dark:bg-surface-500 p-4 px-5 rounded-md shadow-md z-10 border border-primary-500"
 	data-popup="{tableId}-columns-menu"
 >
+	<div class="flex items-center gap-4 pb-5 grow justify-between">
+		<button
+			on:click|preventDefault={selectAll}
+			type="button"
+			class="btn p-0 text-sm grow underline text-primary-600"
+		>
+			Select All
+		</button>
+		<div class="border border-r border-neutral-200 h-6" />
+		<button
+			on:click|preventDefault={deselectAll}
+			type="button"
+			class="btn p-0 text-sm grow underline text-neutral-500"
+		>
+			Deselect All
+		</button>
+	</div>
 	{#each columns as column}
 		<div class="flex gap-3 items-center">
 			<label for={column.id} class="cursor-pointer" title={column.label}></label>
 			<input
-				aria-label="Toggle column visibility for column {column.label}"
+				aria-label={`${column.visible ? 'Hide' : 'Show'} ${column.label} column`}
 				type="checkbox"
-				id = {column.id}
+				class="checkbox"
+				id={column.id}
 				bind:checked={column.visible}
+				title={`${column.visible ? 'Hide' : 'Show'} ${column.label} column`}
 				disabled={columns.filter((c) => c.visible).length === 1 && column.visible}
 			/>
 			<span>{column.label}</span>
 		</div>
 	{/each}
 
-	<div class="arrow bg-white dark:bg-surface-500" />
+	<div class="arrow bg-white dark:bg-surface-500 border-l border-t border-primary-500" />
 </div>

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

@@ -1,9 +1,9 @@
 <script lang="ts">
-	import { createEventDispatcher } from 'svelte';
+	import { afterUpdate, onDestroy, createEventDispatcher } from 'svelte';
 	import { readable, writable } from 'svelte/store';
 
 	import Fa from 'svelte-fa';
-	import { faXmark } from '@fortawesome/free-solid-svg-icons';
+	import { faCompress, faDownload, faXmark } from '@fortawesome/free-solid-svg-icons';
 	import { createTable, Subscribe, Render, createRender } from 'svelte-headless-table';
 	import {
 		addSortBy,
@@ -30,10 +30,12 @@
 	import {
 		cellStyle,
 		exportAsCsv,
+		jsonToCsv,
 		fixedWidth,
 		normalizeFilters,
 		resetResize,
-		convertServerColumns
+		convertServerColumns,
+		minWidth
 	} from './shared';
 	import { Receive, Send } from '$models/Models';
 	import type { TableConfig } from '$models/Models';
@@ -61,6 +63,8 @@
 
 	let searchValue = '';
 	let isFetching = false;
+	let tableRef: HTMLTableElement;
+
 	const serverSide = server !== undefined;
 	const { baseUrl, entityId, versionId, sendModel = new Send() } = server ?? {};
 
@@ -75,6 +79,11 @@
 	const dispatch = createEventDispatcher();
 	const actionDispatcher = (obj) => dispatch('action', obj);
 
+	// Stores to hold the width and height information for resizing
+	const rowHeights = writable<{ [key: number]: { max: number; min: number } }>({});
+	const colWidths = writable<number[]>([]);
+
+	// Server-side variables
 	const serverItems = serverSide ? writable<Number>(0) : undefined;
 	const serverItemCount = serverSide
 		? readable<Number>(0, (set) => {
@@ -100,7 +109,7 @@
 			serverItemCount
 		} as PaginationConfig),
 		expand: addExpandedRows(),
-		export: addDataExport({ format: 'csv' })
+		export: addDataExport({ format: 'json' })
 	});
 
 	// A variable to hold all the keys
@@ -375,6 +384,119 @@
 		updateTable();
 	};
 
+	const getMaxCellHeightInRow = () => {
+		if (!tableRef || resizable === 'columns' || resizable === 'none') return;
+
+		tableRef.querySelectorAll('tbody tr').forEach((row, index) => {
+			const cells = row.querySelectorAll('td');
+
+			let maxHeight = optionsComponent ? 56 : 44;
+			let minHeight = optionsComponent ? 56 : 44;
+
+			cells.forEach((cell) => {
+				const cellHeight = cell.getBoundingClientRect().height;
+				// + 2 pixels for rendering borders correctly
+				if (cellHeight > maxHeight) {
+					maxHeight = cellHeight + 2;
+				}
+				if (cellHeight < minHeight) {
+					minHeight = cellHeight + 2;
+				}
+			});
+
+			rowHeights.update((rh) => {
+				const id = +row.id.split(`${tableId}-row-`)[1];
+				return {
+					...rh,
+					[id]: {
+						max: maxHeight - 24,
+						min: Math.max(minHeight - 24, rowHeight ?? 20)
+					}
+				};
+			});
+		});
+	};
+
+	const getMinCellWidthInColumn = () => {
+		if (!tableRef || resizable === 'rows' || resizable === 'none') return;
+
+		// Initialize the colWidths array if it is empty
+		if ($colWidths.length === 0) {
+			$colWidths = Array.from({ length: $headerRows[0].cells.length }, () => 100);
+		}
+
+		colWidths.update((cw) => {
+			tableRef?.querySelectorAll('thead tr th span').forEach((cell, index) => {
+				// + 12 pixels for padding and + 32 pixels for filter icon
+				// If the column width is 100, which means it has not been initialized, then calculate the width
+				cw[index] = cw[index] === 100 ? cell.getBoundingClientRect().width + 12 + 32 : cw[index];
+			});
+			return cw;
+		});
+	};
+
+	const resizeRowsObserver = new ResizeObserver(() => {
+		getMaxCellHeightInRow();
+	});
+
+	const resizeColumnsObserver = new ResizeObserver(() => {
+		getMinCellWidthInColumn();
+	});
+
+	const observeFirstCells = () => {
+		if (!tableRef) return;
+
+		$pageRows.forEach((row) => {
+			const cell = tableRef.querySelector(`#${tableId}-row-${row.id}`);
+			if (cell) {
+				resizeRowsObserver.observe(cell);
+			}
+		});
+
+		tableRef.querySelectorAll('tbody tr td:first-child').forEach((cell) => {
+			resizeRowsObserver.observe(cell);
+		});
+	};
+
+	const observeHeaderColumns = () => {
+		if (!tableRef) return;
+
+		tableRef.querySelectorAll('thead tr th').forEach((cell) => {
+			resizeColumnsObserver.observe(cell);
+		});
+	};
+
+	afterUpdate(() => {
+		if (resizable !== 'rows' && resizable !== 'both') {
+			return;
+		}
+		// Making sure tableRef is up to date and contains the new rows
+		// If it contains even one element, it means it contains them all
+		const e = tableRef?.querySelector(`#${tableId}-row-${$pageRows[0].id}`);
+		if (e) {
+			getDimensions();
+		}
+	});
+
+	// Remove the resize observer when the component is destroyed for performance reasons
+	onDestroy(() => {
+		resizeRowsObserver.disconnect();
+		resizeColumnsObserver.disconnect();
+	});
+
+	const getDimensions = () => {
+		if (!tableRef) return;
+		if (resizable === 'none') return;
+		else if (resizable === 'columns') {
+			observeHeaderColumns();
+		} else if (resizable === 'rows') {
+			observeFirstCells();
+		} else {
+			observeHeaderColumns();
+			observeFirstCells();
+		}
+	};
+
 	$: sortKeys = pluginStates.sort.sortKeys;
 	$: serverSide && updateTable();
 	$: serverSide && sortServer($sortKeys[0]?.order, $sortKeys[0]?.id);
@@ -405,6 +527,7 @@
 							title="Search within all table rows"
 							bind:value={searchValue}
 							placeholder="Search rows..."
+							aria-label="Searchbox for searching rows"
 							id="{tableId}-search"
 						/><button
 							type="reset"
@@ -429,6 +552,7 @@
 						title="Search"
 						id="{tableId}-searchSubmit"
 						class="btn variant-filled-primary"
+						aria-label="Search"
 						on:click|preventDefault={() => {
 							if (serverSide && !sendModel) {
 								throw new Error('Server-side configuration is missing');
@@ -443,7 +567,8 @@
 			{/if}
 
 			<div
-				class="flex justify-between items-center w-full {search && 'py-2'} {!search &&
+				class="flex justify-between overflow-x-auto items-center w-full {search &&
+					'py-2'} {!search &&
 					(shownColumns.length > 0 || toggle || resizable !== 'none' || exportable) &&
 					'pb-2'}"
 			>
@@ -457,6 +582,10 @@
 							size="sm"
 							checked={fitToScreen}
 							id="{tableId}-toggle"
+							title={fitToScreen ? 'Fit table data to screen' : `Don't fit table data to screen`}
+							aria-label={fitToScreen
+								? 'Fit table data to screen'
+								: `Don't fit table data to screen`}
 							on:change={() => (fitToScreen = !fitToScreen)}>Fit to screen</SlideToggle
 						>
 					{/if}
@@ -466,20 +595,20 @@
 					{#if resizable !== 'none'}
 						<button
 							type="button"
-							title="Reset column and row sizing"
-							class="btn btn-sm variant-filled-primary rounded-full order-last"
+							class="btn btn-sm variant-filled-primary rounded-full order-last flex gap-2 items-center"
+							aria-label="Reset sizing of columns and rows"
 							on:click|preventDefault={() =>
 								resetResize($headerRows, $pageRows, tableId, columns, resizable)}
-							>Reset sizing</button
+							><Fa icon={faCompress} /> Reset sizing</button
 						>
 					{/if}
 					{#if exportable}
 						<button
 							type="button"
-							title="Export table data as CSV"
-							class="btn btn-sm variant-filled-primary rounded-full order-last"
-							on:click|preventDefault={() => exportAsCsv(tableId, $exportedData)}
-							>Export as CSV</button
+							class="btn btn-sm variant-filled-primary rounded-full order-last flex items-center gap-2"
+							aria-label="Export table data as CSV"
+							on:click|preventDefault={() => exportAsCsv(tableId, jsonToCsv($exportedData))}
+							><Fa icon={faDownload} /> Export as CSV</button
 						>
 					{/if}
 					{#if shownColumns.length > 0}
@@ -490,6 +619,7 @@
 
 			<div class="overflow-auto" style="height: {height}px">
 				<table
+					bind:this={tableRef}
 					{...$tableAttrs}
 					class="table table-auto table-compact bg-tertiary-500/30 dark:bg-tertiary-900/10 overflow-clip"
 					id="{tableId}-table"
@@ -506,14 +636,25 @@
 								let:rowProps
 							>
 								<tr {...rowAttrs} class="bg-primary-300 dark:bg-primary-800">
-									{#each headerRow.cells as cell (cell.id)}
+									{#each headerRow.cells as cell, index (cell.id)}
 										<Subscribe attrs={cell.attrs()} props={cell.props()} let:props let:attrs>
-											<th scope="col" class="!p-2" {...attrs} style={cellStyle(cell.id, columns)}>
+											<th
+												scope="col"
+												class="!p-2"
+												{...attrs}
+												style={`
+													width: ${cell.isData() ? 'auto' : '0'};
+													${cellStyle(cell.id, columns)}
+												`}
+											>
 												<div
 													class="overflow-auto"
 													class:resize-x={(resizable === 'columns' || resizable === 'both') &&
 														!fixedWidth(cell.id, columns)}
 													id="th-{tableId}-{cell.id}"
+													style={`
+														min-width: ${minWidth(cell.id, columns) ? minWidth(cell.id, columns) : $colWidths[index]}px;
+													`}
 												>
 													<div class="flex justify-between items-center">
 														<div class="flex gap-1 whitespace-pre-wrap">
@@ -526,6 +667,11 @@
 																class:cursor-pointer={!props.sort.disabled}
 																on:click={props.sort.toggle}
 																on:keydown={props.sort.toggle}
+																title={props.sort.order === 'asc'
+																	? `Sort by ${cell.label} column in descending order`
+																	: props.sort.order === 'desc'
+																	? `Remove sorting by ${cell.label} column`
+																	: `Sort by ${cell.label} column in ascending order`}
 															>
 																{cell.render()}
 															</span>
@@ -559,20 +705,42 @@
 								<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">
+											<td {...attrs} class="">
 												<div
-													class=" overflow-auto h-max {index === 0 &&
+													class=" h-full {index === 0 &&
 													(resizable === 'rows' || resizable === 'both')
-														? 'resize-y'
-														: ''}"
+														? 'resize-y overflow-auto'
+														: 'block'}"
 													id="{tableId}-{cell.id}-{row.id}"
+													style={`
+														min-height: ${$rowHeights && $rowHeights[+row.id] ? `${$rowHeights[+row.id].min}px` : 'auto'};
+														max-height: ${
+															index !== 0 && $rowHeights && $rowHeights[+row.id]
+																? `${$rowHeights[+row.id].max}px`
+																: 'auto'
+														};
+														height: ${$rowHeights && $rowHeights[+row.id] ? `${$rowHeights[+row.id].min}px` : 'auto'};
+													`}
 												>
 													<!-- Adding config for initial rowHeight, if provided -->
 													<div
-														class="flex items-center overflow-auto"
-														style="height: {rowHeight ? `${rowHeight}px` : 'auto'};"
+														class="flex items-start overflow-auto"
+														style={`
+															max-height: ${$rowHeights && $rowHeights[+row.id] ? `${$rowHeights[+row.id].max}px` : 'auto'};
+														`}
 													>
-														<div class="grow h-full"><Render of={cell.render()} /></div>
+														<div
+															class="grow overflow-auto"
+															style={cell.isData()
+																? `width: ${
+																		minWidth(cell.id, columns)
+																			? minWidth(cell.id, columns)
+																			: $colWidths[index]
+																  }px;`
+																: 'max-width: min-content;'}
+														>
+															<Render of={cell.render()} />
+														</div>
 													</div>
 												</div>
 											</td>

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

@@ -240,7 +240,7 @@
 		type="button"
 		use:popup={popupFeatured}
 		id="{popupId}-button"
-		aria-label="Open filter menu for column {id}"
+		aria-label="Open filter menu for {id} column"
 	>
 		<Fa icon={faFilter} size="12" />
 	</button>

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

@@ -49,7 +49,7 @@
 	$: $pageSize = pageSizeDropdownValue;
 </script>
 
-<div class="flex justify-between w-full items-stretch gap-10 z-50">
+<div class="flex justify-between w-full items-stretch gap-10">
 	<div class="flex justify-start">
 		<!-- <select
 			name="pageSize"
@@ -63,7 +63,7 @@
 		</select> -->
 
 		<button
-			aria-label="Open menu to select number of items per page"
+			aria-label="Open menu to select number of items to display per page"
 			class="btn variant-filled-primary w-20 justify-between"
 			use:popup={pageSizePopup}
 		>

package/src/lib/components/Table/shared.ts

@@ -63,6 +63,37 @@ export const exportAsCsv = (tableId: string, exportedData: string) => {
 	document.body.removeChild(anchor);
 };
 
+export const jsonToCsv = (data: string): string => {
+	const json = JSON.parse(data);
+
+	if (json.length === 0) return '';
+
+	// Extract headers (keys)
+	const headers = Object.keys(json[0]);
+
+	// Escape and format a single cell
+	const escapeCsvCell = (value: any): string => {
+		if (value === null || value === undefined) return '';
+		let cell = String(value);
+		// Escape quotes by doubling them, and wrap the value in quotes if it contains special characters
+		if (/[",\n]/.test(cell)) {
+			cell = `"${cell.replace(/"/g, '""')}"`;
+		}
+		return cell;
+	};
+
+	// Create CSV rows
+	const rows = [
+		headers.join(','), // Header row
+		...json.map((row) =>
+			headers.map(header => escapeCsvCell(row[header])).join(',')
+		) // Data rows
+	];
+
+	// Join rows with newlines
+	return rows.join('\n');
+}
+
 // Resetting the resized columns and/or rows
 export const resetResize = (
 	headerRows: any,
@@ -114,15 +145,15 @@ export const missingValuesFn = (
 	const foundKey =
 		typeof key === 'number' && key.toString().includes('e')
 			? Object.keys(missingValues).find((item) => {
-					return (item as string).toLowerCase() === key.toString().toLowerCase();
-			  })
+				return (item as string).toLowerCase() === key.toString().toLowerCase();
+			})
 			: typeof key === 'string' && parseInt(key).toString().length !== key.length && new Date(key)
-			? Object.keys(missingValues).find(
+				? Object.keys(missingValues).find(
 					(item) => new Date(item).getTime() === new Date(key).getTime()
-			  )
-			: key in missingValues
-			? key
-			: undefined;
+				)
+				: key in missingValues
+					? key
+					: undefined;
 
 	return foundKey ? missingValues[foundKey] : key;
 };

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

@@ -71,7 +71,7 @@
 		}
 
 		if (!complexSource && !complexTarget && isLoaded && !isMulti) {
-			console.log('🚀 ~ updateTarget ~ selection:', selection);
+			//console.log('🚀 ~ updateTarget ~ selection:', selection);
 			if (selection) {
 				target = selection.value;
 			}