@rebasepro/admin 0.0.1-canary.eae7889 → 0.0.1-canary.eb08332

package/src/routes/RebaseRoute.tsx

@@ -1,11 +1,12 @@
-import type { EntityCollection } from "@rebasepro/types";
-import { Blocker, useBlocker, useLocation } from "react-router";
-import { EntityEditView } from "../components/EntityEditView";
+import type { CollectionConfig, ViewMode } from "@rebasepro/types";
+import { Blocker, useBlocker, useLocation } from "react-router-dom";
+import { EditViewBinding } from "../components/EditViewBinding";
+import { DetailViewBinding } from "../components/DetailViewBinding";
 import { useEffect, useRef, useState } from "react";
 import { useNavigate } from "react-router-dom";
-import { EntityCollectionView } from "../components";
-import { NotFoundPage } from "@rebasepro/core";
-import { UnsavedChangesDialog } from "@rebasepro/core";
+import { CollectionViewBinding } from "../components";
+import { NotFoundPage, useUserConfigurationPersistence, useComponentOverride } from "@rebasepro/app";
+import { UnsavedChangesDialog } from "@rebasepro/app";
 import { CircularProgressCenter } from "@rebasepro/ui";
 import { getNavigationEntriesFromPath, NavigationViewCollectionInternal, NavigationViewEntityCustomInternal, NavigationViewInternal } from "@rebasepro/common";
 import { toArray } from "@rebasepro/utils";
