windmill-components 1.56.1 → 1.56.5

package/components/TestJobLoader.svelte.d.ts

@@ -6,11 +6,12 @@ declare const __propDef: {
         job?: Job | undefined;
         workspaceOverride?: string | undefined;
         notfound?: boolean | undefined;
-        abstractRun?: ((fn: () => Promise<string>) => Promise<void>) | undefined;
-        runScriptByPath?: ((path: string | undefined, args: Record<string, any>) => Promise<void>) | undefined;
-        runFlowByPath?: ((path: string | undefined, args: Record<string, any>) => Promise<void>) | undefined;
-        runPreview?: ((path: string | undefined, code: string, lang: 'deno' | 'go' | 'python3' | 'bash', args: Record<string, any>) => Promise<void>) | undefined;
+        abstractRun?: ((fn: () => Promise<string>) => Promise<string>) | undefined;
+        runScriptByPath?: ((path: string | undefined, args: Record<string, any>) => Promise<string>) | undefined;
+        runFlowByPath?: ((path: string | undefined, args: Record<string, any>) => Promise<string>) | undefined;
+        runPreview?: ((path: string | undefined, code: string, lang: 'deno' | 'go' | 'python3' | 'bash', args: Record<string, any>) => Promise<string>) | undefined;
         cancelJob?: (() => Promise<void>) | undefined;
+        clearCurrentJob?: (() => Promise<void>) | undefined;
         watchJob?: ((testId: string) => Promise<void>) | undefined;
     };
     events: {
@@ -24,11 +25,12 @@ export type TestJobLoaderProps = typeof __propDef.props;
 export type TestJobLoaderEvents = typeof __propDef.events;
 export type TestJobLoaderSlots = typeof __propDef.slots;
 export default class TestJobLoader extends SvelteComponentTyped<TestJobLoaderProps, TestJobLoaderEvents, TestJobLoaderSlots> {
-    get abstractRun(): (fn: () => Promise<string>) => Promise<void>;
-    get runScriptByPath(): (path: string | undefined, args: Record<string, any>) => Promise<void>;
-    get runFlowByPath(): (path: string | undefined, args: Record<string, any>) => Promise<void>;
-    get runPreview(): (path: string | undefined, code: string, lang: "deno" | "python3" | "go" | "bash", args: Record<string, any>) => Promise<void>;
+    get abstractRun(): (fn: () => Promise<string>) => Promise<string>;
+    get runScriptByPath(): (path: string | undefined, args: Record<string, any>) => Promise<string>;
+    get runFlowByPath(): (path: string | undefined, args: Record<string, any>) => Promise<string>;
+    get runPreview(): (path: string | undefined, code: string, lang: "deno" | "python3" | "go" | "bash", args: Record<string, any>) => Promise<string>;
     get cancelJob(): () => Promise<void>;
+    get clearCurrentJob(): () => Promise<void>;
     get watchJob(): (testId: string) => Promise<void>;
 }
 export {};

package/components/Toggle.svelte

@@ -1,18 +1,32 @@
-<script>import { createEventDispatcher } from 'svelte';
+<script>import { classNames } from '../utils';
+import { createEventDispatcher } from 'svelte';
 export let options = {};
 export let checked = false;
 export let disabled = false;
+export let size = 'sm';
 const id = (Math.random() + 1).toString(36).substring(10);
 const dispatch = createEventDispatcher();
 </script>
 
-<span class={$$props.class}>
-	<label for={id} class="inline-flex items-center cursor-pointer mt-2">
+<span class="{$$props.class} z-auto">
+	<label
+		for={id}
+		class="inline-flex items-center mt-2 duration-200 {disabled
+			? 'grayscale opacity-50'
+			: 'cursor-pointer'}"
+	>
 		{#if Boolean(options?.left)}
-			<span class="mr-2 text-sm font-medium text-gray-900">{options?.left}</span>
+			<span
+				class="mr-2 text-sm font-medium duration-200 {disabled ? 'text-gray-600' : 'text-gray-900'}"
+			>
+				{options?.left}
+			</span>
 		{/if}
-		<div class="relative" on:click|stopPropagation={() => {}}>
+		<!-- svelte-ignore a11y-click-events-have-key-events -->
+		<div class="relative" on:pointerdown on:click|stopPropagation>
 			<input
+				on:focus
+				on:click
 				{disabled}
 				type="checkbox"
 				value={false}
@@ -24,11 +38,20 @@ const dispatch = createEventDispatcher();
 				}}
 			/>
 			<div
