@ims360/svelte-ivory 0.0.44 → 0.0.46

package/dist/components/table/controller.js

@@ -0,0 +1,52 @@
+/** Walks though a tree strucure and turns it into a flat list, needed since the `VirtualList` needs a list, not a tree */
+export function treeWalker(config) {
+    const { data, expanded } = config;
+    const stack = [];
+    // push the root nodes of the trees onto the stack
+    for (let i = 0; i < data.length; i++) {
+        stack.push({
+            node: data[data.length - i - 1],
+            nestingLevel: 0
+        });
+    }
+    const entries = []; // the final result
+    let someHaveChildren = false; // used to determine whether to show the tree utility buttons
+    let maxNestingLevel = 0;
+    while (stack.length !== 0) {
+        const stackEntry = stack.pop();
+        if (!stackEntry)
+            break;
+        const { node, nestingLevel } = stackEntry;
+        const children = node.children;
+        if (children && children.length > 0) {
+            someHaveChildren = true;
+            // only show the children of expanded elements
+            if (expanded.has(node.id)) {
+                maxNestingLevel = Math.max(maxNestingLevel, nestingLevel + 1);
+                stack.push(...children
+                    .map((c) => ({
+                    node: c,
+                    nestingLevel: nestingLevel + 1
+                }))
+                    .reverse());
+            }
+        }
+        entries.push({
+            id: node.id,
+            node,
+            nestingLevel
+        });
+    }
+    return {
+        entries,
+        someHaveChildren,
+        maxNestingLevel
+    };
+}
+export function getAllIds(...nodes) {
+    const ids = nodes.map((n) => n.id);
+    for (const node of nodes) {
+        ids.push(...getAllIds(...(node.children ?? [])));
+    }
+    return ids;
+}

package/dist/components/table/index.d.ts

@@ -1,7 +1,7 @@
 export { default as Column, type ColumnProps } from './Column.svelte';
+export { ColumnController, type ColumnConfig } from './columnController.svelte';
 export { getColumnHeadContext } from './ColumnHead.svelte';
-export { createTableConfig, getAllIds, type TableConfig, type TablePlugin, type TableRow, type TableState } from './controller.svelte';
-export { expandAllPlugin } from './plugins/expandAll.svelte';
+export { getAllIds, type TablePlugin, type TableRow, type TableState } from './controller';
 export { searchPlugin } from './plugins/search.svelte';
 export { getTableContext, default as Table, type TableContext, type TableProps } from './Table.svelte';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/table/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/components/table/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,KAAK,WAAW,EAAE,MAAM,iBAAiB,CAAC;AACtE,OAAO,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAC;AAC3D,OAAO,EACH,iBAAiB,EACjB,SAAS,EACT,KAAK,WAAW,EAChB,KAAK,WAAW,EAChB,KAAK,QAAQ,EACb,KAAK,UAAU,EAClB,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAC7D,OAAO,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AACvD,OAAO,EACH,eAAe,EACf,OAAO,IAAI,KAAK,EAChB,KAAK,YAAY,EACjB,KAAK,UAAU,EAClB,MAAM,gBAAgB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/components/table/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,KAAK,WAAW,EAAE,MAAM,iBAAiB,CAAC;AACtE,OAAO,EAAE,gBAAgB,EAAE,KAAK,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAChF,OAAO,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAC;AAC3D,OAAO,EAAE,SAAS,EAAE,KAAK,WAAW,EAAE,KAAK,QAAQ,EAAE,KAAK,UAAU,EAAE,MAAM,cAAc,CAAC;AAC3F,OAAO,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AACvD,OAAO,EACH,eAAe,EACf,OAAO,IAAI,KAAK,EAChB,KAAK,YAAY,EACjB,KAAK,UAAU,EAClB,MAAM,gBAAgB,CAAC"}

package/dist/components/table/index.js

@@ -1,6 +1,6 @@
 export { default as Column } from './Column.svelte';
