windmill-components 1.70.0 → 1.77.0

package/components/apps/components/display/AppPieChart.svelte

@@ -2,11 +2,16 @@
 import { Chart as ChartJS, Title, Tooltip, Legend, LineElement, LinearScale, PointElement, CategoryScale, ArcElement } from 'chart.js';
 import RunnableWrapper from '../helpers/RunnableWrapper.svelte';
 import InputValue from '../helpers/InputValue.svelte';
+import { concatCustomCss } from '../../utils';
+import { getContext } from 'svelte';
 export let id;
 export let componentInput;
 export let configuration;
 export let initializing = undefined;
+export let customCss = undefined;
+export let render;
 export const staticOutputs = ['loading', 'result'];
+const { app } = getContext('AppViewerContext');
 ChartJS.register(Title, Tooltip, Legend, LineElement, LinearScale, PointElement, CategoryScale, ArcElement);
 let result = undefined;
 let theme = 'theme1';
@@ -32,17 +37,20 @@ $: data = {
         }
     ]
 };
+$: css = concatCustomCss($app.css?.piechartcomponent, customCss);
 </script>
 
 <InputValue {id} input={configuration.theme} bind:value={theme} />
 <InputValue {id} input={configuration.doughnutStyle} bind:value={doughnut} />
 
-<RunnableWrapper flexWrap autoRefresh bind:componentInput {id} bind:initializing bind:result>
-	{#if result}
-		{#if doughnut}
-			<Doughnut {data} {options} />
-		{:else}
-			<Pie {data} {options} />
+<RunnableWrapper {render} flexWrap autoRefresh {componentInput} {id} bind:initializing bind:result>
+	<div class="w-full h-full {css?.container?.class ?? ''}" style={css?.container?.style ?? ''}>
+		{#if result}
+			{#if doughnut}
+				<Doughnut {data} {options} />
+			{:else}
+				<Pie {data} {options} />
+			{/if}
 		{/if}
-	{/if}
+	</div>
 </RunnableWrapper>

package/components/apps/components/display/AppPieChart.svelte.d.ts

@@ -1,11 +1,14 @@
 import { SvelteComponentTyped } from "svelte";
 import type { AppInput } from '../../inputType';
+import type { ComponentCustomCSS } from '../../types';
 declare const __propDef: {
     props: {
         id: string;
         componentInput: AppInput | undefined;
         configuration: Record<string, AppInput>;
         initializing?: boolean | undefined;
+        customCss?: ComponentCustomCSS<'container'> | undefined;
+        render: boolean;
         staticOutputs?: string[] | undefined;
     };
     events: {

package/components/apps/components/display/AppScatterChart.svelte

@@ -3,13 +3,18 @@ import { Chart as ChartJS, Title, Tooltip, Legend, LineElement, LinearScale, Poi
 import RunnableWrapper from '../helpers/RunnableWrapper.svelte';
 import Scatter from 'svelte-chartjs/Scatter.svelte';
 import InputValue from '../helpers/InputValue.svelte';
+import { concatCustomCss } from '../../utils';
+import { getContext } from 'svelte';
 export let id;
 export let componentInput;
 export let configuration;
 export let initializing = undefined;
+export let customCss = undefined;
+export let render;
 let zoomable = false;
 let pannable = false;
 export const staticOutputs = ['loading', 'result'];
+const { app } = getContext('AppViewerContext');
 ChartJS.register(Title, Tooltip, Legend, LineElement, LinearScale, PointElement, CategoryScale, BarElement, zoomPlugin);
 let result = undefined;
 $: options = {
@@ -35,13 +40,16 @@ $: options = {
 $: data = {
     datasets: result ?? []
 };
+$: css = concatCustomCss($app.css?.scatterchartcomponent, customCss);
 </script>
 
 <InputValue {id} input={configuration.zoomable} bind:value={zoomable} />
 <InputValue {id} input={configuration.pannable} bind:value={pannable} />
 
-<RunnableWrapper flexWrap autoRefresh bind:componentInput {id} bind:initializing bind:result>
-	{#if result}
-		<Scatter {data} {options} />
-	{/if}
+<RunnableWrapper {render} flexWrap autoRefresh {componentInput} {id} bind:initializing bind:result>
+	<div class="w-full h-full {css?.container?.class ?? ''}" style={css?.container?.style ?? ''}>
+		{#if result}
+			<Scatter {data} {options} />
+		{/if}
+	</div>
 </RunnableWrapper>

package/components/apps/components/display/AppScatterChart.svelte.d.ts

@@ -1,11 +1,14 @@
 import { SvelteComponentTyped } from "svelte";
 import type { AppInput } from '../../inputType';
+import type { ComponentCustomCSS } from '../../types';
 declare const __propDef: {
     props: {
         id: string;
         componentInput: AppInput | undefined;
         configuration: Record<string, AppInput>;
         initializing?: boolean | undefined;
+        customCss?: ComponentCustomCSS<'container'> | undefined;
+        render: boolean;
         staticOutputs?: string[] | undefined;
     };
     events: {

package/components/apps/components/display/AppText.svelte

@@ -7,6 +7,7 @@ import InputValue from '../helpers/InputValue.svelte';
 import RunnableWrapper from '../helpers/RunnableWrapper.svelte';
 import { twMerge } from 'tailwind-merge';
 import { getContext } from 'svelte';
+import ResizeWrapper from '../helpers/ResizeWrapper.svelte';
 export let id;
 export let componentInput;
 export let horizontalAlignment = 'left';
@@ -14,11 +15,13 @@ export let verticalAlignment = undefined;
 export let configuration;
 export let initializing = undefined;
 export let customCss = undefined;
+export let render;
 export const staticOutputs = ['result', 'loading'];
-const { app } = getContext('AppEditorContext');
+const { app } = getContext('AppViewerContext');
 let result = undefined;
 let style = undefined;
 let copyButton;
+let fitContent = false;
 function getComponent() {
     switch (style) {
         case 'Title':
@@ -53,36 +56,39 @@ $: style && (classes = getClasses());
 
 <InputValue {id} input={configuration.style} bind:value={style} />
 <InputValue {id} input={configuration.copyButton} bind:value={copyButton} />
+<InputValue {id} input={configuration.fitContent} bind:value={fitContent} />
 
-<RunnableWrapper flexWrap bind:componentInput {id} bind:initializing bind:result>
-	<AlignWrapper {horizontalAlignment} {verticalAlignment}>
-		{#if !result || result === ''}
-			<div class="text-gray-400 bg-gray-100 flex justify-center items-center h-full w-full">
-				No text
-			</div>
-		{:else}
-			<div class="flex flex-wrap gap-2 pb-0.5 overflow-x-auto">
-				<svelte:element
-					this={component}
-					class={twMerge(
-						'whitespace-pre-wrap',
-						$app.css?.['textcomponent']?.['text']?.class,
-						customCss?.text?.class,
-						classes
-					)}
-					style={[$app.css?.['textcomponent']?.['text']?.style, customCss?.text?.style].join(';')}
-				>
-					{String(result)}
-				</svelte:element>
-				{#if copyButton && result}
-					<Popover notClickable>
-						<Button size="xs" btnClasses="!px-2" on:click={() => copyToClipboard(result)}>
-							<Clipboard size={14} strokeWidth={2} />
-						</Button>
-						<svelte:fragment slot="text">Copy to clipboard</svelte:fragment>
-					</Popover>
-				{/if}
-			</div>
-		{/if}
-	</AlignWrapper>
+<RunnableWrapper {render} flexWrap {componentInput} {id} bind:initializing bind:result>
+	<ResizeWrapper {id} shouldWrap={fitContent}>
+		<AlignWrapper {horizontalAlignment} {verticalAlignment}>
+			{#if !result || result === ''}
+				<div class="text-gray-400 bg-gray-100 flex justify-center items-center h-full w-full">
+					No text
+				</div>
+			{:else}
+				<div class="flex flex-wrap gap-2 pb-0.5 overflow-x-auto">
+					<svelte:element
+						this={component}
+						class={twMerge(
+							'whitespace-pre-wrap',
+							$app.css?.['textcomponent']?.['text']?.class,
+							customCss?.text?.class,
+							classes
+						)}
+						style={[$app.css?.['textcomponent']?.['text']?.style, customCss?.text?.style].join(';')}
+					>
+						{String(result)}
+					</svelte:element>
+					{#if copyButton && result}
+						<Popover notClickable>
+							<Button size="xs" btnClasses="!px-2" on:click={() => copyToClipboard(result)}>
+								<Clipboard size={14} strokeWidth={2} />
+							</Button>
+							<svelte:fragment slot="text">Copy to clipboard</svelte:fragment>
+						</Popover>
+					{/if}
+				</div>
+			{/if}
+		</AlignWrapper>
+	</ResizeWrapper>
 </RunnableWrapper>

package/components/apps/components/display/AppText.svelte.d.ts

@@ -10,6 +10,7 @@ declare const __propDef: {
         configuration: Record<string, AppInput>;
         initializing?: boolean | undefined;
         customCss?: ComponentCustomCSS<'text'> | undefined;
+        render: boolean;
         staticOutputs?: string[] | undefined;
     };
     events: {

package/components/apps/components/display/AppTimeseries.svelte

@@ -4,11 +4,16 @@ import { Chart as ChartJS, Title, Tooltip, Legend, LineElement, LinearScale, Poi
 import RunnableWrapper from '../helpers/RunnableWrapper.svelte';
 import { Scatter } from 'svelte-chartjs';
 import InputValue from '../helpers/InputValue.svelte';
+import { getContext } from 'svelte';
+import { concatCustomCss } from '../../utils';
 export let id;
 export let componentInput;
 export let configuration;
 export let initializing = undefined;
+export let customCss = undefined;
+export let render;
 export const staticOutputs = ['loading', 'result'];
+const { app } = getContext('AppViewerContext');
 let logarithmicScale = false;
 let zoomable = false;
 let pannable = false;
@@ -45,14 +50,17 @@ $: options = {
 $: data = {
     datasets: result ?? []
 };
+$: css = concatCustomCss($app.css?.timeseriescomponent, customCss);
 </script>
 
 <InputValue {id} input={configuration.logarithmicScale} bind:value={logarithmicScale} />
 <InputValue {id} input={configuration.zoomable} bind:value={zoomable} />
 <InputValue {id} input={configuration.pannable} bind:value={pannable} />
 
-<RunnableWrapper flexWrap autoRefresh bind:componentInput {id} bind:initializing bind:result>
-	{#if result}
-		<Scatter {data} {options} />
-	{/if}
+<RunnableWrapper {render} flexWrap autoRefresh {componentInput} {id} bind:initializing bind:result>
+	<div class="w-full h-full {css?.container?.class ?? ''}" style={css?.container?.style ?? ''}>
+		{#if result}
+			<Scatter {data} {options} />
+		{/if}
+	</div>
 </RunnableWrapper>

package/components/apps/components/display/AppTimeseries.svelte.d.ts

@@ -1,12 +1,15 @@
 import { SvelteComponentTyped } from "svelte";
 import 'chartjs-adapter-date-fns';
 import type { AppInput } from '../../inputType';
+import type { ComponentCustomCSS } from '../../types';
 declare const __propDef: {
     props: {
         id: string;
         componentInput: AppInput | undefined;
         configuration: Record<string, AppInput>;
         initializing?: boolean | undefined;
+        customCss?: ComponentCustomCSS<'container'> | undefined;
+        render: boolean;
         staticOutputs?: string[] | undefined;
     };
     events: {

package/components/apps/components/display/PlotlyHtml.svelte

@@ -1,24 +1,23 @@
-<script>import { Loader2 } from 'lucide-svelte';
-import { onMount } from 'svelte';
+<script>import { onMount } from 'svelte';
 import RunnableWrapper from '../helpers/RunnableWrapper.svelte';
 export let id;
 export let componentInput;
-export let configuration;
+// export let configuration: Record<string, AppInput>
 export let initializing = undefined;
+export let render;
 export const staticOutputs = ['result', 'loading'];
 let result = undefined;
 let divEl = null;
 let Plotly;
 onMount(async () => {
-    if (divEl) {
-        //@ts-ignore
-        await import('https://cdn.plot.ly/plotly-2.18.0.min.js');
-        Plotly = window['Plotly'];
-    }
+    //@ts-ignore
+    await import('https://cdn.plot.ly/plotly-2.18.0.min.js');
+    Plotly = window['Plotly'];
 });
 let h = undefined;
 let w = undefined;
 $: Plotly &&
+    render &&
     result &&
     divEl &&
     h &&
@@ -27,12 +26,7 @@ $: Plotly &&
 </script>
 
 <div class="w-full h-full" bind:clientHeight={h} bind:clientWidth={w}>
-	<RunnableWrapper flexWrap bind:componentInput {id} bind:initializing bind:result>
-		{#if !Plotly}
-			<div class="p-2">
-				<Loader2 class="animate-spin" />
-			</div>
-		{/if}
+	<RunnableWrapper {render} flexWrap {componentInput} {id} bind:initializing bind:result>
 		<div on:pointerdown bind:this={divEl} />
 	</RunnableWrapper>
 </div>

package/components/apps/components/display/PlotlyHtml.svelte.d.ts

@@ -4,8 +4,8 @@ declare const __propDef: {
     props: {
         id: string;
         componentInput: AppInput | undefined;
-        configuration: Record<string, AppInput>;
         initializing?: boolean | undefined;
+        render: boolean;
         staticOutputs?: string[] | undefined;
     };
     events: {

package/components/apps/components/display/VegaLiteHtml.svelte

@@ -1,11 +1,11 @@
-<script>import { Loader2 } from 'lucide-svelte';
-import { onMount } from 'svelte';
+<script>import { onMount } from 'svelte';
 import InputValue from '../helpers/InputValue.svelte';
 import RunnableWrapper from '../helpers/RunnableWrapper.svelte';
 export let id;
 export let componentInput;
 export let configuration;
 export let initializing = undefined;
+export let render;
 export const staticOutputs = ['result', 'loading'];
 let result = undefined;
 let divEl = null;
@@ -41,12 +41,7 @@ $: vegaEmbed &&
 <InputValue {id} input={configuration.canvas} bind:value={canvas} />
 
 <div class="w-full h-full" bind:clientHeight={h} bind:clientWidth={w}>
-	<RunnableWrapper flexWrap bind:componentInput {id} bind:initializing bind:result>
-		{#if !vegaEmbed}
-			<div class="p-2">
-				<Loader2 class="animate-spin" />
-			</div>
-		{/if}
+	<RunnableWrapper {render} flexWrap {componentInput} {id} bind:initializing bind:result>
 		<div on:pointerdown bind:this={divEl} />
 	</RunnableWrapper>
 </div>

package/components/apps/components/display/VegaLiteHtml.svelte.d.ts

@@ -6,6 +6,7 @@ declare const __propDef: {
         componentInput: AppInput | undefined;
         configuration: Record<string, AppInput>;
         initializing?: boolean | undefined;
+        render: boolean;
         staticOutputs?: string[] | undefined;
     };
     events: {

package/components/apps/components/display/index.d.ts

@@ -1,9 +1,12 @@
 export { default as AppTable } from './table/AppTable.svelte';
+export { default as AppAggridTable } from './table/AppAggridTable.svelte';
 export { default as AppBarChart } from './AppBarChart.svelte';
 export { default as AppDisplayComponent } from './AppDisplayComponent.svelte';
 export { default as AppHtml } from './AppHtml.svelte';
 export { default as AppIcon } from './AppIcon.svelte';
 export { default as AppImage } from './AppImage.svelte';
+export { default as AppMap } from './AppMap.svelte';
+export { default as AppPdf } from './AppPdf.svelte';
 export { default as AppPieChart } from './AppPieChart.svelte';
 export { default as AppScatterChart } from './AppScatterChart.svelte';
 export { default as AppText } from './AppText.svelte';

package/components/apps/components/display/index.js

@@ -1,9 +1,12 @@
 export { default as AppTable } from './table/AppTable.svelte';
+export { default as AppAggridTable } from './table/AppAggridTable.svelte';
 export { default as AppBarChart } from './AppBarChart.svelte';
 export { default as AppDisplayComponent } from './AppDisplayComponent.svelte';
 export { default as AppHtml } from './AppHtml.svelte';
 export { default as AppIcon } from './AppIcon.svelte';
 export { default as AppImage } from './AppImage.svelte';
+export { default as AppMap } from './AppMap.svelte';
+export { default as AppPdf } from './AppPdf.svelte';
 export { default as AppPieChart } from './AppPieChart.svelte';
 export { default as AppScatterChart } from './AppScatterChart.svelte';
 export { default as AppText } from './AppText.svelte';

package/components/apps/components/display/table/AppAggridTable.svelte

@@ -10,9 +10,10 @@ export let id;
 export let componentInput;
 export let configuration;
 export let initializing = undefined;
+export let render;
 export const staticOutputs = ['selectedRow', 'loading', 'result', 'selectedRowIndex'];
 let result = undefined;
-const { worldStore, staticOutputs: staticOutputsStore, selectedComponent } = getContext('AppEditorContext');
+const { worldStore, selectedComponent } = getContext('AppViewerContext');
 let selectedRowIndex = -1;
 function toggleRow(row, rowIndex) {
     if (selectedRowIndex !== rowIndex) {
@@ -38,6 +39,8 @@ let clientHeight;
 let clientWidth;
 let columnDefs = undefined;
 let allEditable = undefined;
+let pagination = undefined;
+let pageSize = 10;
 function onCellValueChanged(event) {
     if (result) {
         let dataCell = event.newValue;
@@ -52,8 +55,10 @@ function onCellValueChanged(event) {
 
 <InputValue {id} input={configuration.columnDefs} bind:value={columnDefs} />
 <InputValue {id} input={configuration.allEditable} bind:value={allEditable} />
+<InputValue {id} input={configuration.pagination} bind:value={pagination} />
+<InputValue {id} input={configuration.pageSize} bind:value={pageSize} />
 
-<RunnableWrapper flexWrap bind:componentInput {id} bind:initializing bind:result>
+<RunnableWrapper {render} flexWrap {componentInput} {id} bind:initializing bind:result>
 	{#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"
@@ -68,16 +73,23 @@ function onCellValueChanged(event) {
 				style:width="{clientWidth}px"
 				class="ag-theme-alpine"
 			>
-				<AgGridSvelte
-					bind:rowData={result}
-					{columnDefs}
-					defaultColDef={{ flex: 1, editable: allEditable, onCellValueChanged }}
-				/>
+				{#key pagination}
+					<AgGridSvelte
+						bind:rowData={result}
+						{columnDefs}
+						{pagination}
+						paginationPageSize={pageSize}
+						defaultColDef={{ flex: 1, editable: allEditable, onCellValueChanged }}
+					/>
+				{/key}
 			</div>
 		</div>
 	{:else if result != undefined}
 		<Alert title="Parsing issues" type="error" size="xs">
-			The result should be an array of objects
+			The result should be an array of objects, received:
+			<pre class="overflow-auto">
+				{JSON.stringify(result)}
+			</pre>
 		</Alert>
 	{/if}
 </RunnableWrapper>

package/components/apps/components/display/table/AppAggridTable.svelte.d.ts

@@ -8,6 +8,7 @@ declare const __propDef: {
         componentInput: AppInput | undefined;
         configuration: Record<string, AppInput>;
         initializing?: boolean | undefined;
+        render: boolean;
         staticOutputs?: string[] | undefined;
     };
     events: {

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

@@ -9,11 +9,15 @@ import DebouncedInput from '../../helpers/DebouncedInput.svelte';
 import AppTableFooter from './AppTableFooter.svelte';
 import { tableOptions } from './tableOptions';
 import Alert from '../../../../common/alert/Alert.svelte';
+import { concatCustomCss } from '../../../utils';
+import { twMerge } from 'tailwind-merge';
 export let id;
 export let componentInput;
 export let configuration;
 export let actionButtons;
 export let initializing = undefined;
+export let customCss = undefined;
+export let render;
 export const staticOutputs = [
     'selectedRow',
     'loading',
@@ -35,13 +39,13 @@ const options = writable({
     columns: []
 });
 let table = createSvelteTable(options);
-const { worldStore, staticOutputs: staticOutputsStore } = getContext('AppEditorContext');
+const { app, worldStore, staticOutputs: staticOutputsStore } = getContext('AppViewerContext');
 let selectedRowIndex = -1;
-function toggleRow(row, rowIndex) {
-    if (selectedRowIndex !== rowIndex) {
+function toggleRow(row, rowIndex, force = false) {
+    if (selectedRowIndex !== rowIndex || force) {
         selectedRowIndex = rowIndex;
-        outputs?.selectedRow.set(row.original);
-        outputs?.selectedRowIndex.set(rowIndex);
+        outputs?.selectedRow.set(row.original, force);
+        outputs?.selectedRowIndex.set(rowIndex, force);
     }
 }
 let mounted = false;
@@ -95,15 +99,26 @@ $: (search === 'By Runnable' || search === 'Disabled') && (filteredResult = resu
 $: outputs = $worldStore?.outputsById[id];
 function rerender() {
     table = createSvelteTable(options);
+    if (result) {
+        toggleRow({ original: result[0] }, 0, true);
+    }
 }
 $: result && rerender();
+$: css = concatCustomCss($app.css?.tablecomponent, customCss);
 </script>
 
 <InputValue {id} input={configuration.search} bind:value={search} />
 
-<RunnableWrapper flexWrap bind:componentInput {id} bind:initializing bind:result>
+<RunnableWrapper {render} flexWrap {componentInput} {id} bind:initializing bind:result>
 	{#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={twMerge(
+				'border border-gray-300 shadow-sm divide-y divide-gray-300 h-full',
+				css?.container?.class ?? '',
+				'flex flex-col'
+			)}
+			style={css?.container?.style ?? ''}
+		>
 			{#if search !== 'Disabled'}
 				<div class="px-2 py-1">
 					<div class="flex items-center">
@@ -116,7 +131,14 @@ $: result && rerender();
 
 			<div class="overflow-x-auto flex-1 w-full">
 				<table class="relative w-full border-b border-b-gray-200">
-					<thead class="sticky top-0 z-40 bg-gray-50 text-left">
+					<thead
+						class={twMerge(
+							'bg-gray-50 text-left',
+							css?.tableHeader?.class ?? '',
+							'sticky top-0 z-40'
+						)}
+						style={css?.tableHeader?.style ?? ''}
+					>
 						{#each $table.getHeaderGroups() as headerGroup}
 							<tr class="divide-x">
 								{#each headerGroup.headers as header}
@@ -142,7 +164,10 @@ $: result && rerender();
 							</tr>
 						{/each}
 					</thead>
-					<tbody class="divide-y divide-gray-200 bg-white ">
+					<tbody
+						class={twMerge('divide-y divide-gray-200 bg-white', css?.tableBody?.class ?? '')}
+						style={css?.tableBody?.style ?? ''}
+					>
 						{#each $table.getRowModel().rows as row, rowIndex (row.id)}
 							<tr
 								class={classNames(
@@ -179,16 +204,30 @@ $: result && rerender();
 									<td class="p-2 " on:click={() => toggleRow(row, rowIndex)}>
 										<div class="center-center h-full w-full flex-wrap gap-1">
 											{#each actionButtons as actionButton, actionIndex (actionIndex)}
-												<AppButton
-													noWFull
-													{...actionButton}
-													preclickAction={async () => {
-														toggleRow(row, rowIndex)
-													}}
-													extraQueryParams={{ row: row.original }}
-													bind:componentInput={actionButton.componentInput}
-													bind:staticOutputs={$staticOutputsStore[actionButton.id]}
-												/>
+												{#if rowIndex == 0}
+													<AppButton
+														{render}
+														noWFull
+														{...actionButton}
+														preclickAction={async () => {
+															toggleRow(row, rowIndex)
+														}}
+														extraQueryParams={{ row: row.original }}
+														bind:componentInput={actionButton.componentInput}
+														bind:staticOutputs={$staticOutputsStore[actionButton.id]}
+													/>
+												{:else}
+													<AppButton
+														{render}
+														noWFull
+														{...actionButton}
+														preclickAction={async () => {
+															toggleRow(row, rowIndex)
+														}}
+														extraQueryParams={{ row: row.original }}
+														bind:componentInput={actionButton.componentInput}
+													/>
+												{/if}
 											{/each}
 										</div>
 									</td>
@@ -199,11 +238,20 @@ $: result && rerender();
 				</table>
 			</div>
 
-			<AppTableFooter paginationEnabled={pagination} {result} {table} />
+			<AppTableFooter
+				paginationEnabled={pagination}
+				{result}
+				{table}
+				class={css?.tableFooter.class}
+				style={css?.tableFooter.style}
+			/>
 		</div>
 	{:else if result != undefined}
 		<Alert title="Parsing issues" type="error" size="xs">
-			The result should be an array of objects
+			The result should be an array of objects. Received:
+			<pre class="overflow-auto">
+				{JSON.stringify(result)}
+			</pre>
 		</Alert>
 	{/if}
 </RunnableWrapper>

package/components/apps/components/display/table/AppTable.svelte.d.ts

@@ -1,5 +1,5 @@
 import { SvelteComponentTyped } from "svelte";
-import type { BaseAppComponent } from '../../../types';
+import type { BaseAppComponent, ComponentCustomCSS } from '../../../types';
 import type { AppInput } from '../../../inputType';
 import type { ButtonComponent } from '../../../editor/component';
 declare const __propDef: {
@@ -9,6 +9,8 @@ declare const __propDef: {
         configuration: Record<string, AppInput>;
         actionButtons: (BaseAppComponent & ButtonComponent)[];
         initializing?: boolean | undefined;
+        customCss?: ComponentCustomCSS<'container' | 'tableHeader' | 'tableBody' | 'tableFooter'> | undefined;
+        render: boolean;
         staticOutputs?: string[] | undefined;
     };
     events: {