@bexis2/bexis2-core-ui 0.4.13 → 0.4.15

package/README.md

@@ -1,4 +1,16 @@
 # bexis-core-ui
+## 0.4.15
+- Update Facets with new params and add onChange action
+  - Changes structure of Facets data
+  - Adds on:change action
+
+## 0.4.14
+- Table 
+  - fixes rendering issues with Table filters and different components
+  
+- Facets
+  - Exports Facets component
+
 ## 0.4.13
 - menu
   - fix code isses

package/dist/components/Facets/Facets.svelte

@@ -1,102 +1,162 @@
-<script>import { getModalStore, Modal, TreeView, TreeViewItem } from "@skeletonlabs/skeleton";
+<script>import { createEventDispatcher } from "svelte";
+import { getModalStore, Modal, TreeView, TreeViewItem } from "@skeletonlabs/skeleton";
 import ShowMore from "./ShowMore.svelte";
 export let groupSelection = false;
 export let groups;
-export let selected;
-export let selectedGroups = {};
 export let showAll = false;
 export let open = false;
+let displayedGroups = structuredClone(groups);
+let selected = groups.reduce((acc, g) => {
+  const children = g.children.reduce((acc2, c) => {
+    acc2[c.name] = {
+      ...c,
+      selected: false
+    };
+    return acc2;
+  }, {});
+  acc[g.name] = {
+    ...g,
+    children,
+    selected: false
+  };
+  return acc;
+}, {});
+let selectedItems = {};
+let selectedGroups = {};
+Object.keys(selected).forEach((groupName) => {
+  selectedItems[groupName] = {};
+  Object.keys(selected[groupName].children).forEach((itemName) => {
+    selectedItems[groupName][itemName] = false;
+  });
+  selectedGroups[groupName] = false;
+});
+const dispatch = createEventDispatcher();
 const modalStore = getModalStore();
 const showMore = (group) => {
   modalStore.trigger({
     type: "component",
-    title: `${group}`,
+    title: `${group.displayName}`,
     component: {
       ref: ShowMore,
       props: {
         group,
         handleSave,
-        handleCancel,
-        selected: selected[group],
-        items: groups[group].sort((a, b) => a.value.localeCompare(b.value))
+        handleCancel
       }
     }
   });
 };
