@bexis2/bexis2-core-ui 0.4.4 → 0.4.6

package/README.md

@@ -1,4 +1,16 @@
 # bexis-core-ui
+## 0.4.6
+- table
+  - Adds config for enabling and disabling Search field on Table.
+  - Adds action dispatcher as prop for the renderComponent.
+  - Adds unique IDs for Search reset and submit buttons.
+
+## 0.4.5
+- table
+  - adds searching for missing values in the filters #744
+  - missing values for every data type
+  - display patterns for date/time/datetime types
+
 ## 0.4.4
 - update libs
   - remove eslint-plugin-svelte3

package/dist/components/Table/Table.svelte

@@ -1,8 +1,16 @@
 <script>import Table from "./TableContent.svelte";
 export let config;
+let fetched = false;
 const data = config.data;
+$:
+  if ($data.length > 0)
+    fetched = true;
 </script>
 
-{#key $data.length && true}
-	<Table {config} on:action />
+{#key fetched}
+	<Table
+		{config}
+		on:fetch={(columns) => (config = { ...config, columns: columns.detail })}
+		on:action
+	/>
 {/key}

package/dist/components/Table/TableContent.svelte

@@ -49,6 +49,8 @@ let {
   // 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
   fitToScreen = true,
@@ -66,7 +68,7 @@ let {
   entityId = 0,
   // Entity ID to send with the request
   versionId = 0
-  // Version ID to send with the request
+  // Version ID to send with the request,
 } = config;
 let searchValue = "";
 let isFetching = false;
@@ -138,7 +140,7 @@ const tableColumns = [
         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 }) : toStringFn ? toStringFn(value) : value;
+          return renderComponent ? createRender(renderComponent, { value, row, dispatchFn: actionDispatcher }) : toStringFn ? toStringFn(value) : value;
         },
         plugins: {
           // Sorting config
@@ -162,7 +164,8 @@ const tableColumns = [
                 updateTable,
                 pageIndex,
                 toFilterableValueFn,
-                filters
+                filters,
+                toStringFn
               }) : createRender(colFilterComponent ?? TableFilter, {
                 filterValue: filterValue2,
                 id,
@@ -270,9 +273,22 @@ const updateTable = async () => {
   }
   const response = await fetchData.json();
   if (response.columns !== void 0) {
-    columns = convertServerColumns(response.columns);
+    columns = convertServerColumns(response.columns, columns);
+    const clientCols = response.columns.reduce((acc, col) => {
+      acc[col.key] = col.column;
+      return acc;
+    }, {});
+    const tmpArr = [];
+    response.data.forEach((row, index) => {
+      const tmp = {};
+      Object.keys(row).forEach((key) => {
+        tmp[clientCols[key]] = row[key];
+      });
+      tmpArr.push(tmp);
+    });
+    dispatch("fetch", columns);
+    $data = tmpArr;
   }
-  $data = response.data;
   $serverItems = response.count;
   return response;
 };
@@ -294,87 +310,92 @@ $:
 </script>
 
 <div class="grid gap-2 overflow-auto" class:w-fit={!fitToScreen} class:w-full={fitToScreen}>
-	<div class="table-container">
-		<!-- Enable the search filter if table is not empty -->
-		{#if $data.length > 0}
-			<form
-				class="flex gap-2"
-				on:submit|preventDefault={() => {
-					sendModel.q = searchValue;
-					$filterValue = searchValue;
-				}}
-			>
-				<div class="relative w-full flex items-center">
-					<input
-						class="input p-2 border border-primary-500"
-						type="text"
-						bind:value={searchValue}
-						placeholder="Search rows..."
-						id="{tableId}-search"
-					/><button
-						type="reset"
-						class="absolute right-3 items-center"
-						on:click|preventDefault={() => {
-							searchValue = '';
-							sendModel.q = '';
-							$filterValue = '';
-						}}><Fa icon={faXmark} /></button
-					>
-				</div>
-				<button
-					type="submit"
-					class="btn variant-filled-primary"
-					on:click|preventDefault={() => {
-						$filterValue = searchValue;
+	{#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}
+				<form
+					class="flex gap-2"
+					on:submit|preventDefault={() => {
 						sendModel.q = searchValue;
-					}}>Search</button
+						$filterValue = searchValue;
+					}}
 				>
-			</form>
-		{/if}
-		<div class="flex justify-between items-center py-2 w-full">
-			<div>
-				<!-- Enable the fitToScreen toggle if toggle === true -->
-				{#if toggle}
-					<SlideToggle
-						name="slider-label"
-						active="bg-primary-500"
-						size="sm"
-						checked={fitToScreen}
-						id="{tableId}-toggle"
-						on:change={() => (fitToScreen = !fitToScreen)}>Fit to screen</SlideToggle
-					>
-				{/if}
-			</div>
-			<div class="flex gap-2">
-				<!-- Enable the resetResize button if resizable !== 'none' -->
-				{#if resizable !== 'none'}
+					<div class="relative w-full flex items-center">
+						<input
+							class="input p-2 border border-primary-500"
+							type="text"
+							bind:value={searchValue}
+							placeholder="Search rows..."
+							id="{tableId}-search"
+						/><button
+							type="reset"
+							id="{tableId}-searchReset"
+							class="absolute right-3 items-center"
+							on:click|preventDefault={() => {
+								searchValue = '';
+								sendModel.q = '';
+								$filterValue = '';
+							}}><Fa icon={faXmark} /></button
+						>
+					</div>
 					<button
-						type="button"
-						class="btn btn-sm variant-filled-primary rounded-full order-last"
-						on:click|preventDefault={() =>
-							resetResize($headerRows, $pageRows, tableId, columns, resizable)}>Reset sizing</button
-					>
-				{/if}
-				{#if exportable}
-					<button
-						type="button"
-						class="btn btn-sm variant-filled-primary rounded-full order-last"
-						on:click|preventDefault={() => exportAsCsv(tableId, $exportedData)}
-						>Export as CSV</button
+						type="submit"
+						id="{tableId}-searchSubmit"
+						class="btn variant-filled-primary"
+						on:click|preventDefault={() => {
+							$filterValue = searchValue;
+							sendModel.q = searchValue;
+						}}>Search</button
 					>
-				{/if}
+				</form>
+			{/if}
+
+			<div class="flex justify-between items-center w-full {search && 'py-2'}">
+				<div>
+					<!-- Enable the fitToScreen toggle if toggle === true -->
+					{#if toggle}
+						<SlideToggle
+							name="slider-label"
+							active="bg-primary-500"
+							size="sm"
+							checked={fitToScreen}
+							id="{tableId}-toggle"
+							on:change={() => (fitToScreen = !fitToScreen)}>Fit to screen</SlideToggle
+						>
+					{/if}
+				</div>
+				<div class="flex gap-2">
+					<!-- Enable the resetResize button if resizable !== 'none' -->
+					{#if resizable !== 'none'}
+						<button
+							type="button"
+							class="btn btn-sm variant-filled-primary rounded-full order-last"
+							on:click|preventDefault={() =>
+								resetResize($headerRows, $pageRows, tableId, columns, resizable)}
+							>Reset sizing</button
+						>
+					{/if}
+					{#if exportable}
+						<button
+							type="button"
+							class="btn btn-sm variant-filled-primary rounded-full order-last"
+							on:click|preventDefault={() => exportAsCsv(tableId, $exportedData)}
+							>Export as CSV</button
+						>
+					{/if}
+				</div>
 			</div>
-		</div>
 
-		<div class="overflow-auto" style="height: {height}px">
-			<table
-				{...$tableAttrs}
-				class="table table-auto table-compact bg-tertiary-500/30 dark:bg-tertiary-900/10 overflow-clip"
-				id="{tableId}-table"
-			>
-				<!-- If table height is provided, making the top row sticky -->
-				<thead class=" {height != null ? `sticky top-0` : ''}">
-					{#if $data.length > 0}
+			<div class="overflow-auto" style="height: {height}px">
+				<table
+					{...$tableAttrs}
+					class="table table-auto table-compact bg-tertiary-500/30 dark:bg-tertiary-900/10 overflow-clip"
+					id="{tableId}-table"
+				>
+					<!-- If table height is provided, making the top row sticky -->
+					<thead class={height != null && $pageRows.length > 0 ? `sticky top-0` : ''}>
+						<!-- {#if $data.length > 0} -->
 						{#each $headerRows as headerRow (headerRow.id)}
 							<Subscribe
 								rowAttrs={headerRow.attrs()}
@@ -382,7 +403,7 @@ $:
 								rowProps={headerRow.props()}
 								let:rowProps
 							>
-								<tr {...rowAttrs} class="bg-primary-300 dark:bg-primary-500">
+								<tr {...rowAttrs} class="bg-primary-300 dark:bg-primary-800">
 									{#each headerRow.cells as cell (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)}>
@@ -428,16 +449,9 @@ $:
 								</tr>
 							</Subscribe>
 						{/each}
-					{:else if isFetching}
-						<div class="p-10"><Spinner /></div>
-					{:else}
-						<!-- Table is empty -->
-						<p class="items-center justify-center flex w-full p-10 italic">Nothing to show here.</p>
-					{/if}
-				</thead>
+					</thead>
 
-				<tbody class="overflow-auto" {...$tableBodyAttrs}>
-					{#if $data.length > 0}
+					<tbody class="overflow-auto" {...$tableBodyAttrs}>
 						{#each $pageRows as row (row.id)}
 							<Subscribe rowAttrs={row.attrs()} let:rowAttrs>
 								<tr {...rowAttrs} id="{tableId}-row-{row.id}" class="">
@@ -465,13 +479,22 @@ $:
 								</tr>
 							</Subscribe>
 						{/each}
-					{/if}
-				</tbody>
-			</table>
+					</tbody>
+				</table>
+			</div>
 		</div>
-	</div>
-	{#if $data.length > 0}
-		<!-- Adding pagination, if table is not empty -->
+	{:else}
+		<div class="p-10 w-full h-full flex justify-center items-center bg-neutral-200 rounded">
+			<p>No data available</p>
+		</div>
+	{/if}
+
+	{#if isFetching}
+		<div class="p-10 w-full h-full flex justify-center items-center"><Spinner /></div>
+	{/if}
+
+	<!-- Adding pagination, if table is not empty -->
+	{#if $data.length > 0 || (columns && Object.keys(columns).length > 0)}
 		{#if serverSide}
 			<TablePaginationServer
 				{pageIndex}

package/dist/components/Table/TableContent.svelte.d.ts

@@ -6,6 +6,7 @@ declare const __propDef: {
     };
     events: {
         action: CustomEvent<any>;
+        fetch: CustomEvent<any>;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/dist/components/Table/TableFilter.svelte

@@ -18,7 +18,9 @@ $values.forEach((item) => {
   if (item) {
     type = typeof (toFilterableValueFn ? toFilterableValueFn(item) : item);
     if (type === "object") {
-      if (item instanceof Date) {
+      if (toFilterableValueFn && toFilterableValueFn(item) instanceof Date) {
+        isDate = true;
+      } else if (item instanceof Date) {
         isDate = true;
       }
     }

package/dist/components/Table/TableFilterServer.svelte

@@ -9,7 +9,21 @@ export let toFilterableValueFn = void 0;
 export let filters;
 export let updateTable;
 export let pageIndex;
+export let toStringFn = void 0;
 let active = false;
+let type = "string";
+let isDate = false;
+let dropdowns = [];
+$values.forEach((item) => {
+  if (item) {
+    type = typeof (toFilterableValueFn ? toFilterableValueFn(item) : item);
+    if (type === "object") {
+      if ((toFilterableValueFn ? toFilterableValueFn(item) : item) instanceof Date) {
+        isDate = true;
+      }
+    }
+  }
+});
 const options = {
   number: [
     {
@@ -83,35 +97,34 @@ const options = {
     {
       value: FilterOptionsEnum.b,
       label: "Is before"
-    },
-    {
-      value: FilterOptionsEnum.no,
-      label: "Is not on"
     }
+    // TODO: 'Not on' filter should be fixed on the server side
+    // {
+    // 	value: FilterOptionsEnum.no,
+    // 	label: 'Is not on'
+    // }
   ]
 };
-let dropdowns = [];
 const popupId = `${tableId}-${id}`;
 const popupFeatured = {
   event: "click",
   target: popupId,
   placement: "bottom-start"
 };
-let type = "string";
-let isDate = false;
-$values.forEach((item) => {
-  if (item) {
-    type = typeof (toFilterableValueFn ? toFilterableValueFn(item) : item);
-    if (type === "object") {
-      if (item instanceof Date) {
-        isDate = true;
-      }
-    }
-  }
-});
+const stringValues = $values.map((item) => toStringFn ? toStringFn(item) : item);
+const missingValues = stringValues.reduce((acc, item, index) => {
+  acc[typeof item === "string" ? item.toLowerCase() : item] = $values[index];
+  return acc;
+}, {});
+const getMissingValue = (value) => {
+  return Object.keys(missingValues).includes(value.toLowerCase()) ? missingValues[value.toLowerCase()] : value;
+};
 const optionChangeHandler = (e, index) => {
   delete $filters[id][dropdowns[index].option];
-  $filters[id] = { ...$filters[id], [e.target.value]: dropdowns[index].value };
+  $filters[id] = {
+    ...$filters[id],
+    [e.target.value]: getMissingValue(dropdowns[index].value)
+  };
   $filters = $filters;
   dropdowns[index] = {
     ...dropdowns[index],
@@ -121,11 +134,14 @@ const optionChangeHandler = (e, index) => {
 const valueChangeHandler = (e, index) => {
   dropdowns[index] = {
     ...dropdowns[index],
-    value: type === "number" ? +e.target.value : type === "date" ? new Date(e.target.value) : e.target.value
+    value: type === "date" ? new Date(e.target.value) : e.target.value
   };
   $filters = {
     ...$filters,
-    [id]: { ...$filters[id], [dropdowns[index].option]: dropdowns[index].value }
+    [id]: {
+      ...$filters[id],
+      [dropdowns[index].option]: type === "number" ? parseFloat(getMissingValue(e.target.value)) || void 0 : getMissingValue(e.target.value)
+    }
   };
 };
 const addFilter = (option, value) => {
@@ -165,6 +181,8 @@ $:
   );
 $:
   addFilter(options[type][0].value, void 0);
+$:
+  console.log($filters);
 </script>
 
 <form class="">
@@ -222,14 +240,14 @@ $:
 							{/if}
 						</div>
 
-						{#if type === 'number'}
+						<!-- {#if type === 'number'}
 							<input
 								type="number"
 								class="input p-1 border border-primary-500"
 								on:input={(e) => valueChangeHandler(e, index)}
 								bind:value={dropdown.value}
-							/>
-						{:else if type === 'string'}
+							/> -->
+						{#if type === 'number' || type === 'string'}
 							<input
 								type="text"
 								class="input p-1 border border-primary-500"

package/dist/components/Table/TableFilterServer.svelte.d.ts

@@ -8,6 +8,7 @@ declare const __propDef: {
         filters: any;
         updateTable: any;
         pageIndex: any;
+        toStringFn?: undefined | ((value: any) => string);
     };
     events: {
         [evt: string]: CustomEvent<any>;

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

@@ -25,7 +25,7 @@ export declare const normalizeFilters: (filters: {
 }) => Filter[];
 export declare const exportAsCsv: (tableId: string, exportedData: string) => void;
 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, missingValues: {
+export declare const missingValuesFn: (key: number | string, missingValues: {
     [key: string | number]: string;
-}) => string;
-export declare const convertServerColumns: (columns: ServerColumn[]) => Columns;
+}) => string | number;
+export declare const convertServerColumns: (serverColumns: ServerColumn[], columns: Columns | undefined) => Columns;

package/dist/components/Table/shared.js

@@ -89,29 +89,66 @@ export const resetResize = (headerRows, pageRows, tableId, columns, resizable) =
     }
 };
 export const missingValuesFn = (key, missingValues) => {
-    return key in missingValues ? missingValues[key] : key.toString();
+    const foundKey = typeof key === 'number' && key.toString().includes('e')
+        ? Object.keys(missingValues).find((item) => {
+            return item.toLowerCase() === key.toString().toLowerCase();
+        })
+        : typeof key === 'string' && parseInt(key).toString().length !== key.length && new Date(key)
+            ? Object.keys(missingValues).find((item) => new Date(item).getTime() === new Date(key).getTime())
+            : key in missingValues
+                ? key
+                : undefined;
+    return foundKey ? missingValues[foundKey] : key;
 };
-export const convertServerColumns = (columns) => {
+export const convertServerColumns = (serverColumns, columns) => {
     const columnsConfig = {};
-    columns.forEach((col) => {
+    serverColumns.forEach((col) => {
         let instructions = {};
         if (col.instructions?.displayPattern) {
+            let dp = col.instructions.displayPattern;
+            // Swap 'm' and 'M' to match the backend date format
+            for (let i = 0; i < col.instructions.displayPattern.length; i++) {
+                if (col.instructions.displayPattern[i] === 'm') {
+                    dp = `${dp.slice(0, i)}M${dp.slice(i + 1)}`;
+                }
+                else if (col.instructions.displayPattern[i] === 'M') {
+                    dp = `${dp.slice(0, i)}m${dp.slice(i + 1)}`;
+                }
+            }
             instructions = {
-                toStringFn: (date) => dateFormat(date, col.instructions?.displayPattern || ''),
-                toSortableValueFn: (date) => date.getTime(),
-                toFilterableValueFn: (date) => date
+                toStringFn: (date) => {
+                    if (col.instructions?.missingValues) {
+                        const missingValue = missingValuesFn(date, col.instructions?.missingValues || {});
+                        if (missingValue === date) {
+                            return dateFormat(new Date(date), dp);
+                        }
+                        return missingValue;
+                    }
+                    else {
+                        return dateFormat(new Date(date), dp);
+                    }
+                },
+                toSortableValueFn: (date) => new Date(date).getTime(),
+                toFilterableValueFn: (date) => new Date(date)
             };
         }
-        if (col.instructions?.missingValues) {
+        else if (col.instructions?.missingValues) {
             instructions = {
                 ...instructions,
                 toStringFn: (key) => missingValuesFn(key, col.instructions?.missingValues || {})
             };
         }
-        columnsConfig[col.column] = {
-            exclude: col.exclude,
-            instructions
-        };
+        if (columns && col.column in columns) {
+            columnsConfig[col.column] = {
+                ...columns[col.column],
+                instructions
+            };
+        }
+        else {
+            columnsConfig[col.column] = {
+                instructions
+            };
+        }
     });
     return columnsConfig;
 };

package/dist/models/Models.d.ts

@@ -85,6 +85,7 @@ export interface TableConfig<T> {
     data: Writable<T[]>;
     resizable?: 'none' | 'rows' | 'columns' | 'both';
     toggle?: boolean;
+    search?: boolean;
     fitToScreen?: boolean;
     height?: null | number;
     rowHeight?: number;
@@ -131,6 +132,7 @@ export interface notificationStoreType {
 }
 export type ServerColumn = {
     column: string;
+    key: string;
     exclude?: boolean;
     instructions?: {
         missingValues?: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bexis2/bexis2-core-ui",
-  "version": "0.4.4",
+  "version": "0.4.6",
   "private": false,
   "scripts": {
     "dev": "vite dev",
@@ -25,6 +25,7 @@
     "@skeletonlabs/tw-plugin": "^0.3.1",
     "@sveltejs/adapter-auto": "^3.2.0",
     "@sveltejs/adapter-static": "^3.0.1",
+    "@sveltejs/package": "^2.3.1",
     "@tailwindcss/forms": "^0.5.7",
     "@tailwindcss/typography": "^0.5.12",
     "@types/node": "^20.12.5",
@@ -39,7 +40,6 @@
     "raw-loader": "^4.0.2",
     "svelte": "^4.2.12",
     "svelte-check": "^3.6.9",
-    "@sveltejs/package": "^2.3.1",
     "tailwindcss": "^3.4.3",
     "tslib": "^2.6.2",
     "typescript": "^5.4.4",
@@ -69,6 +69,8 @@
     "@fortawesome/fontawesome-svg-core": "^6.5.2",
     "@fortawesome/free-regular-svg-icons": "^6.5.2",
     "@fortawesome/free-solid-svg-icons": "^6.5.2",
+    "@sveltejs/kit": "^2.5.5",
+    "@sveltejs/vite-plugin-svelte": "^3.1.0",
     "axios": "^1.6.8",
     "codemirror": "^6.0.1",
     "dateformat": "^5.0.3",
@@ -83,7 +85,6 @@
     "svelte-file-dropzone": "^2.0.7",
     "svelte-headless-table": "^0.18.2",
     "svelte-select": "5.8.3",
-    "@sveltejs/kit": "^2.5.5",
     "vest": "^5.2.12"
   },
   "author": "David Schöne",

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

@@ -3,9 +3,17 @@
 	import type { TableConfig } from '$models/Models';
 
 	export let config: TableConfig<any>;
+
+	let fetched = false;
 	const data = config.data;
+
+	$: if ($data.length > 0) fetched = true;
 </script>
 
-{#key $data.length && true}
-	<Table {config} on:action />
+{#key fetched}
+	<Table
+		{config}
+		on:fetch={(columns) => (config = { ...config, columns: columns.detail })}
+		on:action
+	/>
 {/key}

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

@@ -33,8 +33,8 @@
 		resetResize,
 		convertServerColumns
 	} from './shared';
-	import { Receive, Send } from '$lib/models/Models';
-	import type { TableConfig } from '$lib/models/Models';
+	import { Receive, Send } from '$models/Models';
+	import type { TableConfig } from '$models/Models';
 	import type { FilterOptionsEnum } from '$models/Enums';
 
 	export let config: TableConfig<any>;
@@ -50,6 +50,7 @@
 		optionsComponent, // Custom component to render in the last column
 		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
 		fitToScreen = true, // Whether to fit the table to the screen,
 		exportable = false, // Whether to display the export button and enable export functionality
@@ -58,7 +59,7 @@
 		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
+		versionId = 0 // Version ID to send with the request,
 	} = config;
 
 	let searchValue = '';
@@ -154,7 +155,7 @@
 						// 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 })
+								? createRender(renderComponent, { value, row, dispatchFn: actionDispatcher })
 								: toStringFn
 								? toStringFn(value)
 								: value;
@@ -188,7 +189,8 @@
 														updateTable,
 														pageIndex,
 														toFilterableValueFn,
-														filters
+														filters,
+														toStringFn
 												  })
 												: createRender(colFilterComponent ?? TableFilter, {
 														filterValue,
@@ -318,11 +320,26 @@
 
 		// Format server columns to the client columns
 		if (response.columns !== undefined) {
-			columns = convertServerColumns(response.columns);
+			columns = convertServerColumns(response.columns, columns);
+
+			const clientCols = response.columns.reduce((acc, col) => {
+				acc[col.key] = col.column;
+				return acc;
+			}, {});
+
+			const tmpArr: any[] = [];
+
+			response.data.forEach((row, index) => {
+				const tmp: { [key: string]: any } = {};
+				Object.keys(row).forEach((key) => {
+					tmp[clientCols[key]] = row[key];
+				});
+				tmpArr.push(tmp);
+			});
+			dispatch('fetch', columns);
+			$data = tmpArr;
 		}
 
-		// Update data store
-		$data = response.data;
 		$serverItems = response.count;
 
 		return response;
@@ -348,87 +365,92 @@
 </script>
 
 <div class="grid gap-2 overflow-auto" class:w-fit={!fitToScreen} class:w-full={fitToScreen}>
-	<div class="table-container">
-		<!-- Enable the search filter if table is not empty -->
-		{#if $data.length > 0}
-			<form
-				class="flex gap-2"
-				on:submit|preventDefault={() => {
-					sendModel.q = searchValue;
-					$filterValue = searchValue;
-				}}
-			>
-				<div class="relative w-full flex items-center">
-					<input
-						class="input p-2 border border-primary-500"
-						type="text"
-						bind:value={searchValue}
-						placeholder="Search rows..."
-						id="{tableId}-search"
-					/><button
-						type="reset"
-						class="absolute right-3 items-center"
-						on:click|preventDefault={() => {
-							searchValue = '';
-							sendModel.q = '';
-							$filterValue = '';
-						}}><Fa icon={faXmark} /></button
-					>
-				</div>
-				<button
-					type="submit"
-					class="btn variant-filled-primary"
-					on:click|preventDefault={() => {
-						$filterValue = searchValue;
+	{#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}
+				<form
+					class="flex gap-2"
+					on:submit|preventDefault={() => {
 						sendModel.q = searchValue;
-					}}>Search</button
+						$filterValue = searchValue;
+					}}
 				>
-			</form>
-		{/if}
-		<div class="flex justify-between items-center py-2 w-full">
-			<div>
-				<!-- Enable the fitToScreen toggle if toggle === true -->
-				{#if toggle}
-					<SlideToggle
-						name="slider-label"
-						active="bg-primary-500"
-						size="sm"
-						checked={fitToScreen}
-						id="{tableId}-toggle"
-						on:change={() => (fitToScreen = !fitToScreen)}>Fit to screen</SlideToggle
-					>
-				{/if}
-			</div>
-			<div class="flex gap-2">
-				<!-- Enable the resetResize button if resizable !== 'none' -->
-				{#if resizable !== 'none'}
-					<button
-						type="button"
-						class="btn btn-sm variant-filled-primary rounded-full order-last"
-						on:click|preventDefault={() =>
-							resetResize($headerRows, $pageRows, tableId, columns, resizable)}>Reset sizing</button
-					>
-				{/if}
-				{#if exportable}
+					<div class="relative w-full flex items-center">
+						<input
+							class="input p-2 border border-primary-500"
+							type="text"
+							bind:value={searchValue}
+							placeholder="Search rows..."
+							id="{tableId}-search"
+						/><button
+							type="reset"
+							id="{tableId}-searchReset"
+							class="absolute right-3 items-center"
+							on:click|preventDefault={() => {
+								searchValue = '';
+								sendModel.q = '';
+								$filterValue = '';
+							}}><Fa icon={faXmark} /></button
+						>
+					</div>
 					<button
-						type="button"
-						class="btn btn-sm variant-filled-primary rounded-full order-last"
-						on:click|preventDefault={() => exportAsCsv(tableId, $exportedData)}
-						>Export as CSV</button
+						type="submit"
+						id="{tableId}-searchSubmit"
+						class="btn variant-filled-primary"
+						on:click|preventDefault={() => {
+							$filterValue = searchValue;
+							sendModel.q = searchValue;
+						}}>Search</button
 					>
-				{/if}
+				</form>
+			{/if}
+
+			<div class="flex justify-between items-center w-full {search && 'py-2'}">
+				<div>
+					<!-- Enable the fitToScreen toggle if toggle === true -->
+					{#if toggle}
+						<SlideToggle
+							name="slider-label"
+							active="bg-primary-500"
+							size="sm"
+							checked={fitToScreen}
+							id="{tableId}-toggle"
+							on:change={() => (fitToScreen = !fitToScreen)}>Fit to screen</SlideToggle
+						>
+					{/if}
+				</div>
+				<div class="flex gap-2">
+					<!-- Enable the resetResize button if resizable !== 'none' -->
+					{#if resizable !== 'none'}
+						<button
+							type="button"
+							class="btn btn-sm variant-filled-primary rounded-full order-last"
+							on:click|preventDefault={() =>
+								resetResize($headerRows, $pageRows, tableId, columns, resizable)}
+							>Reset sizing</button
+						>
+					{/if}
+					{#if exportable}
+						<button
+							type="button"
+							class="btn btn-sm variant-filled-primary rounded-full order-last"
+							on:click|preventDefault={() => exportAsCsv(tableId, $exportedData)}
+							>Export as CSV</button
+						>
+					{/if}
+				</div>
 			</div>
-		</div>
 
-		<div class="overflow-auto" style="height: {height}px">
-			<table
-				{...$tableAttrs}
-				class="table table-auto table-compact bg-tertiary-500/30 dark:bg-tertiary-900/10 overflow-clip"
-				id="{tableId}-table"
-			>
-				<!-- If table height is provided, making the top row sticky -->
-				<thead class=" {height != null ? `sticky top-0` : ''}">
-					{#if $data.length > 0}
+			<div class="overflow-auto" style="height: {height}px">
+				<table
+					{...$tableAttrs}
+					class="table table-auto table-compact bg-tertiary-500/30 dark:bg-tertiary-900/10 overflow-clip"
+					id="{tableId}-table"
+				>
+					<!-- If table height is provided, making the top row sticky -->
+					<thead class={height != null && $pageRows.length > 0 ? `sticky top-0` : ''}>
+						<!-- {#if $data.length > 0} -->
 						{#each $headerRows as headerRow (headerRow.id)}
 							<Subscribe
 								rowAttrs={headerRow.attrs()}
@@ -436,7 +458,7 @@
 								rowProps={headerRow.props()}
 								let:rowProps
 							>
-								<tr {...rowAttrs} class="bg-primary-300 dark:bg-primary-500">
+								<tr {...rowAttrs} class="bg-primary-300 dark:bg-primary-800">
 									{#each headerRow.cells as cell (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)}>
@@ -482,16 +504,9 @@
 								</tr>
 							</Subscribe>
 						{/each}
-					{:else if isFetching}
-						<div class="p-10"><Spinner /></div>
-					{:else}
-						<!-- Table is empty -->
-						<p class="items-center justify-center flex w-full p-10 italic">Nothing to show here.</p>
-					{/if}
-				</thead>
+					</thead>
 
-				<tbody class="overflow-auto" {...$tableBodyAttrs}>
-					{#if $data.length > 0}
+					<tbody class="overflow-auto" {...$tableBodyAttrs}>
 						{#each $pageRows as row (row.id)}
 							<Subscribe rowAttrs={row.attrs()} let:rowAttrs>
 								<tr {...rowAttrs} id="{tableId}-row-{row.id}" class="">
@@ -519,13 +534,22 @@
 								</tr>
 							</Subscribe>
 						{/each}
-					{/if}
-				</tbody>
-			</table>
+					</tbody>
+				</table>
+			</div>
 		</div>
-	</div>
-	{#if $data.length > 0}
-		<!-- Adding pagination, if table is not empty -->
+	{:else}
+		<div class="p-10 w-full h-full flex justify-center items-center bg-neutral-200 rounded">
+			<p>No data available</p>
+		</div>
+	{/if}
+
+	{#if isFetching}
+		<div class="p-10 w-full h-full flex justify-center items-center"><Spinner /></div>
+	{/if}
+
+	<!-- Adding pagination, if table is not empty -->
+	{#if $data.length > 0 || (columns && Object.keys(columns).length > 0)}
 		{#if serverSide}
 			<TablePaginationServer
 				{pageIndex}

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

@@ -30,7 +30,9 @@
 			type = typeof (toFilterableValueFn ? toFilterableValueFn(item) : item);
 
 			if (type === 'object') {
-				if (item instanceof Date) {
+				if (toFilterableValueFn && toFilterableValueFn(item) instanceof Date) {
+					isDate = true;
+				} else if (item instanceof Date) {
 					isDate = true;
 				}
 			}

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

@@ -13,9 +13,29 @@
 	export let filters;
 	export let updateTable;
 	export let pageIndex;
+	export let toStringFn: undefined | ((value: any) => string) = undefined;
 
 	// If the filter is applied and the displayed values are filtered
 	let active = false;
+	let type: string = 'string';
+	let isDate = false;
+	let dropdowns: {
+		option: FilterOptionsEnum;
+		value: string | number | Date | undefined;
+	}[] = [];
+
+	// Check the type of the column
+	$values.forEach((item) => {
+		if (item) {
+			type = typeof (toFilterableValueFn ? toFilterableValueFn(item) : item);
+
+			if (type === 'object') {
+				if ((toFilterableValueFn ? toFilterableValueFn(item) : item) instanceof Date) {
+					isDate = true;
+				}
+			}
+		}
+	});
 
 	// Options for different types of values
 	const options = {
@@ -92,18 +112,14 @@
 				value: FilterOptionsEnum.b,
 				label: 'Is before'
 			},
-			{
-				value: FilterOptionsEnum.no,
-				label: 'Is not on'
-			}
+			// TODO: 'Not on' filter should be fixed on the server side
+			// {
+			// 	value: FilterOptionsEnum.no,
+			// 	label: 'Is not on'
+			// }
 		]
 	};
 
-	let dropdowns: {
-		option: FilterOptionsEnum;
-		value: string | number | Date | undefined;
-	}[] = [];
-
 	// Unique ID for the column filter popup
 	const popupId = `${tableId}-${id}`;
 	// Popup config
@@ -113,24 +129,25 @@
 		placement: 'bottom-start'
 	};
 
-	let type: string = 'string';
-	let isDate = false;
-	// Check the type of the column
-	$values.forEach((item) => {
-		if (item) {
-			type = typeof (toFilterableValueFn ? toFilterableValueFn(item) : item);
+	const stringValues = $values.map((item) => (toStringFn ? toStringFn(item) : item));
 
-			if (type === 'object') {
-				if (item instanceof Date) {
-					isDate = true;
-				}
-			}
-		}
-	});
+	const missingValues = stringValues.reduce((acc, item, index) => {
+		acc[typeof item === 'string' ? item.toLowerCase() : item] = $values[index];
+		return acc;
+	}, {});
+
+	const getMissingValue = (value: string) => {
+		return Object.keys(missingValues).includes(value.toLowerCase())
+			? missingValues[value.toLowerCase()]
+			: value;
+	};
 
 	const optionChangeHandler = (e, index) => {
 		delete $filters[id][dropdowns[index].option];
-		$filters[id] = { ...$filters[id], [e.target.value]: dropdowns[index].value };
+		$filters[id] = {
+			...$filters[id],
+			[e.target.value]: getMissingValue(dropdowns[index].value as string)
+		};
 		$filters = $filters;
 
 		dropdowns[index] = {
@@ -142,17 +159,18 @@
 	const valueChangeHandler = (e, index) => {
 		dropdowns[index] = {
 			...dropdowns[index],
-			value:
-				type === 'number'
-					? +e.target.value
-					: type === 'date'
-					? new Date(e.target.value)
-					: e.target.value
+			value: type === 'date' ? new Date(e.target.value) : e.target.value
 		};
 
 		$filters = {
 			...$filters,
-			[id]: { ...$filters[id], [dropdowns[index].option]: dropdowns[index].value }
+			[id]: {
+				...$filters[id],
+				[dropdowns[index].option]:
+					type === 'number'
+						? parseFloat(getMissingValue(e.target.value)) || undefined
+						: getMissingValue(e.target.value)
+			}
 		};
 	};
 
@@ -201,6 +219,8 @@
 
 	// Start by adding the default filter
 	$: addFilter(options[type][0].value, undefined);
+
+	$: console.log($filters);
 </script>
 
 <form class="">
@@ -258,14 +278,14 @@
 							{/if}
 						</div>
 
-						{#if type === 'number'}
+						<!-- {#if type === 'number'}
 							<input
 								type="number"
 								class="input p-1 border border-primary-500"
 								on:input={(e) => valueChangeHandler(e, index)}
 								bind:value={dropdown.value}
-							/>
-						{:else if type === 'string'}
+							/> -->
+						{#if type === 'number' || type === 'string'}
 							<input
 								type="text"
 								class="input p-1 border border-primary-500"

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

@@ -107,35 +107,79 @@ export const resetResize = (
 	}
 };
 
-export const missingValuesFn = (key: number, missingValues: { [key: string | number]: string }) => {
-	return key in missingValues ? missingValues[key] : key.toString();
+export const missingValuesFn = (
+	key: number | string,
+	missingValues: { [key: string | number]: string }
+) => {
+	const foundKey =
+		typeof key === 'number' && key.toString().includes('e')
+			? Object.keys(missingValues).find((item) => {
+					return (item as string).toLowerCase() === key.toString().toLowerCase();
+			  })
+			: typeof key === 'string' && parseInt(key).toString().length !== key.length && new Date(key)
+			? Object.keys(missingValues).find(
+					(item) => new Date(item).getTime() === new Date(key).getTime()
+			  )
+			: key in missingValues
+			? key
+			: undefined;
+
+	return foundKey ? missingValues[foundKey] : key;
 };
 
-export const convertServerColumns = (columns: ServerColumn[]) => {
+export const convertServerColumns = (
+	serverColumns: ServerColumn[],
+	columns: Columns | undefined
+) => {
 	const columnsConfig: Columns = {};
 
-	columns.forEach((col) => {
+	serverColumns.forEach((col) => {
 		let instructions = {};
 
 		if (col.instructions?.displayPattern) {
+			let dp = col.instructions.displayPattern;
+
+			// Swap 'm' and 'M' to match the backend date format
+			for (let i = 0; i < col.instructions.displayPattern.length; i++) {
+				if (col.instructions.displayPattern[i] === 'm') {
+					dp = `${dp.slice(0, i)}M${dp.slice(i + 1)}`;
+				} else if (col.instructions.displayPattern[i] === 'M') {
+					dp = `${dp.slice(0, i)}m${dp.slice(i + 1)}`;
+				}
+			}
+
 			instructions = {
-				toStringFn: (date: Date) => dateFormat(date, col.instructions?.displayPattern || ''),
-				toSortableValueFn: (date: Date) => date.getTime(),
-				toFilterableValueFn: (date: Date) => date
+				toStringFn: (date: string) => {
+					if (col.instructions?.missingValues) {
+						const missingValue = missingValuesFn(date, col.instructions?.missingValues || {});
+						if (missingValue === date) {
+							return dateFormat(new Date(date), dp);
+						}
+						return missingValue;
+					} else {
+						return dateFormat(new Date(date), dp);
+					}
+				},
+				toSortableValueFn: (date: string) => new Date(date).getTime(),
+				toFilterableValueFn: (date: string) => new Date(date)
 			};
-		}
-
-		if (col.instructions?.missingValues) {
+		} else if (col.instructions?.missingValues) {
 			instructions = {
 				...instructions,
 				toStringFn: (key) => missingValuesFn(key, col.instructions?.missingValues || {})
 			};
 		}
 
-		columnsConfig[col.column] = {
-			exclude: col.exclude,
-			instructions
-		};
+		if (columns && col.column in columns) {
+			columnsConfig[col.column] = {
+				...columns[col.column],
+				instructions
+			};
+		} else {
+			columnsConfig[col.column] = {
+				instructions
+			};
+		}
 	});
 
 	return columnsConfig;

package/src/lib/models/Models.ts

@@ -110,6 +110,7 @@ export interface TableConfig<T> {
 	data: Writable<T[]>;
 	resizable?: 'none' | 'rows' | 'columns' | 'both'; // none by default
 	toggle?: boolean; // false by default
+	search?: boolean; // true by default
 	fitToScreen?: boolean; // true by default
 	height?: null | number; // null by default
 	rowHeight?: number; // auto by default
@@ -167,7 +168,8 @@ export interface notificationStoreType {
 
 // Table column type for server-side table
 export type ServerColumn = {
-	column: string;
+	column: string; // column name on client side
+	key: string; // column name received from the server
 	exclude?: boolean; // false by default
 	instructions?: {
 		missingValues?: { [key: string | number]: string };