+export { ColumnController } from './columnController.svelte';
 export { getColumnHeadContext } from './ColumnHead.svelte';
-export { createTableConfig, getAllIds } from './controller.svelte';
-export { expandAllPlugin } from './plugins/expandAll.svelte';
+export { getAllIds } from './controller';
 export { searchPlugin } from './plugins/search.svelte';
 export { getTableContext, default as Table } from './Table.svelte';

package/dist/components/table/plugins/search.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"search.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/table/plugins/search.svelte.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAC9C,OAAO,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,KAAK,CAAC;AAEjD,UAAU,YAAY,CAAC,CAAC,SAAS,QAAQ,CAAC,CAAC,CAAC;IACxC,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,CAAC,GAAG,EAAE,CAAC,KAAK,OAAO,CAAC;CAChC;AAED,wBAAgB,YAAY,CAAC,CAAC,SAAS,QAAQ,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,YAAY,CAAC,CAAC,CAAC,GAAG,WAAW,CAAC,CAAC,CAAC,CA8BzF;AAED,yFAAyF;AACzF,eAAO,MAAM,MAAM,GAAI,CAAC,SAAS,QAAQ,CAAC,CAAC,CAAC,EACxC,OAAO,CAAC,EAAE,EACV,cAAc,MAAM,EACpB,cAAc,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,MAAM,KAAK,OAAO;;;CA8B7C,CAAC"}
+{"version":3,"file":"search.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/table/plugins/search.svelte.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAC9C,OAAO,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,KAAK,CAAC;AAEjD,UAAU,YAAY,CAAC,CAAC,SAAS,QAAQ,CAAC,CAAC,CAAC;IACxC,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,CAAC,GAAG,EAAE,CAAC,KAAK,OAAO,CAAC;CAChC;AAED,wBAAgB,YAAY,CAAC,CAAC,SAAS,QAAQ,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,YAAY,CAAC,CAAC,CAAC,GAAG,WAAW,CAAC,CAAC,CAAC,CAyBzF;AAED,yFAAyF;AACzF,eAAO,MAAM,MAAM,GAAI,CAAC,SAAS,QAAQ,CAAC,CAAC,CAAC,EACxC,OAAO,CAAC,EAAE,EACV,cAAc,MAAM,EACpB,cAAc,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,MAAM,KAAK,OAAO;;;CA0B7C,CAAC"}

package/dist/components/table/plugins/search.svelte.js

