Merge pull request #90 from BEXIS2/table

Table

Author: DavidBlaa

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
@@ -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;
@@ -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={() => {
@@ -386,6 +385,7 @@
 							id="{tableId}-search"
 						/><button
 							type="reset"
+							id="{tableId}-searchReset"
 							class="absolute right-3 items-center"
 							on:click|preventDefault={() => {
 								searchValue = '';
@@ -396,6 +396,7 @@
 					</div>
 					<button
 						type="submit"
+						id="{tableId}-searchSubmit"
 						class="btn variant-filled-primary"
 						on:click|preventDefault={() => {
 							$filterValue = searchValue;
@@ -405,7 +406,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}

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

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>