-				class="w-11 h-6 bg-gray-200 rounded-full peer peer-focus:ring-4 peer-focus:ring-blue-300 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"
+				class="w-11 h-6 bg-gray-200 rounded-full peer peer-focus:ring-4 peer-focus:ring-blue-300 
+				peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] 
+				after:absolute after:top-0.5 after:left-[2px] after:bg-white after:border-gray-300 
+				after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"
 			/>
 		</div>
 		{#if Boolean(options?.right)}
-			<span class="ml-2 text-sm font-medium text-gray-900">{options?.right}</span>
+			<span
+				class="ml-2 text-sm font-medium duration-200
+				{disabled ? 'text-gray-500' : 'text-gray-900'} 
+				{size === 'xs' ? 'text-xs' : 'text-sm'}"
+			>
+				{options?.right}
+			</span>
 		{/if}
 	</label>
 </span>

package/components/Toggle.svelte.d.ts

@@ -8,8 +8,12 @@ declare const __propDef: {
         } | undefined;
         checked?: boolean | undefined;
         disabled?: boolean | undefined;
+        size?: "xs" | "sm" | undefined;
     };
     events: {
+        pointerdown: PointerEvent;
+        click: MouseEvent;
+        focus: FocusEvent;
         change: CustomEvent<any>;
     } & {
         [evt: string]: CustomEvent<any>;

package/components/Tooltip.svelte

@@ -3,7 +3,7 @@ import Icon from 'svelte-awesome';
 import Popover from './Popover.svelte';
 </script>
 
-<Popover>
+<Popover notClickable>
 	<Icon
 		class="text-gray-500 font-thin inline-block align-middle w-4"
 		data={faInfoCircle}

package/components/apps/components/buttons/AppButton.svelte

@@ -1,5 +1,5 @@
 <script>import { Button } from '../../../common';
-import { faArrowRight, faRefresh } from '@fortawesome/free-solid-svg-icons';
+import { faSpinner } from '@fortawesome/free-solid-svg-icons';
 import { getContext } from 'svelte';
 import AlignWrapper from '../helpers/AlignWrapper.svelte';
 import InputValue from '../helpers/InputValue.svelte';
@@ -11,15 +11,19 @@ export let recomputeIds = undefined;
 export let extraQueryParams = {};
 export let horizontalAlignment = undefined;
 export let verticalAlignment = undefined;
+export let noWFull = false;
 export const staticOutputs = ['loading', 'result'];
 const { runnableComponents, worldStore } = getContext('AppEditorContext');
-let labelValue = 'Default label';
+let labelValue;
 let color;
 let size;
 let runnableComponent;
 let isLoading = false;
 let ownClick = false;
 $: outputs = $worldStore?.outputsById[id];
+$: if (outputs?.loading != undefined) {
+    outputs.loading.set(false, true);
+}
 $: outputs?.loading.subscribe({
     next: (value) => {
         isLoading = value;
@@ -42,9 +46,15 @@ $: loading = isLoading && ownClick;
 	{extraQueryParams}
 	autoRefresh={false}
 >
-	<AlignWrapper {horizontalAlignment} {verticalAlignment}>
+	<AlignWrapper {noWFull} {horizontalAlignment} {verticalAlignment}>
 		<Button
-			on:click={() => {
+			on:pointerdown={(e) => {
+				e?.stopPropagation()
+				window.dispatchEvent(new Event('pointerup'))
+			}}
+			on:click={(e) => {
+				e?.stopPropagation()
+				e?.preventDefault()
 				ownClick = true
 				runnableComponent?.runComponent()
 
@@ -56,12 +66,17 @@ $: loading = isLoading && ownClick;
 			}}
 			{size}
 			{color}
-			endIcon={{
-				icon: loading ? faRefresh : faArrowRight,
-				classes: loading ? 'animate-spin w-4' : 'w-4'
-			}}
+			endIcon={loading
+				? {
+						icon: faSpinner,
+						classes: 'animate-spin w-4'
+				  }
+				: undefined}
 		>
 			{labelValue}
+			{#if !loading}
+				<span class="w-5" />
+			{/if}
 		</Button>
 	</AlignWrapper>
 </RunnableWrapper>

package/components/apps/components/buttons/AppButton.svelte.d.ts

@@ -9,6 +9,7 @@ declare const __propDef: {
         extraQueryParams?: Record<string, any> | undefined;
         horizontalAlignment?: 'left' | 'center' | 'right' | undefined;
         verticalAlignment?: 'top' | 'center' | 'bottom' | undefined;
+        noWFull?: boolean | undefined;
         staticOutputs?: string[] | undefined;
     };
     events: {

package/components/apps/components/dataDisplay/AppBarChart.svelte

@@ -20,7 +20,12 @@ $: backgroundColor = {
 const options = {
     responsive: true,
     animation: false,
-    maintainAspectRatio: false
+    maintainAspectRatio: false,
+    plugins: {
+        legend: {
+            display: false
+        }
+    }
 };
 $: data = {
     labels,
@@ -36,7 +41,7 @@ $: data = {
 <InputValue {id} input={configuration.theme} bind:value={theme} />
 <InputValue {id} input={configuration.labels} bind:value={labels} />
 
-<RunnableWrapper bind:componentInput {id} bind:result>
+<RunnableWrapper autoRefresh bind:componentInput {id} bind:result>
 	{#if result}
 		<Bar {data} {options} />
 	{/if}

package/components/apps/components/dataDisplay/AppPieChart.svelte

@@ -36,7 +36,7 @@ $: data = {
 <InputValue {id} input={configuration.theme} bind:value={theme} />
 <InputValue {id} input={configuration.labels} bind:value={labels} />
 
-<RunnableWrapper bind:componentInput {id} bind:result>
+<RunnableWrapper autoRefresh bind:componentInput {id} bind:result>
 	{#if result}
 		<Pie {data} {options} />
 	{/if}

package/components/apps/components/form/AppForm.svelte

@@ -19,6 +19,9 @@ let runnableComponent;
 let isLoading = false;
 let ownClick = false;
 $: outputs = $worldStore?.outputsById[id];
+$: if (outputs?.loading != undefined) {
+    outputs.loading.set(false, true);
+}
 $: outputs?.loading.subscribe({
     next: (value) => {
         isLoading = value;
@@ -44,6 +47,10 @@ $: loading = isLoading && ownClick;
 >
 	<AlignWrapper {horizontalAlignment}>
 		<Button
+			on:pointerdown={(e) => {
+				e?.stopPropagation()
+				window.dispatchEvent(new Event('pointerup'))
+			}}
 			on:click={() => {
 				runnableComponent?.runComponent()
 

package/components/apps/components/helpers/AlignWrapper.svelte

@@ -1,6 +1,7 @@
 <script>import { classNames } from '../../../../utils';
 export let horizontalAlignment = undefined;
 export let verticalAlignment = undefined;
+export let noWFull = false;
 function tailwindHorizontalAlignment(horizontalAlignment) {
     switch (horizontalAlignment) {
         case 'left':
@@ -21,7 +22,7 @@ function tailwindVerticalAlignment(verticalAlignment) {
             return 'items-end';
     }
 }
-$: classes = classNames('flex w-full', tailwindHorizontalAlignment(horizontalAlignment), tailwindVerticalAlignment(verticalAlignment), verticalAlignment ? 'h-full' : '');
+$: classes = classNames('flex z-auto', noWFull ? '' : 'w-full', tailwindHorizontalAlignment(horizontalAlignment), tailwindVerticalAlignment(verticalAlignment), verticalAlignment ? 'h-full' : '');
 </script>
 
 <div class={classes}>

package/components/apps/components/helpers/AlignWrapper.svelte.d.ts

@@ -3,6 +3,7 @@ declare const __propDef: {
     props: {
         horizontalAlignment?: 'left' | 'center' | 'right' | undefined;
         verticalAlignment?: 'top' | 'center' | 'bottom' | undefined;
+        noWFull?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/apps/components/helpers/InputValue.svelte

@@ -4,13 +4,23 @@ import { accessPropertyByPath } from '../../utils';
 export let input;
 export let value;
 export let id = undefined;
+export let row = {};
 const { worldStore } = getContext('AppEditorContext');
+$: input && setDefault();
 $: state = $worldStore?.state;
-$: input && $worldStore && handleConnection();
+$: input && $worldStore && row && handleConnection();
 $: input && $state && input.type == 'template' && setValue();
+function setDefault() {
+    if (!value && input.defaultValue) {
+        value = input.defaultValue;
+    }
+}
 function handleConnection() {
     if (input.type === 'connected') {
-        $worldStore?.connect(input, onValueChange, value);
+        $worldStore?.connect(input, onValueChange);
+    }
+    else if (input.type === 'row') {
+        value = row[input.column];
     }
     else if (input.type === 'static' || input.type == 'template') {
         setValue();
@@ -75,9 +85,11 @@ function onValueChange(newValue) {
         const { path } = connection;
         const hasSubPath = ['.', '['].some((x) => path.includes(x));
         if (hasSubPath) {
-            // Must remove top level property from path
-            // Which was manually added, i.e. result
-            const realPath = path.split('.').slice(1).join('.');
+            const realPath = path
+                .replace(/\[(\w+)\]/g, '.$1')
+                .split('.')
+                .slice(1)
+                .join('.');
             value = accessPropertyByPath(newValue, realPath);
         }
         else {

package/components/apps/components/helpers/InputValue.svelte.d.ts

@@ -5,6 +5,7 @@ declare const __propDef: {
         input: AppInput;
         value: string | number | boolean | Record<string | number, any> | undefined;
         id?: string | undefined;
+        row?: Record<string, any> | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/apps/components/helpers/NonRunnableComponent.svelte

@@ -6,6 +6,9 @@ export let id;
 // Sync the result to the output
 const { worldStore } = getContext('AppEditorContext');
 $: outputs = $worldStore?.outputsById[id];
+$: if (outputs?.loading != undefined) {
+    outputs.loading.set(false, true);
+}
 function setOutput() {
     if (outputs) {
         outputs.result?.set(result);

package/components/apps/components/helpers/RefreshButton.svelte

@@ -1,20 +1,25 @@
 <script>import Button from '../../../common/button/Button.svelte';
 import { faRefresh } from '@fortawesome/free-solid-svg-icons';
+import { RefreshCcw, RefreshCw } from 'lucide-svelte';
 import { getContext } from 'svelte';
 export let componentId;
-const { runnableComponents } = getContext('AppEditorContext');
-let loading = false;
+const { runnableComponents, worldStore } = getContext('AppEditorContext');
 async function refresh() {
-    loading = true;
+    window.dispatchEvent(new Event('pointerup'));
     await $runnableComponents[componentId]?.();
-    loading = false;
 }
+let loading = false;
+$: $worldStore?.outputsById[componentId]?.['loading']?.subscribe({
+    next: (value) => {
+        loading = value;
+    }
+});
 </script>
 
-<Button
-	iconOnly
-	startIcon={{ icon: faRefresh, classes: loading ? 'animate-spin' : '' }}
-	color="dark"
-	size="xs"
-	on:click={refresh}
-/>
+<button
+	on:pointerdown|preventDefault|stopPropagation
+	on:click|preventDefault|stopPropagation={refresh}
+	class="center-center p-1 rounded border bg-white/60 z-40"
+>
+	<RefreshCw class={loading ? 'animate-spin' : ''} size={16} />
+</button>

package/components/apps/components/helpers/RefreshButton.svelte.d.ts

@@ -4,6 +4,8 @@ declare const __propDef: {
         componentId: string;
     };
     events: {
+        pointerdown: PointerEvent;
+    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};

package/components/apps/components/helpers/RunnableComponent.svelte

@@ -4,10 +4,12 @@ import SchemaForm from '../../../SchemaForm.svelte';
 import TestJobLoader from '../../../TestJobLoader.svelte';
 import { AppService } from '../../../../gen';
 import { workspaceStore } from '../../../../stores';
+import { emptySchema } from '../../../../utils';
 import { getContext, onMount } from 'svelte';
 import { fieldTypeToTsType, loadSchema, schemaToInputsSpec } from '../../utils';
 import InputValue from './InputValue.svelte';
 import MissingConnectionWarning from './MissingConnectionWarning.svelte';
+import RefreshButton from './RefreshButton.svelte';
 // Component props
 export let id;
 export let fields;
@@ -29,14 +31,16 @@ let args = {};
 let schema = undefined;
 let testIsLoading = false;
 let runnableInputValues = {};
-$: mergedArgs = { ...extraQueryParams, ...runnableInputValues, ...args };
 function setStaticInputsToArgs() {
+    let nargs = {};
     Object.entries(fields ?? {}).forEach(([key, value]) => {
         if (value.type === 'static') {
-            args[key] = value.value;
+            nargs[key] = value.value;
         }
     });
-    args = args;
+    if (JSON.stringify(args) != JSON.stringify(nargs)) {
+        args = nargs;
+    }
 }
 $: fields && setStaticInputsToArgs();
 function argMergedArgsValid(mergedArgs, testJobLoader) {
@@ -53,15 +57,21 @@ function argMergedArgsValid(mergedArgs, testJobLoader) {
     }
     return areAllArgsValid;
 }
-$: isValid = argMergedArgsValid(mergedArgs, testJobLoader);
+$: isValid =
+    Object.keys(fields ?? {}).length == 0 ||
+        argMergedArgsValid({ ...extraQueryParams, ...runnableInputValues, ...args }, testJobLoader);
 // Test job internal state
 let testJob = undefined;
 let testJobLoader = undefined;
 $: outputs = $worldStore?.outputsById[id];
+$: if (outputs?.loading != undefined) {
+    outputs.loading.set(false, true);
+}
 async function loadSchemaFromTriggerable(workspace, path, runType) {
-    return loadSchema(workspace, path, runType);
+    return loadSchema(workspace, path, runType) ?? emptySchema();
 }
-$: runnable && loadSchemaAndInputsByName();
+$: runnable?.type === 'runnableByName' && loadSchemaAndInputsByName();
+$: !schema && runnable?.type === 'runnableByPath' && loadSchemaAndInputsByPath();
 async function loadSchemaAndInputsByName() {
     if (runnable?.type === 'runnableByName') {
         const { inlineScript } = runnable;
@@ -69,7 +79,7 @@ async function loadSchemaAndInputsByName() {
         if (inlineScript) {
             const newSchema = inlineScript.schema;
             schema = newSchema;
-            const newFields = reloadInputs();
+            const newFields = reloadInputs(newSchema);
             if (JSON.stringify(newFields) !== JSON.stringify(fields)) {
                 fields = newFields;
                 setTimeout(() => {
@@ -93,10 +103,9 @@ async function loadSchemaAndInputsByPath() {
         fields = schemaToInputsSpec(schemaWithoutExtraQueries);
     }
 }
-$: !schema && runnable?.type === 'runnableByPath' && loadSchemaAndInputsByPath();
 // When the schema is loaded, we need to update the inputs spec
 // in order to render the inputs the component panel
-function reloadInputs() {
+function reloadInputs(schema) {
     let schemaWithoutExtraQueries = JSON.parse(JSON.stringify(schema));
     // Remove extra query params from the schema, which are not directly configurable by the user
     Object.keys(extraQueryParams).forEach((key) => {
@@ -131,7 +140,7 @@ function stripSchema(schema, inputs) {
     // Remove hidden static inputs
     Object.keys(inputs ?? {}).forEach((key) => {
         const input = inputs[key];
-        if (input.type === 'static' && !input.visible && schemaStripped !== undefined) {
+        if (input.type === 'static' && schemaStripped !== undefined) {
             delete schemaStripped.properties[key];
         }
         if (input.type === 'connected' && schemaStripped !== undefined) {
@@ -162,7 +171,7 @@ async function executeComponent() {
     outputs?.loading?.set(true);
     await testJobLoader?.abstractRun(() => {
         const requestBody = {
-            args: mergedArgs,
+            args: { ...extraQueryParams, ...args, ...runnableInputValues },
             force_viewer_static_fields: {}
         };
         if (runnable?.type === 'runnableByName') {
@@ -192,7 +201,12 @@ export async function runComponent() {
 </script>
 
 {#each Object.keys(fields ?? {}) as key}
-	<InputValue {id} input={fields[key]} bind:value={runnableInputValues[key]} />
+	<InputValue
+		{id}
+		input={fields[key]}
+		bind:value={runnableInputValues[key]}
+		row={extraQueryParams['row'] ?? {}}
+	/>
 {/each}
 
 <TestJobLoader
@@ -210,18 +224,29 @@ export async function runComponent() {
 
 <div class="h-full flex flex-col">
 	{#if schemaStripped !== undefined && (autoRefresh || forceSchemaDisplay)}
-		<SchemaForm schema={schemaStripped} bind:args {isValid} {disabledArgs} shouldHideNoInputs />
+		<SchemaForm
+			schema={schemaStripped}
+			bind:args
+			{isValid}
+			{disabledArgs}
+			shouldHideNoInputs
+			noVariablePicker
+		/>
 	{/if}
 
 	{#if !runnable && autoRefresh}
-		<Alert type="warning" size="xs" class="mt-2" title="Missing runnable">
+		<Alert type="warning" size="xs" class="mt-2 px-1" title="Missing runnable">
 			Please select a runnable
 		</Alert>
 	{:else if autoRefresh === true}
+		<div class="flex absolute top-1 right-1">
+			<RefreshButton componentId={id} />
+		</div>
+
 		{#if isValid}
 			<slot />
 		{:else}
-			<Alert type="info" size="xs" class="mt-2" title="Missing inputs">
+			<Alert type="info" size="xs" class="mt-2 px-1" title="Missing inputs">
 				Please fill in all the inputs
 
 				{#each Object.keys(fields ?? {}) as key}

package/components/apps/components/selectInputs/AppCheckbox.svelte

@@ -19,6 +19,10 @@ $: outputs = $worldStore?.outputsById[id];
 
 <AlignWrapper {horizontalAlignment} {verticalAlignment}>
 	<Toggle
+		on:pointerdown={(e) => {
+			e?.stopPropagation()
+			window.dispatchEvent(new Event('pointerup'))
+		}}
 		bind:value
 		options={{ right: labelValue }}
 		on:change={(e) => {

package/components/apps/components/table/AppTable.svelte

@@ -16,7 +16,7 @@ export let configuration;
 export let actionButtons;
 export const staticOutputs = ['selectedRow', 'loading', 'result'];
 $: result = [];
-let search = 'Disabled';
+let search = undefined;
 let searchValue = '';
 let pagination = undefined;
 let page = 1;
@@ -60,11 +60,19 @@ function searchInResult(result, searchValue) {
     }
     return result.filter((row) => Object.values(row).some((value) => value.toString().includes(searchValue)));
 }
+function renderCell(x, props) {
+    try {
+        return flexRender(x, props);
+    }
+    catch (e) {
+        return undefined;
+    }
+}
 let filteredResult = [];
 $: filteredResult && setOptions(filteredResult);
-$: extraQueryParams = search === 'Backend' ? { search: searchValue, page } : { page, search: '' };
-$: search === 'Frontend' && (filteredResult = searchInResult(result, searchValue));
-$: (search === 'Backend' || search === 'Disabled') && (filteredResult = result);
+$: extraQueryParams = search === 'Runnable' ? { search: searchValue, page } : { page, search: '' };
+$: search === 'Runnable' && (filteredResult = searchInResult(result, searchValue));
+$: (search === 'Runnable' || search === 'Disabled') && (filteredResult = result);
 $: outputs = $worldStore?.outputsById[id];
 function rerender() {
     table = createSvelteTable(options);
@@ -78,29 +86,33 @@ $: result && rerender();
 <RunnableWrapper bind:componentInput {id} bind:result {extraQueryParams}>
 	{#if Array.isArray(result) && result.every(isObject)}
 		<div class="border border-gray-300 shadow-sm divide-y divide-gray-300  flex flex-col h-full">
-			<div class="py-2 px-4">
-				<div class="flex justify-between items-center">
-					<RefreshButton componentId={id} />
-					{#if search !== 'Disabled'}
+			{#if search !== 'Disabled'}
+				<div class="px-4 py-2">
+					<div class="flex items-center">
 						<div>
 							<DebouncedInput placeholder="Search..." bind:value={searchValue} />
 						</div>
-					{/if}
+					</div>
 				</div>
-			</div>
+			{/if}
+
 			<div class="overflow-auto flex-1 w-full">
 				<table class="divide-y divide-gray-300 w-full border-b border-b-gray-200">
 					<thead class="bg-gray-50 text-left">
 						{#each $table.getHeaderGroups() as headerGroup}
 							<tr class="divide-x">
 								{#each headerGroup.headers as header}
-									<th class="px-4 py-4 text-sm font-semibold">
-										{#if !header.isPlaceholder}
-											<svelte:component
-												this={flexRender(header.column.columnDef.header, header.getContext())}
-											/>
+									{#if header?.column?.columnDef?.header}
+										{@const context = header?.getContext()}
+										{#if context}
+											{@const component = renderCell(header.column.columnDef.header, context)}
+											<th class="px-4 py-4 text-sm font-semibold">
+												{#if !header.isPlaceholder && component}
+													<svelte:component this={component} />
+												{/if}
+											</th>
 										{/if}
-									</th>
+									{/if}
 								{/each}
 								{#if actionButtons.length > 0}
 									<th class="px-4 py-4 text-sm font-semibold">Actions</th>
@@ -121,22 +133,34 @@ $: result && rerender();
 										? 'divide-blue-200 hover:divide-blue-300'
 										: 'divide-gray-200'
 								)}
-								on:click={() => toggleRow(row, rowIndex)}
 							>
 								{#each row.getVisibleCells() as cell, index (index)}
-									<td class="p-4 whitespace-nowrap text-xs text-gray-900">
-										<svelte:component
-											this={flexRender(cell.column.columnDef.cell, cell.getContext())}
-										/>
-									</td>
+									{#if cell?.column?.columnDef?.header}
+										{@const context = cell?.getContext()}
+										{#if context}
+											{@const component = renderCell(cell.column.columnDef.cell, context)}
+											<td
+												on:click={() => toggleRow(row, rowIndex)}
+												class="p-4 whitespace-nowrap text-xs text-gray-900"
+											>
+												{#if component != undefined}
+													<svelte:component this={component} />
+												{/if}
+											</td>
+										{/if}
+									{/if}
 								{/each}
 
 								{#if actionButtons.length > 0}
-									<td class="flex flex-row gap-2 p-4">
+									<td
+										class="flex w-full flex-row gap-2 p-4"
+										on:click={() => toggleRow(row, rowIndex)}
+									>
 										{#each actionButtons as actionButton, actionIndex (actionIndex)}
 											<AppButton
+												noWFull
 												{...actionButton}
-												extraQueryParams={{ row: row.original, rowIndex }}
+												extraQueryParams={{ row: row.original }}
 												bind:componentInput={actionButton.componentInput}
 												bind:staticOutputs={$staticOutputsStore[actionButton.id]}
 											/>