@firecms/core 3.2.0 → 3.3.0-canary.2064433

package/dist/preview/components/ArrayEnumPreview.d.ts

@@ -1,3 +1,4 @@
+import React from "react";
 import { EnumValueConfig } from "../../types";
 import { PreviewSize } from "../PropertyPreviewProps";
 /**
@@ -8,4 +9,4 @@ export declare function ArrayEnumPreview({ name, value, enumValues, size }: {
     name: string | undefined;
     enumValues: EnumValueConfig[];
     size: PreviewSize;
-}): import("react/jsx-runtime").JSX.Element;
+}): React.JSX.Element;

package/dist/preview/components/AsyncPreviewComponent.d.ts

@@ -8,4 +8,4 @@ export interface AsyncPreviewComponentProps {
  *
  * @group Preview components
  */
-export declare const AsyncPreviewComponent: React.MemoExoticComponent<(<M extends Record<string, any>>({ builder }: AsyncPreviewComponentProps) => import("react/jsx-runtime").JSX.Element)>;
+export declare const AsyncPreviewComponent: React.MemoExoticComponent<(<M extends Record<string, any>>({ builder }: AsyncPreviewComponentProps) => React.JSX.Element)>;

package/dist/preview/components/EmptyValue.d.ts

@@ -1,4 +1,5 @@
+import React from "react";
 /**
  * @group Preview components
  */
-export declare function EmptyValue(): import("react/jsx-runtime").JSX.Element;
+export declare function EmptyValue(): React.JSX.Element;

package/dist/preview/components/EnumValuesChip.d.ts

