diff --git a/src/docs/navigation_link.ts b/src/docs/navigation_link.ts
index 57a43abc..09f2eb14 100644
--- a/src/docs/navigation_link.ts
+++ b/src/docs/navigation_link.ts
@@ -34,8 +34,9 @@ export const menuNavLinks: any = [
 			{ href: base + '/components/form', label: 'Form', keywords: '' },
 			{ href: base + '/components/table', label: 'Table', keywords: '' },
 			{ href: base + '/components/codeEditor', label: 'Code Editor', keywords: '' },
-			{ href: base + '/components/fileupload', label: 'File Upload', keywords: '' }
-			// { href: base + '/components/toggle', label: 'Toggle', keywords: '' }
+			{ href: base + '/components/fileupload', label: 'File Upload', keywords: '' },
+			{ href: base + '/components/facets', label: 'Facets', keywords: '' }
+      // { href: base + '/components/toggle', label: 'Toggle', keywords: '' }
 		]
 	},
 	{
diff --git a/src/lib/components/Facets/Facets.svelte b/src/lib/components/Facets/Facets.svelte
new file mode 100644
index 00000000..cbfb4992
--- /dev/null
+++ b/src/lib/components/Facets/Facets.svelte
@@ -0,0 +1,120 @@
+<script lang="ts">
+	import { getModalStore, Modal, TreeView, TreeViewItem } from '@skeletonlabs/skeleton';
+
+	import ShowMore from './ShowMore.svelte';
+	import type { FacetOption, FacetGroup } from '$models/Models';
+
+	export let groupSelection = false;
+	export let groups: FacetGroup;
+	export let selected: FacetGroup;
+	export let selectedGroups: { [key: string]: boolean } = {};
+	export let showAll = false;
+	export let open = false;
+
+	const modalStore = getModalStore();
+	const showMore = (group: string) => {
+		modalStore.trigger({
+			type: 'component',
+			title: `${group}`,
+			component: {
+				ref: ShowMore,
+				props: {
+					group,
+					handleSave,
+					handleCancel,
+					selected: selected[group],
+					items: groups[group].sort((a, b) => a.value.localeCompare(b.value))
+				}
+			}
+		});
+	};
+
+	const handleSave = (group: string, selectedItems: FacetOption[]) => {
+		selected[group] = selectedItems;
+		modalStore.close();
+	};
+
+	const handleCancel = () => {
+		modalStore.close();
+	};
+
+	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) => {
+					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);
+					})
+			];
+		});
+	};
+
+	$: selected, sortOptions();
+</script>
+
+<TreeView selection={groupSelection} multiple={groupSelection} padding="p-1" hover="">
+	{#each Object.keys(groups) as group}
+		<TreeViewItem
+			name="groups"
+			value={group}
+			{open}
+			hyphenOpacity="opacity-0"
+			bind:group={selectedGroups}
+			bind:checked={selectedGroups[group]}
+		>
+			<p class="font-semibold">{group}</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}
+						<TreeViewItem
+							bind:group={selected[group]}
+							name={group}
+							value={item}
+							hyphenOpacity="opacity-0"
+							spacing="space-x-3"
+							selection
+							multiple
+						>
+							<p>{item.value} ({item.count})</p>
+						</TreeViewItem>
+					{/each}
+					<!-- Trigger for the Modal to view all options -->
+					{#if groups[group].length > 5}
+						<TreeViewItem hyphenOpacity="opacity-0">
+							<button class="anchor" on:click={() => showMore(group)}>more</button></TreeViewItem
+						>
+					{/if}
+				{:else}
+					{#each groups[group] as item}
+						<TreeViewItem
+							bind:group={selected[group]}
+							name={group}
+							value={item}
+							hyphenOpacity="opacity-0"
+							spacing="space-x-3"
+							selection
+							multiple
+						>
+							<p>{item.value} ({item.count})</p>
+						</TreeViewItem>
+					{/each}
+				{/if}
+			</svelte:fragment>
+		</TreeViewItem>
+	{/each}
+</TreeView>
+
+<Modal />
diff --git a/src/lib/components/Facets/ShowMore.svelte b/src/lib/components/Facets/ShowMore.svelte
new file mode 100644
index 00000000..5c489d27
--- /dev/null
+++ b/src/lib/components/Facets/ShowMore.svelte
@@ -0,0 +1,87 @@
+<script lang="ts">
+	import type { FacetOption } 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 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]);
+		}
+	};
+
+	const selectAll = () => {
+		selectedItems = items;
+	};
+
+	const selectNone = () => {
+		selectedItems = [];
+	};
+
+	const onSave = () => {
+		handleSave(group, selectedItems);
+	};
+
+	const onCancel = () => {
+		selectedItems = selected;
+		handleCancel();
+	};
+
+	const gridClass = (items: FacetOption[]) => {
+		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';
+		}
+
+		return 'grid-cols-2';
+	};
+</script>
+
+<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>
+
+	<!-- Items -->
+	<div
+		class="grid {gridClass(
+			items
+		)} !gap-x-20 gap-y-2 py-10 px-2 max-h-[1000px] overflow-x-auto max-w-6xl"
+	>
+		{#each items as item, index}
+			<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>
+			</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={onSave}>Save</button>
+			<button class="btn btn-sm variant-filled-secondary" on:click={onCancel}>Cancel</button>
+		</div>
+	</div>
+</div>
diff --git a/src/lib/components/Table/ColumnsMenu.svelte b/src/lib/components/Table/ColumnsMenu.svelte
new file mode 100644
index 00000000..f30ecdc2
--- /dev/null
+++ b/src/lib/components/Table/ColumnsMenu.svelte
@@ -0,0 +1,37 @@
+<script lang="ts">
+	import { popup } from '@skeletonlabs/skeleton';
+	import type { PopupSettings } from '@skeletonlabs/skeleton';
+
+	export let columns: { id: string; label: string; visible: boolean }[] = [];
+	export let tableId: string;
+
+	const popupCombobox: PopupSettings = {
+		event: 'click',
+		target: `${tableId}-columns-menu`,
+		placement: 'bottom'
+	};
+</script>
+
+<button
+	type="button"
+	class="btn btn-sm variant-filled-primary rounded-full order-last"
+	use:popup={popupCombobox}>Columns</button
+>
+
+<div
+	class="bg-white dark:bg-surface-500 p-4 rounded-md shadow-md z-10"
+	data-popup="{tableId}-columns-menu"
+>
+	{#each columns as column}
+		<div class="flex gap-3 items-center">
+			<input
+				type="checkbox"
+				bind:checked={column.visible}
+				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>
diff --git a/src/lib/components/Table/TableContent.svelte b/src/lib/components/Table/TableContent.svelte
index 6aa0528e..02ed847c 100644
--- a/src/lib/components/Table/TableContent.svelte
+++ b/src/lib/components/Table/TableContent.svelte
@@ -11,7 +11,8 @@
 		addExpandedRows,
 		addColumnFilters,
 		addTableFilter,
-		addDataExport
+		addDataExport,
+		addHiddenColumns
 	} from 'svelte-headless-table/plugins';
 	import { computePosition, autoUpdate, offset, shift, flip, arrow } from '@floating-ui/dom';
 	import { SlideToggle, storePopup } from '@skeletonlabs/skeleton';
@@ -24,6 +25,7 @@
 	import TableFilterServer from './TableFilterServer.svelte';
 	import TablePagination from './TablePagination.svelte';
 	import TablePaginationServer from './TablePaginationServer.svelte';
+	import ColumnsMenu from './ColumnsMenu.svelte';
 	import { columnFilter, searchFilter } from './filter';
 	import {
 		cellStyle,
@@ -51,19 +53,16 @@
 		defaultPageSize = 10, // Default page size - number of rows to display per page
 		toggle = false, // Whether to display the fitToScreen toggle
 		search = true, // Whether to display the search input
-		pageSizes = [5, 10, 15, 20], // Page sizes to display in the pagination component
+		pageSizes = [5, 10, 20, 50, 100], // Page sizes to display in the pagination component
 		fitToScreen = true, // Whether to fit the table to the screen,
 		exportable = false, // Whether to display the export button and enable export functionality
-		serverSide = false, // Whether the table is client or server-side
-		URL = '', // URL to fetch data from
-		token = '', // Bearer token to authenticate the request
-		sendModel = new Send(), // Model to send requests
-		entityId = 0, // Entity ID to send with the request
-		versionId = 0 // Version ID to send with the request,
+		server
 	} = config;
 
 	let searchValue = '';
 	let isFetching = false;
+	const serverSide = server !== undefined;
+	const { baseUrl, sendModel, entityId, versionId } = server ?? {};
 
 	const filters = writable<{
 		[key: string]: { [key in FilterOptionsEnum]?: number | string | Date };
@@ -90,6 +89,7 @@
 			fn: searchFilter,
 			serverSide
 		}),
