@rebasepro/admin 0.2.5 → 0.4.0

package/src/components/EntityDetailView.tsx

@@ -1,4 +1,4 @@
-import type { ComponentRef, EntityCollection, EntityCustomViewParams, EntityDetailViewConfig } from "@rebasepro/types";
+import type { ComponentRef, EntityCollection, EntityCustomViewParams, FormViewConfig } from "@rebasepro/types";
 import type { FormContext } from "../types/fields";
 import type { PluginFormActionProps } from "@rebasepro/types";
 import React, { lazy, Suspense, useCallback, useEffect, useMemo, useRef, useState } from "react";
@@ -47,9 +47,7 @@ import { EntityJsonPreview } from "../components/EntityJsonPreview";
 
 const EntityHistoryView = lazy(() => import("../components/history").then(m => ({ default: m.EntityHistoryView })));
 
-export const MAIN_TAB_VALUE = "__main_##Q$SC^#S6";
-export const JSON_TAB_VALUE = "__json";
-export const HISTORY_TAB_VALUE = "__rebase_history";
+import { MAIN_TAB_VALUE, JSON_TAB_VALUE, HISTORY_TAB_VALUE } from "../util/entity_view_constants";
 
 export type BarActionsParams = {
     values: object,
@@ -154,13 +152,27 @@ function EntityDetailViewInner<M extends Record<string, unknown>>({
         { status: "existing", entityId }
     ), [collection, entityId]);
 
-    const [selectedTab, setSelectedTab] = useState<string>(selectedTabProp ?? defaultSelectedView ?? MAIN_TAB_VALUE);
+    // Track whether we've applied the defaultSelectedView already.
+    // See EntityEditView for a full explanation of this pattern.
+    const hasAppliedDefault = useRef(false);
+
+    const [selectedTab, setSelectedTab] = useState<string>(() => {
+        const val = selectedTabProp ?? defaultSelectedView ?? MAIN_TAB_VALUE;
+        hasAppliedDefault.current = true;
+        return val === "edit" ? MAIN_TAB_VALUE : val;
+    });
     useEffect(() => {
-        const target = selectedTabProp ?? defaultSelectedView ?? MAIN_TAB_VALUE;
+        const val = hasAppliedDefault.current
+            ? (selectedTabProp ?? MAIN_TAB_VALUE)
+            : (selectedTabProp ?? defaultSelectedView ?? MAIN_TAB_VALUE);
+        const target = val === "edit" ? MAIN_TAB_VALUE : val;
+        if (!hasAppliedDefault.current) {
+            hasAppliedDefault.current = true;
+        }
         if (target !== selectedTab) {
             setSelectedTab(target);
         }
-    }, [selectedTabProp, defaultSelectedView]);
+    }, [selectedTabProp]);
 
     const subcollections = getSubcollections(collection).filter(c => !c.hideFromNavigation);
     const subcollectionsCount = subcollections?.length ?? 0;
@@ -223,8 +235,9 @@ function EntityDetailViewInner<M extends Record<string, unknown>>({
     }), [entityId, parentCollectionSlugs, parentEntityIds, path, collection, context, readOnlyFormContext, layout]);
     const pluginActionsTop = useSlot("form.actions.top", formActionTopProps);
 
-    // Detail view config from collection
-    const detailViewConfig = (collection as EntityCollection<M> & { detailView?: EntityDetailViewConfig<M> }).detailView;
+    // Resolve formView.Builder if provided
+    const formViewConfig = (collection as EntityCollection<M> & { formView?: FormViewConfig<M> }).formView;
+    const FormViewBuilder = formViewConfig?.Builder ? resolveComponentRef<EntityCustomViewParams>(formViewConfig.Builder as ComponentRef<EntityCustomViewParams>) : null;
 
     // Title resolution
     const titlePropertyKey = getEntityTitlePropertyKey(collection, customizationController.propertyConfigs);
