@lobb-js/studio 0.42.0 → 0.44.0

package/dist/components/confirmationDialog/confirmationDialog.svelte

@@ -17,7 +17,7 @@
 	<AlertDialog.Content>
 		<AlertDialog.Header>
 			<AlertDialog.Title>{title}</AlertDialog.Title>
-			<AlertDialog.Description class="whitespace-pre-line">
+			<AlertDialog.Description class="whitespace-pre-wrap font-mono text-xs">
 				{description}
 			</AlertDialog.Description>
 		</AlertDialog.Header>

package/dist/components/dataTable/dataTable.svelte

@@ -14,8 +14,10 @@
     import Table, { type TableProps } from "./table.svelte";
     import { getCollectionColumns, getCollectionParamsFields } from "./utils";
     import CanAccess from "../canAccess.svelte";
-    import { Pencil, Trash, Unlink, RotateCcw } from "lucide-svelte";
+    import { Pencil, Trash, Unlink, RotateCcw, Network } from "lucide-svelte";
     import ListViewChildren from "./listViewChildren.svelte";
+    import Drawer from "../drawer.svelte";
+    import { ArrowLeft } from "lucide-svelte";
     import FieldCell from "./fieldCell.svelte";
     import Skeleton from "../ui/skeleton/skeleton.svelte";
     import Button from "../ui/button/button.svelte";
@@ -73,6 +75,7 @@
     }: Props = $props();
 
     const isRecordingMode = onChanges !== undefined;
+    const isSelectMode = $derived(tableProps?.select != null);
     let localChanges = $state<ChildrenChanges>(
         untrack(() => changes) ?? { created: [], updated: [], deleted: [], linked: [], unlinked: [] }
     );
@@ -135,17 +138,17 @@
         const state = entry._recordingState;
         const border = cellIndex === 0 ? {
             deleted:  'border-l-2 border-l-red-500',
-            unlinked: 'border-l-2 border-l-orange-500',
+            unlinked: 'border-l-2 border-l-slate-500',
             created:  'border-l-2 border-l-green-500',
             linked:   'border-l-2 border-l-blue-500',
-            updated:  'border-l-2 border-l-amber-500',
+            updated:  'border-l-2 border-l-orange-500',
         }[state as string] ?? '' : '';
         const bg: Record<string, string> = {
-            deleted:  '!bg-red-500/5 opacity-50',
-            unlinked: '!bg-orange-500/5 opacity-50',
+            deleted:  '!bg-red-500/5',
+            unlinked: '!bg-slate-500/5',
             created:  '!bg-green-500/5',
             linked:   '!bg-blue-500/5',
-            updated:  '!bg-amber-500/5',
+            updated:  '!bg-orange-500/5',
         };
         return `${bg[state as string] ?? ''} ${border}`.trim();
     }
@@ -220,6 +223,10 @@
         (ctx.meta.collections[collectionName]?.children ?? [])
             .some((c: any) => c.type === "fk" || c.type === "m2m" || c.type === "polymorphic")
     );