-const handleSave = (group, selectedItems) => {
-  selected[group] = selectedItems;
+const handleSave = (group) => {
+  Object.keys(group.children).forEach((key) => {
+    selectedItems[group.name][key] = group.children[key].selected;
+  });
   modalStore.close();
 };
 const handleCancel = () => {
   modalStore.close();
 };
-const sortOptions = () => {
-  Object.keys(groups).forEach((group) => {
-    groups[group] = [
-      ...selected[group].sort((a, b) => {
-        if (a.count != void 0 && b.count != void 0) {
-          return b.count - a.count;
-        }
-        return a.value.localeCompare(b.value);
-      }),
-      ...groups[group].filter((item) => !selected[group].includes(item)).sort((a, b) => {
-        if (a.count != void 0 && b.count != void 0) {
-          return b.count - a.count;
+const mapSelected = (type) => {
+  const changed = [];
+  if (type === "items") {
+    Object.keys(selectedItems).forEach((group) => {
+      Object.keys(selectedItems[group]).forEach((item) => {
+        if (selectedItems[group][item] !== selected[group].children[item].selected) {
+          changed.push({
+            parent: group,
+            selectedItem: item
+          });
+          selected[group].children[item].selected = selectedItems[group][item];
         }
-        return a.value.localeCompare(b.value);
-      })
+      });
+    });
+  } else {
+    Object.keys(selectedGroups).forEach((group) => {
+      if (selectedGroups[group] !== selected[group].selected) {
+        changed.push({
+          parent: null,
+          selectedItem: group
+        });
+        selected[group].selected = selectedGroups[group];
+      }
+    });
+  }
+  dispatch("change", changed);
+};
+const sortOptions = () => {
+  Object.keys(selected).forEach((group) => {
+    const checked = Object.keys(selected[group].children).filter((item) => selected[group].children[item].selected).map((item) => selected[group].children[item]).sort((a, b) => {
+      if (a.count != void 0 && b.count != void 0) {
+        return b.count - a.count;
+      }
+      return a.displayName.localeCompare(b.displayName);
+    }).map((item) => item.name);
+    const unchecked = Object.keys(selected[group].children).filter(
+      (item) => !checked.includes(item)
+    );
+    const groupIndex = displayedGroups.findIndex((g) => g.name === group);
+    displayedGroups[groupIndex].children = [
+      ...checked.map(
+        (item) => displayedGroups[groupIndex].children.find((i) => i.name === item)
+      ),
+      ...unchecked.map(
+        (item) => displayedGroups[groupIndex].children.find((i) => i.name === item)
+      )
     ];
   });
 };
-$: selected, sortOptions();
+$: selectedItems, mapSelected("items"), sortOptions();
+$: selectedGroups, mapSelected("groups");
 </script>
 
 <TreeView selection={groupSelection} multiple={groupSelection} padding="p-1" hover="">
-	{#each Object.keys(groups) as group}
+	{#each displayedGroups as group}
 		<TreeViewItem
-			name="groups"
-			value={group}
+			name={group.name}
+			value={group.name}
 			{open}
 			hyphenOpacity="opacity-0"
+			bind:checked={selectedGroups[group.name]}
 			bind:group={selectedGroups}
-			bind:checked={selectedGroups[group]}
 		>
-			<p class="font-semibold">{group}</p>
+			<p class="font-semibold">{group.displayName}</p>
 
 			<svelte:fragment slot="children">
 				<!-- If more than 5 choices, show the remaining in the Modal -->
 				{#if !showAll}
-					{#each groups[group].slice(0, 5) as item}
+					{#each group.children.slice(0, 5) as item}
 						<TreeViewItem
-							bind:group={selected[group]}
-							name={group}
-							value={item}
+							bind:group={selectedItems[group.name]}
+							name={item.name}
+							value={item.displayName}
 							hyphenOpacity="opacity-0"
+							bind:checked={selectedItems[group.name][item.name]}
 							spacing="space-x-3"
 							selection
 							multiple
 						>
-							<p>{item.value} ({item.count})</p>
+							<p>{item.displayName} ({item.count})</p>
 						</TreeViewItem>
 					{/each}
 					<!-- Trigger for the Modal to view all options -->
-					{#if groups[group].length > 5}
+					{#if group.children.length > 5}
 						<TreeViewItem hyphenOpacity="opacity-0">
-							<button class="anchor" on:click={() => showMore(group)}>more</button></TreeViewItem
+							<button class="anchor" on:click={() => showMore(selected[group.name])}>more</button
+							></TreeViewItem
 						>
 					{/if}
 				{:else}
-					{#each groups[group] as item}
+					{#each group.children as item}
 						<TreeViewItem
-							bind:group={selected[group]}
-							name={group}
-							value={item}
+							bind:group={selectedItems[group.name]}
+							bind:checked={selectedItems[group.name][item.name]}
+							name={item.name}
+							value={item.displayName}
 							hyphenOpacity="opacity-0"
 							spacing="space-x-3"
 							selection
 							multiple
 						>
-							<p>{item.value} ({item.count})</p>
+							<p>{item.displayName} ({item.count})</p>
 						</TreeViewItem>
 					{/each}
 				{/if}

package/dist/components/Facets/Facets.svelte.d.ts

@@ -3,15 +3,13 @@ import type { FacetGroup } from '../../models/Models';
 declare const __propDef: {
     props: {
         groupSelection?: boolean;
-        groups: FacetGroup;
-        selected: FacetGroup;
-        selectedGroups?: {
-            [key: string]: boolean;
-        };
+        groups: FacetGroup[];
         showAll?: boolean;
         open?: boolean;
     };
     events: {
+        change: CustomEvent<any>;
+    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};

package/dist/components/Facets/ShowMore.svelte

@@ -1,36 +1,30 @@
 <script>export let group;
-export let items;
-export let selected;
 export let handleSave;
 export let handleCancel;
-let selectedItems = selected;
-const handleCheck = (e, index) => {
-  const target = e.target;
-  if (target.checked) {
-    selectedItems = [...selectedItems, items[index]];
-  } else {
-    selectedItems = selectedItems.filter((item) => item !== items[index]);
-  }
-};
+let selected = structuredClone(group.children);
 const selectAll = () => {
-  selectedItems = items;
+  Object.keys(selected).forEach((key) => selected[key].selected = true);
 };
 const selectNone = () => {
-  selectedItems = [];
+  Object.keys(selected).forEach((key) => selected[key].selected = false);
 };
 const onSave = () => {
-  handleSave(group, selectedItems);
+  handleSave({
+    ...group,
+    children: selected
+  });
 };
 const onCancel = () => {
-  selectedItems = selected;
+  console.log(selected, group.children);
+  selected = structuredClone(group.children);
   handleCancel();
 };
-const gridClass = (items2) => {
-  if (items2.length >= 50) {
+const gridClass = (items) => {
+  if (items.length >= 50) {
     return "grid-cols-5";
-  } else if (items2.length >= 30) {
+  } else if (items.length >= 30) {
     return "grid-cols-4";
-  } else if (items2.length >= 20) {
+  } else if (items.length >= 20) {
     return "grid-cols-3";
   }
   return "grid-cols-2";
@@ -39,24 +33,20 @@ const gridClass = (items2) => {
 
 <div class="p-5 rounded-md bg-surface-50 dark:bg-surface-800 border-primary-500 border-2">
 	<!-- Header -->
-	<h2 class="text-xl font-semibold">{group}</h2>
+	<h2 class="text-xl font-semibold">{group.displayName}</h2>
 
 	<!-- Items -->
 	<div
 		class="grid {gridClass(
-			items
+			Object.keys(selected)
 		)} !gap-x-20 gap-y-2 py-10 px-2 max-h-[1000px] overflow-x-auto max-w-6xl"
 	>
-		{#each items as item, index}
+		{#each Object.keys(selected) as key}
 			<label class="flex gap-3 items-center">
-				<input
-					type="checkbox"
-					class="checkbox"
-					value={item.value}
-					on:click={(e) => handleCheck(e, index)}
-					checked={selectedItems.includes(item)}
-				/>
-				<span class="whitespace-nowrap break-before-avoid break-after-avoid">{item.value}</span>
+				<input type="checkbox" class="checkbox" bind:checked={selected[key].selected} />
+				<span class="whitespace-nowrap break-before-avoid break-after-avoid"
+					>{selected[key].displayName}</span
+				>
 			</label>
 		{/each}
 	</div>

package/dist/components/Facets/ShowMore.svelte.d.ts

@@ -1,11 +1,9 @@
 import { SvelteComponent } from "svelte";
-import type { FacetOption } from '../../models/Models';
+import type { SelectedFacetGroup } from '../../models/Models';
 declare const __propDef: {
     props: {
-        group: string;
-        items: FacetOption[];
-        selected: FacetOption[];
-        handleSave: (group: string, selectedItems: FacetOption[]) => {};
+        group: SelectedFacetGroup;
+        handleSave: (group: SelectedFacetGroup) => {};
         handleCancel: () => {};
     };
     events: {

package/dist/components/Table/TableContent.svelte

@@ -64,7 +64,7 @@ let {
 let searchValue = "";
 let isFetching = false;
 const serverSide = server !== void 0;
-const { baseUrl, sendModel, entityId, versionId } = server ?? {};
+const { baseUrl, entityId, versionId, sendModel = new Send() } = server ?? {};
 const filters = writable({});
 const dispatch = createEventDispatcher();
 const actionDispatcher = (obj) => dispatch("action", obj);
@@ -361,7 +361,11 @@ $: $hiddenColumnIds = shownColumns.filter((col) => !col.visible).map((col) => co
 				</form>
 			{/if}
 
-			<div class="flex justify-between items-center w-full {search && 'py-2'}">
+			<div
+				class="flex justify-between items-center w-full {search && 'py-2'} {!search &&
+					(shownColumns.length > 0 || toggle || resizable !== 'none' || exportable) &&
+					'pb-2'}"
+			>
 				<div>
 					<!-- Enable the fitToScreen toggle if toggle === true -->
 					{#if toggle}

package/dist/components/Table/TableFilter.svelte

@@ -205,7 +205,7 @@ onMount(() => {
 		<Fa icon={faFilter} size="12" />
 	</button>
 
-	<div data-popup={popupId} id={popupId} class="">
+	<div data-popup={popupId} id={popupId} class="z-50">
 		<div class="card p-3 grid gap-2 shadow-lg w-max bg-base-100">
 			<button
 				class="btn variant-filled-primary btn-sm"

package/dist/index.d.ts

@@ -19,6 +19,7 @@ import Table from './components/Table/Table.svelte';
 import TableFilter from './components/Table/TableFilter.svelte';
 import { columnFilter, searchFilter } from './components/Table/filter';
 import type { TableConfig, Columns, Column } from './models/Models';
+import Facets from './components/Facets/Facets.svelte';
 import CodeEditor from './components/CodeEditor/CodeEditor.svelte';
 import Notification from './components/page/Notification.svelte';
 import TablePlaceholder from './components/page/TablePlaceholder.svelte';
@@ -38,6 +39,7 @@ export { Notification };
 export { TablePlaceholder };
 export { positionType, pageContentLayoutType, decimalCharacterType, orientationType, textMarkerType, textSeperatorType } from './models/Enums';
 export { Table, TableFilter, columnFilter, searchFilter };
+export { Facets };
 export { CodeEditor };
 export type { TableConfig, Columns, Column };
 export { bexis2theme };

package/dist/index.js

@@ -24,6 +24,8 @@ import TextArea from './components/form/TextArea.svelte';
 import Table from './components/Table/Table.svelte';
 import TableFilter from './components/Table/TableFilter.svelte';
 import { columnFilter, searchFilter } from './components/Table/filter';
+//Facets
+import Facets from './components/Facets/Facets.svelte';
 // CodeEditor
 import CodeEditor from './components/CodeEditor/CodeEditor.svelte';
 //notification
@@ -53,6 +55,8 @@ export { TablePlaceholder };
 export { positionType, pageContentLayoutType, decimalCharacterType, orientationType, textMarkerType, textSeperatorType } from './models/Enums';
 // Table
 export { Table, TableFilter, columnFilter, searchFilter };
+// Facets
+export { Facets };
 // CodeEditor
 export { CodeEditor };
 // theme

package/dist/models/Models.d.ts

@@ -82,7 +82,7 @@ export interface Columns {
 }
 export type ServerConfig = {
     baseUrl?: string;
-    sendModel: Send;
+    sendModel?: Send;
     entityId?: number;
     versionId?: number;
 };
@@ -151,13 +151,26 @@ export type Filter = {
     filterBy: FilterOptionsEnum;
     value: string | number | Date | boolean;
 };
-export type FacetOption = {
-    value: string;
+export interface FacetOption {
+    name: string;
+    displayName: string;
     count?: number;
-};
-export type FacetGroup = {
-    [key: string]: FacetOption[];
-};
+}
+export interface FacetGroup {
+    name: string;
+    displayName: string;
+    children: FacetOption[];
+    count?: number;
+}
+export interface SelectedFacetOption extends FacetOption {
+    selected: boolean;
+}
+export interface SelectedFacetGroup extends Omit<FacetGroup, 'children'> {
+    selected: boolean;
+    children: {
+        [key: string]: SelectedFacetOption;
+    };
+}
 export declare class Send {
     id: number;
     limit: number;

package/dist/models/Models.js

@@ -34,10 +34,9 @@ export class errorType {
     error;
     stackTrace;
     constructor() {
-        this.statusText = "";
+        this.statusText = '';
         this.status = 0;
-        this.error = "";
-        this.stackTrace = "";
+        this.error = '';
+        this.stackTrace = '';
     }
 }
-;

package/package.json

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

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

@@ -1,36 +1,71 @@
 <script lang="ts">
+	import { createEventDispatcher } from 'svelte';
 	import { getModalStore, Modal, TreeView, TreeViewItem } from '@skeletonlabs/skeleton';
 
 	import ShowMore from './ShowMore.svelte';
-	import type { FacetOption, FacetGroup } from '$models/Models';
+	import type { FacetGroup, SelectedFacetGroup } from '$models/Models';
 
 	export let groupSelection = false;
-	export let groups: FacetGroup;
-	export let selected: FacetGroup;
-	export let selectedGroups: { [key: string]: boolean } = {};
+	export let groups: FacetGroup[];
 	export let showAll = false;
 	export let open = false;
 
+	let displayedGroups = structuredClone(groups);
+
+	let selected: { [key: string]: SelectedFacetGroup } = groups.reduce((acc, g) => {
+		const children = g.children.reduce((acc, c) => {
+			acc[c.name] = {
+				...c,
+				selected: false
+			};
+			return acc;
+		}, {});
+
+		acc[g.name] = {
+			...g,
+			children,
+			selected: false
+		};
+
+		return acc;
+	}, {});
+	let selectedItems: {
+		[key: string]: {
+			[key: string]: boolean;
+		};
+	} = {};
+	let selectedGroups: { [key: string]: boolean } = {};
+
+	Object.keys(selected).forEach((groupName) => {
+		selectedItems[groupName] = {};
+		Object.keys(selected[groupName].children).forEach((itemName) => {
+			selectedItems[groupName][itemName] = false;
+		});
+		selectedGroups[groupName] = false;
+	});
+
+	const dispatch = createEventDispatcher();
+	
 	const modalStore = getModalStore();
-	const showMore = (group: string) => {
+	const showMore = (group: SelectedFacetGroup) => {
 		modalStore.trigger({
 			type: 'component',
-			title: `${group}`,
+			title: `${group.displayName}`,
 			component: {
 				ref: ShowMore,
 				props: {
 					group,
 					handleSave,
-					handleCancel,
-					selected: selected[group],
-					items: groups[group].sort((a, b) => a.value.localeCompare(b.value))
+					handleCancel
 				}
 			}
 		});
 	};
 
-	const handleSave = (group: string, selectedItems: FacetOption[]) => {
-		selected[group] = selectedItems;
+	const handleSave = (group: SelectedFacetGroup) => {
+		Object.keys(group.children).forEach((key) => {
+			selectedItems[group.name][key] = group.children[key].selected;
+		});
 		modalStore.close();
 	};
 
@@ -38,77 +73,120 @@
 		modalStore.close();
 	};
 
+	const mapSelected = (type: 'items' | 'groups') => {
+		const changed: any = [];
+
+		if (type === 'items') {
+			Object.keys(selectedItems).forEach((group) => {
+				Object.keys(selectedItems[group]).forEach((item) => {
+					if (selectedItems[group][item] !== selected[group].children[item].selected) {
+						changed.push({
+							parent: group,
+							selectedItem: item
+						});
+						selected[group].children[item].selected = selectedItems[group][item];
+					}
+				});
+			});
+		} else {
+			Object.keys(selectedGroups).forEach((group) => {
+				if (selectedGroups[group] !== selected[group].selected) {
+					changed.push({
+						parent: null,
+						selectedItem: group
+					});
+					selected[group].selected = selectedGroups[group];
+				}
+			});
+		}
+
+		dispatch('change', changed);
+	};
+
 	const sortOptions = () => {
 		// Sort facets in a descending order if count exits, or sort alphabetically
-		Object.keys(groups).forEach((group) => {
-			groups[group] = [
-				...selected[group].sort((a, b) => {
+		Object.keys(selected).forEach((group) => {
+			const checked = Object.keys(selected[group].children)
+				.filter((item) => selected[group].children[item].selected)
+				.map((item) => selected[group].children[item])
+				.sort((a, b) => {
 					if (a.count != undefined && b.count != undefined) {
 						return b.count - a.count;
 					}
-					return a.value.localeCompare(b.value);
-				}),
-				...groups[group]
-					.filter((item) => !selected[group].includes(item))
-					.sort((a, b) => {
-						if (a.count != undefined && b.count != undefined) {
-							return b.count - a.count;
-						}
-						return a.value.localeCompare(b.value);
-					})
+					return a.displayName.localeCompare(b.displayName);
+				})
+				.map((item) => item.name);
+
+			const unchecked = Object.keys(selected[group].children).filter(
+				(item) => !checked.includes(item)
+			);
+
+			const groupIndex = displayedGroups.findIndex((g) => g.name === group);
+
+			displayedGroups[groupIndex].children = [
+				...checked.map(
+					(item) => displayedGroups[groupIndex].children.find((i) => i.name === item)!
+				),
+				...unchecked.map(
+					(item) => displayedGroups[groupIndex].children.find((i) => i.name === item)!
+				)
 			];
 		});
 	};
 
-	$: selected, sortOptions();
+	$: selectedItems, mapSelected('items'), sortOptions();
+	$: selectedGroups, mapSelected('groups');
 </script>
 
 <TreeView selection={groupSelection} multiple={groupSelection} padding="p-1" hover="">
-	{#each Object.keys(groups) as group}
+	{#each displayedGroups as group}
 		<TreeViewItem
-			name="groups"
-			value={group}
+			name={group.name}
+			value={group.name}
 			{open}
 			hyphenOpacity="opacity-0"
+			bind:checked={selectedGroups[group.name]}
 			bind:group={selectedGroups}
-			bind:checked={selectedGroups[group]}
 		>
-			<p class="font-semibold">{group}</p>
+			<p class="font-semibold">{group.displayName}</p>
 
 			<svelte:fragment slot="children">
 				<!-- If more than 5 choices, show the remaining in the Modal -->
 				{#if !showAll}
-					{#each groups[group].slice(0, 5) as item}
+					{#each group.children.slice(0, 5) as item}
 						<TreeViewItem
-							bind:group={selected[group]}
-							name={group}
-							value={item}
+							bind:group={selectedItems[group.name]}
+							name={item.name}
+							value={item.displayName}
 							hyphenOpacity="opacity-0"
+							bind:checked={selectedItems[group.name][item.name]}
 							spacing="space-x-3"
 							selection
 							multiple
 						>
-							<p>{item.value} ({item.count})</p>
+							<p>{item.displayName} ({item.count})</p>
 						</TreeViewItem>
 					{/each}
 					<!-- Trigger for the Modal to view all options -->
-					{#if groups[group].length > 5}
+					{#if group.children.length > 5}
 						<TreeViewItem hyphenOpacity="opacity-0">
-							<button class="anchor" on:click={() => showMore(group)}>more</button></TreeViewItem
+							<button class="anchor" on:click={() => showMore(selected[group.name])}>more</button
+							></TreeViewItem
 						>
 					{/if}
 				{:else}
-					{#each groups[group] as item}
+					{#each group.children as item}
 						<TreeViewItem
-							bind:group={selected[group]}
-							name={group}
-							value={item}
+							bind:group={selectedItems[group.name]}
+							bind:checked={selectedItems[group.name][item.name]}
+							name={item.name}
+							value={item.displayName}
 							hyphenOpacity="opacity-0"
 							spacing="space-x-3"
 							selection
 							multiple
 						>
-							<p>{item.value} ({item.count})</p>
+							<p>{item.displayName} ({item.count})</p>
 						</TreeViewItem>
 					{/each}
 				{/if}

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

@@ -1,42 +1,34 @@
 <script lang="ts">
-	import type { FacetOption } from '$models/Models';
+	import type { SelectedFacetGroup } from '$models/Models';
 
-	export let group: string; // Group name
-	export let items: FacetOption[]; // All possible choices
-	export let selected: FacetOption[]; // Initially selected items
-	export let handleSave: (group: string, selectedItems: FacetOption[]) => {};
+	export let group: SelectedFacetGroup;
+	export let handleSave: (group: SelectedFacetGroup) => {};
 	export let handleCancel: () => {};
 
-	// This local variable is needed for resetting the Modal when the user cancels selection.
-	let selectedItems = selected; // Selected items in the Modal.
-
-	const handleCheck = (e, index: number) => {
-		const target = e.target as HTMLInputElement;
-		if (target.checked) {
-			selectedItems = [...selectedItems, items[index]];
-		} else {
-			selectedItems = selectedItems.filter((item) => item !== items[index]);
-		}
-	};
+	let selected = structuredClone(group.children);
 
 	const selectAll = () => {
-		selectedItems = items;
+		Object.keys(selected).forEach((key) => (selected[key].selected = true));
 	};
 
 	const selectNone = () => {
-		selectedItems = [];
+		Object.keys(selected).forEach((key) => (selected[key].selected = false));
 	};
 
 	const onSave = () => {
-		handleSave(group, selectedItems);
+		handleSave({
+			...group,
+			children: selected
+		});
 	};
 
 	const onCancel = () => {
-		selectedItems = selected;
+		console.log(selected, group.children);
+		selected = structuredClone(group.children);
 		handleCancel();
 	};
 
-	const gridClass = (items: FacetOption[]) => {
+	const gridClass = (items: any[]) => {
 		if (items.length >= 50) {
 			return 'grid-cols-5';
 		} else if (items.length >= 30) {
@@ -51,24 +43,20 @@
 
 <div class="p-5 rounded-md bg-surface-50 dark:bg-surface-800 border-primary-500 border-2">
 	<!-- Header -->
-	<h2 class="text-xl font-semibold">{group}</h2>
+	<h2 class="text-xl font-semibold">{group.displayName}</h2>
 
 	<!-- Items -->
 	<div
 		class="grid {gridClass(
-			items
+			Object.keys(selected)
 		)} !gap-x-20 gap-y-2 py-10 px-2 max-h-[1000px] overflow-x-auto max-w-6xl"
 	>
-		{#each items as item, index}
+		{#each Object.keys(selected) as key}
 			<label class="flex gap-3 items-center">
-				<input
-					type="checkbox"
-					class="checkbox"
-					value={item.value}
-					on:click={(e) => handleCheck(e, index)}
-					checked={selectedItems.includes(item)}
-				/>
-				<span class="whitespace-nowrap break-before-avoid break-after-avoid">{item.value}</span>
+				<input type="checkbox" class="checkbox" bind:checked={selected[key].selected} />
+				<span class="whitespace-nowrap break-before-avoid break-after-avoid"
+					>{selected[key].displayName}</span
+				>
 			</label>
 		{/each}
 	</div>

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

@@ -62,7 +62,7 @@
 	let searchValue = '';
 	let isFetching = false;
 	const serverSide = server !== undefined;
-	const { baseUrl, sendModel, entityId, versionId } = server ?? {};
+	const { baseUrl, entityId, versionId, sendModel = new Send() } = server ?? {};
 
 	const filters = writable<{
 		[key: string]: { [key in FilterOptionsEnum]?: number | string | Date };
@@ -429,7 +429,11 @@
 				</form>
 			{/if}
 
-			<div class="flex justify-between items-center w-full {search && 'py-2'}">
+			<div
+				class="flex justify-between items-center w-full {search && 'py-2'} {!search &&
+					(shownColumns.length > 0 || toggle || resizable !== 'none' || exportable) &&
+					'pb-2'}"
+			>
 				<div>
 					<!-- Enable the fitToScreen toggle if toggle === true -->
 					{#if toggle}

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

@@ -244,7 +244,7 @@
 		<Fa icon={faFilter} size="12" />
 	</button>
 
-	<div data-popup={popupId} id={popupId} class="">
+	<div data-popup={popupId} id={popupId} class="z-50">
 		<div class="card p-3 grid gap-2 shadow-lg w-max bg-base-100">
 			<button
 				class="btn variant-filled-primary btn-sm"

package/src/lib/index.ts

@@ -30,6 +30,9 @@ import TableFilter from './components/Table/TableFilter.svelte';
 import { columnFilter, searchFilter } from './components/Table/filter';
 import type { TableConfig, Columns, Column } from './models/Models';
 
+//Facets
+import Facets from './components/Facets/Facets.svelte';
+
 // CodeEditor
 import CodeEditor from './components/CodeEditor/CodeEditor.svelte';
 
@@ -103,6 +106,9 @@ export {
 // Table
 export { Table, TableFilter, columnFilter, searchFilter };
 
+// Facets
+export { Facets };
+
 // CodeEditor
 export { CodeEditor };
 

package/src/lib/models/Models.ts

@@ -104,10 +104,10 @@ export interface Columns {
 	[key: string]: Column;
 }
 
-// Server config type for the table 
+// Server config type for the table
 export type ServerConfig = {
 	baseUrl?: string; // Base URL for server-side table
-	sendModel: Send; // Send model for server-side table
+	sendModel?: Send; // Send model for server-side table
 	entityId?: number; // Entity ID for server-side table
 	versionId?: number; // Version ID for server-side table
 };
@@ -124,7 +124,7 @@ export interface TableConfig<T> {
 	rowHeight?: number; // auto by default
 	columns?: Columns;
 	exportable?: boolean; // false by default
-	pageSizes?: number[]; // [5, 10, 15, 20] by default
+	pageSizes?: number[]; // [5, 10, 20, 50, 100] by default
 	defaultPageSize?: number; // 10 by default
 	optionsComponent?: typeof SvelteComponent;
 
@@ -191,14 +191,29 @@ export type Filter = {
 	value: string | number | Date | boolean;
 };
 
-export type FacetOption = {
-	value: string;
+export interface FacetOption {
+	name: string;
+	displayName: string;
 	count?: number;
-};
+}
 
-export type FacetGroup = {
-	[key: string]: FacetOption[];
-};
+export interface FacetGroup {
+	name: string;
+	displayName: string;
+	children: FacetOption[];
+	count?: number;
+}
+
+export interface SelectedFacetOption extends FacetOption {
+	selected: boolean;
+}
+
+export interface SelectedFacetGroup extends Omit<FacetGroup, 'children'> {
+	selected: boolean;
+	children: {
+		[key: string]: SelectedFacetOption;
+	};
+}
 
 export class Send {
 	id: number;
@@ -237,14 +252,13 @@ export class Receive {
 export class errorType {
 	statusText: string;
 	status: number;
-	error:string;
-	stackTrace:string
+	error: string;
+	stackTrace: string;
 
 	constructor() {
-		this.statusText = "";
+		this.statusText = '';
 		this.status = 0;
-		this.error = "";
-		this.stackTrace = "";
+		this.error = '';
+		this.stackTrace = '';
 	}
-
-};
+}