@@ -344,43 +357,29 @@ function EntityDetailViewInner<M extends Record<string, unknown>>({
     }, [onTabChange, path, entityId, collection]);
 
     const propertyDetailView = () => {
-        // Allow full override via detailView.Builder
-        if (detailViewConfig?.Builder) {
-            const CustomBuilder = resolveComponentRef(detailViewConfig.Builder);
-            if (CustomBuilder && usedEntity) {
-                return <CustomBuilder
-                    collection={collection}
-                    entity={usedEntity}
-                    path={path}
-                    onEditClick={onEditClick ?? (() => {})}
-                />;
-            }
+        // formView.Builder replaces the default property display
+        if (FormViewBuilder && usedEntity) {
+            return <ErrorBoundary>
+                <Suspense fallback={<CircularProgressCenter />}>
+                    <FormViewBuilder
+                        collection={collection}
+                        parentCollectionSlugs={parentCollectionSlugs}
+                        parentEntityIds={parentEntityIds}
+                        entity={usedEntity}
+                        modifiedValues={usedEntity?.values}
+                        formContext={readOnlyFormContext as FormContext<Record<string, unknown>>}
+                    />
+                </Suspense>
+            </ErrorBoundary>;
         }
 
-        const HeaderComponent = detailViewConfig?.Header ? resolveComponentRef(detailViewConfig.Header) : null;
-        const FooterComponent = detailViewConfig?.Footer ? resolveComponentRef(detailViewConfig.Footer) : null;
-
         return (
             <>
-                {HeaderComponent && usedEntity && <HeaderComponent
-                    collection={collection}
-                    entity={usedEntity}
-                    path={path}
-                    onEditClick={onEditClick ?? (() => {})}
-                />}
-
                 {usedEntity && <EntityView
                     entity={usedEntity}
                     collection={collection}
                     path={path}
                 />}
-
-                {FooterComponent && usedEntity && <FooterComponent
-                    collection={collection}
-                    entity={usedEntity}
-                    path={path}
-                    onEditClick={onEditClick ?? (() => {})}
-                />}
             </>
         );
     };

package/src/components/EntityEditView.tsx

@@ -1,4 +1,4 @@
-import type { ComponentRef, EntityCollection, EntityCustomViewParams } from "@rebasepro/types";
+import type { ComponentRef, EntityCollection, EntityCustomViewParams, FormViewConfig } from "@rebasepro/types";
 import type { FormContext } from "../types/fields";
 import type { PluginFormActionProps } from "@rebasepro/types";
 import React, { lazy, Suspense, useCallback, useEffect, useMemo, useRef, useState } from "react";
@@ -50,9 +50,8 @@ import { usePermissions } from "@rebasepro/core";
 import { useUrlController } from "../index";
 import { useNavigate } from "react-router-dom";
 
-export const MAIN_TAB_VALUE = "__main_##Q$SC^#S6";
-export const JSON_TAB_VALUE = "__json";
-export const HISTORY_TAB_VALUE = "__rebase_history";
+import { MAIN_TAB_VALUE, JSON_TAB_VALUE, HISTORY_TAB_VALUE } from "../util/entity_view_constants";
+export { MAIN_TAB_VALUE, JSON_TAB_VALUE, HISTORY_TAB_VALUE };
 
 export type BarActionsParams = {
     values: object,
@@ -225,15 +224,33 @@ export function EntityEditViewInner<M extends Record<string, unknown>>({
         }
     ), [collection, status, entityId]);
 
-    const [selectedTab, setSelectedTab] = useState<string>(
-        selectedTabProp === "edit" ? MAIN_TAB_VALUE : (selectedTabProp ?? defaultSelectedView ?? MAIN_TAB_VALUE)
-    );
+    // Track whether we've applied the defaultSelectedView already.
+    // On the initial render, selectedTabProp may be undefined because the URL
+    // has no tab segment — in that case we fall back to defaultSelectedView.
+    // But once the component is mounted, selectedTabProp=undefined means the
+    // user explicitly selected the form tab (which has no URL segment), so we
+    // must NOT re-apply defaultSelectedView.
+    const hasAppliedDefault = useRef(false);
+
+    const [selectedTab, setSelectedTab] = useState<string>(() => {
+        const val = selectedTabProp ?? defaultSelectedView ?? MAIN_TAB_VALUE;
+        hasAppliedDefault.current = true;
+        return val === "edit" ? MAIN_TAB_VALUE : val;
+    });
     useEffect(() => {
-        const target = selectedTabProp === "edit" ? MAIN_TAB_VALUE : (selectedTabProp ?? defaultSelectedView ?? MAIN_TAB_VALUE);
+        // After initial mount, only sync from selectedTabProp — don't fall
+        // back to defaultSelectedView, because undefined now means "form tab".
+        const val = hasAppliedDefault.current
+            ? (selectedTabProp ?? MAIN_TAB_VALUE)
+            : (selectedTabProp ?? defaultSelectedView ?? MAIN_TAB_VALUE);
+        const target = val === "edit" ? MAIN_TAB_VALUE : val;
+        if (!hasAppliedDefault.current) {
+            hasAppliedDefault.current = true;
+        }
         if (target !== selectedTab) {
             setSelectedTab(target);
         }
-    }, [selectedTabProp, defaultSelectedView]);
+    }, [selectedTabProp]);
 
     const subcollections = getSubcollections(collection).filter(c => !c.hideFromNavigation);
     const subcollectionsCount = subcollections?.length ?? 0;