@@ -10,4 +10,4 @@ export interface EnumValuesChipProps {
 /**
  * @group Preview components
  */
-export declare function EnumValuesChip({ enumValues, enumKey, size, className, children }: EnumValuesChipProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function EnumValuesChip({ enumValues, enumKey, size, className, children }: EnumValuesChipProps): React.JSX.Element | null;

package/dist/preview/components/ImagePreview.d.ts

@@ -1,3 +1,4 @@
+import React from "react";
 import { PreviewSize } from "../PropertyPreviewProps";
 /**
  * @group Preview components
@@ -13,4 +14,4 @@ export interface ImagePreviewProps {
 /**
  * @group Preview components
  */
-export declare function ImagePreview({ size, url, fill }: ImagePreviewProps): import("react/jsx-runtime").JSX.Element;
+export declare function ImagePreview({ size, url, fill }: ImagePreviewProps): React.JSX.Element;

package/dist/preview/components/ReferencePreview.d.ts

@@ -14,4 +14,4 @@ export type ReferencePreviewProps = {
 /**
  * @group Preview components
  */
-export declare const ReferencePreview: (props: ReferencePreviewProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ReferencePreview: (props: ReferencePreviewProps) => React.JSX.Element;

package/dist/preview/components/StorageThumbnail.d.ts

@@ -11,5 +11,5 @@ type StorageThumbnailProps = {
  * @group Preview components
  */
 export declare const StorageThumbnail: React.FunctionComponent<StorageThumbnailProps>;
-export declare function StorageThumbnailInternal({ storeUrl, interactive, storagePathOrDownloadUrl, size, fill }: StorageThumbnailProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function StorageThumbnailInternal({ storeUrl, interactive, storagePathOrDownloadUrl, size, fill }: StorageThumbnailProps): React.JSX.Element | null;
 export {};

package/dist/preview/components/UserPreview.d.ts

@@ -1,3 +1,4 @@
+import React from "react";
 import { PropertyPreviewProps } from "../PropertyPreviewProps";
 /**
  * Preview component for displaying user information.
@@ -5,4 +6,4 @@ import { PropertyPreviewProps } from "../PropertyPreviewProps";
  *
  * @group Preview components
  */
-export declare function UserPreview({ value }: PropertyPreviewProps<string>): import("react/jsx-runtime").JSX.Element;
+export declare function UserPreview({ value }: PropertyPreviewProps<string>): React.JSX.Element;

package/dist/preview/property_previews/ArrayOfMapsPreview.d.ts

@@ -1,5 +1,6 @@
+import React from "react";
 import { PropertyPreviewProps } from "../PropertyPreviewProps";
 /**
  * @group Preview components
  */
-export declare function ArrayOfMapsPreview({ propertyKey, value, property: inputProperty, size, }: PropertyPreviewProps<Record<string, any>[]>): import("react/jsx-runtime").JSX.Element | null;
+export declare function ArrayOfMapsPreview({ propertyKey, value, property: inputProperty, size, }: PropertyPreviewProps<Record<string, any>[]>): React.JSX.Element | null;

package/dist/preview/property_previews/ArrayOfReferencesPreview.d.ts

@@ -2,4 +2,4 @@ import { PropertyPreviewProps } from "../PropertyPreviewProps";
 /**
  * @group Preview components
  */
-export declare function ArrayOfReferencesPreview({ propertyKey, value, property: inputProperty, size }: PropertyPreviewProps<any[]>): import("react/jsx-runtime").JSX.Element;
+export declare function ArrayOfReferencesPreview({ propertyKey, value, property: inputProperty, size }: PropertyPreviewProps<any[]>): import("react").JSX.Element;

package/dist/preview/property_previews/ArrayOfStorageComponentsPreview.d.ts

@@ -1,5 +1,6 @@
+import React from "react";
 import { PropertyPreviewProps } from "../PropertyPreviewProps";
 /**
  * @group Preview components
  */
-export declare function ArrayOfStorageComponentsPreview({ propertyKey, value, property: inputProperty, size }: PropertyPreviewProps<any[]>): import("react/jsx-runtime").JSX.Element | null;
+export declare function ArrayOfStorageComponentsPreview({ propertyKey, value, property: inputProperty, size }: PropertyPreviewProps<any[]>): React.JSX.Element | null;

package/dist/preview/property_previews/ArrayOfStringsPreview.d.ts

@@ -1,5 +1,6 @@
+import React from "react";
 import { PropertyPreviewProps } from "../../preview";
 /**
  * @group Preview components
  */
-export declare function ArrayOfStringsPreview({ propertyKey, value, property: inputProperty, size }: PropertyPreviewProps<string[]>): import("react/jsx-runtime").JSX.Element | null;
+export declare function ArrayOfStringsPreview({ propertyKey, value, property: inputProperty, size }: PropertyPreviewProps<string[]>): React.JSX.Element | null;

package/dist/preview/property_previews/ArrayOneOfPreview.d.ts

@@ -1,5 +1,6 @@
+import React from "react";
 import { PropertyPreviewProps } from "../PropertyPreviewProps";
 /**
  * @group Preview components
  */
-export declare function ArrayOneOfPreview({ propertyKey, value, property: inputProperty, size, }: PropertyPreviewProps<any[]>): import("react/jsx-runtime").JSX.Element | null;
+export declare function ArrayOneOfPreview({ propertyKey, value, property: inputProperty, size, }: PropertyPreviewProps<any[]>): React.JSX.Element | null;

package/dist/preview/property_previews/ArrayPropertyEnumPreview.d.ts

@@ -2,4 +2,4 @@ import { PropertyPreviewProps } from "../PropertyPreviewProps";
 /**
  * @group Preview components
  */
-export declare function ArrayPropertyEnumPreview({ propertyKey, value, property, size }: PropertyPreviewProps<string[] | number[]>): import("react/jsx-runtime").JSX.Element | null;
+export declare function ArrayPropertyEnumPreview({ propertyKey, value, property, size }: PropertyPreviewProps<string[] | number[]>): import("react").JSX.Element | null;

package/dist/preview/property_previews/ArrayPropertyPreview.d.ts

@@ -1,5 +1,6 @@
+import React from "react";
 import { PropertyPreviewProps } from "../PropertyPreviewProps";
 /**
  * @group Preview components
  */
-export declare function ArrayPropertyPreview({ propertyKey, value, property: inputProperty, size }: PropertyPreviewProps<any[]>): import("react/jsx-runtime").JSX.Element | null;
+export declare function ArrayPropertyPreview({ propertyKey, value, property: inputProperty, size }: PropertyPreviewProps<any[]>): React.JSX.Element | null;

package/dist/preview/property_previews/MapPropertyPreview.d.ts

@@ -1,8 +1,9 @@
+import React from "react";
 import { PropertyPreviewProps } from "../PropertyPreviewProps";
 /**
  * @group Preview components
  */
-export declare function MapPropertyPreview<T extends Record<string, any> = Record<string, any>>({ propertyKey, value, property, size }: PropertyPreviewProps<T>): import("react/jsx-runtime").JSX.Element | null;
+export declare function MapPropertyPreview<T extends Record<string, any> = Record<string, any>>({ propertyKey, value, property, size }: PropertyPreviewProps<T>): React.JSX.Element | null;
 export declare function KeyValuePreview({ value }: {
     value: any;
-}): import("react/jsx-runtime").JSX.Element | null;
+}): React.JSX.Element | null;

package/dist/preview/property_previews/SkeletonPropertyComponent.d.ts

@@ -1,4 +1,5 @@
 import { ResolvedProperty } from "../../types";
+import React from "react";
 import { PreviewSize } from "../PropertyPreviewProps";
 export interface SkeletonPropertyComponentProps {
     property: ResolvedProperty;
@@ -8,7 +9,7 @@ export interface SkeletonPropertyComponentProps {
  * @group Preview components
  */
 export declare function SkeletonPropertyComponent({ property, size }: SkeletonPropertyComponentProps): any;
-export declare function renderSkeletonImageThumbnail(size: PreviewSize, fill?: boolean): import("react/jsx-runtime").JSX.Element;
-export declare function renderSkeletonText(index?: number, width?: number): import("react/jsx-runtime").JSX.Element;
-export declare function renderSkeletonCaptionText(index?: number): import("react/jsx-runtime").JSX.Element;
-export declare function renderSkeletonIcon(): import("react/jsx-runtime").JSX.Element;
+export declare function renderSkeletonImageThumbnail(size: PreviewSize, fill?: boolean): React.JSX.Element;
+export declare function renderSkeletonText(index?: number, width?: number): React.JSX.Element;
+export declare function renderSkeletonCaptionText(index?: number): React.JSX.Element;
+export declare function renderSkeletonIcon(): React.JSX.Element;

package/dist/routes/FireCMSRoute.d.ts

@@ -1 +1,2 @@
-export declare function FireCMSRoute(): import("react/jsx-runtime").JSX.Element | null;
+import React from "react";
+export declare function FireCMSRoute(): React.JSX.Element | null;

package/dist/types/collections.d.ts

@@ -142,6 +142,30 @@ export interface EntityCollection<M extends Record<string, any> = any, USER exte
      * the side dialog of an entity.
      */
     subcollections?: EntityCollection<any, any>[];
+    /**
+     * You can group subcollections and custom views into dropdown menus
+     * in the entity view tabs. Views listed in a group will be removed
+     * from the top-level tabs and shown under a single dropdown instead.
+     *
+     * @example
+     * ```tsx
+     * const productsCollection = buildCollection({
+     *     id: "products",
+     *     path: "products",
+     *     name: "Products",
+     *     properties: { ... },
+     *     subcollections: [localesCollection, reviewsCollection],
+     *     entityViews: [sampleView],
+     *     viewGroups: [
+     *         {
+     *             name: "Related data",
+     *             views: ["locales", "reviews", "sample_view"]
+     *         }
+     *     ]
+     * });
+     * ```
+     */
+    viewGroups?: ViewGroup[];
     /**
      * This interface defines all the callbacks that can be used when an entity
      * is being created, updated or deleted.
@@ -361,6 +385,20 @@ export interface KanbanConfig<M extends Record<string, any> = any> {
      */
     columnProperty: Extract<keyof M, string>;
 }
+/**
+ * You can group subcollections and custom views into dropdown menus in the entity view tabs.
+ * @group Collections
+ */
+export interface ViewGroup {
+    /**
+     * Name of the group
+     */
+    name: string;
+    /**
+     * Array of subcollection paths/ids or custom view keys
+     */
+    views: string[];
+}
 /**
  * View mode for displaying a collection.
  * @group Collections

package/dist/types/properties.d.ts

@@ -125,6 +125,15 @@ export interface BaseProperty<T extends CMSType, CustomProps = any> {
      * @see https://jsonlogic.com/ for JSON Logic syntax
      */
     conditions?: PropertyConditions;
+    /**
+     * Set this property to true to provide the UX to explicitly set the value to `null`.
+     * Defaults to `false`.
+     */
+    nullable?: boolean;
+    /**
+     * @deprecated Use `nullable` instead.
+     */
+    clearable?: boolean;
 }
 /**
  * @group Entity properties
@@ -473,10 +482,6 @@ export interface NumberProperty extends BaseProperty<number> {
      * Rules for validating this property
      */
     validation?: NumberPropertyValidationSchema;
-    /**
-     * Add an icon to clear the value and set it to `null`. Defaults to `false`
-     */
-    clearable?: boolean;
 }
 /**
  * @group Entity properties
@@ -569,10 +574,6 @@ export interface StringProperty extends BaseProperty<string> {
      * Rules for validating this property
      */
     validation?: StringPropertyValidationSchema;
-    /**
-     * Add an icon to clear the value and set it to `null`. Defaults to `false`
-     */
-    clearable?: boolean;
     /**
      * You can use this property (a string) to behave as a reference to another
      * collection. The stored value is the ID of the entity in the

package/dist/types/translations.d.ts

@@ -412,6 +412,8 @@ export interface FireCMSTranslations {
     cms_users: string;
     roles_menu: string;
     project_settings: string;
+    firestore_explorer: string;
+    explore_your_firestore_data: string;
     build_admin_panel_in_minutes: string;
     go_live_instantly: string;
     create_production_ready_back_offices: string;
@@ -643,4 +645,25 @@ export interface FireCMSTranslations {
     settings_appcheck_refresh_note: string;
     settings_appcheck_updated: string;
     settings_appcheck_error: string;
+    missing_firestore_security_rules: string;
+    firecms_cloud_requires_security_rule: string;
+    cannot_be_accessed_without_it: string;
+    required_security_rule: string;
+    fix_automatically: string;
+    open_firebase_rules: string;
+    security_rules_updated_successfully: string;
+    sec_rules_fixing: string;
+    sec_rules_fixed: string;
+    marketplace_managed_by_gcp: string;
+    marketplace_billing_note: string;
+    marketplace_manage_in_gcp_console: string;
+    marketplace_plan_changes_note: string;
+    marketplace_welcome_title: string;
+    marketplace_welcome_subtitle: string;
+    marketplace_select_or_create_project: string;
+    marketplace_link_project: string;
+    marketplace_linking: string;
+    marketplace_link_success: string;
+    marketplace_link_error: string;
+    marketplace_no_account_id: string;
 }

package/dist/util/index.d.ts

@@ -25,3 +25,4 @@ export * from "./useTraceUpdate";
 export * from "./storage";
 export * from "./callbacks";
 export * from "./conditions";
+export * from "./lazy_eager";

package/dist/util/lazy_eager.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+/**
+ * Returns a React.lazy component that is also preloaded immediately using
+ * requestIdleCallback or setTimeout.
+ * This ensures that chunks are split, but fetched in the background before they are actually needed.
+ */
+export declare function lazyEager<T extends React.ComponentType<any>>(factory: () => Promise<any>, exportName?: string): React.LazyExoticComponent<T>;

package/dist/util/objects.d.ts

@@ -10,3 +10,4 @@ export declare function removeUndefined(value: any, removeEmptyStrings?: boolean
 export declare function removeNulls(value: any): any;
 export declare function isEmptyObject(obj: object): boolean;
 export declare function removePropsIfExisting(source: any, comparison: any): any;
+export declare function jsonStringifyReplacer(key: string, value: any): any;

package/dist/util/property_utils.d.ts

@@ -2,7 +2,7 @@ import React from "react";
 import { AuthController, EntityCollection, PropertiesOrBuilders, PropertyConfig, PropertyOrBuilder, ResolvedProperties, ResolvedProperty } from "../types";
 export declare function isReferenceProperty(authController: AuthController, propertyOrBuilder: PropertyOrBuilder, fields: Record<string, PropertyConfig>): boolean | null;
 export declare function getIdIcon(size: "small" | "medium" | "large"): React.ReactNode;
-export declare function getIconForWidget(widget: PropertyConfig | undefined, size: "small" | "medium" | "large"): import("react/jsx-runtime").JSX.Element;
+export declare function getIconForWidget(widget: PropertyConfig | undefined, size: "small" | "medium" | "large"): React.JSX.Element;
 export declare function getIconForProperty(property: PropertyOrBuilder<any> | ResolvedProperty<any>, size?: "small" | "medium" | "large", fields?: Record<string, PropertyConfig>): React.ReactNode;
 export declare function getColorForProperty(property: PropertyOrBuilder, fields: Record<string, PropertyConfig>): string;
 /**

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@firecms/core",
   "type": "module",
-  "version": "3.2.0",
+  "version": "3.3.0-canary.2064433",
   "description": "Awesome Firebase/Firestore-based headless open-source CMS",
   "funding": {
     "url": "https://github.com/sponsors/firecmsco"
@@ -10,7 +10,7 @@
   "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "https://github.com/firecmsco/firecms.git",
+    "url": "https://github.com/FireCMSco/firecms.git",
     "directory": "packages/firecms_core"
   },
   "main": "./dist/index.umd.js",
@@ -53,8 +53,8 @@
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/modifiers": "^9.0.0",
     "@dnd-kit/sortable": "^10.0.0",
-    "@firecms/formex": "3.2.0",
-    "@firecms/ui": "3.2.0",
+    "@firecms/formex": "^3.3.0-canary.2064433",
+    "@firecms/ui": "^3.3.0-canary.2064433",
     "@floating-ui/dom": "^1.7.4",
     "@radix-ui/react-portal": "^1.1.10",
     "@radix-ui/react-slot": "^1.2.4",
@@ -136,7 +136,7 @@
     "dist",
     "src"
   ],
-  "gitHead": "4c3b8f2c16265fcdd6bf443cf5b420a7a7332d9d",
+  "gitHead": "9ecf37abf793bd2f2daaaed6f517ee5ee19b01ae",
   "publishConfig": {
     "access": "public"
   },

package/src/components/EntityCollectionTable/EntityCollectionRowActions.tsx

@@ -5,6 +5,7 @@ import { Badge, Checkbox, cls, IconButton, Menu, MenuItem, MoreVertIcon, Skeleto
 import { useFireCMSContext, useLargeLayout } from "../../hooks";
 import { getEntityFromCache } from "../../util/entity_cache";
 import { getLocalChangesBackup } from "../../util";
+import { getChanges } from "../../form/EntityForm";
 
 /**
  *
@@ -81,13 +82,18 @@ export const EntityCollectionRowActions = function EntityCollectionRowActions({
     const collapsedActions = actions.filter(a => a.collapsed || a.collapsed === undefined);
     const uncollapsedActions = actions.filter(a => a.collapsed === false);
     const enableLocalChangesBackup = collection ? getLocalChangesBackup(collection) : false;
-    const hasDraft = enableLocalChangesBackup ? getEntityFromCache(fullPath + "/" + entity.id) : false;
+    const cachedData = enableLocalChangesBackup ? getEntityFromCache(fullPath + "/" + entity.id) : undefined;
+    const hasDraft = (() => {
+        if (!cachedData || typeof cachedData !== "object" || Object.keys(cachedData).length === 0) return false;
+        const realChanges = getChanges(cachedData as any, (entity?.values ?? {}) as any);
+        return Object.keys(realChanges).length > 0;
+    })();
     const iconSize = largeLayout && (size === "m" || size === "l" || size == "xl") ? "medium" : "small";
 
     const content = (
         <div
             className={cls(
-                "h-full flex items-center justify-center flex-col bg-surface-50 dark:bg-surface-900 bg-opacity-90 bg-surface-50/90 dark:bg-opacity-90 dark:bg-surface-900/90 z-10",
+                "h-full flex items-center justify-center flex-col bg-surface-50 dark:bg-surface-900 bg-opacity-90 bg-surface-50/90 dark:bg-opacity-90 dark:bg-surface-900/90 z-10 shrink-0",
                 frozen ? "sticky left-0" : ""
             )}
             onClick={useCallback((event: any) => {
@@ -101,7 +107,7 @@ export const EntityCollectionRowActions = function EntityCollectionRowActions({
             }}>
 
             {(hasActions || selectionEnabled) &&
-                <div className="w-34 flex justify-center">
+                <div className="w-full flex justify-center">
 
                     {uncollapsedActions.map((action, index) => {
                         const isEditAction = action.key === "edit";

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

@@ -23,14 +23,14 @@ export function getTablePropertyColumnWidth(property: ResolvedProperty): number
     if (property.dataType === "string") {
         if (property.url) {
             return 280;
+        } else if (property.markdown) {
+            return 300;
         } else if (property.storage) {
             return 160;
         } else if (property.enumValues) {
             return 200;
         } else if (property.multiline) {
             return 300;
-        } else if (property.markdown) {
-            return 300;
         } else if (property.email) {
             return 200;
         } else {

package/src/components/EntityCollectionView/EntityCollectionView.tsx

@@ -904,11 +904,9 @@ export const EntityCollectionView = React.memo(
                 />
 
                 {/* View content - only the view-specific content changes */}
-                {tableController.dataLoadingError && pluginErrorView}
-                {tableController.dataLoadingError && !pluginErrorView && (
-                    <CollectionDataErrorBanner error={tableController.dataLoadingError} />
-                )}
-                {viewMode === "kanban" && enabledViews.includes("kanban") ? (
+                {tableController.dataLoadingError ? (
+                    pluginErrorView ?? <CollectionDataErrorBanner error={tableController.dataLoadingError} />
+                ) : viewMode === "kanban" && enabledViews.includes("kanban") ? (
                     <EntityCollectionBoardView
                         key={`kanban-view-${fullPath}-${selectedKanbanProperty}`}
                         collection={collection}

package/src/components/EntityJsonPreview.tsx

@@ -1,9 +1,10 @@
 import React, { useRef } from "react";
 import { Highlight, themes } from "prism-react-renderer";
 import { useModeController } from "../hooks";
+import { jsonStringifyReplacer } from "../util/objects";
 
 export function EntityJsonPreview({ values }: { values: object }) {
-    const code = JSON.stringify(values, null, "\t");
+    const code = JSON.stringify(values, jsonStringifyReplacer, "\t");
     const { mode } = useModeController();
     const preRef = useRef<HTMLPreElement>(null);
 

package/src/components/ErrorBoundary.tsx

@@ -35,10 +35,10 @@ export class ErrorBoundary extends React.Component<PropsWithChildren<Record<stri
 function FallbackView({ message }: { message?: string }) {
     const { t } = useTranslation();
     return (
-        <div className="h-full w-full bg-slate-100 flex items-center justify-center p-4">
+        <div className="h-full w-full bg-slate-100 dark:bg-surface-900 flex items-center justify-center p-4">
             <div
-                className="flex flex-col items-center justify-center m-4 bg-white dark:bg-gray-800 p-8 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700">
-                <div className="flex items-center mb-4 text-red-500">
+                className="flex flex-col items-center justify-center m-4 bg-white dark:bg-surface-800 p-8 rounded-lg shadow-sm border border-gray-200 dark:border-surface-700">
+                <div className="flex items-center mb-4 text-red-500 dark:text-red-400">
                     <ErrorIcon/>
                     <div className="ml-4">{t("error")}</div>
                 </div>

package/src/components/VirtualTable/VirtualTable.tsx

@@ -126,6 +126,7 @@ export const VirtualTable = React.memo<VirtualTableProps<any>>(
         AddColumnComponent,
         initialScroll = 0,
         onColumnsOrderChange,
+        headerIconSize,
     }: VirtualTableProps<T>) {
 
         const sortByProperty: string | undefined = sortBy ? sortBy[0] : undefined;
@@ -211,7 +212,7 @@ export const VirtualTable = React.memo<VirtualTableProps<any>>(
         }, [tableRef]);
 
         const [measureRef, bounds] = useMeasure({
-            debounce: 50,
+            debounce: 0,
             polyfill: ResizeObserver,
             scroll: true,
             // This is important for handling zooming in react-flow
@@ -369,8 +370,9 @@ export const VirtualTable = React.memo<VirtualTableProps<any>>(
                 setColumns(newColumns);
                 onColumnsOrderChange(newColumns);
             } : undefined,
-            draggingColumnId
-        }), [data, rowHeight, cellRenderer, columns, currentSort, onRowClick, customView, onColumnResizeInternal, onColumnResizeEndInternal, filterInput, onColumnSort, onFilterUpdateInternal, sortByProperty, hoverRow, createFilterField, rowClassName, endAdornment, AddColumnComponent, onColumnsOrderChange, draggingColumnId]);
+            draggingColumnId,
+            headerIconSize,
+        }), [data, rowHeight, cellRenderer, columns, currentSort, onRowClick, customView, onColumnResizeInternal, onColumnResizeEndInternal, filterInput, onColumnSort, onFilterUpdateInternal, sortByProperty, hoverRow, createFilterField, rowClassName, endAdornment, AddColumnComponent, onColumnsOrderChange, draggingColumnId, headerIconSize]);
 
         // Get sortable column keys (excluding frozen columns)
         const sortableColumnKeys = columns

package/src/components/VirtualTable/VirtualTableHeader.tsx

@@ -48,6 +48,7 @@ type VirtualTableHeaderProps<M extends Record<string, any>> = {
     AdditionalHeaderWidget?: (props: { onHover: boolean }) => React.ReactNode;
     isDragging?: boolean;
     isDraggable?: boolean;
+    headerIconSize?: "small" | "smallest";
 };
 
 export const VirtualTableHeader = React.memo<VirtualTableHeaderProps<any>>(
@@ -64,7 +65,8 @@ export const VirtualTableHeader = React.memo<VirtualTableHeaderProps<any>>(
         createFilterField,
         AdditionalHeaderWidget,
         isDragging,
-        isDraggable
+        isDraggable,
+        headerIconSize = "small",
     }: VirtualTableHeaderProps<M>) {
 
         const [onHover, setOnHover] = useState(false);
@@ -136,18 +138,17 @@ export const VirtualTableHeader = React.memo<VirtualTableHeaderProps<any>>(
                             <Badge color="secondary"
                                 invisible={!sort}>
                                 <IconButton
-                                    size={"small"}
+                                    size={headerIconSize}
                                     className={onHover || openFilter ? "bg-white dark:bg-surface-950" : undefined}
                                     onClick={() => {
                                         onColumnSort(column.key as Extract<keyof M, string>);
                                     }}
                                 >
-                                    {!sort &&
-                                        <ArrowUpwardIcon />}
-                                    {sort === "asc" &&
-                                        <ArrowUpwardIcon />}
-                                    {sort === "desc" &&
-                                        <ArrowUpwardIcon className={"rotate-180"} />}
+                                    <ArrowUpwardIcon size={headerIconSize}
+                                                     className={cls(
+                                                         "transition-transform duration-200",
+                                                         sort === "desc" ? "rotate-180" : "rotate-0"
+                                                     )} />
                                 </IconButton>
                             </Badge>
                         }

package/src/components/VirtualTable/VirtualTableHeaderRow.tsx

@@ -22,7 +22,8 @@ const SortableColumnHeader = ({
     onClickResizeColumn,
     createFilterField,
     isDragging,
-    isDraggable
+    isDraggable,
+    headerIconSize
 }: {
     column: VirtualTableColumn;
     columnIndex: number;
@@ -37,6 +38,7 @@ const SortableColumnHeader = ({
     createFilterField: any;
     isDragging: boolean;
     isDraggable: boolean;
+    headerIconSize?: "small" | "smallest";
 }) => {
     const [isPressing, setIsPressing] = useState(false);
 
@@ -103,7 +105,8 @@ const SortableColumnHeader = ({
                 createFilterField={createFilterField}
                 AdditionalHeaderWidget={column.AdditionalHeaderWidget}
                 isDragging={isDragging || isPressing}
-                isDraggable={isDraggable} />
+                isDraggable={isDraggable}
+                headerIconSize={headerIconSize} />
         </div>
     );
 };
@@ -123,7 +126,8 @@ export const VirtualTableHeaderRow = ({
     data,
     cellRenderer: CellRenderer,
     rowHeight = 54,
-    draggingColumnId
+    draggingColumnId,
+    headerIconSize,
 }: VirtualTableContextProps<any>) => {
 
     const columnRefs = useMemo(() => columns.map(() => createRef<HTMLDivElement>()), [columns.length]);
@@ -234,6 +238,7 @@ export const VirtualTableHeaderRow = ({
                                 createFilterField={createFilterField}
                                 isDragging={isDragging}
                                 isDraggable={isDraggable}
+                                headerIconSize={headerIconSize}
                             />
                         </ErrorBoundary>
                     );

package/src/components/VirtualTable/VirtualTableProps.tsx

@@ -168,6 +168,12 @@ export interface VirtualTableProps<T extends Record<string, any>> {
      */
     onColumnsOrderChange?: (columns: VirtualTableColumn[]) => void;
 
+    /**
+     * Size of icons in column headers (sort, filter).
+     * @default "small"
+     */
+    headerIconSize?: "small" | "smallest";
+
 }
 
 export type CellRendererParams<T = any> = {
@@ -206,7 +212,7 @@ export interface VirtualTableColumn<CustomProps = any> {
     /**
      * Label displayed in the header
      */
-    title?: string;
+    title?: React.ReactNode;
 
     /**
      * This column is frozen to the left

package/src/components/VirtualTable/types.tsx

@@ -42,4 +42,5 @@ export type VirtualTableContextProps<T extends any> = {
     AddColumnComponent?: React.ComponentType;
     onColumnsOrderChange?: (columns: VirtualTableColumn[]) => void;
     draggingColumnId?: string | null;
+    headerIconSize?: "small" | "smallest";
 };

package/src/core/DrawerNavigationGroup.tsx

@@ -83,7 +83,7 @@ export function DrawerNavigationGroup({
                         color={"secondary"}
                         className="font-medium flex-grow line-clamp-1"
                     >
-                        {(group || t("views_group")).toUpperCase()}
+                        {(group && group !== "__default__" ? group : t("views_group")).toUpperCase()}
                     </Typography>
                     {headerActions && (
                         <div onClick={(e) => e.stopPropagation()}>