@@ -19,7 +19,6 @@ export function searchPlugin(conf) {
         // figure out which nodes to expand and hide
         const { expanded, hidden } = search(state.data, conf.search, conf.matches);
         prevSearch = conf.search;
-        console.log(hidden);
         return {
             data: state.data.filter((d) => !hidden.has(d.id)),
             expanded: new SvelteSet(expanded)

package/dist/components/toast/Toast.svelte

@@ -51,8 +51,6 @@
     >
         {#each Toasts.toasts as toast (toast.id)}
             {@const VariantIcon = getIcon(toast.variant, toast.icon)}
-
-            <!-- svelte-ignore a11y_no_static_element_interactions -->
             <div
                 in:fly={{ y: '-100%', duration }}
                 out:scale={{ duration }}

package/dist/components/toast/Toast.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Toast.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/toast/Toast.svelte.ts"],"names":[],"mappings":"AAGI,MAAM,WAAW,KAAK;IAClB,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC,CAAC,KAAK,EAAE,aAAa,GAAG;QAAE,KAAK,EAAE,MAAM,IAAI,CAAA;KAAE,CAAC,CAAC,CAAC;IACnE,QAAQ,CAAC,EAAE,MAAM,CAAC;CACrB;AAKL,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAEtC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAElD,OAAO,EAAU,KAAK,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAqF7D;;;GAGG;AACH,QAAA,MAAM,KAAK,2CAAwC,CAAC;AACpD,KAAK,KAAK,GAAG,UAAU,CAAC,OAAO,KAAK,CAAC,CAAC;AACtC,eAAe,KAAK,CAAC"}
+{"version":3,"file":"Toast.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/toast/Toast.svelte.ts"],"names":[],"mappings":"AAGI,MAAM,WAAW,KAAK;IAClB,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC,CAAC,KAAK,EAAE,aAAa,GAAG;QAAE,KAAK,EAAE,MAAM,IAAI,CAAA;KAAE,CAAC,CAAC,CAAC;IACnE,QAAQ,CAAC,EAAE,MAAM,CAAC;CACrB;AAKL,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAEtC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAElD,OAAO,EAAU,KAAK,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAmF7D;;;GAGG;AACH,QAAA,MAAM,KAAK,2CAAwC,CAAC;AACpD,KAAK,KAAK,GAAG,UAAU,CAAC,OAAO,KAAK,CAAC,CAAC;AACtC,eAAe,KAAK,CAAC"}

package/dist/utils/functions/cookie.js

@@ -4,7 +4,7 @@ function getCookie(name) {
     try {
         decodedCookie = decodeURIComponent(document.cookie);
     }
-    catch (error) {
+    catch {
         return '';
     }
     const ca = decodedCookie.split(';');

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@ims360/svelte-ivory",
-    "version": "0.0.44",
+    "version": "0.0.46",
     "keywords": [
         "svelte"
     ],

package/src/lib/components/ai/Chat.svelte

@@ -41,7 +41,7 @@
 
     let {
         class: clazz,
-        b_chat: chat = $bindable(),
+        b_chat = $bindable(),
         userMessage = defaultUserMessage,
         systemMessage = defaultSystemMessage,
         placeholder,
@@ -74,20 +74,20 @@
     }
 
     async function submit(message: AiChatMessage) {
-        if (chat.loading) {
+        if (b_chat.loading) {
             return;
         }
 
-        chat.messages.push({
+        b_chat.messages.push({
             ...message,
             from: 'user',
             time: new Date()
         });
         // prevent the user from sending another message while we are loading the ai response
-        chat.loading = true;
+        b_chat.loading = true;
 
         // add an empty system message to the chat, this will indicate a loading state
-        chat.messages.push({
+        b_chat.messages.push({
             from: 'system',
             message: '',
             time: new Date()
@@ -97,7 +97,7 @@
 
         await externalSubmit(message);
 
-        chat.loading = false;
+        b_chat.loading = false;
     }
 </script>
 
@@ -106,11 +106,11 @@
         class="flex grow flex-col gap-4 overflow-auto pr-2 [scrollbar-gutter:stable]"
         bind:this={chatContainer}
     >
-        {#if chat.messages.length === 0 && placeholder}
+        {#if b_chat.messages.length === 0 && placeholder}
             {@render placeholder()}
         {/if}
-        {#each chat.messages as _, i}
-            {@const message = chat.messages[i]}
+        {#each b_chat.messages as _, i (i)}
+            {@const message = b_chat.messages[i]}
             {#if message.from === 'user'}
                 {@render userMessage({
                     message,
@@ -120,7 +120,7 @@
                 {@render systemMessage({
                     message,
                     i,
-                    minHeight: i === chat.messages.length - 1 ? lastMessageMinHeight : 0
+                    minHeight: i === b_chat.messages.length - 1 ? lastMessageMinHeight : 0
                 })}
             {/if}
         {/each}
@@ -136,7 +136,7 @@
     message: AiChatMessage;
     minHeight?: number;
 })}
-    <AiMessage bind:b_message={chat.messages[i]} {minHeight} />
+    <AiMessage bind:b_message={b_chat.messages[i]} {minHeight} />
 {/snippet}
 
 {#snippet defaultUserMessage({

package/src/lib/components/ai/UserMessage.svelte

@@ -28,7 +28,7 @@
     {@render messageText({ message })}
     {#if message.files}
         <div class="flex flex-row items-center gap-2">
-            {#each message.files as file}
+            {#each message.files as file, i (i)}
                 {@render attachedFile(file)}
             {/each}
         </div>

package/src/lib/components/basic/checkbox/Checkbox.svelte

@@ -55,7 +55,6 @@
     });
 </script>
 
-<!-- svelte-ignore a11y_no_static_element_interactions-->
 <svelte:element
     this={onclick ? 'button' : 'div'}
     type="button"

package/src/lib/components/layout/drawer/Drawer.svelte

@@ -42,8 +42,6 @@
 {#if b_open}
     <Portal>
         <HiddenBackground {onclose}>
-            <!-- svelte-ignore a11y_click_events_have_key_events -->
-            <!-- svelte-ignore a11y_no_static_element_interactions -->
             <div
                 class={twMerge(
                     clsx([

package/src/lib/components/layout/modal/Modal.svelte

@@ -74,14 +74,10 @@
             class="flex h-full w-full flex-col items-center justify-start p-8 lg:p-12 xl:p-16"
         >
             {#if modal}
-                <!-- svelte-ignore a11y_no_static_element_interactions -->
-                <!-- svelte-ignore a11y_click_events_have_key_events -->
                 <div {...rest} {onclick}>
                     {@render modal()}
                 </div>
             {:else}
-                <!-- svelte-ignore a11y_click_events_have_key_events -->
-                <!-- svelte-ignore a11y_no_static_element_interactions -->
                 <div
                     class={twMerge(
                         clsx([

package/src/lib/components/layout/popover/Popover.svelte

@@ -82,6 +82,7 @@
 
     // TODO: this is kinda hacky
     $effect(() => {
+        // eslint-disable-next-line @typescript-eslint/no-unused-expressions
         [popover, target];
         postion(b_open);
     });

package/src/lib/components/layout/tabs/index.ts

@@ -12,4 +12,3 @@ export default Tabs;
 export { type TabProps } from './Tab.svelte';
 export { type TabPanelProps } from './TabPanel.svelte';
 export { getTabContext, type TabContext, type TabsProps } from './Tabs.svelte';
-

package/src/lib/components/layout/tooltip/Tooltip.svelte

@@ -1,13 +1,15 @@
 <script lang="ts" module>
-    import type { IvoryComponent } from '$lib/types';
     import clsx from 'clsx';
     import type { Snippet } from 'svelte';
-    import type { ClassValue } from 'svelte/elements';
+    import type { ClassValue, MouseEventHandler } from 'svelte/elements';
     import { twMerge } from 'tailwind-merge';
     import Popover, { type PopoverPlacement } from '../popover/Popover.svelte';
     import Portal from '../portal/Portal.svelte';
 
-    export interface TooltipProps extends IvoryComponent<HTMLElement> {
+    export interface TooltipProps {
+        onclick?: MouseEventHandler<HTMLElement>;
+        class?: ClassValue;
+        style?: string;
         children?: Snippet;
         /** The content of the tooltip */
         tooltip: string | Snippet;
@@ -67,8 +69,6 @@
     @component
     Shows additional information when hovering over an element.
 -->
-<!-- Ignoring this error is fine since it's a false positive -->
-<!-- svelte-ignore a11y_no_static_element_interactions -->
 <svelte:element
     this={href ? 'a' : rest.onclick ? 'button' : 'div'}
     type={rest.onclick ? 'button' : undefined}

package/src/lib/components/table/Column.svelte

@@ -36,8 +36,8 @@
     }: ColumnProps = $props();
 
     // Register the new column if this is the first table row that was rendered
-    const { table, nestingInset } = getTableContext();
-    const column = table.registerColumn({ resizable, ...props });
+    const { registerColumn, nestingInset } = getTableContext();
+    const column = registerColumn({ resizable, ...props });
     const allowClicking = $derived(!!onclick);
 
     // passes updated props to the column

package/src/lib/components/table/ColumnHead.svelte

@@ -1,22 +1,22 @@
 <script lang="ts" module>
     import { getContext, setContext, type Snippet } from 'svelte';
     import { resize } from '../../utils/actions';
-    import type { Column } from './columnController.svelte';
+    import type { ColumnController } from './columnController.svelte';
 
     const CONTEXT = {};
-    function setColumnHeadContext(column: Column) {
+    function setColumnHeadContext(column: ColumnController) {
         setContext(CONTEXT, column);
     }
 
-    export function getColumnHeadContext(): Column {
+    export function getColumnHeadContext(): ColumnController {
         return getContext(CONTEXT);
     }
 </script>
 
 <script lang="ts">
     type Props = {
-        column: Column;
-        children: Snippet;
+        column: ColumnController;
+        children?: Snippet;
     };
 
     let { column, children }: Props = $props();
@@ -50,7 +50,7 @@
     bind:this={target}
     style="width: {column.width}px;"
 >
-    {@render children()}
+    {@render children?.()}
     {#if column.resizable}
         <button
             type="button"

package/src/lib/components/table/Row.svelte

@@ -51,7 +51,6 @@
     });
 </script>
 
-<!-- svelte-ignore a11y_no_static_element_interactions -->
 <svelte:element
     this={elementProps.this}
     {...elementProps}

package/src/lib/components/table/Table.svelte

@@ -1,15 +1,16 @@
 <script lang="ts" module>
-    import { pseudoRandomId } from '$lib/utils/functions';
     import { ChevronRight } from '@lucide/svelte';
     import clsx from 'clsx';
     import { getContext, setContext, type Snippet } from 'svelte';
     import type { ClassValue } from 'svelte/elements';
+    import { SvelteSet } from 'svelte/reactivity';
     import { twMerge } from 'tailwind-merge';
-    import { Column, type TableConfig, type TablePlugin, type TableRow } from '.';
+    import { Column as ColumnComponent, type TablePlugin, type TableRow } from '.';
     import ColumnHead from './ColumnHead.svelte';
     import Row from './Row.svelte';
     import VirtualList from './VirtualList.svelte';
-    import { createTableConfig } from './controller.svelte';
+    import { ColumnController, type ColumnConfig } from './columnController.svelte';
+    import { treeWalker, type TableState } from './controller';
 
     export interface TableProps<T extends TableRow<T>> {
         class?: ClassValue;
@@ -24,7 +25,11 @@
         rowClass?: ClassValue;
         headerClass?: ClassValue;
         plugins?: TablePlugin<T>[];
-        config?: TableConfig<T>;
+        /**
+         * **Bindable**
+         */
+        b_columns?: ColumnController[];
+        expanded?: SvelteSet<string>;
         /**
          * **Bindable**
          */
@@ -35,9 +40,11 @@
 
     const TABLE_CONTEXT = {};
     export type TableContext<T extends TableRow<T>> = {
-        table: TableConfig<T>;
+        registerColumn: (config: ColumnConfig) => ColumnController;
+        toggleExpansion: (id: string) => void;
         nestingInset: number;
     };
+
     function setTableContext<T extends TableRow<T>>(context: TableContext<T>) {
         setContext(TABLE_CONTEXT, context);
     }
@@ -45,11 +52,11 @@
     export function getTableContext<T extends TableRow<T>>(): TableContext<T> {
         return getContext<TableContext<T>>(TABLE_CONTEXT);
     }
+
+    const treeIndicatorId = 'tree-chevron';
 </script>
 
 <script lang="ts" generics="T extends TableRow<T>">
-    interface Props<TI extends { id: string }> extends TableProps<TI> {}
-
     let {
         class: clazz,
         data,
@@ -61,31 +68,62 @@
         onclick,
         href,
         plugins = [],
-        config: table = createTableConfig<T>(),
-        nestingInset = 4
-    }: Props<T> = $props();
+        expanded: expanded = new SvelteSet<string>(),
+        nestingInset = 4,
+        b_columns: externalColumns = $bindable(),
+        b_scrollTop = $bindable()
+    }: TableProps<T> = $props();
 
-    $effect(() => {
-        table.data = data;
-        table.plugins = plugins;
-    });
+    let columns = $state<ColumnController[]>(externalColumns ?? []);
+    const results = $derived(computeResults(data, expanded, plugins));
+    let treeIndicatorColumn = $state<ColumnController>();
+
+    function toggleExpansion(id: string) {
+        if (expanded.has(id)) expanded.delete(id);
+        else expanded.add(id);
+    }
 
     setTableContext({
-        get table() {
-            return table;
+        toggleExpansion,
+        registerColumn(config: ColumnConfig) {
+            let existingColumn: ColumnController | undefined = undefined;
+
+            if (config.id === treeIndicatorId) {
+                if (!treeIndicatorColumn) treeIndicatorColumn = new ColumnController(config);
+                return treeIndicatorColumn;
+            }
+
+            for (const column of existingColumn || columns) {
+                if (column.id !== config.id) continue;
+                existingColumn = column;
+                break;
+            }
+            if (existingColumn) return existingColumn;
+            const col = new ColumnController(config);
+            (externalColumns || columns).push(col);
+            return col;
         },
         get nestingInset() {
             return nestingInset;
         }
     });
 
-    const treeIndicatorId = pseudoRandomId('tree-indicator-');
+    function computeResults(data: T[], expanded: Set<string>, plugins: TablePlugin<T>[]) {
+        let state: TableState<T> = {
+            data,
+            expanded
+        };
+        for (const plugin of plugins) {
+            state = plugin(state);
+        }
+        return treeWalker(state);
+    }
 </script>
 
 <VirtualList
-    data={table.results.entries}
+    data={results.entries}
     class={twMerge(clsx(['flex flex-col overflow-hidden border-transparent', clazz]))}
-    bind:b_scrollTop={table.scrollTop}
+    bind:b_scrollTop
     {rowHeight}
 >
     {#snippet header()}
@@ -97,7 +135,10 @@
                 )
             )}
         >
-            {#each table.columns as column (column.id)}
+            {#if treeIndicatorColumn}
+                <ColumnHead column={treeIndicatorColumn}></ColumnHead>
+            {/if}
+            {#each externalColumns || columns as column (column.id)}
                 <ColumnHead {column}>
                     {#if typeof column.header === 'function'}
                         {@render column.header()}
@@ -119,15 +160,15 @@
             class={rowClass}
         >
             {@render firstColumn?.({ row: node })}
-            <Column
+            <ColumnComponent
                 id={treeIndicatorId}
                 resizable={false}
                 header=""
                 onclick={() => {
-                    table.toggleExpansion(node.id);
+                    toggleExpansion(node.id);
                 }}
-                ignoreWidth={table.results.someHaveChildren}
-                width={table.results.someHaveChildren ? 24 : 0}
+                ignoreWidth={results.someHaveChildren}
+                width={results.someHaveChildren ? 24 : 0}
                 minWidth={0}
             >
                 <div
@@ -138,12 +179,12 @@
                         <ChevronRight
                             class={[
                                 'ml-auto aspect-square shrink-0 transition-transform duration-100',
-                                table.expanded.has(id) && 'rotate-90'
+                                expanded.has(id) && 'rotate-90'
                             ]}
                         />
                     {/if}
                 </div>
-            </Column>
+            </ColumnComponent>
             {@render passedChildren?.({ row: node, nestingLevel, index })}
         </Row>
     {/snippet}

package/src/lib/components/table/VirtualList.svelte

@@ -19,12 +19,12 @@
         data,
         children,
         header,
-        b_scrollTop = $bindable(0),
+        b_scrollTop = $bindable(),
         rowHeight,
         overscan = 2
     }: Props<T> = $props();
 
-    let scroll_top = $state(b_scrollTop);
+    let scroll_top = $state(b_scrollTop ?? 0);
     let scroll_left = $state(0);
     let header_width = $state(0);
     let viewport = $state<HTMLElement>();
@@ -53,7 +53,7 @@
     }
 
     onMount(() => {
-        if (!viewport) return;
+        if (!viewport || typeof b_scrollTop === 'undefined') return;
         viewport.scrollTop = b_scrollTop;
     });
 </script>

package/src/lib/components/table/columnController.svelte.ts

@@ -11,7 +11,7 @@ export interface ColumnConfig {
     header: Snippet | string;
 }
 
-export class Column {
+export class ColumnController {
     id = $state('');
     header = $state<Snippet | string>('');
 

package/src/lib/components/table/controller.ts

@@ -0,0 +1,75 @@
+export type TableRow<T> = { id: string; children?: T[] };
+export type TablePlugin<T extends TableRow<T>> = (state: TableState<T>) => TableState<T>;
+
+export interface TableState<T extends TableRow<T>> {
+    data: T[];
+    expanded: Set<string>;
+}
+
+interface TreeRow<T> {
+    node: T;
+    nestingLevel: number;
+    id: string;
+}
+
+/** Walks though a tree strucure and turns it into a flat list, needed since the `VirtualList` needs a list, not a tree */
+export function treeWalker<T extends TableRow<T>>(config: TableState<T>) {
+    const { data, expanded } = config;
+    const stack: { node: T; nestingLevel: number }[] = [];
+
+    // push the root nodes of the trees onto the stack
+    for (let i = 0; i < data.length; i++) {
+        stack.push({
+            node: data[data.length - i - 1],
+            nestingLevel: 0
+        });
+    }
+
+    const entries: TreeRow<T>[] = []; // the final result
+
+    let someHaveChildren = false; // used to determine whether to show the tree utility buttons
+    let maxNestingLevel = 0;
+    while (stack.length !== 0) {
+        const stackEntry = stack.pop();
+        if (!stackEntry) break;
+
+        const { node, nestingLevel } = stackEntry;
+        const children = node.children;
+
+        if (children && children.length > 0) {
+            someHaveChildren = true;
+            // only show the children of expanded elements
+            if (expanded.has(node.id)) {
+                maxNestingLevel = Math.max(maxNestingLevel, nestingLevel + 1);
+                stack.push(
+                    ...children
+                        .map((c) => ({
+                            node: c,
+                            nestingLevel: nestingLevel + 1
+                        }))
+                        .reverse()
+                );
+            }
+        }
+
+        entries.push({
+            id: node.id,
+            node,
+            nestingLevel
+        });
+    }
+
+    return {
+        entries,
+        someHaveChildren,
+        maxNestingLevel
+    };
+}
+
+export function getAllIds<T extends TableRow<T>>(...nodes: T[]): string[] {
+    const ids = nodes.map((n) => n.id);
+    for (const node of nodes) {
+        ids.push(...getAllIds(...(node.children ?? [])));
+    }
+    return ids;
+}

package/src/lib/components/table/index.ts

@@ -1,14 +1,7 @@
 export { default as Column, type ColumnProps } from './Column.svelte';
+export { ColumnController, type ColumnConfig } from './columnController.svelte';
 export { getColumnHeadContext } from './ColumnHead.svelte';
-export {
-    createTableConfig,
-    getAllIds,
-    type TableConfig,
-    type TablePlugin,
-    type TableRow,
-    type TableState
-} from './controller.svelte';
-export { expandAllPlugin } from './plugins/expandAll.svelte';
+export { getAllIds, type TablePlugin, type TableRow, type TableState } from './controller';
 export { searchPlugin } from './plugins/search.svelte';
 export {
     getTableContext,