+		hideColumns: addHiddenColumns(),
 		sort: addSortBy({
 			disableMultiSort: true,
 			serverSide
@@ -121,137 +121,149 @@
 	// Creating an array of all the keys
 	const accessors: AccessorType[] = Object.keys(allCols) as AccessorType[];
 
+	// Filtering out the excluded columns
+	const unexcludedColumns = accessors.filter((accessor) => {
+		// Filtering only unexcluded columns
+		const key = accessor as string;
+		if (columns !== undefined && key in columns && columns[key].exclude === true) {
+			return false;
+		}
+		return true;
+	});
+
+	// To control the visibility of columns in menu
+	let shownColumns = unexcludedColumns.map((c) => {
+		const key = c as string;
+		const label = key.charAt(0).toUpperCase() + key.slice(1);
+		return {
+			id: c as string,
+			label: columns && columns[key] && columns[key].header ? columns[key].header : label,
+			visible: true
+		};
+	});
+
 	// Configuring every table column with the provided options
 	const tableColumns = [
-		...accessors
-			.filter((accessor) => {
-				// Filtering only unexcluded columns
-				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;
-				// Applying configuration options for configured columns
-				if (columns !== undefined && key in columns) {
-					const {
-						header, // Custom header to display
-						colFilterFn, // Custom column filter function
-						colFilterComponent, // Custom column filter component
-						instructions, // Custom instructions for the column cells (sorting, filtering, searching, rendering)
-						disableFiltering = false, // Whether to disable filtering for the column
-						disableSorting = false // Whether to disable sorting for the column
-					} = columns[key];
-
-					const { toSortableValueFn, toFilterableValueFn, toStringFn, renderComponent } =
-						instructions ?? {};
-
-					return table.column({
-						// If header is not provided, use the key as the header
-						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 }) => {
-							return renderComponent
-								? createRender(renderComponent, { value, row, dispatchFn: actionDispatcher })
-								: toStringFn
-								? toStringFn(value)
-								: value;
+		...unexcludedColumns.map((accessor) => {
+			const key = accessor as string;
+			// Applying configuration options for configured columns
+			if (columns !== undefined && key in columns) {
+				const {
+					header, // Custom header to display
+					colFilterFn, // Custom column filter function
+					colFilterComponent, // Custom column filter component
+					instructions, // Custom instructions for the column cells (sorting, filtering, searching, rendering)
+					disableFiltering = false, // Whether to disable filtering for the column
+					disableSorting = false // Whether to disable sorting for the column
+				} = columns[key];
+
+				const { toSortableValueFn, toFilterableValueFn, toStringFn, renderComponent } =
+					instructions ?? {};
+
+				return table.column({
+					// If header is not provided, use the key as the header
+					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 }) => {
+						return renderComponent
+							? createRender(renderComponent, { value, row, dispatchFn: actionDispatcher })
+							: toStringFn
+							? toStringFn(value)
+							: value;
+					},
+					plugins: {
+						// Sorting config
+						sort: {
+							disable: disableSorting,
+							getSortValue: (row) => {
+								// If provided, use the custom sorting function toSortableValueFn(), or just use the value
+								return toSortableValueFn ? toSortableValueFn(row) : row;
+							}
 						},
-						plugins: {
-							// Sorting config
-							sort: {
-								disable: disableSorting,
-								getSortValue: (row) => {
-									// If provided, use the custom sorting function toSortableValueFn(), or just use the value
-									return toSortableValueFn ? toSortableValueFn(row) : row;
-								}
-							},
-							colFilter: !disableFiltering
-								? {
-										fn: ({ filterValue, value }) => {
-											// If provided, use the custom filtering function toFilterableValueFn(), or just use the value
-											const val = toFilterableValueFn ? toFilterableValueFn(value) : value;
-											// If provided, use the custom filtering function colFilterFn(), or just use the default columnFilter()
-											return colFilterFn
-												? colFilterFn({ filterValue, value: val })
-												: columnFilter({ filterValue, value: val });
-										},
-										render: ({ filterValue, values, id }) => {
-											filterValue.set($filters[key]);
-											return serverSide
-												? createRender(TableFilterServer, {
-														id,
-														tableId,
-														values,
-														updateTable,
-														pageIndex,
-														toFilterableValueFn,
-														filters,
-														toStringFn
-												  })
-												: createRender(colFilterComponent ?? TableFilter, {
-														filterValue,
-														id,
-														tableId,
-														values,
-														toFilterableValueFn,
-														filters,
-														toStringFn,
-														pageIndex
-												  });
-										}
-								  }
-								: undefined,
-							tableFilter: {
-								// Search filter config
-								getFilterValue: (row) => {
-									// If provided, use the custom toString function toStringFn(), or just use the value
-									return toStringFn ? toStringFn(row) : row;
-								}
+						colFilter: !disableFiltering
+							? {
+									fn: ({ filterValue, value }) => {
+										// If provided, use the custom filtering function toFilterableValueFn(), or just use the value
+										const val = toFilterableValueFn ? toFilterableValueFn(value) : value;
+										// If provided, use the custom filtering function colFilterFn(), or just use the default columnFilter()
+										return colFilterFn
+											? colFilterFn({ filterValue, value: val })
+											: columnFilter({ filterValue, value: val });
+									},
+									render: ({ filterValue, values, id }) => {
+										filterValue.set($filters[key]);
+										return serverSide
+											? createRender(TableFilterServer, {
+													id,
+													tableId,
+													values,
+													updateTable,
+													pageIndex,
+													toFilterableValueFn,
+													filters,
+													toStringFn
+											  })
+											: createRender(colFilterComponent ?? TableFilter, {
+													filterValue,
+													id,
+													tableId,
+													values,
+													toFilterableValueFn,
+													filters,
+													toStringFn,
+													pageIndex
+											  });
+									}
+							  }
+							: undefined,
+						tableFilter: {
+							// Search filter config
+							getFilterValue: (row) => {
+								// If provided, use the custom toString function toStringFn(), or just use the value
+								return toStringFn ? toStringFn(row) : row;
 							}
 						}
-					});
-				} else {
-					return table.column({
-						header: key,
-						accessor: accessor,
-						cell: ({ value }) => {
-							// If null or undefined, return an empty string
-							return value ? value : '';
-						},
-						plugins: {
-							// Sorting enabled by default
-							sort: {},
-							// Filtering enabled by default
-							colFilter: {
-								fn: columnFilter,
-								render: ({ filterValue, values, id }) => {
-									return serverSide
-										? createRender(TableFilterServer, {
-												id,
-												tableId,
-												values,
-												updateTable,
-												pageIndex,
-												filters
-										  })
-										: createRender(TableFilter, {
-												filterValue,
-												id,
-												tableId,
-												values,
-												filters,
-												pageIndex
-										  });
-								}
+					}
+				});
+			} else {
+				return table.column({
+					header: key,
+					accessor: accessor,
+					cell: ({ value }) => {
+						// If null or undefined, return an empty string
+						return value ? value : '';
+					},
+					plugins: {
+						// Sorting enabled by default
+						sort: {},
+						// Filtering enabled by default
+						colFilter: {
+							fn: columnFilter,
+							render: ({ filterValue, values, id }) => {
+								return serverSide
+									? createRender(TableFilterServer, {
+											id,
+											tableId,
+											values,
+											updateTable,
+											pageIndex,
+											filters
+									  })
+									: createRender(TableFilter, {
+											filterValue,
+											id,
+											tableId,
+											values,
+											filters,
+											pageIndex
+									  });
 							}
 						}
-					});
-				}
-			})
+					}
+				});
+			}
+		})
 	];
 
 	// If optionsComponent is provided, add a column for it at the end
@@ -286,22 +298,25 @@
 	const { exportedData } = pluginStates.export;
 	// Page configuration
 	const { pageIndex, pageSize } = pluginStates.page;
+	// Column visibility configuration
+	const { hiddenColumnIds } = pluginStates.hideColumns;
 
 	const updateTable = async () => {
+		if (!sendModel) throw new Error('Server-side configuration is missing');
+
 		sendModel.limit = $pageSize;
 		sendModel.offset = $pageSize * $pageIndex;
-		sendModel.version = versionId;
-		sendModel.id = entityId;
+		sendModel.version = versionId || -1;
+		sendModel.id = entityId || -1;
 		sendModel.filter = normalizeFilters($filters);
 
 		let fetchData;
 
 		try {
 			isFetching = true;
-			fetchData = await fetch(URL, {
+			fetchData = await fetch(baseUrl || '', {
 				headers: {
-					'Content-Type': 'application/json',
-					Authorization: `Bearer ${token}`
+					'Content-Type': 'application/json'
 				},
 				method: 'POST',
 				body: JSON.stringify(sendModel)
@@ -346,6 +361,7 @@
 	};
 
 	const sortServer = (order: 'asc' | 'desc' | undefined, id: string) => {
+		if (!sendModel) throw new Error('Server-side configuration is missing');
 		// Set parameter for sorting
 		if (order === undefined) {
 			sendModel.order = [];
@@ -362,16 +378,19 @@
 	$: sortKeys = pluginStates.sort.sortKeys;
 	$: serverSide && updateTable();
 	$: serverSide && sortServer($sortKeys[0]?.order, $sortKeys[0]?.id);
+	$: $hiddenColumnIds = shownColumns.filter((col) => !col.visible).map((col) => col.id);
 </script>
 
 <div class="grid gap-2 overflow-auto" class:w-fit={!fitToScreen} class:w-full={fitToScreen}>
 	{#if $data.length > 0 || (columns && Object.keys(columns).length > 0)}
 		<div class="table-container">
 			<!-- Enable the search filter if table is not empty -->
-			{#if !serverSide && search}
+			{#if search}
 				<form
 					class="flex gap-2"
 					on:submit|preventDefault={() => {
+						if (!sendModel) throw new Error('Server-side configuration is missing');
+
 						sendModel.q = searchValue;
 						$filterValue = searchValue;
 					}}
@@ -388,6 +407,8 @@
 							id="{tableId}-searchReset"
 							class="absolute right-3 items-center"
 							on:click|preventDefault={() => {
+								if (!sendModel) throw new Error('Server-side configuration is missing');
+
 								searchValue = '';
 								sendModel.q = '';
 								$filterValue = '';
@@ -399,6 +420,8 @@
 						id="{tableId}-searchSubmit"
 						class="btn variant-filled-primary"
 						on:click|preventDefault={() => {
+							if (!sendModel) throw new Error('Server-side configuration is missing');
+
 							$filterValue = searchValue;
 							sendModel.q = searchValue;
 						}}>Search</button
@@ -439,6 +462,9 @@
 							>Export as CSV</button
 						>
 					{/if}
+					{#if shownColumns.length > 0}
+						<ColumnsMenu bind:columns={shownColumns} {tableId} />
+					{/if}
 				</div>
 			</div>
 
@@ -491,9 +517,7 @@
 														<!-- Adding column filter config -->
 														{#if cell.isData()}
 															{#if props.colFilter?.render}
-																<div class="">
-																	<Render of={props.colFilter.render} />
-																</div>
+																<Render of={props.colFilter.render} />
 															{/if}
 														{/if}
 													</div>
@@ -564,3 +588,5 @@
 		{/if}
 	{/if}
 </div>
+
+<div id="{tableId}-popups" />
diff --git a/src/lib/components/Table/TableFilter.svelte b/src/lib/components/Table/TableFilter.svelte
index 91192069..e1d1c689 100644
--- a/src/lib/components/Table/TableFilter.svelte
+++ b/src/lib/components/Table/TableFilter.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
-	import Fa from 'svelte-fa';
+	import Fa from 'svelte-fa/src/fa.svelte';
+	import { onMount } from 'svelte';
 	import { faFilter, faPlus, faXmark } from '@fortawesome/free-solid-svg-icons';
 	import { popup } from '@skeletonlabs/skeleton';
 	import type { PopupSettings } from '@skeletonlabs/skeleton';
@@ -22,6 +23,7 @@
 	let dropdowns: {
 		option: FilterOptionsEnum;
 		value: string | number | Date | undefined;
+		formValue: string | number | undefined;
 	}[] = [];
 
 	// Check the type of the column
@@ -173,7 +175,8 @@
 	const valueChangeHandler = (e, index) => {
 		dropdowns[index] = {
 			...dropdowns[index],
-			value: type === 'date' ? new Date(e.target.value) : e.target.value
+			value: type === 'date' ? new Date(e.target.value) : e.target.value,
+			formValue: e.target.value
 		};
 
 		$filters = {
@@ -195,7 +198,8 @@
 			...dropdowns,
 			{
 				option: option,
-				value: undefined
+				value: undefined,
+				formValue: undefined
 			}
 		];
 	};
@@ -221,9 +225,15 @@
 
 	// Start by adding the default filter
 	$: addFilter(options[type][0].value, undefined);
+
+	onMount(() => {
+		const element = document.getElementById(popupId);
+		element?.parentElement?.removeChild(element);
+		element && document.getElementById(`${tableId}-popups`)?.appendChild(element);
+	});
 </script>
 
-<form class="">
+<div id="parent-{popupId}">
 	<button
 		class:variant-filled-primary={active}
 		class="btn w-max p-2"
@@ -234,7 +244,7 @@
 		<Fa icon={faFilter} size="12" />
 	</button>
 
-	<div data-popup={`${popupId}`} id={popupId} class="z-50">
+	<div data-popup={popupId} id={popupId} class="">
 		<div class="card p-3 grid gap-2 shadow-lg w-max bg-base-100">
 			<button
 				class="btn variant-filled-primary btn-sm"
@@ -292,7 +302,7 @@
 								type="date"
 								class="input p-1 border border-primary-500"
 								on:input={(e) => valueChangeHandler(e, index)}
-								bind:value={dropdown.value}
+								bind:value={dropdown.formValue}
 							/>
 						{/if}
 					</div>
@@ -326,4 +336,4 @@
 			>
 		</div>
 	</div>
-</form>
+</div>
diff --git a/src/lib/components/Table/TableFilterServer.svelte b/src/lib/components/Table/TableFilterServer.svelte
index 16270b68..19d3bb5d 100644
--- a/src/lib/components/Table/TableFilterServer.svelte
+++ b/src/lib/components/Table/TableFilterServer.svelte
@@ -22,6 +22,7 @@
 	let dropdowns: {
 		option: FilterOptionsEnum;
 		value: string | number | Date | undefined;
+		formValue: string | number | undefined;
 	}[] = [];
 
 	// Check the type of the column
@@ -111,7 +112,7 @@
 			{
 				value: FilterOptionsEnum.b,
 				label: 'Is before'
-			},
+			}
 			// TODO: 'Not on' filter should be fixed on the server side
 			// {
 			// 	value: FilterOptionsEnum.no,
@@ -159,7 +160,8 @@
 	const valueChangeHandler = (e, index) => {
 		dropdowns[index] = {
 			...dropdowns[index],
-			value: type === 'date' ? new Date(e.target.value) : e.target.value
+			value: type === 'date' ? new Date(e.target.value) : e.target.value,
+			formValue: e.target.value
 		};
 
 		$filters = {
@@ -181,7 +183,8 @@
 			...dropdowns,
 			{
 				option: option,
-				value: undefined
+				value: undefined,
+				formValue: undefined
 			}
 		];
 	};
diff --git a/src/lib/components/Table/TablePagination.svelte b/src/lib/components/Table/TablePagination.svelte
index 60a63d89..977f69f3 100644
--- a/src/lib/components/Table/TablePagination.svelte
+++ b/src/lib/components/Table/TablePagination.svelte
@@ -4,8 +4,10 @@
 		faAnglesRight,
 		faAngleRight,
 		faAnglesLeft,
-		faAngleLeft
+		faAngleLeft,
+		faChevronDown
 	} from '@fortawesome/free-solid-svg-icons';
+	import { ListBox, ListBoxItem, popup, type PopupSettings } from '@skeletonlabs/skeleton';
 
 	export let pageConfig;
 	export let pageSizes;
@@ -31,24 +33,50 @@
 		}
 	};
 
+	let pageSizeDropdownValue: string = $pageSize;
+
+	const pageSizePopup: PopupSettings = {
+		event: 'click',
+		target: `#${id}-pageSizeDropdown`,
+		placement: 'bottom',
+		closeQuery: '.listbox-item'
+	};
+
 	$: goToFirstPageDisabled = !$pageIndex;
 	$: goToLastPageDisabled = $pageIndex == $pageCount - 1;
 	$: goToNextPageDisabled = !$hasNextPage;
 	$: goToPreviousPageDisabled = !$hasPreviousPage;
+	$: $pageSize = pageSizeDropdownValue;
 </script>
 
-<div class="flex justify-between w-full items-stretch gap-10">
+<div class="flex justify-between w-full items-stretch gap-10 z-50">
 	<div class="flex justify-start">
-		<select
+		<!-- <select
 			name="pageSize"
 			id="{id}-pageSize"
 			class="select variant-filled-primary w-min font-bold"
 			bind:value={$pageSize}
 		>
 			{#each pageSizes as size}
-				<option value={size}>{size}</option>
+				<option value={size} class="">{size}</option>
 			{/each}
-		</select>
+		</select> -->
+
+		<button class="btn variant-filled-primary w-20 justify-between" use:popup={pageSizePopup}>
+			<span class="capitalize font-semibold">{pageSizeDropdownValue}</span>
+			<Fa icon={faChevronDown} size="xs" />
+		</button>
+
+		<div class="card w-20 shadow-xl py-2" data-popup={`#${id}-pageSizeDropdown`}>
+			<ListBox rounded="rounded-none">
+				{#each pageSizes as size}
+					<ListBoxItem bind:group={pageSizeDropdownValue} name="medium" value={size}
+						>{size}</ListBoxItem
+					>
+				{/each}
+			</ListBox>
+			<div class="arrow bg-surface-100-800-token" />
+		</div>
 	</div>
 	<div class="flex justify-center gap-1">
 		<button
diff --git a/src/lib/components/Table/TablePaginationServer.svelte b/src/lib/components/Table/TablePaginationServer.svelte
index fc4364df..cbcf227d 100644
--- a/src/lib/components/Table/TablePaginationServer.svelte
+++ b/src/lib/components/Table/TablePaginationServer.svelte
@@ -77,7 +77,7 @@
 			bind:value={$pageSize}
 		>
 			{#each pageSizes as size}
-				<option value={size}>{size}</option>
+				<option value={size} class="!bg-primary-700">{size}</option>
 			{/each}
 		</select>
 	</div>
diff --git a/src/lib/models/Models.ts b/src/lib/models/Models.ts
index 8791c4c2..d04a2287 100644
--- a/src/lib/models/Models.ts
+++ b/src/lib/models/Models.ts
@@ -104,6 +104,14 @@ export interface Columns {
 	[key: string]: Column;
 }
 
+// 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
+	entityId?: number; // Entity ID for server-side table
+	versionId?: number; // Version ID for server-side table
+};
+
 // Table config type
 export interface TableConfig<T> {
 	id: string;
@@ -120,12 +128,7 @@ export interface TableConfig<T> {
 	defaultPageSize?: number; // 10 by default
 	optionsComponent?: typeof SvelteComponent;
 
-	serverSide?: boolean; // false by default
-	URL?: string; // Base URL for server-side table
-	token?: string; // Authorization token 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
+	server?: ServerConfig;
 }
 
 // lists
@@ -188,6 +191,15 @@ export type Filter = {
 	value: string | number | Date | boolean;
 };
 
+export type FacetOption = {
+	value: string;
+	count?: number;
+};
+
+export type FacetGroup = {
+	[key: string]: FacetOption[];
+};
+
 export class Send {
 	id: number;
 	limit: number;
@@ -222,7 +234,6 @@ export class Receive {
 	}
 }
 
-
 export class errorType {
 	statusText: string;
 	status: number;
diff --git a/src/routes/components/facets/+layout.svelte b/src/routes/components/facets/+layout.svelte
new file mode 100644
index 00000000..c8ec36db
--- /dev/null
+++ b/src/routes/components/facets/+layout.svelte
@@ -0,0 +1,11 @@
+<script lang="ts">
+	import { AppShell } from '@skeletonlabs/skeleton';
+	import { computePosition, autoUpdate, offset, shift, flip, arrow } from '@floating-ui/dom';
+	import { storePopup } from '@skeletonlabs/skeleton';
+
+	storePopup.set({ computePosition, autoUpdate, offset, shift, flip, arrow });
+</script>
+
+<AppShell slotSidebarLeft="flex-none bg-surface-50-900-token lg:w-auto relative">
+	<slot id="pageSlot" />
+</AppShell>
diff --git a/src/routes/components/facets/+page.svelte b/src/routes/components/facets/+page.svelte
new file mode 100644
index 00000000..d8fd739a
--- /dev/null
+++ b/src/routes/components/facets/+page.svelte
@@ -0,0 +1,22 @@
+<script lang="ts">
+	import FacetsNoGroupSelection from './examples/FacetsNoGroupSelection.svelte';
+	import FacetsGroupSelection from './examples/FacetsGroupSelection.svelte';
+	import FacetsProps from './docs/FacetsProps.svelte';
+	import FacetsTypes from './docs/FacetsTypes.svelte';
+</script>
+
+<div class="grid gap-20 p-10 dark:bg-surface-800">
+	<div class="grid gap-5">
+		<h1 class="font-bold !text-6xl">Facets</h1>
+		<h2 class="h2">Props</h2>
+		<FacetsProps />
+	</div>
+	<div class="grid gap-5">
+		<h2 class="h2">Types</h2>
+		<FacetsTypes />
+	</div>
+	<div class="grid gap-5">
+		<FacetsNoGroupSelection />
+		<FacetsGroupSelection />
+	</div>
+</div>
diff --git a/src/routes/components/facets/data/codeBlocks.ts b/src/routes/components/facets/data/codeBlocks.ts
new file mode 100644
index 00000000..141ed618
--- /dev/null
+++ b/src/routes/components/facets/data/codeBlocks.ts
@@ -0,0 +1,78 @@
+export const facetsNoGroupSelectionSvelte = `
+<script lang="ts">
+	import { Facets } from '@bexis2/bexis2-core-ui';
+
+	import { groups } from './data';
+
+	let selected = {
+		Mediums: [],
+		Genres: [],
+		Authors: []
+	};
+</script>
+
+<Facets {groups} bind:selected showAll />
+`;
+
+export const facetsGroupSelectionSvelte = `
+<script lang="ts">
+	import { Facets } from '@bexis2/bexis2-core-ui';
+
+	import { groups } from './data';
+
+	let selected = {
+		Mediums: [],
+		Genres: [],
+		Authors: []
+	};
+
+	let selectedGroups = {
+		Mediums: true,
+		Genres: false,
+		Authors: false
+	};
+</script>
+
+<Facets {groups} bind:selected bind:selectedGroups groupSelection open />
+`;
+
+export const facetsNoGroupSelectionData = `
+export const groups = {
+	Mediums: [
+		{ value: 'books', count: 1 },
+		{ value: 'movies', count: 2 },
+		{ value: 'music', count: 3 },
+		{ value: 'podcasts', count: 4 },
+		{ value: 'articles', count: 5 },
+		{ value: 'blogs', count: 6 }
+	],
+	Genres: [
+		{ value: 'fiction', count: 0 },
+		{ value: 'non-fiction', count: 1 },
+		{ value: 'comedy', count: 2 },
+		{ value: 'drama', count: 3 },
+		{ value: 'action', count: 4 },
+		{ value: 'romance', count: 5 },
+		...
+	],
+	Authors: [
+		{ value: 'Stephen King', count: 10 },
+		{ value: 'J.K. Rowling', count: 3 },
+		{ value: 'Agatha Christie', count: 4 },
+		{ value: 'Dan Brown', count: 7 }
+	]
+};
+`;
+
+export const facetGroupType = `
+export type FacetGroup = {
+	[key: string]: FacetOption[];
+};
+`;
+
+export const facetOptionType = `
+export type FacetOption = {
+	value: string;
+	count?: number;
+};
+`;
diff --git a/src/routes/components/facets/data/data.ts b/src/routes/components/facets/data/data.ts
new file mode 100644
index 00000000..97b33825
--- /dev/null
+++ b/src/routes/components/facets/data/data.ts
@@ -0,0 +1,58 @@
+export const groups = {
+	Mediums: [
+		{ value: 'books', count: 1 },
+		{ value: 'movies', count: 2 },
+		{ value: 'music', count: 3 },
+		{ value: 'podcasts', count: 4 },
+		{ value: 'articles', count: 5 },
+		{ value: 'blogs', count: 6 }
+	],
+	Genres: [
+		{ value: 'fiction', count: 0 },
+		{ value: 'non-fiction', count: 1 },
+		{ value: 'comedy', count: 2 },
+		{ value: 'drama', count: 3 },
+		{ value: 'action', count: 4 },
+		{ value: 'romance', count: 5 },
+		{ value: 'thriller', count: 6 },
+		{ value: 'horror', count: 7 },
+		{ value: 'sci-fi', count: 8 },
+		{ value: 'fantasy', count: 9 },
+		{ value: 'adventure', count: 10 },
+		{ value: 'animation', count: 20 },
+		{ value: 'biography', count: 30 },
+		{ value: 'crime', count: 10 },
+		{ value: 'documentary', count: 0 },
+		{ value: 'family', count: 1 },
+		{ value: 'history', count: 2 },
+		{ value: 'musical', count: 3 },
+		{ value: 'mystery', count: 4 },
+		{ value: 'war', count: 5 },
+		{ value: 'western', count: 6 },
+		{ value: 'sport', count: 7 },
+		{ value: 'superhero', count: 8 },
+		{ value: 'noir', count: 9 },
+		{ value: 'disaster', count: 10 },
+		{ value: 'spy', count: 82 },
+		{ value: 'martial arts', count: 2 },
+		{ value: 'satire', count: 5 },
+		{ value: 'black comedy', count: 7 },
+		{ value: 'psychological thriller', count: 9 },
+		{ value: 'erotica', count: 3 },
+		{ value: 'experimental', count: 20 },
+		{ value: 'political thriller', count: 10 },
+		{ value: 'coming-of-age', count: 30 },
+		{ value: 'silent film', count: 40 },
+		{ value: 'mockumentary', count: 50 },
+		{ value: 'holiday', count: 10 },
+		{ value: 'music', count: 10 },
+		{ value: 'dance', count: 5 },
+		{ value: 'teen', count: 12 },
+	],
+	Authors: [
+		{ value: 'Stephen King', count: 10 },
+		{ value: 'J.K. Rowling', count: 3 },
+		{ value: 'Agatha Christie', count: 4 },
+		{ value: 'Dan Brown', count: 7 }
+	]
+};
diff --git a/src/routes/components/facets/docs/FacetsProps.svelte b/src/routes/components/facets/docs/FacetsProps.svelte
new file mode 100644
index 00000000..65024cbc
--- /dev/null
+++ b/src/routes/components/facets/docs/FacetsProps.svelte
@@ -0,0 +1,89 @@
+<div class="grid gap-5">
+	<div class="grid gap-2" id="facetsConfig">
+		<div class="italic div">Underlined attributes are <strong>required</strong>.</div>
+	</div>
+
+	<div class="items-center">
+		<div class="flex gap-2">
+			<div class="italic underline">groups:</div>
+			<div class="font-bold">FacetGroup</div>
+		</div>
+
+		<p class="text-xl pl-10">
+			Key value pairs where the key is the group name and the value is an array of possible choices.
+		</p>
+	</div>
+
+	<div class="items-center">
+		<div class="flex gap-2">
+			<div class="italic underline">selected:</div>
+			<div class="font-bold">FacetGroup</div>
+		</div>
+
+		<p class="text-xl pl-10">
+			An object with keys matching the keys in the groups object with selected options for each key.
+		</p>
+		<p class="text-xl pl-10">
+			Binding to this parameters allows the parent component to control the selected items in the
+			facets.
+		</p>
+	</div>
+
+	<div class="items-center">
+		<div class="flex gap-2">
+			<div class="italic">selectedGroups:</div>
+			<div class="font-bold">{`{[key: string]: boolean}`}</div>
+		</div>
+
+		<p class="text-xl pl-10">
+			An object with keys matching the keys in the groups object with a boolean value indicated if
+			that group was selected or not.
+		</p>
+		<p class="text-xl pl-10">
+			Binding to this parameters allows the parent component to control the selected groups in the
+			facets.
+		</p>
+	</div>
+
+	<div class="items-center">
+		<div class="flex gap-2">
+			<div class="italic">open:</div>
+			<div class="font-bold">boolean</div>
+		</div>
+
+		<p class="text-xl pl-10">
+			Control whether the facets are open or closed. <code
+				class="!text-xl bg-red-100 dark:bg-red-400/30 rounded-md p-0.5 text-red-500">false</code
+			> by default.
+		</p>
+	</div>
+
+	<div class="items-center">
+		<div class="flex gap-2">
+			<div class="italic">showAll:</div>
+			<div class="font-bold">boolean</div>
+		</div>
+
+		<p class="text-xl pl-10">
+			Control whether all the facet options are displayed in UI. <code
+				class="!text-xl bg-red-100 dark:bg-red-400/30 rounded-md p-0.5 text-red-500">false</code
+			>
+			by default. If set to
+			<code class="!text-xl bg-red-100 dark:bg-red-400/30 rounded-md p-0.5 text-red-500">false</code
+			> and the number of options is greater than 5, the remaining options will be displayed in a modal.
+		</p>
+	</div>
+
+	<div class="items-center">
+		<div class="flex gap-2">
+			<div class="italic">groupSelection:</div>
+			<div class="font-bold">boolean</div>
+		</div>
+
+		<p class="text-xl pl-10">
+			Control whether the facet groups can be selected. <code
+				class="!text-xl bg-red-100 dark:bg-red-400/30 rounded-md p-0.5 text-red-500">false</code
+			> by default.
+		</p>
+	</div>
+</div>
diff --git a/src/routes/components/facets/docs/FacetsTypes.svelte b/src/routes/components/facets/docs/FacetsTypes.svelte
new file mode 100644
index 00000000..6cf7dc17
--- /dev/null
+++ b/src/routes/components/facets/docs/FacetsTypes.svelte
@@ -0,0 +1,79 @@
+<script lang="ts">
+	import { CodeBlock } from '@skeletonlabs/skeleton';
+	import { popup } from '@skeletonlabs/skeleton';
+	import type { PopupSettings } from '@skeletonlabs/skeleton';
+
+	import { facetGroupType, facetOptionType } from '../data/codeBlocks';
+
+	const popupClickFacetGroup: PopupSettings = {
+		event: 'click',
+		target: 'popupClickFacetGroup',
+		placement: 'right'
+	};
+
+	const popupClickFacetOption: PopupSettings = {
+		event: 'click',
+		target: 'popupClickFacetOption',
+		placement: 'right'
+	};
+</script>
+
+<div class="grid gap-20">
+	<div class="grid gap-5">
+		<div class="grid gap-2">
+			<h3 class="font-semibold items-center w-max h3">FacetGroup</h3>
+			<button class="btn variant-ghost-primary w-min" use:popup={popupClickFacetGroup}>
+				Show type details</button
+			>
+			<div data-popup="popupClickFacetGroup">
+				<CodeBlock language="ts" code={facetGroupType} />
+			</div>
+		</div>
+
+		<div class="items-center">
+			<div class="flex gap-2">
+				<div class="italic">[key: <strong>string</strong>]:</div>
+				<div class="font-bold">FacetOption [ ]</div>
+			</div>
+
+			<p class="text-xl pl-10">
+				Each key of this object represents an array of possible options where the key will be used
+				as the name of that group.
+			</p>
+		</div>
+	</div>
+
+	<div class="grid gap-5">
+		<div class="grid gap-2">
+			<h3 class="font-semibold items-center w-max h3">FacetOption</h3>
+			<button class="btn variant-ghost-primary w-min" use:popup={popupClickFacetOption}>
+				Show type details</button
+			>
+			<div data-popup="popupClickFacetOption">
+				<CodeBlock language="ts" code={facetOptionType} />
+			</div>
+		</div>
+
+		<div class="grid gap-2">
+			<div class="italic div">Underlined attributes are <strong>required</strong>.</div>
+		</div>
+
+		<div class="items-center">
+			<div class="flex gap-2">
+				<div class="italic underline">value:</div>
+				<div class="font-bold">string</div>
+			</div>
+
+			<p class="text-xl pl-10">Name of the filter.</p>
+		</div>
+
+		<div class="items-center">
+			<div class="flex gap-2">
+				<div class="italic">count:</div>
+				<div class="font-bold">number</div>
+			</div>
+
+			<p class="text-xl pl-10">Number of items available for this specific filter.</p>
+		</div>
+	</div>
+</div>
diff --git a/src/routes/components/facets/examples/FacetsGroupSelection.svelte b/src/routes/components/facets/examples/FacetsGroupSelection.svelte
new file mode 100644
index 00000000..6307a563
--- /dev/null
+++ b/src/routes/components/facets/examples/FacetsGroupSelection.svelte
@@ -0,0 +1,28 @@
+<script lang="ts">
+	import CodeContainer from '$docs/components/CodeContainer.svelte';
+	import Facets from '$lib/components/Facets/Facets.svelte';
+	import { facetsNoGroupSelectionData, facetsGroupSelectionSvelte } from '../data/codeBlocks';
+	import { groups } from '../data/data';
+
+	let selected = {
+		Mediums: [],
+		Genres: [],
+		Authors: []
+	};
+
+	let selectedGroups = {
+		Mediums: true,
+		Genres: false,
+		Authors: false
+	};
+</script>
+
+<div id="facetsGroupSelection">
+	<CodeContainer
+		title="Group selection and open by default"
+		svelte={facetsGroupSelectionSvelte}
+		data={facetsNoGroupSelectionData}
+	>
+		<Facets {groups} bind:selected bind:selectedGroups groupSelection open />
+	</CodeContainer>
+</div>
diff --git a/src/routes/components/facets/examples/FacetsNoGroupSelection.svelte b/src/routes/components/facets/examples/FacetsNoGroupSelection.svelte
new file mode 100644
index 00000000..755beab4
--- /dev/null
+++ b/src/routes/components/facets/examples/FacetsNoGroupSelection.svelte
@@ -0,0 +1,18 @@
+<script lang="ts">
+	import CodeContainer from '$docs/components/CodeContainer.svelte';
+	import Facets from '$lib/components/Facets/Facets.svelte';
+	import { facetsNoGroupSelectionData, facetsNoGroupSelectionSvelte } from '../data/codeBlocks';
+	import { groups } from '../data/data';
+
+	let selected = {
+		Mediums: [],
+		Genres: [],
+		Authors: []
+	};
+</script>
+
+<div id="facetsNoGroupSelection">
+	<CodeContainer title="No group selection, closed by default and all options displayed in UI" svelte={facetsNoGroupSelectionSvelte} data={facetsNoGroupSelectionData}>
+		<Facets {groups} bind:selected showAll />
+	</CodeContainer>
+</div>
diff --git a/src/routes/components/table/+page.svelte b/src/routes/components/table/+page.svelte
index 48d2414a..9a06a390 100644
--- a/src/routes/components/table/+page.svelte
+++ b/src/routes/components/table/+page.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import '$lib/css/themes/theme-bexis2.css';
+	import TableProps from './docs/TableProps.svelte';
 	import TableConfigDocs from './docs/TableConfigDocs.svelte';
 	import ColumnsDocs from './docs/ColumnsDocs.svelte';
 	import ColumnDocs from './docs/ColumnDocs.svelte';
@@ -15,6 +16,8 @@
 >
 	<div class="grid gap-5">
 		<h1 class="font-bold !text-6xl">Table</h1>
+		<h2 class="h2">Props</h2>
+		<TableProps />
 		<h2 class="h2">Types</h2>
 		<TableConfigDocs />
 	</div>
diff --git a/src/routes/components/table/docs/ColumnInstructionsDocs.svelte b/src/routes/components/table/docs/ColumnInstructionsDocs.svelte
index 5875627a..77a2af22 100644
--- a/src/routes/components/table/docs/ColumnInstructionsDocs.svelte
+++ b/src/routes/components/table/docs/ColumnInstructionsDocs.svelte
@@ -60,16 +60,21 @@
 
 		<div class="ml-5">
 			<p class="underline">
-				<code class="!text-xl bg-tertiary-300 dark:bg-tertiary-700/50 rounded-md p-0.5 text-primary-500"
+				<code
+					class="!text-xl bg-tertiary-300 dark:bg-tertiary-700/50 rounded-md p-0.5 text-primary-500"
 					>renderComponent</code
 				>
 				overrides
-				<code class="!text-xl bg-tertiary-300 dark:bg-tertiary-700/50 rounded-md p-0.5 text-primary-500">toStringFn</code>.
+				<code
+					class="!text-xl bg-tertiary-300 dark:bg-tertiary-700/50 rounded-md p-0.5 text-primary-500"
+					>toStringFn</code
+				>.
 			</p>
 			<p class="">
-				Every <code class="!text-xl bg-tertiary-300 dark:bg-tertiary-700/50 rounded-md p-0.5 text-primary-500"
+				Every <code
+					class="!text-xl bg-tertiary-300 dark:bg-tertiary-700/50 rounded-md p-0.5 text-primary-500"
 					>renderComponent</code
-				> will get 2 props:
+				> will get 3 props:
 			</p>
 			<div class="items-center mt-2">
 				<div class="flex gap-2">
@@ -87,6 +92,22 @@
 				</div>
 				<p class="text-xl pl-10">The value of the current cell.</p>
 			</div>
+			<div class="items-center mt-2">
+				<div class="flex gap-2">
+					<div class="italic">dispatchFn:</div>
+					<div class="font-bold">{`(obj: any) => dispatch('action', obj)`}</div>
+				</div>
+				<p class="text-xl pl-10">
+					A function that takes an object and dispatches an action with the name <code
+						class="!text-xl bg-tertiary-300 dark:bg-tertiary-700/50 rounded-md p-0.5 text-primary-500"
+						>action</code
+					>. The passed object is accessible by the parent component through the
+					<code
+						class="!text-xl bg-tertiary-300 dark:bg-tertiary-700/50 rounded-md p-0.5 text-primary-500"
+						>action.detail</code
+					> property.
+				</p>
+			</div>
 		</div>
 	</div>
 </div>
diff --git a/src/routes/components/table/docs/TableConfigDocs.svelte b/src/routes/components/table/docs/TableConfigDocs.svelte
index d07d7647..e34d0ac3 100644
--- a/src/routes/components/table/docs/TableConfigDocs.svelte
+++ b/src/routes/components/table/docs/TableConfigDocs.svelte
@@ -155,7 +155,7 @@
 		</div>
 
 		<p class="text-xl pl-10">
-			An array of page sizes to be used for the table. By default, page sizes are 5, 10, 15, 20.
+			An array of page sizes to be used for the table. By default, page sizes are 5, 10, 20, 50, 100.
 		</p>
 	</div>
 
diff --git a/src/routes/components/table/docs/TableProps.svelte b/src/routes/components/table/docs/TableProps.svelte
new file mode 100644
index 00000000..8af65142
--- /dev/null
+++ b/src/routes/components/table/docs/TableProps.svelte
@@ -0,0 +1,14 @@
+<div class="grid gap-5">
+	<div class="grid gap-2" id="tableProps">
+		<div class="italic div">Underlined attributes are <strong>required</strong>.</div>
+	</div>
+
+	<div class="items-center">
+		<div class="flex gap-2">
+			<div class="italic underline">config:</div>
+			<div class="font-bold">{`TableConfig <T>`}</div>
+		</div>
+
+		<p class="text-xl pl-10">Configuration for the table.</p>
+	</div>
+</div>