+    // Select-mode drawer has no checkbox, edit, delete, or unlink — the
+    // left-sticky tools column would render empty, so drop it entirely.
+    const showLeftTools = $derived(!isSelectMode);
+    let childrenDrawerEntry = $state<Record<string, any> | null>(null);
 
     // requests the data from the server when the params is changed
     $effect(() => {
@@ -404,6 +411,7 @@
             bind:selectedRecords
             {showImport}
             {showFilter}
+            showCreate={!isSelectMode}
             {loading}
             {parentContext}
             onLink={isRecordingMode ? handleLink : undefined}
@@ -453,7 +461,6 @@
                     <Table
                         {data}
                         {columns}
-                        showCollapsible={doesCollectionHasChildren}
                         selectByColumn="id"
                         showLastRowBorder={true}
                         showLastColumnBorder={true}
@@ -461,11 +468,25 @@
                         bind:selectedRecords
                         bind:tableWidth={dataTableWidth}
                         {...tableProps}
+                        {showLeftTools}
                         rowActions={hasRowActions ? rowActionsSnippet : undefined}
                         onCellClass={isRecordingMode ? onCellClass : undefined}>
+                        {#snippet preTools(entry)}
+                            {#if doesCollectionHasChildren}
+                                <Button
+                                    class="h-6 w-6 text-muted-foreground hover:bg-transparent"
+                                    variant="ghost"
+                                    size="icon"
+                                    onclick={() => { childrenDrawerEntry = entry; }}
+                                    Icon={Network}
+                                    title="Show children"
+                                    aria-label={`Show children of record ${entry.id}`}
+                                ></Button>
+                            {/if}
+                        {/snippet}
                         {#snippet tools(entry)}
                             {#if entry._recordingState !== 'deleted' && entry._recordingState !== 'unlinked'}
-                                {#if showEdit}
+                                {#if showEdit && !isSelectMode}
                                     {@const isPending = entry._recordingState === 'created'}
                                     <CanAccess collection={collectionName} action="update">
                                         <UpdateDetailViewButton
@@ -524,15 +545,6 @@
                                 refresh={() => { params = { ...params }; }}
                             />
                         {/snippet}
-                        {#snippet collapsible(entry)}
-                            <ListViewChildren
-                                {collectionName}
-                                recordId={entry.id}
-                                width={dataTableWidth > dataTableContainerWidth
-                                    ? dataTableContainerWidth
-                                    : dataTableWidth}
-                            />
-                        {/snippet}
                     </Table>
                 {/if}
             </div>
@@ -546,3 +558,23 @@
         />
     {/if}
 </div>
+
+{#if childrenDrawerEntry}
+    <Drawer position="bottom" onHide={async () => { childrenDrawerEntry = null; }}>
+        <div class="flex h-12 items-center gap-4 border-b px-4 shrink-0">
+            <Button
+                variant="outline"
+                onclick={() => { childrenDrawerEntry = null; }}
+                class="h-8 w-8 rounded-full text-xs font-normal"
+                Icon={ArrowLeft}
+            ></Button>
+            <div class="flex items-center gap-2 text-sm">
+                <span>Children of</span>
+                <span class="rounded-md border bg-muted px-2 py-0.5">{collectionName} #{childrenDrawerEntry.id}</span>
+            </div>
+        </div>
+        <div class="flex-1 overflow-y-auto">
+            <ListViewChildren {collectionName} recordId={String(childrenDrawerEntry.id)} />
+        </div>
+    </Drawer>
+{/if}

package/dist/components/dataTable/filter.svelte

@@ -20,11 +20,13 @@
     //   • anything else → explicit $and/$or arrays.
 
     import * as Select from "../ui/select/index.js";
+    import * as Popover from "../ui/popover/index.js";
     import Button from "../ui/button/button.svelte";
-    import { Plus, X, Boxes, Settings2 } from "lucide-svelte";
+    import { ChevronDown, Plus, X, Boxes, Settings2 } from "lucide-svelte";
     import { getStudioContext } from "../../context";
     import { getFieldIcon } from "./utils";
     import { getFieldRelationTarget } from "../../relations";
+    import FieldPicker from "./fieldPicker.svelte";
 
     const { ctx } = getStudioContext();
 
@@ -43,6 +45,9 @@
         isEmpty = $bindable(true),
     }: Props = $props();
 
+    // Per-rule open state for the field-picker popovers.
+    let fieldPickerOpen = $state<Record<string, boolean>>({});
+
     type OperatorDef = {
         value: string;
         label: string;
@@ -471,30 +476,28 @@
     {@const currentOp = ops.find((o) => o.value === rule.operator) ?? ops[0]}
     {@const kind = getFieldKind(rule.field)}
     {@const FieldIcon = getFieldIcon(ctx, rule.field, collectionName)}
-    <!-- Field picker -->
-    <Select.Root
-        type="single"
-        value={rule.field}
-        onValueChange={(v) => v && patchRuleInPlace(rule.id, { field: v })}
-    >
-        <Select.Trigger class="bg-muted h-7 w-36 text-xs">
-            <div class="inline-flex items-center gap-1.5">
+    <!-- Field picker — typeahead popover, same widget Sort uses -->
+    <Popover.Root bind:open={fieldPickerOpen[rule.id]}>
+        <Popover.Trigger
+            class="inline-flex h-7 w-36 items-center justify-between gap-1.5 rounded-md border bg-muted px-2 text-xs"
+        >
+            <div class="inline-flex items-center gap-1.5 truncate">
                 <FieldIcon size="13" />
-                {rule.field}
+                <span class="truncate">{rule.field}</span>
             </div>
-        </Select.Trigger>
-        <Select.Content>
-            {#each allFieldNames as fname}
-                {@const OptionIcon = getFieldIcon(ctx, fname, collectionName)}
-                <Select.Item value={fname}>
-                    <div class="inline-flex items-center gap-1.5">
-                        <OptionIcon size="13" />
-                        {fname}
-                    </div>
-                </Select.Item>
-            {/each}
-        </Select.Content>
-    </Select.Root>
+            <ChevronDown size="13" class="text-muted-foreground shrink-0" />
+        </Popover.Trigger>
+        <Popover.Content class="w-64 p-2">
+            <FieldPicker
+                {collectionName}
+                placeholder="Pick a field…"
+                onPick={(fname: string) => {
+                    patchRuleInPlace(rule.id, { field: fname });
+                    fieldPickerOpen[rule.id] = false;
+                }}
+            />
+        </Popover.Content>
+    </Popover.Root>
 
     <!-- Operator picker -->
     <Select.Root

package/dist/components/dataTable/header.svelte

@@ -26,6 +26,7 @@
         onCreate?: (changes: Changes) => void;
         showImport?: boolean;
         showFilter?: boolean;
+        showCreate?: boolean;
         loading?: boolean;
         left?: Snippet<[]>;
         excludeIds?: (string | number)[];
@@ -40,6 +41,7 @@
         onCreate,
         showImport = true,
         showFilter = true,
+        showCreate = true,
         loading = false,
         left,
         excludeIds = [],
@@ -154,7 +156,7 @@
                 {headerIsSmall ? "" : "Refresh"}
             {/if}
         </Button>
-        {#if showImport}
+        {#if showImport && showCreate}
             <CanAccess collection={collectionName} action="create">
                 <ImportButton
                     {collectionName}
@@ -183,17 +185,19 @@
                 {headerIsSmall ? "" : "Link"}
             </SelectRecord>
         {/if}
-        <CanAccess collection={collectionName} action="create">
-            <CreateDetailViewButton
-                {collectionName}
-                variant="default"
-                size="sm"
-                Icon={Plus}
-                onChanges={onCreate ? handleCreate : undefined}
-                onSuccessfullSave={onCreate ? undefined : handleCreate}
-            >
-                {headerIsSmall ? "" : "Create"}
-            </CreateDetailViewButton>
-        </CanAccess>
+        {#if showCreate}
+            <CanAccess collection={collectionName} action="create">
+                <CreateDetailViewButton
+                    {collectionName}
+                    variant="default"
+                    size="sm"
+                    Icon={Plus}
+                    onChanges={onCreate ? handleCreate : undefined}
+                    onSuccessfullSave={onCreate ? undefined : handleCreate}
+                >
+                    {headerIsSmall ? "" : "Create"}
+                </CreateDetailViewButton>
+            </CanAccess>
+        {/if}
     </div>
 </div>

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

@@ -10,6 +10,7 @@ interface Props {
     onCreate?: (changes: Changes) => void;
     showImport?: boolean;
     showFilter?: boolean;
+    showCreate?: boolean;
     loading?: boolean;
     left?: Snippet<[]>;
     excludeIds?: (string | number)[];

package/dist/components/dataTable/listViewChildren.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
     import { getStudioContext } from "../../context";
-    import { ChevronRight, Table, Plus, Link, ArrowLeftRight, GitFork } from "lucide-svelte";
+    import { Table, Plus } from "lucide-svelte";
     import DataTable from "./dataTable.svelte";
     import CreateDetailViewButton from "../detailView/create/createDetailViewButton.svelte";
     import ExtensionsComponents from "../extensionsComponents.svelte";
@@ -11,93 +11,76 @@
     interface Props {
         collectionName: string;
         recordId: string;
-        width: number;
+        width?: number;
     }
 
-    let { collectionName, recordId, width }: Props = $props();
+    let { collectionName, recordId, width = 0 }: Props = $props();
 
     const children = (ctx.meta.collections[collectionName]?.children ?? [])
         .filter((c: any) => c.type === "fk" || c.type === "m2m" || c.type === "polymorphic");
 
-    let expandedRows: boolean[] = $state(new Array(children.length).fill(false));
-    let refreshDataTable = $state(true);
-    let tableHeaderWidth = $state(0);
+    let activeTab = $state(children[0]?.collection ?? '');
+    let refreshKey = $state(0);
+    let counts = $state<Record<string, number>>({});
+
+    const activeChild = $derived(children.find((c: any) => c.collection === activeTab));
 </script>
 
-<div class="flex" style="width: {width}px;">
-    <div
-        class="flex justify-center border-r bg-background"
-        style="width: 40px"
-    ></div>
-    <div class="flex-1 flex flex-col">
-        {#each children as child, index}
-            {@const lastRow = children.length - 1 === index}
-            <div class="overflow-hidden bg-background">
-                <div
-                    bind:clientWidth={tableHeaderWidth}
-                    class="flex justify-between items-center gap-2 text-sm h-10 {expandedRows[index] || !lastRow ? 'border-b' : ''}"
+<div class="flex flex-col h-full overflow-hidden">
+    <!-- Tab bar -->
+    <div class="flex border-b shrink-0 overflow-x-auto">
+        {#each children as child}
+            <button
+                class="flex items-center gap-1.5 px-4 h-10 text-xs font-medium whitespace-nowrap border-b-2 transition-colors
+                    {activeTab === child.collection
+                        ? 'border-foreground text-foreground'
+                        : 'border-transparent text-muted-foreground hover:text-foreground'}"
+                onclick={() => { activeTab = child.collection; }}
+            >
+                <Table size="11" class="opacity-50" />
+                {child.collection}
+                {#if counts[child.collection] !== undefined}
+                    <span class="rounded-full bg-muted px-1.5 py-0.5 text-[0.65rem] text-muted-foreground">{counts[child.collection]}</span>
+                {/if}
+            </button>
+        {/each}
+        <!-- Create button for FK children -->
+        {#if activeChild?.type === "fk"}
+            <div class="ml-auto flex items-center px-2">
+                <CreateDetailViewButton
+                    collectionName={activeChild.collection}
+                    variant="ghost"
+                    size="sm"
+                    Icon={Plus}
+                    values={{ [activeChild.field]: recordId }}
+                    onSuccessfullSave={async () => { refreshKey++; }}
                 >
-                    <button
-                        class="flex gap-2 px-2 flex-1 h-full items-center"
-                        onclick={() => { expandedRows[index] = !expandedRows[index]; }}
+                    Create
+                </CreateDetailViewButton>
+            </div>
+        {/if}
+    </div>
+
+    <!-- Tab content — render all but hide inactive so counts load for all tabs -->
+    <div class="flex-1 overflow-hidden relative">
+        {#each children as child}
+            <div class="absolute inset-0 {activeTab === child.collection ? '' : 'invisible pointer-events-none'}">
+                {#key refreshKey}
+                    <ExtensionsComponents
+                        name="listView.entry.children.{child.collection}"
+                        collectionName={child.collection}
+                        searchParams={{ children_of: collectionName, parent_id: recordId }}
+                        utils={getExtensionUtils(lobb, ctx)}
                     >
-                        <ChevronRight
-                            size="17.5"
-                            class="text-muted-foreground transition-transform"
-                            style={expandedRows[index] ? "transform: rotate(90deg);" : "transform: rotate(0deg);"}
+                        <DataTable
+                            collectionName={child.collection}
+                            searchParams={{ children_of: collectionName, parent_id: recordId }}
+                            showDelete={child.type === "fk" || child.type === "m2m"}
+                            tableProps={{ showLastRowBorder: true, showLastColumnBorder: true }}
+                            onDataLoad={(total) => { counts[child.collection] = total; }}
                         />
-                        <Table size="17.5" class="text-muted-foreground" />
-                        <div class="text-muted-foreground">{child.collection}</div>
-                        {#if child.type === "fk"}
-                            <span title="Direct (FK)"><Link size="13" class="text-muted-foreground/50" /></span>
-                        {:else if child.type === "m2m"}
-                            <span title="Many to Many"><ArrowLeftRight size="13" class="text-muted-foreground/50" /></span>
-                        {:else if child.type === "polymorphic"}
-                            <span title="Polymorphic"><GitFork size="13" class="text-muted-foreground/50" /></span>
-                        {/if}
-                    </button>
-                    {#if child.type === "fk"}
-                        <div class="flex items-center px-2">
-                            <CreateDetailViewButton
-                                collectionName={child.collection}
-                                variant="ghost"
-                                size="sm"
-                                Icon={Plus}
-                                values={{ [child.field]: recordId }}
-                                onSuccessfullSave={async () => { refreshDataTable = !refreshDataTable; }}
-                            >
-                                Create
-                            </CreateDetailViewButton>
-                        </div>
-                    {/if}
-                </div>
-                {#if expandedRows[index]}
-                    <div class="flex max-h-96 overflow-auto {lastRow ? '' : 'border-b'}">
-                        <div
-                            class="border-r"
-                            style="width: 100vw; max-width: 40px"
-                        ></div>
-                        <div class="flex-1" style="width: {tableHeaderWidth - 40}px;">
-                            {#key refreshDataTable}
-                                <ExtensionsComponents
-                                    name="listView.entry.children.{child.collection}"
-                                    collectionName={child.collection}
-                                    searchParams={{ children_of: collectionName, parent_id: recordId }}
-                                    utils={getExtensionUtils(lobb, ctx)}
-                                >
-                                    <DataTable
-                                        collectionName={child.collection}
-                                        searchParams={{ children_of: collectionName, parent_id: recordId }}
-                                        showHeader={false}
-                                        showFooter={false}
-                                        showDelete={child.type === "fk"}
-                                        tableProps={{ showLastRowBorder: false, showLastColumnBorder: false, showCheckboxes: false }}
-                                    />
-                                </ExtensionsComponents>
-                            {/key}
-                        </div>
-                    </div>
-                {/if}
+                    </ExtensionsComponents>
+                {/key}
             </div>
         {/each}
     </div>

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

@@ -1,7 +1,7 @@
 interface Props {
     collectionName: string;
     recordId: string;
-    width: number;
+    width?: number;
 }
 declare const ListViewChildren: import("svelte").Component<Props, {}, "">;
 type ListViewChildren = ReturnType<typeof ListViewChildren>;

package/dist/components/dataTable/table.svelte

@@ -15,8 +15,6 @@
 	export interface TableProps {
 		data: Entry[];
 		columns?: Column[];
-		showCollapsible?: boolean;
-
 		// sorting
 		sort?: Record<string, "asc" | "desc">;
 		localSorting?: boolean;
@@ -33,15 +31,19 @@
 
 		// snippets
 		overrideCell?: Snippet<[any, Column, Entry]>;
+		preTools?: Snippet<[Entry, number]>;
 		tools?: Snippet<[Entry, number]>;
 		rowActions?: Snippet<[Entry, number]>;
-		collapsible?: Snippet<[Entry, number]>;
-
 		// other
 		parentWidth?: number;
 		select?: Select;
 		tableWidth?: number;
 
+		// Hide the left sticky tools column entirely when the caller knows
+		// nothing inside it would render (e.g. select-mode drawer with no
+		// checkboxes, no edit/delete buttons, and no children-network icon).
+		showLeftTools?: boolean;
+
 		// recording mode row visuals — cellIndex 0 = tools cell, 1+ = data/action cells
 		onCellClass?: (entry: Entry, cellIndex: number) => string;
 	}
@@ -51,7 +53,6 @@
 	import {
 		ArrowDownNarrowWide,
 		ArrowUpWideNarrow,
-		ChevronRight,
 		CircleOff,
 	} from "lucide-svelte";
 	import Checkbox from "../ui/checkbox/checkbox.svelte";
@@ -66,7 +67,6 @@
 				id: key,
 			};
 		}),
-		showCollapsible = false,
 		sort = $bindable({}),
 		localSorting = false,
 		selectedRecords = $bindable(),
@@ -77,20 +77,19 @@
 		headerBorderTop = false,
 		parentWidth,
 		overrideCell,
+		preTools,
 		tools,
 		rowActions,
-		collapsible,
 		select,
 		tableWidth = $bindable(),
+		showLeftTools = true,
 		onCellClass,
 	}: TableProps = $props();
 
-	let expandedRows: boolean[] = $state(new Array(data.length).fill(false));
-
 	// calculate columns count
-	const toolsExists = selectedRecords || tools ? 1 : 0;
+	const toolsExists = $derived(showLeftTools && (selectedRecords || tools || preTools) ? 1 : 0);
 	const rowActionsExists = $derived(rowActions ? 1 : 0);
-	const columnsLength = columns.length + toolsExists;
+	const columnsLength = $derived(columns.length + toolsExists);
 
 	// set table width
 	let columnsWidths: number[] = $state([]);
@@ -173,13 +172,14 @@
 </script>
 
 <div
+	class="min-w-max"
 	style="
 		display: grid;
-		grid-template-columns: minmax(auto, 10rem) repeat({columnsLength - 1}, minmax(auto, 15rem)){rowActionsExists ? ' minmax(auto, 7.5rem)' : ''};
+		grid-template-columns: fit-content(10rem) repeat({columnsLength - 1}, fit-content(15rem)){rowActionsExists ? ' fit-content(7.5rem)' : ''};
 		grid-template-rows: 2.5rem;
 	"
 >
-	{#if selectedRecords || tools}
+	{#if showLeftTools && (selectedRecords || tools || preTools)}
 		<div
 			bind:clientWidth={columnsWidths[0]}
 			class="
@@ -187,13 +187,9 @@
 				flex items-center p-2.5 text-xs h-10
 				border-r border-b gap-2
 				{headerBorderTop ? 'border-t' : ''}
-				bg-muted/50
+				bg-muted
 			"
 		>
-			<!-- collapsable toggle -->
-			{#if showCollapsible}
-				<div class="w-[20px]"></div>
-			{/if}
 			{#if selectedRecords && showCheckboxes}
 				<Checkbox
 					class="border-muted-foreground hover:border-foreground"
@@ -212,7 +208,7 @@
 			class="
 				sticky top-0 z-10
 				flex items-center p-2.5 text-xs h-10
-				bg-muted/50
+				bg-muted
 				{lastColumn && !showLastColumnBorder ? '' : 'border-r'}
 				border-b gap-2
 				{headerBorderTop ? 'border-t' : ''}
@@ -239,7 +235,7 @@
 			class="
 				sticky top-0 right-0 z-20
 				flex items-center p-2.5 h-10
-				bg-muted/50
+				bg-muted
 				border-l border-b
 				{headerBorderTop ? 'border-t' : ''}
 			"
@@ -249,25 +245,12 @@
 		{#each data as entry, index}
 			{@const isDisabled = Boolean(entry.__disabled)}
 			{@const lastRow = data.length - 1 === index}
-			{#if selectedRecords || tools}
+			{#if showLeftTools && (selectedRecords || tools || preTools)}
 				<div
 					class="sticky left-0 flex items-center p-2.5 text-xs h-10 bg-card border-r gap-2 {onCellClass?.(entry, 0) ?? ''}"
 				>
-					<!-- collapsable toggle -->
-					{#if showCollapsible}
-						<Button
-							variant="ghost"
-							class="h-5 w-5 px-0 py-0 text-muted-foreground hover:bg-transparent transition-transform"
-							style={expandedRows[index]
-								? "transform: rotate(90deg);"
-								: "transform: rotate(0deg);"}
-							Icon={ChevronRight}
-							onclick={() => {
-								expandedRows[index] = !expandedRows[index];
-								expandedRows = [...expandedRows];
-							}}
-							disabled={isDisabled}
-						></Button>
+					{#if preTools && !isDisabled}
+						{@render preTools(entry, index)}
 					{/if}
 					{#if selectedRecords && showCheckboxes}
 						<Checkbox
@@ -309,31 +292,7 @@
 					{@render rowActions?.(entry, index)}
 				</div>
 			{/if}
-			<!-- nested data -->
-			<div
-				style="grid-column: span {columnsLength + rowActionsExists};"
-				class="
-					{!showLastColumnBorder ? '' : 'border-r'}
-					{lastRow && !showLastRowBorder ? '' : 'border-b'}
-				"
-			>
-				<div
-					style="
-						{parentWidth ? `width: ${parentWidth}px` : ''};
-						max-width: 100vw;
-						{expandedRows[index] ? '' : 'height: 0px;'}
-					"
-					class="
-						sticky left-0 top-0 overflow-auto bg-muted
-						
-						{expandedRows[index] ? 'border-t' : ''}
-					"
-				>
-					{#if collapsible && expandedRows[index]}
-						{@render collapsible(entry, index)}
-					{/if}
-				</div>
-			</div>
+			<div style="grid-column: span {columnsLength + rowActionsExists};" class="{!showLastColumnBorder ? '' : 'border-r'} {lastRow && !showLastRowBorder ? '' : 'border-b'}"></div>
 		{/each}
 	{/if}
 </div>

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

@@ -11,7 +11,6 @@ interface Select {
 export interface TableProps {
     data: Entry[];
     columns?: Column[];
-    showCollapsible?: boolean;
     sort?: Record<string, "asc" | "desc">;
     localSorting?: boolean;
     selectedRecords?: Array<any>;
@@ -21,12 +20,13 @@ export interface TableProps {
     showLastColumnBorder?: boolean;
     headerBorderTop?: boolean;
     overrideCell?: Snippet<[any, Column, Entry]>;
+    preTools?: Snippet<[Entry, number]>;
     tools?: Snippet<[Entry, number]>;
     rowActions?: Snippet<[Entry, number]>;
-    collapsible?: Snippet<[Entry, number]>;
     parentWidth?: number;
     select?: Select;
     tableWidth?: number;
+    showLeftTools?: boolean;
     onCellClass?: (entry: Entry, cellIndex: number) => string;
 }
 import type { Snippet } from "svelte";