Table

src/app.postcss

@@ -12,3 +12,16 @@ body {
 [type='text']:focus {
 	--tw-ring-color: #00000;
 }
+
+.svelte-select, .svelte-select-list {
+	@apply dark:!bg-zinc-700 border dark:!border-zinc-500;
+}
+
+.multi-item {
+	@apply dark:!bg-zinc-500 dark:!outline-zinc-400;
+}
+
+.list-item .item.hover:not(.active):not(.list-group-title) {
+	@apply dark:!text-black;
+}
+

src/lib/components/Facets/Facets.svelte

@@ -26,7 +26,7 @@
 				ref: ShowMore,
 				props: {
 					group,
-					handleSave,
+					handleApply,
 					handleCancel
 				}
 			}
@@ -45,7 +45,7 @@
 
 	const modalStore = getModalStore();
 
-	const handleSave = (group: SelectedFacetGroup) => {
+	const handleApply = (group: SelectedFacetGroup) => {
 		const { name: groupName, children } = group;
 
 		dispatch('showMoreOpenChange', {
@@ -110,9 +110,8 @@
 		changed.length && dispatch('facetSelect', changed);
 	};
 
-	// Keeping the sorting function, but stays unused for now
 	const sortOptions = () => {
-		// Sort facets in a descending order if count exits, or sort alphabetically
+		// Sort facets in a descending order if count exits
 		Object.keys(selected).forEach((group) => {
 			const checked = Object.keys(selected[group].children)
 				.filter((item) => selected[group].children[item].selected)
@@ -121,13 +120,20 @@
 					if (a.count != undefined && b.count != undefined) {
 						return b.count - a.count;
 					}
-					return a.displayName.localeCompare(b.displayName);
+					return 0;
 				})
 				.map((item) => item.name);
 
-			const unchecked = Object.keys(selected[group].children).filter(
-				(item) => !checked.includes(item)
-			);
+			const unchecked = Object.keys(selected[group].children)
+				.filter((item) => !checked.includes(item))
+				.map((item) => selected[group].children[item])
+				.sort((a, b) => {
+					if (a.count != undefined && b.count != undefined) {
+						return b.count - a.count;
+					}
+					return 0;
+				})
+				.map((item) => item.name);
 
 			const groupIndex = displayedGroups.findIndex((g) => g.name === group);
 
@@ -172,7 +178,7 @@
 	});
 
 	$: displayedGroups = structuredClone($groups);
-	$: selectedItems, mapSelected('items'); // sortOptions(); // Sorting is not used for now
+	$: selectedItems, mapSelected('items'), sortOptions();
 	$: selectedGroups, mapSelected('groups');
 </script>
 
@@ -186,7 +192,7 @@
 			bind:checked={selectedGroups[group.name]}
 			bind:group={selectedGroups}
 		>
-			<p class="font-semibold">
+			<p class="font-semibold whitespace-nowrap">
 				{group.displayName}{group.count !== undefined ? ` (${group.count})` : ''}
 			</p>
 
@@ -204,7 +210,12 @@
 							selection
 							multiple
 						>
-							<p>{item.displayName} ({item.count})</p>
+							<div class="flex gap-2">
+								<p class="w-max grow truncate">
+									<span title={item.displayName}>{item.displayName}</span>
+								</p>
+								<span>({item.count})</span>
+							</div>
 						</TreeViewItem>
 					{/each}
 					<!-- Trigger for the Modal to view all options -->
@@ -226,7 +237,12 @@
 							selection
 							multiple
 						>
-							<p>{item.displayName} ({item.count})</p>
+							<div class="flex gap-2">
+								<p class="w-max grow truncate">
+									<span title={item.displayName}>{item.displayName}</span>
+								</p>
+								<span>({item.count})</span>
+							</div>
 						</TreeViewItem>
 					{/each}
 				{/if}

src/lib/components/Facets/ShowMore.svelte

@@ -2,7 +2,7 @@
 	import type { SelectedFacetGroup } from '$models/Models';
 
 	export let group: SelectedFacetGroup;
-	export let handleSave: (group: SelectedFacetGroup) => {};
+	export let handleApply: (group: SelectedFacetGroup) => {};
 	export let handleCancel: (groupName: string) => {};
 
 	let selected = structuredClone(group.children);
@@ -15,8 +15,8 @@
 		Object.keys(selected).forEach((key) => (selected[key].selected = false));
 	};
 
-	const onSave = () => {
-		handleSave({
+	const onApply = () => {
+		handleApply({
 			...group,
 			children: selected
 		});
@@ -29,32 +29,46 @@
 	};
 
 	const gridClass = (items: any[]) => {
-		if (items.length >= 50) {
-			return 'grid-cols-5';
-		} else if (items.length >= 30) {
-			return 'grid-cols-4';
-		} else if (items.length >= 20) {
-			return 'grid-cols-3';
-		}
+		const ceil = Math.ceil(Math.sqrt(items.length));
+		const max = Math.max(ceil, Math.floor(items.length / 3));
 
-		return 'grid-cols-2';
+		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 bg-surface-50 dark:bg-surface-800 border-primary-500 border-2">
+<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>
 
 	<!-- Items -->
 	<div
-		class="grid {gridClass(
+		class="{gridClass(
 			Object.keys(selected)
-		)} !gap-x-20 gap-y-2 py-10 px-2 max-h-[1000px] overflow-x-auto max-w-6xl"
+		)} 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">
+			<label class="flex gap-3 items-center w-48">
 				<input type="checkbox" class="checkbox" bind:checked={selected[key].selected} />
-				<span class="whitespace-nowrap break-before-avoid break-after-avoid"
+				<span
+					title={selected[key].displayName}
+					class="whitespace-nowrap break-before-avoid break-after-avoid truncate"
 					>{selected[key].displayName}</span
 				>
 			</label>
@@ -68,7 +82,7 @@
 			<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={onSave}>Save</button>
+			<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>

src/lib/components/Table/ColumnsMenu.svelte

@@ -15,6 +15,7 @@
 <button
 	type="button"
 	class="btn btn-sm variant-filled-primary rounded-full order-last"
+	aria-label="Open menu to hide/show columns"
 	use:popup={popupCombobox}>Columns</button
 >
 
@@ -25,6 +26,7 @@
 	{#each columns as column}
 		<div class="flex gap-3 items-center">
 			<input
+				aria-label="Toggle column visibility for column {column.label}"
 				type="checkbox"
 				bind:checked={column.visible}
 				disabled={columns.filter((c) => c.visible).length === 1 && column.visible}

src/lib/components/Table/TableContent.svelte

@@ -165,9 +165,9 @@
 					header: header ?? key,
 					accessor: accessor,
 					// Render the cell with the provided component, or use the toStringFn if provided, or just use the value
-					cell: ({ value, row }) => {
+					cell: ({ value, row, column }) => {
 						return renderComponent
-							? createRender(renderComponent, { value, row, dispatchFn: actionDispatcher })
+							? createRender(renderComponent, { value, row, column, dispatchFn: actionDispatcher })
 							: toStringFn
 							? toStringFn(value)
 							: value;
@@ -394,7 +394,7 @@
 						} else {
 							sendModel.q = searchValue;
 						}
-            
+
 						$filterValue = searchValue;
 					}}
 				>
@@ -409,6 +409,7 @@
 							type="reset"
 							id="{tableId}-searchReset"
 							class="absolute right-3 items-center"
+							aria-label="Clear search"
 							on:click|preventDefault={() => {
 								if (serverSide && !sendModel) {
 									throw new Error('Server-side configuration is missing');

src/lib/components/Table/TableFilter.svelte

@@ -240,6 +240,7 @@
 		type="button"
 		use:popup={popupFeatured}
 		id="{popupId}-button"
+		aria-label="Open filter menu for column {id}"
 	>
 		<Fa icon={faFilter} size="12" />
 	</button>
@@ -249,6 +250,7 @@
 			<button
 				class="btn variant-filled-primary btn-sm"
 				type="button"
+				aria-label="Clear Filters"
 				on:click|preventDefault={() => {
 					// Set the defaults when cleared
 					clearFilters();
@@ -273,6 +275,7 @@
 								{#each options[type] as option (option)}
 									<option
 										value={option.value}
+										aria-label={option.label}
 										selected={dropdown.option === option.value}
 										disabled={Object.keys($filters[id]).includes(option.value) &&
 											dropdown.option !== option.value}>{option.label}</option
@@ -282,6 +285,7 @@
 							{#if dropdowns.length > 1}
 								<div
 									class="btn variant-filled-warning btn-sm h-full"
+									aria-label="Remove filter"
 									on:click|preventDefault={() => removeFilter(dropdown.option)}
 									on:keydown|preventDefault={() => removeFilter(dropdown.option)}
 								>
@@ -296,13 +300,15 @@
 								class="input p-1 border border-primary-500"
 								on:input={(e) => valueChangeHandler(e, index)}
 								bind:value={dropdown.value}
+								aria-label="Filter value"
 							/>
 						{:else}
 							<input
 								type="date"
 								class="input p-1 border border-primary-500"
 								on:input={(e) => valueChangeHandler(e, index)}
 								bind:value={dropdown.formValue}
+								aria-label="Filter value"
 							/>
 						{/if}
 					</div>
@@ -321,13 +327,15 @@
 					on:keydown|stopPropagation={() => {
 						addFilter(remainingFilters[0].value, undefined);
 					}}
+					aria-label="Add filter"
 				>
 					<div class="flex gap-1 items-center"><Fa icon={faPlus} />Add Filter</div>
 				</div>
 			{/if}
 			<button
 				class="btn variant-filled-primary btn-sm"
 				type="button"
+				aria-label="Apply filters"
 				on:click|preventDefault={() => {
 					$pageIndex = 0;
 					$filterValue = $filters[id];

src/lib/components/Table/TableFilterServer.svelte

@@ -233,6 +233,7 @@
 		type="button"
 		use:popup={popupFeatured}
 		id="{popupId}-button"
+		aria-label="Open filter menu for column {id}"
 	>
 		<Fa icon={faFilter} size="12" />
 	</button>
@@ -242,6 +243,7 @@
 			<button
 				class="btn variant-filled-primary btn-sm"
 				type="button"
+				aria-label="Clear Filters"
 				on:click|preventDefault={() => {
 					// Set the defaults when cleared
 					clearFilters();
@@ -264,6 +266,7 @@
 								{#each options[type] as option (option)}
 									<option
 										value={option.value}
+										aria-label={option.label}
 										selected={dropdown.option === option.value}
 										disabled={Object.keys($filters[id]).includes(option.value) &&
 											dropdown.option !== option.value}>{option.label}</option
@@ -275,7 +278,8 @@
 									class="btn variant-filled-warning btn-sm h-full"
 									on:click|preventDefault={() => removeFilter(dropdown.option)}
 									on:keydown|preventDefault={() => removeFilter(dropdown.option)}
-								>
+									aria-label="Remove filter"
+									>
 									<Fa icon={faXmark} />
 								</div>
 							{/if}
@@ -294,13 +298,15 @@
 								class="input p-1 border border-primary-500"
 								on:input={(e) => valueChangeHandler(e, index)}
 								bind:value={dropdown.value}
+								aria-label="Filter value"
 							/>
 						{:else}
 							<input
 								type="date"
 								class="input p-1 border border-primary-500"
 								on:input={(e) => valueChangeHandler(e, index)}
 								bind:value={dropdown.value}
+								aria-label="Filter value"
 							/>
 						{/if}
 					</div>
@@ -313,6 +319,7 @@
 			{#if remainingFilters.length}
 				<div
 					class="btn variant-filled-secondary btn-sm cursor-pointer"
+					aria-label="Add filter"
 					on:click|stopPropagation={() => {
 						addFilter(remainingFilters[0].value, undefined);
 					}}
@@ -326,6 +333,7 @@
 			<button
 				class="btn variant-filled-primary btn-sm"
 				type="button"
+				aria-label="Apply filters"
 				on:click|preventDefault={applyFilters}>Apply</button
 			>
 		</div>