@lobb-js/studio 0.29.1 → 0.31.0

package/dist/actions.d.ts

@@ -11,7 +11,18 @@ export interface OpenDataTableDrawerProps {
     position?: "side" | "bottom";
     tabs?: CollectionTab[];
 }
+export interface OpenDataTablePopupProps {
+    collectionName: string;
+    filter?: Record<string, any>;
+    sort?: Record<string, "asc" | "desc">;
+    limit?: number;
+    title?: string;
+    showHeader?: boolean;
+    showFooter?: boolean;
+    tabs?: CollectionTab[];
+}
 export declare function showDialog(title: string, description: string): Promise<boolean>;
 export declare function openCreateDetailView(studioContext: StudioContext, props: CreateDetailViewProp): void;
 export declare function openUpdateDetailView(studioContext: StudioContext, props: UpdateDetailViewProp): Promise<void>;
 export declare function openDataTableDrawer(studioContext: StudioContext, props: OpenDataTableDrawerProps): void;
+export declare function openDataTablePopup(studioContext: StudioContext, props: OpenDataTablePopupProps): void;

package/dist/actions.js

@@ -3,6 +3,7 @@ import ConfirmationDialog from "./components/confirmationDialog/confirmationDial
 import CreateDetailView from "./components/detailView/create/createDetailView.svelte";
 import UpdateDetailView from "./components/detailView/update/updateDetailView.svelte";
 import DataTableDrawer from "./components/dataTableDrawer/dataTableDrawer.svelte";
+import DataTablePopup from "./components/dataTablePopup/dataTablePopup.svelte";
 import { createStudioContextMap } from "./context";
 import { getCollectionParamsFields } from "./components/dataTable/utils";
 export function showDialog(title, description) {
@@ -80,3 +81,18 @@ export function openDataTableDrawer(studioContext, props) {
         },
     });
 }
+export function openDataTablePopup(studioContext, props) {
+    const targetElement = document.querySelector("main");
+    if (!targetElement)
+        throw new Error("main html element doesn't exist");
+    const mounted = mount(DataTablePopup, {
+        target: targetElement,
+        context: createStudioContextMap(studioContext),
+        props: {
+            ...props,
+            onClose: async () => {
+                await unmount(mounted, { outro: true });
+            },
+        },
+    });
+}

package/dist/components/Studio.svelte

@@ -4,7 +4,6 @@
     import { ModeWatcher } from "mode-watcher";
     import { createLobb } from "../store.svelte";
     import { setStudioContext } from "../context";
-    import Header from "./header.svelte";
     import { LoaderCircle, ServerOff } from "lucide-svelte";
     import MiniSidebar from "./miniSidebar.svelte";
     import * as Tooltip from "./ui/tooltip";
@@ -107,8 +106,7 @@
             style="display: grid; grid-template-columns: {isSmallScreen ? '1fr' : '3.5rem 1fr'};"
         >
             <MiniSidebar />