@@ -268,6 +285,7 @@ export function EntityEditViewInner<M extends Record<string, unknown>>({
         return {
             entityId,
             disabled: false,
+            readOnly: true,
             openEntityMode: layout,
             status: status,
             values: usedEntity?.values ?? ({} as M),
@@ -413,6 +431,11 @@ export function EntityEditViewInner<M extends Record<string, unknown>>({
         }
     }, [status, onTabChange, path, entityId, collection]);
 
+    // Resolve formView.Builder if provided
+    const formViewConfig = (collection as EntityCollection<M> & { formView?: FormViewConfig<M> }).formView;
+    const FormViewBuilder = formViewConfig?.Builder ? resolveComponentRef<EntityCustomViewParams>(formViewConfig.Builder as ComponentRef<EntityCustomViewParams>) : null;
+    const formViewIncludeActions = formViewConfig?.includeActions !== false;
+
     const entityReadOnlyView = !canEdit && entity ? <div
         className={cls("flex-1 flex flex-row w-full overflow-y-auto justify-center", (canEdit || !mainViewVisible || selectedSecondaryForm) ? "hidden" : "")}>
         <div
@@ -420,52 +443,86 @@ export function EntityEditViewInner<M extends Record<string, unknown>>({
             <Typography className={"mt-16 mb-8 mx-8"} variant={"h4"}>
                 {collection.singularName ?? collection.name}
             </Typography>
-            <EntityView
-                className={"px-8 h-full overflow-auto"}
-                entity={entity}
-                path={path}
-                collection={collection} />
+            {FormViewBuilder && readOnlyFormContext ? (
+                <ErrorBoundary>
+                    <Suspense fallback={<CircularProgressCenter />}>
+                        <FormViewBuilder
+                            collection={collection}
+                            parentCollectionSlugs={parentCollectionSlugs} parentEntityIds={parentEntityIds}
+                            entity={usedEntity}
+                            modifiedValues={usedEntity?.values}
+                            formContext={readOnlyFormContext as FormContext<Record<string, unknown>>}
+                        />
+                    </Suspense>
+                </ErrorBoundary>
+            ) : (
+                <EntityView
+                    className={"px-8 h-full overflow-auto"}
+                    entity={entity}
+                    path={path}
+                    collection={collection} />
+            )}
             <div className="h-16" />
         </div>
     </div> : null;
 
-    const entityView = <EntityForm<M>
-        collection={collection}
-        path={path}
-        entityId={entityId ?? usedEntity?.id}
-        onValuesModified={onValuesModified}
-        entity={entity}
-        initialDirtyValues={initialDirtyValues}
-        openEntityMode={layout}
-        forceActionsAtTheBottom={actionsAtTheBottom}
-        initialStatus={status}
-        className={cls((!mainViewVisible || !canEdit) && !selectedSecondaryForm ? "hidden" : "", formProps?.className)}
-        EntityFormActionsComponent={EntityEditViewFormActions}
-        disabled={!canEdit}
-        navigateBack={navigateBack}
-        {...formProps}
-        onEntityChange={(entity) => {
-            setUsedEntity(entity);
-            formProps?.onEntityChange?.(entity);
-        }}
-        onStatusChange={(status) => {
-            setStatus(status);
-            formProps?.onStatusChange?.(status);
-        }}
-        onFormContextReady={(formContext) => {
-            setFormContext(formContext);
-            formProps?.onFormContextReady?.(formContext);
-        }}
-        onSaved={(params) => {
-            const res = {
-                ...params,
-                selectedTab: MAIN_TAB_VALUE === selectedTab ? undefined : selectedTab
-            };
-            onSaved?.(res);
-            formProps?.onSaved?.(res);
-        }}
-        Builder={resolveComponentRef(selectedSecondaryForm?.Builder as ComponentRef<EntityCustomViewParams<M>> | undefined) as React.ComponentType<EntityCustomViewParams<M>> | undefined}
-    />;
+    const entityView = FormViewBuilder ? (
+        // formView.Builder replaces the default form
+        <div className={cls(
+            "relative flex-1 w-full h-full overflow-auto",
+            (!mainViewVisible || !canEdit) && !selectedSecondaryForm ? "hidden" : ""
+        )}>
+            <ErrorBoundary>
+                <Suspense fallback={<CircularProgressCenter />}>
+                    {(formContext ?? readOnlyFormContext) && <FormViewBuilder
+                        collection={collection}
+                        parentCollectionSlugs={parentCollectionSlugs} parentEntityIds={parentEntityIds}
+                        entity={usedEntity}
+                        modifiedValues={(formContext ?? readOnlyFormContext)?.formex?.values ?? usedEntity?.values}
+                        formContext={(formContext ?? readOnlyFormContext) as FormContext<Record<string, unknown>>}
+                    />}
+                </Suspense>
+            </ErrorBoundary>
+        </div>
+    ) : (
+        <EntityForm<M>
+            collection={collection}
+            path={path}
+            entityId={entityId ?? usedEntity?.id}
+            onValuesModified={onValuesModified}
+            entity={entity}
+            initialDirtyValues={initialDirtyValues}
+            openEntityMode={layout}
+            forceActionsAtTheBottom={actionsAtTheBottom}
+            initialStatus={status}
+            className={cls((!mainViewVisible || !canEdit) && !selectedSecondaryForm ? "hidden" : "", formProps?.className)}
+            EntityFormActionsComponent={EntityEditViewFormActions}
+            disabled={!canEdit}
+            navigateBack={navigateBack}
+            {...formProps}
+            onEntityChange={(entity) => {
+                setUsedEntity(entity);
+                formProps?.onEntityChange?.(entity);
+            }}
+            onStatusChange={(status) => {
+                setStatus(status);
+                formProps?.onStatusChange?.(status);
+            }}
+            onFormContextReady={(formContext) => {
+                setFormContext(formContext);
+                formProps?.onFormContextReady?.(formContext);
+            }}
+            onSaved={(params) => {
+                const res = {
+                    ...params,
+                    selectedTab: MAIN_TAB_VALUE === selectedTab ? undefined : selectedTab
+                };
+                onSaved?.(res);
+                formProps?.onSaved?.(res);
+            }}
+            Builder={resolveComponentRef(selectedSecondaryForm?.Builder as ComponentRef<EntityCustomViewParams<M>> | undefined) as React.ComponentType<EntityCustomViewParams<M>> | undefined}
+        />
+    );
 
     const subcollectionTabs = subcollections && subcollections.map((subcollection) => {
         const icon = getIcon(subcollection.icon, undefined, undefined, "small");

package/src/components/EntityEditViewFormActions.tsx

@@ -162,7 +162,7 @@ function buildBottomActions<M extends Record<string, unknown>>({
         }
 
         {formActions.length > 0 && <div className="grow flex overflow-auto no-scrollbar">
-            {formActions.map(action => {
+            {formActions.map((action, index) => {
 
                 const props = {
                     view: "form",
@@ -179,7 +179,7 @@ function buildBottomActions<M extends Record<string, unknown>>({
                 const isEnabled = !action.isEnabled || action.isEnabled(props);
                 return (
                     <EntityActionButton
-                        key={action.key}
+                        key={action.key ?? action.name ?? index}
                         action={action}
                         enabled={isEnabled}
                         props={props}
@@ -282,7 +282,7 @@ function buildSideActions<M extends Record<string, unknown>>({
         {pluginActions}
 
         {formActions.length > 0 && <div className="flex flex-row flex-wrap mt-2">
-            {formActions.map(action => {
+            {formActions.map((action, index) => {
                 const props = {
                     view: "form",
                     entity,
@@ -296,7 +296,7 @@ function buildSideActions<M extends Record<string, unknown>>({
                 } satisfies EntityActionClickProps<any>;
                 const isEnabled = !action.isEnabled || action.isEnabled(props);
                 return (
-                    <EntityActionButton key={action.key} action={action} enabled={isEnabled} props={props}/>
+                    <EntityActionButton key={action.key ?? action.name ?? index} action={action} enabled={isEnabled} props={props}/>
                 );
             })}
         </div>}

package/src/components/EntitySidePanel.tsx

@@ -1,6 +1,6 @@
 import type { EntityCollection } from "@rebasepro/types";
 import type { EntitySidePanelProps } from "@rebasepro/types";
-import React, { useCallback, useEffect, useMemo, useState } from "react";
+import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
 
 import type { OnUpdateParams } from "../types/components/EntityFormProps";
 import { ErrorBoundary } from "@rebasepro/ui";
@@ -8,11 +8,11 @@ import { IconButton, Maximize2Icon, XIcon } from "@rebasepro/ui";
 import { EntityEditView } from "./EntityEditView";
 import { EntityDetailView } from "./EntityDetailView";
 import { useSideDialogContext } from "./SideDialogs";
-import { useLocation, useNavigate } from "react-router-dom";
-import { removeInitialAndTrailingSlashes } from "@rebasepro/common";
+import { useNavigate } from "react-router-dom";
 import { saveEntityToMemoryCache } from "@rebasepro/core";
 import { useCollectionRegistryController, useSideEntityController } from "../index";
 import { useUrlController } from "../index";
+import { resolveDefaultSelectedView } from "@rebasepro/common";
 
 /**
  * This is the component in charge of rendering the side dialog used
@@ -40,7 +40,6 @@ export function EntitySidePanel(props: EntitySidePanelProps) {
     } = useSideDialogContext();
 
     const navigate = useNavigate();
-    const location = useLocation();
 
     const sideEntityController = useSideEntityController();
     const collectionRegistryController = useCollectionRegistryController();
@@ -96,6 +95,34 @@ export function EntitySidePanel(props: EntitySidePanelProps) {
         setShowEditInPanel(selectedTab === "edit");
     }, [entityId, selectedTab]);
 
+    // One-time correction: when the side panel opens without the correct
+    // selectedTab but the resolved collection (from the registry) has a
+    // defaultSelectedView, update the panel width and URL to match.
+    // This handles cases where defaultSelectedView is set via the collection
+    // editor / Studio and is not available on the collection object the
+    // caller passed to sideEntityController.open().
+    const hasCorrectedDefaultView = useRef(false);
+    useEffect(() => {
+        if (hasCorrectedDefaultView.current) return;
+        if (selectedTab) return; // Already has a tab — no correction needed
+        if (!entityId || !collection?.defaultSelectedView) return;
+
+        const effectiveDefault = resolveDefaultSelectedView(
+            collection.defaultSelectedView,
+            { status: "existing", entityId }
+        );
+        if (effectiveDefault && effectiveDefault !== "edit") {
+            hasCorrectedDefaultView.current = true;
+            sideEntityController.replace({
+                path,
+                entityId,
+                selectedTab: effectiveDefault,
+                updateUrl: collection.openEntityMode !== "dialog",
+                collection
+            });
+        }
+    }, [selectedTab, entityId, collection, path, sideEntityController]);
+
     // Note: beforeunload is handled by useUnsavedChangesDialog in SideDialogView,
     // which listens to the same `blocked` state via SideDialogContext.
 
@@ -153,10 +180,13 @@ export function EntitySidePanel(props: EntitySidePanelProps) {
                                 return;
                             }
                             if (tabEntityId) {
-                                const collectionPath = removeInitialAndTrailingSlashes(path);
-                                const tabSuffix = selectedTab ? "/" + selectedTab : "";
-                                const fullUrl = urlController.buildUrlCollectionPath(`${collectionPath}/${tabEntityId}${tabSuffix}#side`);
-                                navigate(fullUrl, { replace: true, state: location.state });
+                                sideEntityController.replace({
+                                    path,
+                                    entityId: tabEntityId,
+                                    selectedTab,
+                                    updateUrl: true,
+                                    collection: paramCollection ?? collection
+                                });
                             }
                         }}
                     />
@@ -198,18 +228,21 @@ export function EntitySidePanel(props: EntitySidePanelProps) {
                                 </IconButton>}
                             </div>}
                         onTabChange={({
-                            entityId,
+                            entityId: tabEntityId,
                             selectedTab,
                             collection: paramCollection
                         }) => {
                             if (collection?.openEntityMode === "dialog" || paramCollection?.openEntityMode === "dialog") {
                                 return;
                             }
-                            if (entityId) {
-                                const collectionPath = removeInitialAndTrailingSlashes(path);
-                                const tabSuffix = selectedTab ? "/" + selectedTab : "";
-                                const fullUrl = urlController.buildUrlCollectionPath(`${collectionPath}/${entityId}${tabSuffix}#side`);
-                                navigate(fullUrl, { replace: true, state: location.state });
+                            if (tabEntityId) {
+                                sideEntityController.replace({
+                                    path,
+                                    entityId: tabEntityId,
+                                    selectedTab,
+                                    updateUrl: true,
+                                    collection: paramCollection ?? collection
+                                });
                             }
                         }}
                         formProps={formProps}

package/src/components/PropertyCollectionView.tsx

@@ -258,6 +258,7 @@ export const PropertyCollectionView = ({
                 <div className={baseKey ? `pl-4 mt-1 border-l ${defaultBorderMixin}` : ""}>
                     {Object.entries(data).map(([key, value]) => {
                         if (value === null || value === undefined) return null;
+                        if (baseKey === "" && !properties[key]) return null;
                         const currentKey = baseKey ? `${baseKey}.${key}` : key;
                         return (
                             <PropertyCollectionView

package/src/components/SelectableTable/SelectableTable.tsx

@@ -1,8 +1,8 @@
 import { createSelectionStore } from "./SelectionStore";
 import type { Property } from "@rebasepro/types";
 import React, { useCallback, useEffect, useMemo, useRef } from "react";
-import { CollectionSize, Entity, EntityTableController, FilterValues, SelectedCellProps } from "@rebasepro/types";
-import { CellRendererParams, VirtualTable, VirtualTableColumn } from "@rebasepro/ui";
+import { CollectionSize, Entity, EntityRelation, EntityTableController, FilterValues, SelectedCellProps } from "@rebasepro/types";
+import { CellRendererParams, VirtualTable, VirtualTableColumn, VirtualTableFilterValues, OnRowClickParams, VirtualTableWhereFilterOp } from "@rebasepro/ui";
 import { enumToObjectEntries } from "@rebasepro/common";
 import { DEFAULT_PAGE_SIZE, EntityCollectionTableController, OnCellValueChange, OnColumnResizeParams } from "@rebasepro/core";
 import { FilterFormFieldProps } from "@rebasepro/ui";
@@ -20,7 +20,7 @@ export type SelectableTableProps<M extends Record<string, unknown>> = {
     /**
      * Callback when a cell value changes.
      */
-    onValueChange?: OnCellValueChange<any, M>;
+    onValueChange?: OnCellValueChange<unknown, M>;
 
     columns: VirtualTableColumn[];
 
@@ -100,7 +100,7 @@ export type SelectableTableProps<M extends Record<string, unknown>> = {
      * bust the cell memo comparator, triggering re-render of cells
      * even when rowData hasn't changed.
      */
-    extraData?: Record<string, any>;
+    extraData?: unknown;
 }
 
 /**
@@ -184,12 +184,10 @@ export const SelectableTable = function SelectableTable<M extends Record<string,
         setItemCount?.(pageSize);
     }, [pageSize]);
 
-    const onRowClick = useCallback(({ rowData }: {
-        rowData: Entity<M>
-    }) => {
+    const onRowClick = useCallback(({ rowData }: OnRowClickParams<Record<string, unknown>>) => {
         if (inlineEditing)
             return;
-        return onEntityClick && onEntityClick(rowData);
+        return onEntityClick && onEntityClick(rowData as unknown as Entity<M>);
     }, [onEntityClick, inlineEditing]);
 
     const select = useCallback((cell?: SelectedCellProps<M>) => {
@@ -223,18 +221,22 @@ export const SelectableTable = function SelectableTable<M extends Record<string,
         };
     }, [unselect]);
 
-    const onFilterUpdate = useCallback((updatedFilterValues?: FilterValues<any>) => {
-        setFilterValues?.({ ...updatedFilterValues,
-...fixedFilter } as FilterValues<any>);
-    }, [fixedFilter]);
+    const onFilterUpdate = useCallback((updatedFilterValues?: VirtualTableFilterValues<string>) => {
+        if (setFilterValues) {
+            setFilterValues({
+                ...updatedFilterValues,
+                ...fixedFilter
+            } as FilterValues<Extract<keyof M, string> | (string & {})>);
+        }
+    }, [fixedFilter, setFilterValues]);
 
     const contextValue = useMemo(() => ({
-        setPopupCell: setPopupCell as ((cell?: SelectedCellProps<M>) => void),
         select,
         onValueChange,
         size: size ?? "m",
-        selectionStore
-    } as EntityCollectionTableController<any>), [setPopupCell, select, onValueChange, size, selectionStore]);
+        selectionStore,
+        setPopupCell
+    } as unknown as EntityCollectionTableController<Record<string, unknown>>), [setPopupCell, select, onValueChange, size, selectionStore]);
 
     return (
         <SelectableTableContext.Provider
@@ -243,11 +245,11 @@ export const SelectableTable = function SelectableTable<M extends Record<string,
                 ref={ref}>
 
                 <VirtualTable
-                    data={data as any}
+                    data={data as unknown as Record<string, unknown>[]}
                     columns={columns}
                     // @ts-ignore
                     cellRenderer={cellRenderer}
-                    onRowClick={inlineEditing ? undefined : (onEntityClick ? (onRowClick as any) : undefined)}
+                    onRowClick={inlineEditing ? undefined : (onEntityClick ? onRowClick : undefined)}
                     onEndReached={loadNextPage}
                     onResetPagination={resetPagination}
                     error={dataLoadingError}
@@ -262,9 +264,9 @@ export const SelectableTable = function SelectableTable<M extends Record<string,
                     initialScroll={initialScroll}
                     onScroll={onScroll}
                     checkFilterCombination={checkFilterCombination}
-                    createFilterField={filterable ? (createFilterField as any) : undefined}
-                    rowClassName={useCallback((entity: any) => {
-                        return highlightedRow?.(entity) ? "bg-surface-accent-50 dark:!bg-surface-accent-900" : "";
+                    createFilterField={filterable ? createFilterField : undefined}
+                    rowClassName={useCallback((entity: Record<string, unknown>) => {
+                        return highlightedRow?.(entity as unknown as Entity<M>) ? "bg-surface-accent-50 dark:!bg-surface-accent-900" : "";
                     }, [highlightedRow])}
                     className="grow"
                     emptyComponent={emptyComponent}
@@ -287,7 +289,7 @@ function createFilterField({
     column,
     hidden,
     setHidden
-}: FilterFormFieldProps<any>): React.ReactNode {
+}: FilterFormFieldProps<unknown>): React.ReactNode {
 
     if (!column.custom) {
         return null;
@@ -313,7 +315,7 @@ function createFilterField({
             hidden={hidden}
             setHidden={setHidden}/>;
     } else if (baseProperty.type === "relation" && baseProperty.relation) {
-        return <RelationFilterField value={filterValue as any}
+        return <RelationFilterField value={filterValue as [VirtualTableWhereFilterOp, EntityRelation | EntityRelation[] | null]}
             setValue={setFilterValue}
             name={id as string}
             relation={baseProperty.relation}

package/src/components/SelectableTable/SelectableTableContext.tsx

@@ -3,4 +3,5 @@ import { EntityCollectionTableController } from "@rebasepro/core";
 
 export const SelectableTableContext = React.createContext<EntityCollectionTableController<Record<string, unknown>>>(null! as EntityCollectionTableController<Record<string, unknown>>);
 
-export const useSelectableTableController = () => useContext<EntityCollectionTableController<any>>(SelectableTableContext);
+export const useSelectableTableController = <M extends Record<string, unknown> = Record<string, unknown>>() =>
+    useContext(SelectableTableContext) as unknown as EntityCollectionTableController<M>;

package/src/components/SelectableTable/SelectionStore.ts

@@ -15,10 +15,10 @@ import { SelectedCellProps } from "@rebasepro/types";
  * derivation actually changed will re-render.
  */
 export function createSelectionStore() {
-    let selectedCell: SelectedCellProps<any> | undefined = undefined;
+    let selectedCell: SelectedCellProps | undefined = undefined;
     const listeners = new Set<() => void>();
 
-    function getSnapshot(): SelectedCellProps<any> | undefined {
+    function getSnapshot(): SelectedCellProps | undefined {
         return selectedCell;
     }
 
@@ -27,7 +27,7 @@ export function createSelectionStore() {
         return () => listeners.delete(listener);
     }
 
-    function select(cell: SelectedCellProps<any> | undefined) {
+    function select(cell: SelectedCellProps | undefined) {
         selectedCell = cell;
         listeners.forEach(l => l());
     }
@@ -43,7 +43,7 @@ export type SelectionStore = ReturnType<typeof createSelectionStore>;
  * `selected` boolean actually changes (not on every store update).
  */
 export function useCellSelected(
-    store: { getSnapshot: () => SelectedCellProps<any> | undefined; subscribe: (listener: () => void) => () => void },
+    store: { getSnapshot: () => SelectedCellProps | undefined; subscribe: (listener: () => void) => () => void },
     propertyKey: string,
     entityPath: string,
     entityId: string | number

package/src/components/index.ts

@@ -53,3 +53,5 @@ export * from "./RebaseAuthGate";
 export * from "./RebaseNavigation";
 export * from "./RebaseLayout";
 export * from "./RebaseRouteDefs";
+
+export * from "./CollectionPanel";