@@ -18,6 +19,8 @@ export function RebaseRoute() {
     const collectionRegistry = useCollectionRegistryController();
     const urlController = useUrlController();
     const breadcrumbs = useBreadcrumbsController();
+    const userConfigPersistence = useUserConfigurationPersistence();
+    const ResolvedCollectionView = useComponentOverride("Collection.View", CollectionViewBinding);
 
     const hash = location.hash;
     const isSidePanel = hash.includes("#side");
@@ -79,7 +82,7 @@ export function RebaseRoute() {
     }
 
     if (navigationEntries.length === 1 && navigationEntries[0].type === "collection") {
-        let collection: EntityCollection<any> | undefined;
+        let collection: CollectionConfig<any> | undefined;
         collection = collectionRegistry.getCollection(navigationEntries[0].id);
         if (!collection)
             collection = collectionRegistry.getCollection(navigationEntries[0].slug);
@@ -89,10 +92,10 @@ export function RebaseRoute() {
             }
             return null;
         }
-        return <EntityCollectionView
+        return <ResolvedCollectionView
             key={`collection_view_${collection.slug}`}
             {...collection}
-            parentCollectionIds={[]}
+            parentCollectionSlugs={[]} parentEntityIds={[]}
             path={collection.slug}
             updateUrl={true}
             Actions={toArray(collection.Actions)}/>
@@ -101,7 +104,7 @@ export function RebaseRoute() {
     if (isSidePanel) {
         const lastCollectionEntry = [...navigationEntries].reverse().find((entry) => entry.type === "collection");
         if (lastCollectionEntry) {
-            let collection: EntityCollection<any> | undefined;
+            let collection: CollectionConfig<any> | undefined;
             const firstEntry = navigationEntries[0] as NavigationViewCollectionInternal<any>;
             collection = collectionRegistry.getCollection(firstEntry.id);
             if (!collection)
@@ -112,10 +115,10 @@ export function RebaseRoute() {
                 }
                 return null;
             }
-            return <EntityCollectionView
+            return <ResolvedCollectionView
                 key={`collection_view_${collection.slug}`}
                 {...collection}
-                parentCollectionIds={[]}
+                parentCollectionSlugs={[]} parentEntityIds={[]}
                 path={collection.slug}
                 updateUrl={true}
                 Actions={toArray(collection.Actions)}/>;
@@ -137,11 +140,29 @@ export function RebaseRoute() {
         lastEntityEntry?.type === "entity" &&
         (navigationEntries.length === 2 || navigationEntries.length === 3)
     ) {
-        let collection: EntityCollection<any> | undefined;
+        let collection: CollectionConfig<any> | undefined;
         collection = collectionRegistry.getCollection(firstCollectionEntry.id);
         if (!collection)
             collection = collectionRegistry.getCollection(firstCollectionEntry.slug);
-        if (collection && (collection.openEntityMode ?? "split") === "split") {
+
+        // Resolve the effective openEntityMode based on the current view mode.
+        // Priority: collection.openEntityMode (explicit) > view-mode-based default.
+        // View mode priority: URL __view param > saved user config > collection default.
+        let effectiveOpenMode: "side_panel" | "full_screen" | "split" | "dialog" | undefined = collection?.openEntityMode;
+        if (!effectiveOpenMode && collection) {
+            const urlViewParam = new URLSearchParams(location.search).get("__view");
+            let currentViewMode: ViewMode = collection.defaultViewMode ?? "list";
+            if (urlViewParam && ["list", "table", "kanban", "cards"].includes(urlViewParam)) {
+                currentViewMode = urlViewParam as ViewMode;
+            } else {
+                const savedView = userConfigPersistence?.getCollectionConfig(collection.slug)?.defaultViewMode;
+                if (savedView) currentViewMode = savedView as ViewMode;
+            }
+            if (currentViewMode === "kanban") effectiveOpenMode = "side_panel";
+            else if (currentViewMode === "table" || currentViewMode === "cards") effectiveOpenMode = "full_screen";
+            else effectiveOpenMode = "split";
+        }
+        if (collection && effectiveOpenMode === "split") {
             // Extract subcollection tab from the 3rd entry if present
             let selectedTab: string | undefined;
             if (navigationEntries.length === 3) {
@@ -165,10 +186,10 @@ export function RebaseRoute() {
                     }
                 }
             }
-            return <EntityCollectionView
+            return <ResolvedCollectionView
                 key={`collection_view_${collection.slug}`}
                 {...collection}
-                parentCollectionIds={[]}
+                parentCollectionSlugs={[]} parentEntityIds={[]}
                 path={collection.slug}
                 updateUrl={true}
                 selectedEntityId={lastEntityEntry.entityId}
@@ -216,6 +237,10 @@ function EntityFullScreenRoute({
     const navigate = useNavigate();
     const location = useLocation();
 
+    // defaultValues may be carried via location.state when openNewDocument() is called
+    // for full-screen mode. We read it once on mount — after that, the form owns its state.
+    const defaultValues = (location.state as { defaultValues?: Record<string, unknown> } | null)?.defaultValues;
+
     // Preserve the current hash (e.g. #full) across tab/save navigations
     const hash = location.hash;
 
@@ -245,7 +270,7 @@ function EntityFullScreenRoute({
         if (entityIdIdx >= 0) {
             const afterEntity = pathname.substring(entityIdIdx + 1 + entityIdStr.length);
             const trailingSegment = afterEntity.startsWith("/") ? afterEntity.substring(1) : afterEntity;
-            if (trailingSegment.length > 0) {
+            if (trailingSegment.length > 0 && trailingSegment !== "edit") {
                 urlTab = trailingSegment;
             }
         }
@@ -253,7 +278,8 @@ function EntityFullScreenRoute({
 
     const [selectedTab, setSelectedTab] = useState<string | undefined>(urlTab);
 
-    const parentCollectionIds = collectionRegistry.getParentCollectionIds(navigationPath);
+    const parentCollectionSlugs = collectionRegistry.getParentCollectionSlugs(navigationPath);
+    const parentEntityIds = collectionRegistry.getParentEntityIds(navigationPath);
     useEffect(() => {
         if (urlTab !== selectedTab) {
             setSelectedTab(urlTab);
@@ -266,18 +292,30 @@ function EntityFullScreenRoute({
 
     const entityPath = basePath + `/${entityId}`;
 
-    let blocker: Blocker | undefined = undefined;
-    try {
-        blocker = useBlocker(({
-            nextLocation
-        }) => {
-            if (nextLocation.pathname.startsWith(entityPath))
-                return false;
-            return blocked.current;
-        });
-    } catch (e) {
-        // console.warn("Blocker not available, navigation will not be blocked");
-    }
+    const blocker = useBlocker(({
+        currentLocation,
+        nextLocation
+    }) => {
+        if (nextLocation.pathname.startsWith(entityPath))
+            return false;
+
+        // Side panel overlay navigations preserve the underlying form via
+        // base_location in router state — no data is lost in either direction.
+
+        // Opening a side panel (e.g. clicking a relation arrow)
+        const nextHash = nextLocation.hash;
+        if (nextHash === "#side" || nextHash === "#new_side")
+            return false;
+
+        // Closing a side panel (navigate(-1) back to the form's own path)
+        const currentHash = currentLocation.hash;
+        if ((currentHash === "#side" || currentHash === "#new_side") &&
+            (nextLocation.pathname === basePath ||
+             nextLocation.pathname.startsWith(entityPath)))
+            return false;
+
+        return blocked.current;
+    });
 
     const lastCollectionEntry = [...navigationEntries].reverse().find((entry) => entry.type === "collection");
 
@@ -295,13 +333,46 @@ function EntityFullScreenRoute({
         return <NotFoundPage/>;
     }
 
-    const collection = isNew
+    const rawCollection = isNew
         ? (lastCollectionEntry && "collection" in lastCollectionEntry ? lastCollectionEntry.collection : undefined)!
         : (lastEntityEntry && "parentCollection" in lastEntityEntry ? lastEntityEntry.parentCollection : undefined)!;
+    const collection = collectionRegistry.getCollection(rawCollection.slug) || rawCollection;
     const fullIdPath = isNew ? lastCollectionEntry!.slug : lastEntityEntry!.slug;
     const collectionPath = urlController.resolveDatabasePathsFrom(fullIdPath);
+    const isEditRoute = pathname.endsWith("/edit") || pathname.split("/").pop() === "edit";
+    // Determine if this is a detail-view-first collection showing the view page
+    const isDetailMode = collection.defaultEntityAction === "view" && !isNew && !isCopy && entityId && !isEditRoute;
+
+    if (isDetailMode) {
+        return <>
+            <DetailViewBinding
+                key={collection.slug + "_view_" + entityId}
+                entityId={entityId}
+                collection={collection}
+                layout={"full_screen"}
+                path={collectionPath}
+                selectedTab={selectedTab ?? undefined}
+                onEditClick={() => {
+                    const editUrl = urlController.buildUrlCollectionPath(`${collectionPath}/${entityId}`) + "/edit";
+                    navigate(editUrl + hash);
+                }}
+                onTabChange={(params) => {
+                    setSelectedTab(params.selectedTab);
+                    const newSelectedTab = params.selectedTab;
+                    if (newSelectedTab) {
+                        navigate(`${basePath}/${entityId}/${newSelectedTab}${hash}`, { replace: true });
+                    } else {
+                        navigate(`${basePath}/${entityId}${hash}`, { replace: true });
+                    }
+                }}
+                parentCollectionSlugs={parentCollectionSlugs}
+                parentEntityIds={parentEntityIds}
+            />
+        </>;
+    }
+
     return <>
-        <EntityEditView
+        <EditViewBinding
             key={collection.slug + "_" + (isNew ? "new" : (isCopy ? entityId + "_copy" : entityId))}
             entityId={isNew ? undefined : entityId}
             collection={collection}
@@ -309,14 +380,20 @@ function EntityFullScreenRoute({
             path={collectionPath}
             copy={isCopy}
             selectedTab={selectedTab ?? undefined}
+            defaultValues={isNew ? defaultValues : undefined}
             onValuesModified={(modified) => blocked.current = modified}
+            navigateBack={() => {
+                const detailUrl = urlController.buildUrlCollectionPath(`${collectionPath}/${entityId}`);
+                navigate(detailUrl + hash);
+            }}
             onSaved={(params) => {
                 const newSelectedTab = params.selectedTab;
                 const newEntityId = params.entityId;
+                const savedHash = isNew ? "" : hash;
                 if (newSelectedTab) {
-                    navigate(`${basePath}/${newEntityId}/${newSelectedTab}${hash}`, { replace: true });
+                    navigate(`${basePath}/${newEntityId}/${newSelectedTab}${savedHash}`, { replace: true });
                 } else {
-                    navigate(`${basePath}/${newEntityId}${hash}`, { replace: true });
+                    navigate(`${basePath}/${newEntityId}${savedHash}`, { replace: true });
                 }
             }}
             onTabChange={(params) => {
@@ -331,7 +408,7 @@ function EntityFullScreenRoute({
                     navigate(`${basePath}/${entityId}${hash}`, { replace: true });
                 }
             }}
-            parentCollectionIds={parentCollectionIds}
+            parentCollectionSlugs={parentCollectionSlugs} parentEntityIds={parentEntityIds}
         />
 
         <UnsavedChangesDialog
@@ -339,6 +416,5 @@ function EntityFullScreenRoute({
             handleOk={() => blocker?.proceed?.()}
             handleCancel={() => blocker?.reset?.()}
             body={"You have unsaved changes in this entity."}/>
-
     </>;
 }

package/src/types/components/EntityFormActionsProps.tsx

@@ -1,19 +1,19 @@
 import { Entity } from "@rebasepro/types";
-import { EntityCollection } from "@rebasepro/types";
+import { CollectionConfig } from "@rebasepro/types";
 import { FormContext } from "../fields";
 import { FormexController } from "./formex";
 
 export interface EntityFormActionsProps {
     path: string;
-    collection: EntityCollection;
+    collection: CollectionConfig;
     entity?: Entity;
     layout: "bottom" | "side" | "responsive";
     savingError?: Error;
-    formex: FormexController<any>;
+    formex: FormexController<Record<string, unknown>>;
     disabled: boolean;
     status: "new" | "existing" | "copy";
     pluginActions: React.ReactNode[];
-    openEntityMode: "side_panel" | "full_screen" | "split";
+    openEntityMode?: "side_panel" | "full_screen" | "split" | "dialog";
     showDefaultActions?: boolean;
     navigateBack: () => void;
     formContext: FormContext

package/src/types/components/EntityFormProps.tsx

@@ -1,13 +1,18 @@
 import { Entity, EntityStatus } from "@rebasepro/types";
-import { EntityCollection, EntityCustomViewParams } from "@rebasepro/types";
+import { CollectionConfig, EntityCustomViewParams } from "@rebasepro/types";
 import { FormContext } from "../fields";
 import { FormexController } from "./formex";
 import { EntityFormActionsProps } from "./EntityFormActionsProps";
 
+/**
+ * Props for the headless EntityForm component.
+ * This form can be used without CMS context — all backend concerns
+ * (save, caching, analytics, plugin slots) are provided via callbacks.
+ */
 export type EntityFormProps<M extends Record<string, unknown>> = {
     path: string;
     fullIdPath?: string;
-    collection: EntityCollection<M>;
+    collection: CollectionConfig<M>;
     entityId?: string | number;
     entity?: Entity<M>;
     databaseId?: string;
@@ -22,7 +27,7 @@ export type EntityFormProps<M extends Record<string, unknown>> = {
     onStatusChange?: (status: EntityStatus) => void;
     onEntityChange?: (entity: Entity<M>) => void;
     formex?: FormexController<M>;
-    openEntityMode?: "side_panel" | "full_screen" | "split";
+    openEntityMode?: "side_panel" | "full_screen" | "split" | "dialog";
     /**
      * If true, the form will be disabled and no actions will be available
      */
@@ -39,16 +44,81 @@ export type EntityFormProps<M extends Record<string, unknown>> = {
 
     EntityFormActionsComponent?: React.FC<EntityFormActionsProps>;
 
+    navigateBack?: () => void;
+
     Builder?: React.ComponentType<EntityCustomViewParams<M>>;
 
     children?: React.ReactNode;
+
+    // --- Headless callbacks (replace internal CMS hooks) ---
+
+    /**
+     * Called on form submit with the values to save.
+     * The EntityFormBinding wrapper provides this automatically.
+     * When using EntityForm standalone, provide your own save logic.
+     */
+    onSubmit?: (values: M, formex: FormexController<M>) => Promise<Entity<M> | void> | void;
+
+    /**
+     * Called when form values change (deferred).
+     * The EntityFormBinding wrapper uses this for entity caching.
+     */
+    onValuesChangeDeferred?: (values: M, controller: FormexController<M>) => void;
+
+    /**
+     * Called when the form is reset.
+     */
+    onReset?: () => void;
+
+    /**
+     * Validate that a field value is unique.
+     * The EntityFormBinding wrapper provides this via the data layer.
+     */
+    uniqueFieldValidator?: (params: { name: string; value: unknown }) => Promise<boolean>;
+
+    // --- Slots (replace useSlot) ---
+
+    /** Content rendered before the form fields */
+    beforeFields?: React.ReactNode;
+    /** Content rendered after the form fields */
+    afterFields?: React.ReactNode;
+    /** Plugin-provided action elements */
+    pluginActions?: React.ReactNode[];
+
+    // --- Local changes (managed externally in binding) ---
+
+    /**
+     * Initial values for the form, after applying local changes.
+     * If not provided, computed from entity + collection defaults.
+     */
+    computedInitialValues?: Partial<M>;
+    /**
+     * Whether there are unsaved local changes in the cache.
+     */
+    hasLocalChanges?: boolean;
+    /**
+     * The local changes data for the manual-apply menu.
+     */
+    localChangesData?: Partial<M>;
+    /**
+     * Whether manual-apply local changes mode is enabled.
+     */
+    manualApplyLocalChanges?: boolean;
+    /**
+     * Cache key for the local changes menu.
+     */
+    localChangesCacheKey?: string;
+    /**
+     * Callback when local changes are cleared.
+     */
+    onClearLocalChanges?: () => void;
 };
 
 export type OnUpdateParams = {
-    entity: Entity<any>,
+    entity: Entity<Record<string, unknown>>,
     status: EntityStatus,
     path: string,
     entityId?: string | number;
     selectedTab?: string;
-    collection: EntityCollection<any>
+    collection: CollectionConfig<Record<string, unknown>>
 };

package/src/types/components/PropertyPreviewProps.tsx

@@ -15,7 +15,7 @@ export interface PropertyPreviewProps<P extends Property | Property, CustomProps
      */
     propertyKey?: string;
 
-    value: any;
+    value: InferPropertyType<P> | any;
 
     /**
      * Property this display is related to, now strongly typed to P
@@ -56,4 +56,9 @@ export interface PropertyPreviewProps<P extends Property | Property, CustomProps
      */
     fill?: boolean;
 
+    /**
+     * If true, relations/references will render as plain text strings rather than full cards.
+     */
+    textOnly?: boolean;
+
 }

package/src/types/components/formex.tsx

@@ -1,46 +1,2 @@
-import React, { FormEvent } from "react";
+export type { FormexController, FormexResetProps } from "@rebasepro/forms";
 
-// this is duplicated from the formex package
-export type FormexController<T extends object> = {
-    values: T;
-    initialValues: T;
-    setValues: (values: T) => void;
-    setFieldValue: (key: string, value: unknown, shouldValidate?: boolean) => void;
-    touched: Record<string, boolean>;
-    setFieldTouched: (key: string, touched: boolean, shouldValidate?: boolean) => void;
-    setTouched: (touched: Record<string, boolean>) => void;
-    dirty: boolean;
-    setDirty: (dirty: boolean) => void;
-    setSubmitCount: (submitCount: number) => void;
-    errors: Record<string, string>;
-    setFieldError: (key: string, error?: string) => void;
-    handleChange: (event: React.SyntheticEvent) => void,
-    handleBlur: (event: React.FocusEvent) => void,
-    handleSubmit: (event?: FormEvent<HTMLFormElement>) => void;
-    validate: () => void;
-    resetForm: (props?: FormexResetProps<T>) => void;
-    submitCount: number;
-    isSubmitting: boolean;
-    setSubmitting: (isSubmitting: boolean) => void;
-    isValidating: boolean;
-    /**
-     * The version of the form. This is incremented every time the form is reset
-     * or the form is submitted.
-     */
-    version: number;
-
-    debugId?: string;
-
-    undo: () => void;
-    redo: () => void;
-
-    canUndo: boolean;
-    canRedo: boolean;
-}
-
-export type FormexResetProps<T extends object> = {
-    values?: T;
-    submitCount?: number;
-    errors?: Record<string, string>;
-    touched?: Record<string, boolean>;
-};

package/src/types/fields.tsx

@@ -1,7 +1,7 @@
 import { InferPropertyType } from "@rebasepro/types";
 import { Entity } from "@rebasepro/types";
 import { FormexController } from "./components/formex";
-import { EntityCollection } from "@rebasepro/types";
+import { CollectionConfig } from "@rebasepro/types";
 import { Property } from "@rebasepro/types";
 
 export type DefaultFieldConfig =
@@ -19,7 +19,6 @@ export type DefaultFieldConfig =
     | "multi_number_select"
     | "file_upload"
     | "multi_file_upload"
-    | "reference_as_string"
     | "reference"
     | "multi_references"
     | "relation"
@@ -28,7 +27,8 @@ export type DefaultFieldConfig =
     | "key_value"
     | "repeat"
     | "custom_array"
-    | "block";
+    | "block"
+    | "vector_input";
 
 /**
  * When building a custom field you need to create a React component that takes
@@ -38,8 +38,8 @@ export type DefaultFieldConfig =
  */
 export interface FieldProps<
     P extends Property | Property = Property,
-    CustomProps = any,
-    M extends Record<string, any> = any> {
+    CustomProps = unknown,
+    M extends Record<string, unknown> = Record<string, unknown>> {
 
     /**
      * Key of the property
@@ -50,12 +50,8 @@ export interface FieldProps<
     /**
      * Current value of this field, inferred from the property type P
      */
-    value: any;
-
-    /**
-     * Set value of field directly
-     */
-    setValue: (value: any | null, shouldValidate?: boolean) => void;
+    value: InferPropertyType<P> | any;
+    setValue: (value: InferPropertyType<P> | null | any, shouldValidate?: boolean) => void;
 
     /**
      * Set value of a different field directly
@@ -130,7 +126,7 @@ export interface FieldProps<
     /**
      * Additional properties set by the developer
      */
-    customProps: CustomProps
+    customProps?: CustomProps;
 
     /**
      * Additional values related to the state of the form or the entity
@@ -178,14 +174,23 @@ export interface FormContext<M extends Record<string, unknown> = Record<string,
     setFieldValue: (key: string, value: unknown, shouldValidate?: boolean) => void;
 
     /**
-     * Save the entity.
+     * Quietly persist the entity to the database without any UI feedback
+     * (no validation, no snackbar, no form reset).
+     * Use this for programmatic/background saves from custom views.
      */
     save: (values: M) => void;
 
+    /**
+     * Submit the form — validates, saves, resets the form, and shows
+     * a success snackbar. This is what the Save button calls.
+     * Use this from custom views when you want the full "user saved" experience.
+     */
+    submit: () => void;
+
     /**
      * Collection of the entity being modified
      */
-    collection?: EntityCollection<M>;
+    collection?: CollectionConfig<M>;
 
     /**
      * Entity id, it can be undefined if it's a new entity
@@ -203,7 +208,7 @@ export interface FormContext<M extends Record<string, unknown> = Record<string,
 
     savingError?: Error;
 
-    openEntityMode: "side_panel" | "full_screen" | "split";
+    openEntityMode?: "side_panel" | "full_screen" | "split" | "dialog";
 
     /**
      * This is the underlying formex controller that powers the form.
@@ -213,6 +218,12 @@ export interface FormContext<M extends Record<string, unknown> = Record<string,
     formex: FormexController<M>;
 
     disabled: boolean;
+
+    /**
+     * Whether the form context is in read-only detail view mode.
+     * Custom entity views can use this to adjust their rendering.
+     */
+    readOnly?: boolean;
 }
 
 /**

package/src/util/dataControllerAdapter.ts

@@ -0,0 +1,87 @@
+/**
+ * Adapts an `EntityTableController<M>` (from @rebasepro/types) to a
+ * `CollectionDataController<T>` (from @rebasepro/ui), bridging the
+ * entity-aware data layer to the headless collection view.
+ */
+
+import { useMemo } from "react";
+import type { Entity, EntityTableController } from "@rebasepro/types";
+import type { CollectionDataController } from "@rebasepro/ui";
+
+/**
+ * Unwrap `Entity<M>` objects to flat rows for the headless view.
+ * The entity system uses `{ id, path, values: M }`; `values` is already the
+ * flat row `M` carrying its real primary key, so unwrapping is just `.values` —
+ * no `id`/`path` merge (those are view-model metadata, not row columns).
+ */
+function flattenEntities<M extends Record<string, unknown>>(
+    entities: Entity<M>[]
+): M[] {
+    return entities.map(entity => entity.values);
+}
+
+/**
+ * React hook that adapts a EntityTableController to a CollectionDataController.
+ *
+ * Usage:
+ * ```tsx
+ * const tableController = useDataTableController({ path, collection });
+ * const dataController = useCollectionDataController(tableController);
+ *
+ * <CollectionView dataController={dataController} ... />
+ * ```
+ */
+export function useCollectionDataController<M extends Record<string, unknown>>(
+    tableController: EntityTableController<M>
+): CollectionDataController<M> {
+    const flatData = useMemo(
+        () => flattenEntities(tableController.data),
+        [tableController.data]
+    );
+
+    return useMemo((): CollectionDataController<M> => ({
+        data: flatData,
+        loading: tableController.dataLoading,
+        noMoreToLoad: tableController.noMoreToLoad,
+        error: tableController.dataLoadingError,
+
+        filterValues: tableController.filterValues as Record<string, [string, unknown]> | undefined,
+        setFilterValues: tableController.setFilterValues as
+            ((values: Record<string, [string, unknown]> | undefined) => void) | undefined,
+
+        sortBy: tableController.sortBy,
+        setSortBy: tableController.setSortBy,
+
+        searchString: tableController.searchString,
+        setSearchString: tableController.setSearchString,
+
+        clearFilter: tableController.clearFilter,
+
+        initialScroll: tableController.initialScroll,
+        onScroll: tableController.onScroll,
+
+        paginationEnabled: tableController.paginationEnabled,
+        pageSize: tableController.pageSize,
+        itemCount: tableController.itemCount,
+        setItemCount: tableController.setItemCount,
+    }), [flatData, tableController]);
+}
+
+/**
+ * Non-hook version for cases where you already have the data
+ * and just need to build a static controller.
+ */
+export function createStaticDataController<T extends Record<string, unknown>>(
+    data: T[],
+    options?: {
+        loading?: boolean;
+        error?: Error;
+    }
+): CollectionDataController<T> {
+    return {
+        data,
+        loading: options?.loading ?? false,
+        noMoreToLoad: true,
+        error: options?.error,
+    };
+}