@firecms/core 3.3.0-canary.d3242eb → 3.4.0-canary.0ef7442

package/src/app/Scaffold.tsx

@@ -1,5 +1,5 @@
 import React, { PropsWithChildren, useCallback } from "react";
-import { ChevronLeftIcon, cls, defaultBorderMixin, IconButton, MenuIcon, Sheet, Tooltip } from "@firecms/ui";
+import { cls, defaultBorderMixin, IconButton, MenuIcon, Sheet } from "@firecms/ui";
 import equal from "react-fast-compare"
 import { useLargeLayout } from "../hooks";
 import { ErrorBoundary } from "../components";
@@ -70,31 +70,51 @@ export const Scaffold = React.memo<PropsWithChildren<ScaffoldProps>>(
         const includeDrawer = drawerChildren.length > 0;
         const largeLayout = useLargeLayout();
 
-        const [drawerOpen, setDrawerOpen] = React.useState(false);
+        const [drawerOpen, setDrawerOpen] = React.useState(() => {
+            try {
+                return localStorage.getItem("firecms_drawer_open") === "true";
+            } catch {
+                return false;
+            }
+        });
         const [onHover, setOnHover] = React.useState(false);
 
         const setOnHoverTrue = useCallback(() => setOnHover(true), []);
-        const setOnHoverFalse = useCallback(() => setOnHover(false), []);
+        const setOnHoverFalse = useCallback(() => {
+            // Don't collapse the drawer while a popover/dropdown is open
+            if (typeof document !== "undefined" && document.querySelector("[data-radix-popper-content-wrapper]")) return;
+            setOnHover(false);
+        }, []);
 
         const handleDrawerOpen = useCallback(() => {
             setDrawerOpen(true);
+            try {
+                localStorage.setItem("firecms_drawer_open", "true");
+            } catch { /* ignore */ }
         }, []);
 
         const handleDrawerClose = useCallback(() => {
             setDrawerOpen(false);
+            try {
+                localStorage.setItem("firecms_drawer_open", "false");
+            } catch { /* ignore */ }
         }, []);
 
-        const computedDrawerOpen: boolean = drawerOpen || Boolean(largeLayout && autoOpenDrawer && onHover);
+        // Pinned-open state only; hover is tracked separately so it can *float*
+        // over the content instead of pushing it.
+        const computedDrawerOpen: boolean = drawerOpen;
+        const computedDrawerHovered: boolean = Boolean(largeLayout && onHover);
 
         const hasAppBar = Boolean(appBarChildren.length > 0);
         return (
             <AppContext.Provider value={{
                 logo,
                 hasDrawer: includeDrawer,
-                drawerHovered: onHover,
+                drawerHovered: computedDrawerHovered,
                 drawerOpen: computedDrawerOpen,
                 closeDrawer: handleDrawerClose,
                 openDrawer: handleDrawerOpen,
+                closeHover: setOnHoverFalse,
                 autoOpenDrawer
             }}>
                 <div
@@ -116,7 +136,7 @@ export const Scaffold = React.memo<PropsWithChildren<ScaffoldProps>>(
                         onMouseMove={setOnHoverTrue}
                         onMouseLeave={setOnHoverFalse}
                         open={computedDrawerOpen}
-                        hovered={onHover}
+                        hovered={computedDrawerHovered}
                         setDrawerOpen={setDrawerOpen}>
                         {includeDrawer && drawerChildren}
                     </DrawerWrapper>
@@ -165,49 +185,30 @@ function DrawerWrapper(props: {
 }) {
 
     const { t } = useTranslation();
-    const width = !props.displayed ? 0 : (props.open ? DRAWER_WIDTH : 72);
+
+    // Layout width is the space the drawer occupies in the flex row; the visual
+    // width is how wide the drawer actually renders. When hovered (but not
+    // pinned open) the layout width stays collapsed while the visual width
+    // expands, so the drawer *floats* over the content instead of pushing it.
+    const layoutWidth = !props.displayed ? 0 : (props.open ? DRAWER_WIDTH : 72);
+    const visualWidth = !props.displayed ? 0 : ((props.open || props.hovered) ? DRAWER_WIDTH : 72);
+    const isFloating = props.hovered && !props.open;
+
+    const transition = "left 75ms cubic-bezier(0.4, 0, 0.6, 1) 0ms, opacity 75ms cubic-bezier(0.4, 0, 0.6, 1) 0ms, width 75ms cubic-bezier(0.4, 0, 0.6, 1) 0ms";
+
     const innerDrawer = <div
-        className={"relative h-full no-scrollbar overflow-y-auto overflow-x-hidden"}
+        className={cls("h-full overflow-hidden", defaultBorderMixin,
+            isFloating
+                ? "absolute top-0 left-0 bottom-0 z-30 bg-surface-50 dark:bg-surface-900 shadow-lg border-r"
+                : "relative bg-surface-50 dark:bg-surface-900")}
         style={{
-            width,
-            transition: "left 100ms cubic-bezier(0.4, 0, 0.6, 1) 0ms, opacity 100ms cubic-bezier(0.4, 0, 0.6, 1) 0ms, width 100ms cubic-bezier(0.4, 0, 0.6, 1) 0ms"
+            width: visualWidth,
+            transition
         }}
     >
-
-        {!props.open && props.displayed && (
-            <Tooltip title={t("open_menu")}
-                side="right"
-                sideOffset={12}
-                asChild={true}>
-                <div
-                    className="ml-2 fixed top-1 left-2 sm:top-2 sm:left-2 !bg-surface-50 dark:!bg-surface-900 rounded-full w-fit z-20">
-                    <IconButton
-                        color="inherit"
-                        aria-label={t("open_menu")}
-                        onClick={() => props.setDrawerOpen(true)}
-                        size="large"
-                    >
-                        <MenuIcon size="small" />
-                    </IconButton>
-                </div>
-            </Tooltip>
-        )}
-
-        <div
-            className={`z-20 absolute right-0 top-4 ${props.open ? "opacity-100" : "opacity-0 invisible"
-                } transition-opacity duration-200 ease-in-out`}>
-            <IconButton
-                aria-label={t("close_drawer")}
-                onClick={() => props.setDrawerOpen(false)}
-            >
-                <ChevronLeftIcon />
-            </IconButton>
-        </div>
-
         <div className={"flex flex-col h-full"}>
             {props.children}
         </div>
-
     </div>;
 
     const largeLayout = useLargeLayout();
@@ -238,13 +239,14 @@ function DrawerWrapper(props: {
 
     return (
         <div
-            className="z-20 relative"
+            className="z-20 relative flex-shrink-0 overflow-visible"
             onMouseEnter={props.onMouseEnter}
             onMouseMove={props.onMouseMove}
             onMouseLeave={props.onMouseLeave}
             style={{
-                width,
-                transition: "left 100ms cubic-bezier(0.4, 0, 0.6, 1) 0ms, opacity 100ms cubic-bezier(0.4, 0, 0.6, 1) 0ms, width 100ms cubic-bezier(0.4, 0, 0.6, 1) 0ms"
+                width: layoutWidth,
+                minWidth: layoutWidth,
+                transition
             }}>
 
             {innerDrawer}

package/src/app/useApp.tsx

@@ -10,6 +10,7 @@ export type AppState = {
     drawerOpen: boolean,
     openDrawer: () => void,
     closeDrawer: () => void,
+    closeHover?: () => void,
     autoOpenDrawer?: boolean,
     logo?: string
 }

package/src/components/EntityCollectionTable/EntityCollectionTable.tsx

@@ -245,7 +245,8 @@ export const EntityCollectionTable = function EntityCollectionTable<M extends Re
         const columnsResult: VirtualTableColumn[] = propertiesToColumns({
             properties,
             sortable,
-            forceFilter,
+            forcedFilters: tableController.forcedFilters,
+            allowedFilters: tableController.allowedFilters,
             AdditionalHeaderWidget
         });
 
@@ -353,6 +354,7 @@ export const EntityCollectionTable = function EntityCollectionTable<M extends Re
                 onTextSearch={textSearchEnabled ? onTextSearch : undefined}
                 textSearchLoading={textSearchLoading}
                 onTextSearchClick={textSearchEnabled ? onTextSearchClick : undefined}
+                initialSearchString={tableController.searchString}
                 title={title}
                 actionsStart={actionsStart}
                 actions={actions}

package/src/components/EntityCollectionTable/column_utils.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { getTableCellAlignment, getTablePropertyColumnWidth } from "./internal/common";
 import { FilterValues, ResolvedProperties, ResolvedProperty } from "../../types";
 import { VirtualTableColumn } from "../VirtualTable";
-import { getIconForProperty, getResolvedPropertyInPath } from "../../util";
+import { getIconForProperty, getResolvedPropertyInPath, isDataTypeFilterable } from "../../util";
 import { getColumnKeysForProperty } from "../common/useColumnsIds";
 
 export function buildIdColumn(largeLayout?: boolean): VirtualTableColumn {
@@ -20,7 +20,8 @@ export function buildIdColumn(largeLayout?: boolean): VirtualTableColumn {
 export interface PropertiesToColumnsParams<M extends Record<string, any>> {
     properties: ResolvedProperties<M>;
     sortable?: boolean;
-    forceFilter?: FilterValues<keyof M extends string ? keyof M : never>;
+    forcedFilters?: (keyof M)[];
+    allowedFilters?: (keyof M)[];
     AdditionalHeaderWidget?: React.ComponentType<{
         property: ResolvedProperty,
         propertyKey: string,
@@ -28,8 +29,7 @@ export interface PropertiesToColumnsParams<M extends Record<string, any>> {
     }>;
 }
 
-export function propertiesToColumns<M extends Record<string, any>>({ properties, sortable, forceFilter, AdditionalHeaderWidget }: PropertiesToColumnsParams<M>): VirtualTableColumn[] {
-    const disabledFilter = Boolean(forceFilter);
+export function propertiesToColumns<M extends Record<string, any>>({ properties, sortable, forcedFilters, AdditionalHeaderWidget, allowedFilters }: PropertiesToColumnsParams<M>): VirtualTableColumn[] {
     return Object.entries<ResolvedProperty>(properties)
         .flatMap(([key, property]) => getColumnKeysForProperty(property, key))
         .map(({
@@ -39,14 +39,19 @@ export function propertiesToColumns<M extends Record<string, any>>({ properties,
             const property = getResolvedPropertyInPath(properties, key);
             if (!property)
                 throw Error("Internal error: no property found in path " + key);
-            const filterable = filterableProperty(property);
+
+            const filterable = property.dataType === 'array' ? isDataTypeFilterable(property.of?.dataType, true) : isDataTypeFilterable(property.dataType);
+            const isFilterForced = forcedFilters?.includes(key) ?? false;
+            const isFilterAllowed = allowedFilters ? allowedFilters.includes(key) : filterable;
+
+            const filterEnabled = filterable && isFilterAllowed && !isFilterForced;
             return {
                 key: key as string,
                 align: getTableCellAlignment(property),
                 icon: getIconForProperty(property, "small"),
                 title: property.name ?? key as string,
                 sortable: sortable,
-                filter: !disabledFilter && filterable,
+                filter: filterEnabled,
                 width: getTablePropertyColumnWidth(property),
                 resizable: true,
                 custom: {
@@ -59,16 +64,3 @@ export function propertiesToColumns<M extends Record<string, any>>({ properties,
             } satisfies VirtualTableColumn;
         });
 }
-
-function filterableProperty(property: ResolvedProperty, partOfArray = false): boolean {
-    if (partOfArray) {
-        return ["string", "number", "date", "reference"].includes(property.dataType);
-    }
-    if (property.dataType === "array") {
-        if (property.of)
-            return filterableProperty(property.of, true);
-        else
-            return false;
-    }
-    return ["string", "number", "boolean", "date", "reference", "array"].includes(property.dataType);
-}

package/src/components/EntityCollectionTable/fields/TableReferenceField.tsx

@@ -70,7 +70,7 @@ export const TableReferenceFieldInternal = React.memo(
         }, [updateValue]);
 
         const onMultipleEntitiesSelected = useCallback((entities: Entity<any>[]) => {
-            updateValue(entities.map((e) => getReferenceFrom(e)));
+            updateValue(entities.filter(Boolean).map((e) => getReferenceFrom(e)));
         }, [updateValue]);
 
         const selectedEntityIds = internalValue

package/src/components/EntityCollectionTable/internal/CollectionTableToolbar.tsx

@@ -20,6 +20,11 @@ interface CollectionTableToolbarProps {
     onTextSearchClick?: () => void;
     onTextSearch?: (searchString?: string) => void;
     textSearchLoading?: boolean;
+    /**
+     * Search term the search bar should start with, typically the one restored from the
+     * URL query params by the table controller.
+     */
+    initialSearchString?: string;
 }
 
 export function CollectionTableToolbar({
@@ -29,6 +34,7 @@ export function CollectionTableToolbar({
     onTextSearch,
     onTextSearchClick,
     textSearchLoading,
+    initialSearchString,
     title,
     viewModeToggle
 }: CollectionTableToolbarProps) {
@@ -79,6 +85,7 @@ export function CollectionTableToolbar({
                         disabled={Boolean(onTextSearchClick)}
                         onClick={onTextSearchClick}
                         onTextSearch={onTextSearchClick ? undefined : onTextSearch}
+                        initialValue={initialSearchString}
                         placeholder={t("search")}
                         expandable={true} />}
 

package/src/components/EntityCollectionTable/internal/popup_field/PopupFormField.tsx

@@ -26,6 +26,8 @@ import { OnCellValueChangeParams } from "../../../common";
 interface PopupFormFieldProps<M extends Record<string, any>> {
     customFieldValidator?: CustomFieldValidator;
     path: string;
+    /** `path` split at its real segment boundaries; forwarded to the datasource. */
+    pathSegments?: string[];
     entityId: string;
     tableKey: string;
     propertyKey?: Extract<keyof M, string>;
@@ -54,6 +56,7 @@ export function PopupFormFieldLoading<M extends Record<string, any>>({
                                                                          propertyKey,
                                                                          collection: inputCollection,
                                                                          path,
+                                                                         pathSegments,
                                                                          cellRect,
                                                                          open,
                                                                          onClose,
@@ -66,11 +69,12 @@ export function PopupFormFieldLoading<M extends Record<string, any>>({
         if (entityId && inputCollection) {
             dataSource.fetchEntity({
                 path,
+                pathSegments,
                 entityId,
                 collection: inputCollection
             }).then(setEntity);
         }
-    }, [entityId, inputCollection, dataSource, path]);
+    }, [entityId, inputCollection, dataSource, path, pathSegments]);
 
     if (!entity) return null;
     return <PopupFormFieldInternal {...{

package/src/components/EntityCollectionView/EntityCollectionBoardView.tsx

@@ -42,6 +42,8 @@ export type EntityCollectionBoardViewProps<M extends Record<string, any> = any>
     collection: EntityCollection<M>;
     tableController: EntityTableController<M>;
     fullPath: string;
+    /** `fullPath` split at its real segment boundaries; forwarded to the datasource. */
+    pathSegments?: string[];
     parentCollectionIds?: string[];
     columnProperty: string;
     onEntityClick?: (entity: Entity<M>) => void;
@@ -60,6 +62,7 @@ export function EntityCollectionBoardView<M extends Record<string, any> = any>({
     collection,
     tableController,
     fullPath,
+    pathSegments,
     parentCollectionIds = [],
     columnProperty,
     onEntityClick,
@@ -169,6 +172,7 @@ export function EntityCollectionBoardView<M extends Record<string, any> = any>({
     // Use the new per-column data controller
     const boardDataController = useBoardDataController<M>({
         fullPath,
+        pathSegments,
         collection,
         columnProperty,
         columns,

package/src/components/EntityCollectionView/EntityCollectionView.tsx

@@ -106,6 +106,13 @@ export type EntityCollectionViewProps<M extends Record<string, any>> = {
      * Full path using navigation ids.
      */
     fullIdPath?: string;
+    /**
+     * `fullPath` split at its real segment boundaries, e.g. `["nodes", "node/42", "edges"]`.
+     * Forwarded to the datasource so a parent entity id containing "/" stays unambiguous.
+     * Defaults to splitting `fullPath`, which is correct for any backend whose ids cannot
+     * contain "/".
+     */
+    pathSegments?: string[];
     /**
      * If this is a subcollection, specify the parent collection ids.
      */
@@ -152,6 +159,7 @@ export const EntityCollectionView = React.memo(
     function EntityCollectionView<M extends Record<string, any>>({
         fullPath: fullPathProp,
         fullIdPath,
+        pathSegments,
         parentCollectionIds,
         isSubCollection,
         className,
@@ -178,7 +186,9 @@ export const EntityCollectionView = React.memo(
 
         const collection = useMemo(() => {
             const userOverride = userConfigPersistence?.getCollectionConfig<M>(fullPath);
-            return (userOverride ? mergeDeep(collectionProp, userOverride) : collectionProp) as EntityCollection<M>;
+            if (!userOverride) return collectionProp;
+            const { properties, ...rest } = userOverride;
+            return mergeDeep(collectionProp, rest) as EntityCollection<M>;
         }, [collectionProp, fullPath, userConfigPersistence?.getCollectionConfig]);
 
         const openEntityMode = collection?.openEntityMode ?? DEFAULT_ENTITY_OPEN_MODE;
@@ -315,6 +325,7 @@ export const EntityCollectionView = React.memo(
 
         const tableController = useDataSourceTableController<M>({
             fullPath,
+            pathSegments,
             collection,
             lastDeleteTimestamp,
             scrollRestoration,
@@ -363,6 +374,7 @@ export const EntityCollectionView = React.memo(
                 collection,
                 entityId: undefined,
                 path: fullPath,
+                pathSegments,
                 fullIdPath,
                 sideEntityController,
                 navigation,
@@ -438,6 +450,7 @@ export const EntityCollectionView = React.memo(
         const onViewModeChange = useCallback((mode: ViewMode) => {
             analyticsController.onAnalyticsEvent?.("view_mode_changed", {
                 path: fullPath,
+                pathSegments,
                 from: viewMode,
                 to: mode
             });
@@ -507,7 +520,8 @@ export const EntityCollectionView = React.memo(
             path: fullPath,
             propertyConfigs: customizationController.propertyConfigs,
             authController,
-        }), [collection, fullPath]);
+            userConfigPersistence,
+        }), [collection, fullPath, userConfigPersistence]);
 
         // Check if Kanban view is possible (collection has at least one string enum property)
         const hasEnumProperty = useMemo(() => {
@@ -578,6 +592,7 @@ export const EntityCollectionView = React.memo(
         const onKanbanPropertyChange = useCallback((property: string) => {
             analyticsController.onAnalyticsEvent?.("kanban_property_changed", {
                 path: fullPath,
+                pathSegments,
                 property
             });
             setSelectedKanbanProperty(property);
@@ -642,6 +657,7 @@ export const EntityCollectionView = React.memo(
                                     entityId: entity.id,
                                     selectedTab: subcollection.id ?? subcollection.path,
                                     path: fullPath,
+                                    pathSegments,
                                     fullIdPath,
                                     navigation,
                                     sideEntityController
@@ -773,6 +789,7 @@ export const EntityCollectionView = React.memo(
         // EntitiesCount fetches count and updates breadcrumb - no visual rendering needed here
         const countFetcher = <EntitiesCount
             fullPath={fullPath}
+            pathSegments={pathSegments}
             collection={collection}
             filter={tableController.filterValues}
             sortBy={tableController.sortBy}
@@ -828,7 +845,11 @@ export const EntityCollectionView = React.memo(
         } = useTableSearchHelper({
             collection,
             fullPath: resolvedFullPath,
-            parentCollectionIds
+            parentCollectionIds,
+            // When the search term comes from the URL instead of the search bar, text search
+            // has never been initialised for this collection. Initialise it so the search bar
+            // is usable (editable and clearable) right away.
+            initialSearchString: tableController.searchString
         });
 
         // Popover open state managed at parent level to prevent closing when view changes
@@ -878,6 +899,7 @@ export const EntityCollectionView = React.memo(
                     loading={tableController.dataLoading}
                     onTextSearch={textSearchEnabled && textSearchInitialised ? tableController.setSearchString : undefined}
                     onTextSearchClick={textSearchEnabled && !textSearchInitialised ? onTextSearchClick : undefined}
+                    initialSearchString={tableController.searchString}
                     textSearchLoading={textSearchLoading}
                     viewModeToggle={viewModeToggleElement}
                     actionsStart={<EntityCollectionViewStartActions
@@ -912,6 +934,7 @@ export const EntityCollectionView = React.memo(
                         collection={collection}
                         tableController={tableController}
                         fullPath={fullPath}
+                        pathSegments={pathSegments}
                         parentCollectionIds={parentCollectionIds}
                         columnProperty={selectedKanbanProperty}
                         onEntityClick={onEntityClick}
@@ -1042,6 +1065,7 @@ export const EntityCollectionView = React.memo(
 
                 {popupCell && <PopupFormField
                     key={`popup_form_${popupCell?.propertyKey}_${popupCell?.entityId}`}
+                    pathSegments={pathSegments}
                     open={Boolean(popupCell)}
                     onClose={onPopupClose}
                     cellRect={popupCell?.cellRect}
@@ -1097,13 +1121,16 @@ function EntitiesCount({
     collection,
     filter,
     sortBy,
-    onCountChange
+    onCountChange,
+    pathSegments
 }: {
     fullPath: string,
     collection: EntityCollection,
     filter?: FilterValues<any>,
     sortBy?: [string, "asc" | "desc"],
     onCountChange?: (count: number) => void,
+    /** `fullPath` split at its real segment boundaries; forwarded to countEntities. */
+    pathSegments?: string[],
 }) {
 
     const dataSource = useDataSource(collection);
@@ -1114,17 +1141,19 @@ function EntitiesCount({
     const sortByProperty = sortBy ? sortBy[0] : undefined;
     const currentSort = sortBy ? sortBy[1] : undefined;
     const resolvedPath = useMemo(() => navigation.resolveIdsFrom(fullPath), [fullPath, navigation.resolveIdsFrom]);
+    const resolvedPathSegments = pathSegments;
 
     useEffect(() => {
         if (dataSource.countEntities)
             dataSource.countEntities({
                 path: resolvedPath,
+                pathSegments: resolvedPathSegments,
                 collection,
                 filter,
                 orderBy: sortByProperty,
                 order: currentSort
             }).then(setCount).catch(setError);
-    }, [fullPath, dataSource.countEntities, resolvedPath, collection, filter, sortByProperty, currentSort]);
+    }, [fullPath, dataSource.countEntities, resolvedPath, resolvedPathSegments, collection, filter, sortByProperty, currentSort]);
 
     useEffect(() => {
         if (onCountChange && count !== undefined) {

package/src/components/EntityCollectionView/EntityCollectionViewStartActions.tsx

@@ -66,8 +66,10 @@ export function EntityCollectionViewStartActions<M extends Record<string, any>>(
         collectionEntitiesCount
     };
 
+    const hasAnyAllowedFilters = !tableController.allowedFilters || tableController.allowedFilters.length > 0;
+
     // Filters button
-    const filtersButton = resolvedProperties && tableController.setFilterValues && (
+    const filtersButton = resolvedProperties && tableController.setFilterValues && hasAnyAllowedFilters && (
         <Tooltip title={t("filters")}
             key={"filters_tooltip"}>
             <Badge
@@ -131,6 +133,7 @@ export function EntityCollectionViewStartActions<M extends Record<string, any>>(
                     filterValues={tableController.filterValues}
                     setFilterValues={(filterValues) => tableController.setFilterValues?.(filterValues ?? {})}
                     forceFilter={collection.forceFilter}
+                    allowedFilters={tableController.allowedFilters?.map(key => key.toString())}
                 />
             )}
         </>

package/src/components/EntityCollectionView/FiltersDialog.tsx

@@ -12,7 +12,6 @@ import {
     DialogActions,
     DialogContent,
     DialogTitle,
-    FilterListIcon,
     Typography
 } from "@firecms/ui";
 import { useTranslation } from "../../hooks/useTranslation";
@@ -30,6 +29,7 @@ export interface FiltersDialogProps {
     filterValues: FilterValues<any> | undefined;
     setFilterValues: (filterValues?: FilterValues<any>) => void;
     forceFilter?: FilterValues<any>;
+    allowedFilters?: string[];
 }
 
 /**
@@ -42,7 +42,8 @@ export function FiltersDialog({
     properties,
     filterValues,
     setFilterValues,
-    forceFilter
+    forceFilter,
+    allowedFilters
 }: FiltersDialogProps) {
     const { t } = useTranslation();
     
@@ -59,18 +60,18 @@ export function FiltersDialog({
         }
     }, [open, filterValues]);
 
-    // Get list of filterable properties
-    const filterableProperties = useMemo(() => {
-        return Object.entries(properties).filter(([key, property]) => {
-            if (!property) return false;
-            // Force filter properties should not be editable
-            if (forceFilter && key in forceFilter) return false;
-            // Check if property type is filterable
-            const baseProperty = property.dataType === "array" ? property.of : property;
-            if (!baseProperty) return false;
-            return ["string", "number", "boolean", "date", "reference"].includes(baseProperty.dataType);
+    // Get list of editable filter properties
+    const editableFilterProperties = useMemo(() => {
+        return Object.entries(properties).filter(([key]) => {
+            const isFilterAllowed = !allowedFilters || allowedFilters.includes(key);
+
+            const isFilterForced = Boolean(forceFilter && Object.keys(forceFilter).includes(key));
+
+            return isFilterAllowed && !isFilterForced;
         });
-    }, [properties, forceFilter]);
+    }, [properties, allowedFilters, forceFilter]);
+
+    const hasEditableFilterProperties = editableFilterProperties.length > 0;
 
     const handleFilterChange = useCallback((propertyKey: string, value?: [VirtualTableWhereFilterOp, any]) => {
         setLocalFilters(prev => {
@@ -103,7 +104,13 @@ export function FiltersDialog({
 
     // Check if any reference field's dialog is currently open (should hide this dialog)
     const isAnyFieldHidden = Object.values(hiddenFields).some(hidden => hidden);
-    const activeFilterCount = Object.keys(localFilters).length;
+
+    const getActiveFilterCount = () => {
+        const editableLocalFilters = Object.keys(localFilters).filter((key) => !forceFilter || !(key in forceFilter));
+        return editableLocalFilters.length;
+    }
+
+    const activeFilterCount = getActiveFilterCount();
 
     const renderFilterField = useCallback((propertyKey: string, property: ResolvedProperty) => {
         const isArray = property.dataType === "array";
@@ -185,14 +192,14 @@ export function FiltersDialog({
             </DialogTitle>
 
             <DialogContent >
-                {filterableProperties.length === 0 ? (
+                {!hasEditableFilterProperties ? (
                     <Typography color="secondary" className="py-8 text-center">
                         {t("no_filterable_properties")}
                     </Typography>
                 ) : (
                     <table className="w-full border-collapse">
                         <tbody>
-                            {filterableProperties.map(([propertyKey, property], index) => {
+                            {editableFilterProperties.map(([propertyKey, property], index) => {
                                 const hasFilter = propertyKey in localFilters;
 
                                 return (
@@ -234,18 +241,22 @@ export function FiltersDialog({
                     {t("clear")}
                 </Button>
                 <div className="flex-grow" />
-                <Button
-                    variant="text"
-                    onClick={() => onOpenChange(false)}
-                >
-                    {t("cancel")}
-                </Button>
-                <Button
-                    variant="filled"
-                    onClick={handleApply}
-                >
-                    {t("apply_filters")}
-                </Button>
+                {hasEditableFilterProperties && (
+                    <>
+                        <Button
+                            variant="text"
+                            onClick={() => onOpenChange(false)}
+                        >
+                            {t("cancel")}
+                        </Button>
+                        <Button
+                            variant="filled"
+                            onClick={handleApply}
+                        >
+                            {t("apply_filters")}
+                        </Button>
+                    </>
+                )}
             </DialogActions>
         </Dialog>
     );