From d84361f99c683d65e5926c4309032a763defa43b Mon Sep 17 00:00:00 2001
From: Ibrahim Mammadov <zxyctn@gmail.com>
Date: Wed, 24 Apr 2024 16:37:24 +0200
Subject: [PATCH 1/3] Add configuration for hiding search bar

---
 src/lib/components/Table/TableContent.svelte        |  7 +++----
 src/lib/models/Models.ts                            |  1 +
 .../components/table/docs/TableConfigDocs.svelte    | 13 +++++++++++++
 3 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/src/lib/components/Table/TableContent.svelte b/src/lib/components/Table/TableContent.svelte
index a4594228..4bb996f2 100644
--- a/src/lib/components/Table/TableContent.svelte
+++ b/src/lib/components/Table/TableContent.svelte
@@ -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
@@ -319,8 +320,6 @@
 
 		// Format server columns to the client columns
 		if (response.columns !== undefined) {
-			console.log(response);
-
 			columns = convertServerColumns(response.columns, columns);
 
 			const clientCols = response.columns.reduce((acc, col) => {
@@ -369,7 +368,7 @@
 	{#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}
+			{#if !serverSide && search}
 				<form
 					class="flex gap-2"
 					on:submit|preventDefault={() => {
@@ -405,7 +404,7 @@
 				</form>
 			{/if}
 
-			<div class="flex justify-between items-center py-2 w-full">
+			<div class="flex justify-between items-center w-full {search && 'py-2'}">
 				<div>
 					<!-- Enable the fitToScreen toggle if toggle === true -->
 					{#if toggle}
diff --git a/src/lib/models/Models.ts b/src/lib/models/Models.ts
index 46e6e5dd..91965b69 100644
--- a/src/lib/models/Models.ts
+++ b/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
diff --git a/src/routes/components/table/docs/TableConfigDocs.svelte b/src/routes/components/table/docs/TableConfigDocs.svelte
index 0cc86c97..d07d7647 100644
--- a/src/routes/components/table/docs/TableConfigDocs.svelte
+++ b/src/routes/components/table/docs/TableConfigDocs.svelte
@@ -47,6 +47,19 @@
 		</p>
 	</div>
 
+	<div class="items-center">
+		<div class="flex gap-2">
+			<div class="italic">search:</div>
+			<div class="font-bold">boolean</div>
+		</div>
+
+		<p class="text-xl pl-10">
+			Whether the table should have a search bar. <code
+			class="!text-xl bg-blue-100 dark:bg-blue-600/30 rounded-md p-0.5 text-blue-500">true</code
+		> by default.
+		</p>
+	</div>
+
 	<div class="items-center">
 		<div class="flex gap-2">
 			<div class="italic">exportable:</div>

From 73071eec49de6fe3525287ca6b0136c50c8c5310 Mon Sep 17 00:00:00 2001
From: Ibrahim Mammadov <zxyctn@gmail.com>
Date: Fri, 14 Jun 2024 13:39:49 +0200
Subject: [PATCH 2/3] Add an action dispatcher prop for the renderComponent

---
 src/lib/components/Table/TableContent.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/components/Table/TableContent.svelte b/src/lib/components/Table/TableContent.svelte
index 4bb996f2..24311263 100644
--- a/src/lib/components/Table/TableContent.svelte
+++ b/src/lib/components/Table/TableContent.svelte
@@ -155,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;

From 81239857f4c9f2885e5ae77d1d591b3b0e0dcf2b Mon Sep 17 00:00:00 2001
From: Ibrahim Mammadov <zxyctn@gmail.com>
Date: Fri, 14 Jun 2024 13:42:32 +0200
Subject: [PATCH 3/3] Add unique IDs for reset and submit buttons for Search

---
 src/lib/components/Table/TableContent.svelte | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/lib/components/Table/TableContent.svelte b/src/lib/components/Table/TableContent.svelte
index 24311263..6aa0528e 100644
--- a/src/lib/components/Table/TableContent.svelte
+++ b/src/lib/components/Table/TableContent.svelte
@@ -385,6 +385,7 @@
 							id="{tableId}-search"
 						/><button
 							type="reset"
+							id="{tableId}-searchReset"
 							class="absolute right-3 items-center"
 							on:click|preventDefault={() => {
 								searchValue = '';
@@ -395,6 +396,7 @@
 					</div>
 					<button
 						type="submit"
+						id="{tableId}-searchSubmit"
 						class="btn variant-filled-primary"
 						on:click|preventDefault={() => {
 							$filterValue = searchValue;