-            <div class="second_grid">
-                <Header />
+            <div class="min-h-0 h-screen overflow-hidden">
                 {#if page.url.pathname.replace(/\/$/, "") === "/studio"}
                     <Home />
                 {:else if page.url.pathname.startsWith("/studio/collections")}
@@ -131,10 +129,3 @@
         </main>
     </Tooltip.Provider>
 {/if}
-
-<style>
-    .second_grid {
-        display: grid;
-        grid-template-rows: 2.5rem 1fr;
-    }
-</style>

package/dist/components/dataTable/dataTable.svelte

@@ -122,10 +122,28 @@
 
     let activeTabFilter = $state<any>(undefined);
 
+    // Canonicalize the incoming filter so values like `{ status: "Open" }`
+    // become `{ status: { $eq: "Open" } }`. The Filter UI and the server
+    // both expect operator objects, so doing this once at the boundary
+    // keeps the rest of the data flow uniform.
+    function normalizeFilter(f: Record<string, any> | undefined) {
+        const out: Record<string, any> = {};
+        for (const [key, value] of Object.entries(f ?? {})) {
+            if (key === "$and" || key === "$or") {
+                out[key] = value;
+            } else if (!_.isPlainObject(value)) {
+                out[key] = { $eq: value };
+            } else {
+                out[key] = value;
+            }
+        }
+        return out;
+    }
+
     const fields = getCollectionParamsFields(ctx, collectionName);
     let params = $state({
         fields: fields,
-        filter: { ...filter, ...activeTabFilter },
+        filter: { ...normalizeFilter(filter), ...activeTabFilter },
         sort: {},
         limit: "100",
         page: 1,
@@ -134,7 +152,7 @@
 
     $effect(() => {
         const tabFilter = activeTabFilter;
-        params.filter = { ...filter, ...tabFilter };
+        params.filter = { ...normalizeFilter(filter), ...tabFilter };
     });
 
     let selectedRecords = $state([]);

package/dist/components/dataTable/fieldCell.svelte

@@ -8,6 +8,7 @@
     import { getStudioContext } from "../../context";
     import ExtensionsComponents from "../extensionsComponents.svelte";
     import { getExtensionUtils } from "../../extensions/extensionUtils";
+    import NumberCell from "./numberCell.svelte";
 
     const { ctx, lobb } = getStudioContext();
 
@@ -92,6 +93,8 @@
             <div>{date}</div>
         {:else if field.type === "time"}
             <div>{value}</div>
+        {:else if field.type === "integer" || field.type === "long" || field.type === "decimal" || field.type === "float"}
+            <NumberCell {value} groupDigits={field.ui?.groupDigits ?? false} />
         {:else}
             {value}
         {/if}

package/dist/components/dataTable/filter.svelte

@@ -33,21 +33,6 @@
     let firstPopover = $state(false);
     let secondPopover = $state(false);
 
-    $effect.pre(() => {
-        // convert direct values to { $eq: (value) }
-        for (let index = 0; index < Object.keys(filter).length; index++) {
-            const key = Object.keys(filter)[index];
-            const value = filter[key];
-            if (key !== "$and" && key !== "$or") {
-                if (!_.isPlainObject(value)) {
-                    filter[key] = {
-                        $eq: value,
-                    };
-                }
-            }
-        }
-    });
-
     function groupAddingHandler(filter: any, key: string) {
         if (key === "$and" || key === "$or") {
             filter[key] = [];

package/dist/components/dataTable/numberCell.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+	// Matches the input mask in numberInput.svelte: space-grouped thousands,
+	// dot decimal (ISO 31-0). Up to 20 fractional digits so we don't silently
+	// round decimal column values on display.
+	const formatter = new Intl.NumberFormat("en-US", {
+		useGrouping: true,
+		maximumFractionDigits: 20,
+	});
+
+	interface Props {
+		value: any;
+		// When false, render the value plainly with no grouping. Default false
+		// so dropping this in for any number type is safe; opt into grouping
+		// only where it makes sense (quantities/amounts, not identifiers).
+		groupDigits?: boolean;
+	}
+
+	const { value, groupDigits = false }: Props = $props();
+
+	const formatted = $derived.by(() => {
+		if (!groupDigits) return String(value);
+		const n = Number(value);
+		if (!Number.isFinite(n)) return String(value);
+		return formatter.format(n).replaceAll(",", " ");
+	});
+</script>
+
+<div class="tabular-nums">{formatted}</div>

package/dist/components/dataTable/numberCell.svelte.d.ts

@@ -0,0 +1,7 @@
+interface Props {
+    value: any;
+    groupDigits?: boolean;
+}
+declare const NumberCell: import("svelte").Component<Props, {}, "">;
+type NumberCell = ReturnType<typeof NumberCell>;
+export default NumberCell;

package/dist/components/dataTablePopup/dataTablePopup.svelte

@@ -0,0 +1,84 @@
+<script lang="ts">
+	import { X } from "lucide-svelte";
+	import { untrack } from "svelte";
+	import { fade, scale } from "svelte/transition";
+	import { cubicOut } from "svelte/easing";
+	import Portal from "svelte-portal";
+	import Button from "../ui/button/button.svelte";
+	import DataTable from "../dataTable/dataTable.svelte";
+	import type { TableProps } from "../dataTable/table.svelte";
+	import type { CollectionTab } from "../../store.types";
+
+	interface Props {
+		collectionName: string;
+		filter?: Record<string, any>;
+		sort?: Record<string, "asc" | "desc">;
+		limit?: number;
+		title?: string;
+		showHeader?: boolean;
+		showFooter?: boolean;
+		tableProps?: Partial<TableProps>;
+		tabs?: CollectionTab[];
+		onClose?: () => void;
+	}
+
+	let {
+		collectionName,
+		filter,
+		sort,
+		limit,
+		title,
+		showHeader = true,
+		showFooter = true,
+		tableProps,
+		tabs,
+		onClose,
+	}: Props = $props();
+
+	// Read once on mount — sort/limit are fixed for the popup's lifetime,
+	// and DataTable only reads searchParams during its initial $state setup
+	// so even live updates wouldn't propagate. untrack makes that intent
+	// explicit and silences Svelte's "captures initial value" warning.
+	const searchParams = untrack(() => {
+		const p: Record<string, any> = {};
+		if (sort) p.sort = sort;
+		if (limit != null) p.limit = String(limit);
+		return p;
+	});
+</script>
+
+<Portal target="body">
+	<button
+		transition:fade={{ duration: 200 }}
+		onclick={() => onClose?.()}
+		class="fixed left-0 top-0 z-40 h-screen w-screen bg-black/50 cursor-default"
+		aria-label="background used to close the popup"
+	></button>
+
+	<div
+		transition:scale={{ duration: 200, easing: cubicOut, start: 0.95 }}
+		class="fixed left-1/2 top-1/2 z-40 flex h-[85vh] w-[95vw] max-w-7xl -translate-x-1/2 -translate-y-1/2 flex-col overflow-hidden rounded-lg border bg-background shadow-2xl"
+	>
+		<div class="flex h-12 shrink-0 items-center justify-between gap-4 border-b px-4">
+			<div class="text-sm font-medium">{title ?? collectionName}</div>
+			<Button
+				variant="ghost"
+				size="icon"
+				onclick={() => onClose?.()}
+				class="h-8 w-8 rounded-full text-muted-foreground"
+				Icon={X}
+			/>
+		</div>
+		<div class="min-h-0 flex-1 overflow-auto">
+			<DataTable
+				{collectionName}
+				{filter}
+				{searchParams}
+				{showHeader}
+				{showFooter}
+				{tableProps}
+				{tabs}
+			/>
+		</div>
+	</div>
+</Portal>

package/dist/components/dataTablePopup/dataTablePopup.svelte.d.ts

@@ -0,0 +1,17 @@
+import type { TableProps } from "../dataTable/table.svelte";
+import type { CollectionTab } from "../../store.types";
+interface Props {
+    collectionName: string;
+    filter?: Record<string, any>;
+    sort?: Record<string, "asc" | "desc">;
+    limit?: number;
+    title?: string;
+    showHeader?: boolean;
+    showFooter?: boolean;
+    tableProps?: Partial<TableProps>;
+    tabs?: CollectionTab[];
+    onClose?: () => void;
+}
+declare const DataTablePopup: import("svelte").Component<Props, {}, "">;
+type DataTablePopup = ReturnType<typeof DataTablePopup>;
+export default DataTablePopup;

package/dist/components/detailView/detailView.svelte

@@ -20,8 +20,13 @@
     }: Props = $props();
 
     const { lobb, ctx } = getStudioContext();
+    // Singleton collections only ever have one row, and `id` is auto-
+    // generated for that row — there's no value to showing it in the form.
     const fieldNames = $derived(
-        Object.keys(ctx.meta.collections[collectionName].fields),
+        Object.keys(ctx.meta.collections[collectionName].fields).filter(
+            (fieldName) =>
+                !(ctx.meta.collections[collectionName].singleton && fieldName === "id"),
+        ),
     );
 </script>
 

package/dist/components/detailView/fieldInput.svelte

@@ -6,6 +6,7 @@
 	import Button from "../ui/button/button.svelte";
 	import FieldCustomInput from "./fieldCustomInput.svelte";
 	import Input from "../ui/input/input.svelte";
+	import NumberInput from "../ui/input/numberInput.svelte";
 	import * as Select from "../ui/select/index";
 	import EnumBadge from "../dataTable/enumBadge.svelte";
 	import type { EnumOption } from "@lobb-js/core";
@@ -257,11 +258,12 @@
 					</Select.Item>
 				</Select.Content>
 			</Select.Root>
-		{:else if field.type === "decimal"}
-			<Input
+		{:else if field.type === "decimal" || field.type === "float" || field.type === "integer" || field.type === "long"}
+			{@const isFloat = field.type === "decimal" || field.type === "float"}
+			<NumberInput
 				placeholder={ui?.placeholder ? ui.placeholder : "NULL"}
-				type="number"
-				step="any"
+				scale={isFloat ? 20 : 0}
+				groupDigits={ui?.groupDigits ?? false}
 				class="
 					bg-muted-soft text-xs
 					{destructive ? 'border-destructive bg-destructive/10' : ''}
@@ -271,7 +273,7 @@
 		{:else}
 			<Input
 				placeholder={ui?.placeholder ? ui.placeholder : "NULL"}
-				type="number"
+				type="text"
 				class="
 					bg-muted-soft text-xs
 					{destructive ? 'border-destructive bg-destructive/10' : ''}

package/dist/components/miniSidebar.svelte

@@ -90,12 +90,15 @@
 	// prefix of everything); other items use startsWith so sub-paths
 	// (e.g. /studio/collections/risks) still highlight their parent.
 	// Popover items with children are active when any of their children match.
-	const currentPath = $derived(page.url.pathname);
+	// SvelteKit's pathname can come back with a trailing slash (`/studio/`)
+	// depending on config, so we normalize it before comparing.
+	const currentPath = $derived(page.url.pathname.replace(/\/$/, "") || "/");
 	function isItemActive(item: any): boolean {
 		if (item.navs) return item.navs.some((c: any) => isItemActive(c));
 		if (!item.href) return false;
-		if (item.href === "/studio") return currentPath === "/studio";
-		return currentPath === item.href || currentPath.startsWith(item.href + "/");
+		const itemHref = item.href.replace(/\/$/, "") || "/";
+		if (itemHref === "/studio") return currentPath === "/studio";
+		return currentPath === itemHref || currentPath.startsWith(itemHref + "/");
 	}
 
 	// onMount is enough — Studio gets remounted on login/logout (see

package/dist/components/routes/extensions/extension.svelte

@@ -8,7 +8,7 @@
     const { lobb, ctx } = getStudioContext();
 </script>
 
-<div class="grid overflow-auto bg-background">
+<div class="grid h-full overflow-auto bg-background">
     {#key extension && page}
         <ExtensionsComponents
             name="pages.{page}"

package/dist/components/routes/home.svelte

@@ -3,29 +3,43 @@
     import { goto } from "$app/navigation";
     import { ArrowRight } from "lucide-svelte";
     import HomeFooter from "./homeFooter.svelte";
+    import ExtensionsComponents from "../extensionsComponents.svelte";
+    import { getExtensionUtils } from "../../extensions/extensionUtils";
+    import { getStudioContext } from "../../context";
+
+    const { lobb, ctx } = getStudioContext();
 </script>
 
-<div class="flex flex-col">
-    <div
-        class="flex flex-1 w-full flex-col items-center justify-center gap-4 text-muted-foreground"
-    >
-        <div class="flex flex-col items-center justify-center p-4">
-            <div class="text-3xl">Welcome to Lobb!</div>
-            <div class="text-xs text-center">
-                Your journey starts here. Explore and make the most of your
-                experience.
+<!--
+    Any extension that registers a `pages.home` component takes over /studio
+    (e.g. an app-specific overview dashboard). ExtensionsComponents falls
+    back to rendering its children when nothing matches, so the default
+    Lobb welcome below stays as the safety net for projects without an
+    overriding extension.
+-->
+<ExtensionsComponents name="pages.home" utils={getExtensionUtils(lobb, ctx)}>
+    <div class="flex h-full flex-col">
+        <div
+            class="flex flex-1 w-full flex-col items-center justify-center gap-4 text-muted-foreground"
+        >
+            <div class="flex flex-col items-center justify-center p-4">
+                <div class="text-3xl">Welcome to Lobb!</div>
+                <div class="text-xs text-center">
+                    Your journey starts here. Explore and make the most of your
+                    experience.
+                </div>
+            </div>
+            <div class="flex flex-col items-center justify-center">
+                <Button
+                    Icon={ArrowRight}
+                    variant="outline"
+                    class="h-7 px-3 text-xs font-normal"
+                    onclick={() => goto("/studio/collections")}
+                >
+                    Go to collections
+                </Button>
             </div>
         </div>
-        <div class="flex flex-col items-center justify-center">
-            <Button
-                Icon={ArrowRight}
-                variant="outline"
-                class="h-7 px-3 text-xs font-normal"
-                onclick={() => goto("/studio/collections")}
-            >
-                Go to collections
-            </Button>
-        </div>
+        <HomeFooter />
     </div>
-    <HomeFooter />
-</div>
+</ExtensionsComponents>

package/dist/components/ui/input/numberInput.svelte

@@ -0,0 +1,104 @@
+<script lang="ts">
+	import IMask from "imask";
+	import type { HTMLInputAttributes } from "svelte/elements";
+	import { cn } from "../../../utils.js";
+
+	// Locale-neutral grouping: space for thousands, dot for decimals
+	// (ISO 31-0). Norwegian, French, scientific contexts — same shape, and
+	// space can't be confused with comma-as-decimal vs comma-as-thousands.
+	const THOUSANDS = " ";
+	const RADIX = ".";
+
+	type Props = Omit<HTMLInputAttributes, "type" | "value" | "step"> & {
+		value?: number | string | null;
+		// 0 = integer-only, > 0 = allow that many decimal places.
+		scale?: number;
+		// When false, render a plain browser number input — no masking, no
+		// formatting. Default false so the component is safe to drop in
+		// anywhere; opt into grouping only where it makes sense.
+		groupDigits?: boolean;
+	};
+
+	let {
+		value = $bindable<number | string | null | undefined>(),
+		scale = 0,
+		groupDigits = false,
+		class: className,
+		...rest
+	}: Props = $props();
+
+	let inputEl: HTMLInputElement | undefined = $state();
+	let mask: ReturnType<typeof IMask> | null = null;
+	// Re-entrance guard: imask's `accept` event fires when we programmatically
+	// set unmaskedValue, which would create a sync→reflect loop with the
+	// "external value changed" effect below.
+	let applyingExternal = false;
+
+	$effect(() => {
+		if (!groupDigits) return;
+		if (!inputEl) return;
+		mask = IMask(inputEl, {
+			mask: Number,
+			thousandsSeparator: THOUSANDS,
+			radix: RADIX,
+			scale,
+			signed: true,
+			padFractionalZeros: false,
+			normalizeZeros: true,
+			// Allow the user to type either radix; imask remaps to the chosen
+			// one and ignores stray locale separators on input.
+			mapToRadix: [",", "."],
+		});
+
+		mask.on("accept", () => {
+			if (applyingExternal) return;
+			const unmasked = mask!.unmaskedValue;
+			value = unmasked === "" ? null : Number(unmasked);
+		});
+
+		applyingExternal = true;
+		mask.unmaskedValue = value == null ? "" : String(value);
+		applyingExternal = false;
+
+		return () => {
+			mask?.destroy();
+			mask = null;
+		};
+	});
+
+	// Sync external value changes back into the mask (e.g. form reset, parent
+	// clearing the value). No-op when grouping is off.
+	$effect(() => {
+		const v = value;
+		if (!mask) return;
+		const next = v == null ? "" : String(v);
+		if (mask.unmaskedValue === next) return;
+		applyingExternal = true;
+		mask.unmaskedValue = next;
+		applyingExternal = false;
+	});
+</script>
+
+{#if groupDigits}
+	<input
+		bind:this={inputEl}
+		type="text"
+		inputmode={scale > 0 ? "decimal" : "numeric"}
+		class={cn(
+			"border-input placeholder:text-muted-foreground focus-visible:ring-ring flex h-9 w-full rounded-md border bg-transparent px-3 py-1 text-base transition-colors focus-visible:outline-none focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+			className,
+		)}
+		{...rest}
+	/>
+{:else}
+	<input
+		type="number"
+		step={scale > 0 ? "any" : "1"}
+		class={cn(
+			"border-input placeholder:text-muted-foreground focus-visible:ring-ring flex h-9 w-full rounded-md border bg-transparent px-3 py-1 text-base transition-colors focus-visible:outline-none focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+			className,
+		)}
+		bind:value
+		{...rest}
+	/>
+{/if}

package/dist/components/ui/input/numberInput.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { HTMLInputAttributes } from "svelte/elements";
+type Props = Omit<HTMLInputAttributes, "type" | "value" | "step"> & {
+    value?: number | string | null;
+    scale?: number;
+    groupDigits?: boolean;
+};
+declare const NumberInput: import("svelte").Component<Props, {}, "value">;
+type NumberInput = ReturnType<typeof NumberInput>;
+export default NumberInput;

package/dist/extensions/extension.types.d.ts

@@ -23,7 +23,7 @@ import * as Icons from "lucide-svelte";
 import { ContextMenu } from "bits-ui";
 import * as Tooltip from "../components/ui/tooltip";
 import * as Breadcrumb from "../components/ui/breadcrumb";
-import { showDialog, type OpenDataTableDrawerProps } from "../actions";
+import { showDialog, type OpenDataTableDrawerProps, type OpenDataTablePopupProps } from "../actions";
 import { toast } from "svelte-sonner";
 import { Switch } from "../components/ui/switch";
 export interface Components {
@@ -67,6 +67,7 @@ export interface ExtensionUtils {
     toast: typeof toast;
     showDialog: typeof showDialog;
     openDataTableDrawer: (props: OpenDataTableDrawerProps) => void;
+    openDataTablePopup: (props: OpenDataTablePopupProps) => void;
     emitEvent: (eventName: string, input: any) => Promise<any>;
     components: Components;
     mediaQueries: typeof mediaQueries;

package/dist/extensions/extensionUtils.js

@@ -1,5 +1,5 @@
 import { toast } from "svelte-sonner";
-import { showDialog, openDataTableDrawer } from "../actions";
+import { showDialog, openDataTableDrawer, openDataTablePopup } from "../actions";
 import { emitEvent } from "../eventSystem";
 import { Button } from "../components/ui/button";
 import { Input } from "../components/ui/input";
@@ -58,6 +58,7 @@ export function getExtensionUtils(lobb, ctx) {
         toast: toast,
         showDialog: showDialog,
         openDataTableDrawer: (props) => openDataTableDrawer({ lobb, ctx }, props),
+        openDataTablePopup: (props) => openDataTablePopup({ lobb, ctx }, props),
         emitEvent: (eventName, input) => emitEvent({ lobb, ctx }, eventName, input),
         components: getComponents(),
         mediaQueries: mediaQueries,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@lobb-js/studio",
   "license": "UNLICENSED",
-  "version": "0.29.1",
+  "version": "0.31.0",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -42,7 +42,7 @@
     "postpublish": "./scripts/postpublish.sh"
   },
   "devDependencies": {
-    "@lobb-js/core": "^0.32.1",
+    "@lobb-js/core": "^0.33.0",
     "@chromatic-com/storybook": "^4.1.2",
     "@storybook/addon-a11y": "^10.0.1",
     "@storybook/addon-docs": "^10.0.1",
@@ -101,6 +101,7 @@
     "codemirror": "^6.0.2",
     "fflate": "^0.8.2",
     "fuse.js": "^7.3.0",
+    "imask": "^7.6.1",
     "javascript-time-ago": "^2.6.4",
     "json-stable-stringify": "^1.3.0",
     "lucide-svelte": "^0.488.0",

package/src/lib/actions.ts

@@ -3,6 +3,7 @@ import ConfirmationDialog from "./components/confirmationDialog/confirmationDial
 import CreateDetailView from "./components/detailView/create/createDetailView.svelte";
 import UpdateDetailView from "./components/detailView/update/updateDetailView.svelte";
 import DataTableDrawer from "./components/dataTableDrawer/dataTableDrawer.svelte";
+import DataTablePopup from "./components/dataTablePopup/dataTablePopup.svelte";
 import type { CreateDetailViewProp } from "./components/detailView/create/createDetailView.svelte";
 import type { UpdateDetailViewProp } from "./components/detailView/update/updateDetailView.svelte";
 import type { StudioContext } from "./context";
@@ -20,6 +21,17 @@ export interface OpenDataTableDrawerProps {
     tabs?: CollectionTab[];
 }
 
+export interface OpenDataTablePopupProps {
+    collectionName: string;
+    filter?: Record<string, any>;
+    sort?: Record<string, "asc" | "desc">;
+    limit?: number;
+    title?: string;
+    showHeader?: boolean;
+    showFooter?: boolean;
+    tabs?: CollectionTab[];
+}
+
 export function showDialog(title: string, description: string): Promise<boolean> {
     return new Promise((resolve) => {
         const targetElement = document.querySelector("main");
@@ -99,3 +111,19 @@ export function openDataTableDrawer(studioContext: StudioContext, props: OpenDat
         },
     });
 }
+
+export function openDataTablePopup(studioContext: StudioContext, props: OpenDataTablePopupProps) {
+    const targetElement = document.querySelector("main");
+    if (!targetElement) throw new Error("main html element doesn't exist");
+
+    const mounted = mount(DataTablePopup, {
+        target: targetElement,
+        context: createStudioContextMap(studioContext),
+        props: {
+            ...props,
+            onClose: async () => {
+                await unmount(mounted, { outro: true });
+            },
+        },
+    });
+}