@firecms/core 3.0.0 → 3.1.0-canary.1df3b2c

package/src/components/VirtualTable/VirtualTableCell.tsx

@@ -13,6 +13,13 @@ type VirtualTableCellProps<T extends any> = {
     rowIndex: any;
     columnIndex: number;
     cellRenderer: React.ComponentType<CellRendererParams<T>>;
+    // Sortable props
+    sortableNodeRef?: (node: HTMLElement | null) => void;
+    sortableStyle?: React.CSSProperties;
+    sortableAttributes?: Record<string, any>;
+    isDragging?: boolean;
+    isDraggable?: boolean;
+    frozen?: boolean;
 };
 
 export const VirtualTableCell = React.memo<VirtualTableCellProps<any>>(
@@ -27,7 +34,13 @@ export const VirtualTableCell = React.memo<VirtualTableCellProps<any>>(
                 column: props.column,
                 columns: props.columns,
                 columnIndex: props.columnIndex,
-                width: props.column.width
+                width: props.column.width,
+                sortableNodeRef: props.sortableNodeRef,
+                sortableStyle: props.sortableStyle,
+                sortableAttributes: props.sortableAttributes,
+                isDragging: props.isDragging,
+                isDraggable: props.isDraggable,
+                frozen: props.frozen
             } as CellRendererParams<T>
         );
     },
@@ -37,6 +50,9 @@ export const VirtualTableCell = React.memo<VirtualTableCellProps<any>>(
             equal(a.cellData, b.cellData) &&
             equal(a.rowIndex, b.rowIndex) &&
             equal(a.cellRenderer, b.cellRenderer) &&
-            equal(a.columnIndex, b.columnIndex)
+            equal(a.columnIndex, b.columnIndex) &&
+            a.isDragging === b.isDragging &&
+            a.isDraggable === b.isDraggable &&
+            a.frozen === b.frozen
     }
 );

package/src/components/VirtualTable/VirtualTableHeader.tsx

@@ -45,6 +45,8 @@ type VirtualTableHeaderProps<M extends Record<string, any>> = {
     onClickResizeColumn?: (columnIndex: number, column: VirtualTableColumn) => void;
     createFilterField?: (props: FilterFormFieldProps<any>) => React.ReactNode;
     AdditionalHeaderWidget?: (props: { onHover: boolean }) => React.ReactNode;
+    isDragging?: boolean;
+    isDraggable?: boolean;
 };
 
 export const VirtualTableHeader = React.memo<VirtualTableHeaderProps<any>>(
@@ -59,7 +61,9 @@ export const VirtualTableHeader = React.memo<VirtualTableHeaderProps<any>>(
                                                                    column,
                                                                    onClickResizeColumn,
                                                                    createFilterField,
-                                                                   AdditionalHeaderWidget
+                                                                   AdditionalHeaderWidget,
+                                                                   isDragging,
+                                                                   isDraggable
                                                                }: VirtualTableHeaderProps<M>) {
 
         const [onHover, setOnHover] = useState(false);
@@ -85,14 +89,16 @@ export const VirtualTableHeader = React.memo<VirtualTableHeaderProps<any>>(
         return (
             <ErrorBoundary>
                 <div
-                    className={cls("flex py-0 px-3 h-full text-xs uppercase font-semibold relative select-none items-center bg-surface-50 dark:bg-surface-900",
+                    className={cls("flex py-0 px-3 h-full text-xs uppercase font-semibold relative select-none items-center",
+                        isDragging
+                            ? "bg-primary-bg dark:bg-primary-bg-dark"
+                            : "bg-surface-50 dark:bg-surface-900",
                         "text-text-secondary hover:text-text-primary dark:text-text-secondary-dark dark:hover:text-text-primary-dark",
-                        "hover:bg-surface-100 dark:hover:bg-surface-800 hover:bg-opacity-50 dark:hover:bg-opacity-50",
-                        column.frozen ? "sticky left-0 z-10" : "relative z-0"
+                        !isDragging && "hover:bg-surface-100 dark:hover:bg-surface-800 hover:bg-opacity-50 hover:bg-surface-100/50 dark:hover:bg-opacity-50 dark:hover:bg-surface-800/50",
+                        column.frozen ? "sticky left-0 z-10" : "relative z-0",
+                        isDraggable && "cursor-grab"
                     )}
                     style={{
-                        // transition: "color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms",
-                        // fontSize: "0.750rem",
                         left: column.frozen ? 0 : undefined,
                         minWidth: column.width,
                         maxWidth: column.width
@@ -179,11 +185,17 @@ export const VirtualTableHeader = React.memo<VirtualTableHeaderProps<any>>(
 
                     {column.resizable && <div
                         ref={resizeHandleRef}
+                        data-no-dnd="true"
                         className={cls(
                             "absolute h-full w-[6px] top-0 right-0 cursor-col-resize",
                             hovered && "bg-surface-300 dark:bg-surface-700"
                         )}
-                        onMouseDown={onClickResizeColumn ? () => onClickResizeColumn(columnIndex, column) : undefined}
+                        onPointerDown={(e) => {
+                            e.stopPropagation();
+                            if (onClickResizeColumn) {
+                                onClickResizeColumn(columnIndex, column);
+                            }
+                        }}
                     />}
                 </div>
 
@@ -243,7 +255,7 @@ function FilterForm<M>({
                 className={cls(defaultBorderMixin, "py-4 px-6 typography-label border-b")}>
                 {column.title ?? id}
             </div>
-            {filterField && <div className="m-4">
+            {filterField && <div className="m-4 w-[400px]">
                 {filterField}
             </div>}
             <div className="flex justify-end m-4">
@@ -251,13 +263,10 @@ function FilterForm<M>({
                     className="mr-4"
                     disabled={!filterIsSet}
                     variant={"text"}
-                    color="primary"
                     type="reset"
                     aria-label="filter clear"
                     onClick={reset}>Clear</Button>
                 <Button
-                    variant="outlined"
-                    color="primary"
                     type="submit">Filter</Button>
             </div>
         </form>

package/src/components/VirtualTable/VirtualTableHeaderRow.tsx

@@ -1,25 +1,132 @@
-import React, { createRef, useCallback, useEffect, useState } from "react";
+import React, { createRef, useCallback, useEffect, useMemo, useState } from "react";
 
 import { VirtualTableColumn, VirtualTableWhereFilterOp } from "./VirtualTableProps";
 import { ErrorBoundary } from "../ErrorBoundary";
 import { VirtualTableHeader } from "./VirtualTableHeader";
 import { VirtualTableContextProps } from "./types";
 import { cls, defaultBorderMixin } from "@firecms/ui";
+import { useSortable } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+
+// Sortable column header wrapper
+const SortableColumnHeader = ({
+    column,
+    columnIndex,
+    columnRefs,
+    isResizing,
+    onFilterUpdate,
+    filter,
+    sortByProperty,
+    currentSort,
+    onColumnSort,
+    onClickResizeColumn,
+    createFilterField,
+    isDragging,
+    isDraggable
+}: {
+    column: VirtualTableColumn;
+    columnIndex: number;
+    columnRefs: React.RefObject<HTMLDivElement>[];
+    isResizing: number;
+    onFilterUpdate: any;
+    filter: [VirtualTableWhereFilterOp, any] | undefined;
+    sortByProperty: string | undefined;
+    currentSort: "asc" | "desc" | undefined;
+    onColumnSort: any;
+    onClickResizeColumn: (index: number) => void;
+    createFilterField: any;
+    isDragging: boolean;
+    isDraggable: boolean;
+}) => {
+    const [isPressing, setIsPressing] = useState(false);
+
+    const {
+        attributes,
+        listeners,
+        setNodeRef,
+        transform,
+        transition,
+    } = useSortable({
+        id: column.key,
+        disabled: !isDraggable || column.frozen
+    });
+
+    const style = {
+        // Only use translate, ignore any scale transforms
+        transform: transform ? `translateX(${transform.x}px)` : undefined,
+        // Don't transition the dragged item - only other items should animate
+        transition: isDragging ? undefined : transition,
+        minWidth: column.width,
+        maxWidth: column.width,
+        width: column.width,
+    };
+
+    // Combine our press handlers with dnd-kit listeners
+    const combinedListeners = isDraggable ? {
+        ...listeners,
+        onPointerDown: (e: React.PointerEvent) => {
+            setIsPressing(true);
+            listeners?.onPointerDown?.(e);
+        },
+        onPointerUp: () => setIsPressing(false),
+        onPointerCancel: () => setIsPressing(false),
+    } : {};
+
+    // Reset pressing state when drag ends
+    React.useEffect(() => {
+        if (!isDragging) {
+            setIsPressing(false);
+        }
+    }, [isDragging]);
+
+    return (
+        <div
+            ref={setNodeRef}
+            style={style}
+            className={cls(
+                "flex-shrink-0 h-full",
+                column.frozen && "sticky left-0 z-10"
+            )}
+            {...attributes}
+            {...combinedListeners}
+        >
+            <VirtualTableHeader
+                resizeHandleRef={columnRefs[columnIndex]}
+                columnIndex={columnIndex}
+                isResizingIndex={isResizing}
+                onFilterUpdate={onFilterUpdate}
+                filter={filter}
+                sort={sortByProperty === column.key ? currentSort : undefined}
+                onColumnSort={onColumnSort}
+                onClickResizeColumn={onClickResizeColumn}
+                column={column}
+                createFilterField={createFilterField}
+                AdditionalHeaderWidget={column.AdditionalHeaderWidget}
+                isDragging={isDragging || isPressing}
+                isDraggable={isDraggable} />
+        </div>
+    );
+};
 
 export const VirtualTableHeaderRow = ({
-                                          columns,
-                                          currentSort,
-                                          onColumnSort,
-                                          onFilterUpdate,
-                                          sortByProperty,
-                                          filter,
-                                          onColumnResize,
-                                          onColumnResizeEnd,
-                                          createFilterField,
-                                          AddColumnComponent
-                                      }: VirtualTableContextProps<any>) => {
-
-    const columnRefs = columns.map(() => createRef<HTMLDivElement>());
+    columns,
+    currentSort,
+    onColumnSort,
+    onFilterUpdate,
+    sortByProperty,
+    filter,
+    onColumnResize,
+    onColumnResizeEnd,
+    createFilterField,
+    AddColumnComponent,
+    onColumnsOrderChange,
+    data,
+    cellRenderer: CellRenderer,
+    rowHeight = 54,
+    draggingColumnId
+}: VirtualTableContextProps<any>) => {
+
+    const columnRefs = useMemo(() => columns.map(() => createRef<HTMLDivElement>()), [columns.length]);
     const [isResizing, setIsResizing] = useState(-1);
 
     const adjustWidthColumn = useCallback((index: number, width: number, end: boolean) => {
@@ -99,33 +206,42 @@ export const VirtualTableHeaderRow = ({
     }, [setCursorDocument]);
 
     return (
-        <div
-            className={cls(defaultBorderMixin, "z-20 sticky min-w-full flex w-fit flex-row top-0 left-0 h-12 border-b bg-surface-50 dark:bg-surface-900")}>
-            {columns.map((c, columnIndex) => {
-                const column = columns[columnIndex];
-
-                const filterForThisProperty: [VirtualTableWhereFilterOp, any] | undefined =
-                    column && filter && filter[column.key]
-                        ? filter[column.key]
-                        : undefined;
-                return <ErrorBoundary key={"header_" + column.key}>
-                    <VirtualTableHeader
-                        resizeHandleRef={columnRefs[columnIndex]}
-                        columnIndex={columnIndex}
-                        isResizingIndex={isResizing}
-                        onFilterUpdate={onFilterUpdate}
-                        filter={filterForThisProperty}
-                        sort={sortByProperty === column.key ? currentSort : undefined}
-                        onColumnSort={onColumnSort}
-                        onClickResizeColumn={onClickResizeColumn}
-                        column={column}
-                        createFilterField={createFilterField}
-                        AdditionalHeaderWidget={column.AdditionalHeaderWidget}/>
-                </ErrorBoundary>;
-            })}
-
-            {AddColumnComponent && <AddColumnComponent/>}
-
-        </div>
+        <>
+            <div
+                className={cls(defaultBorderMixin, "z-20 sticky min-w-full flex w-fit flex-row top-0 left-0 h-12 border-b bg-surface-50 dark:bg-surface-900")}>
+                {columns.map((column, columnIndex) => {
+                    const filterForThisProperty: [VirtualTableWhereFilterOp, any] | undefined =
+                        column && filter && filter[column.key]
+                            ? filter[column.key]
+                            : undefined;
+
+                    const isDraggable = !column.frozen && !!onColumnsOrderChange;
+                    const isDragging = draggingColumnId === column.key;
+
+                    return (
+                        <ErrorBoundary key={"header_" + column.key}>
+                            <SortableColumnHeader
+                                column={column}
+                                columnIndex={columnIndex}
+                                columnRefs={columnRefs}
+                                isResizing={isResizing}
+                                onFilterUpdate={onFilterUpdate}
+                                filter={filterForThisProperty}
+                                sortByProperty={sortByProperty}
+                                currentSort={currentSort}
+                                onColumnSort={onColumnSort}
+                                onClickResizeColumn={onClickResizeColumn}
+                                createFilterField={createFilterField}
+                                isDragging={isDragging}
+                                isDraggable={isDraggable}
+                            />
+                        </ErrorBoundary>
+                    );
+                })}
+
+                {AddColumnComponent && <AddColumnComponent />}
+
+            </div>
+        </>
     );
 };

package/src/components/VirtualTable/VirtualTableProps.tsx

@@ -38,7 +38,7 @@ export interface VirtualTableProps<T extends Record<string, any>> {
      * @param sortBy
      */
     checkFilterCombination?: (filterValues: VirtualTableFilterValues<Extract<keyof T, string>>,
-                              sortBy?: [string, "asc" | "desc"]) => boolean;
+        sortBy?: [string, "asc" | "desc"]) => boolean;
 
     /**
      * A callback function when scrolling the table to near the end
@@ -162,6 +162,12 @@ export interface VirtualTableProps<T extends Record<string, any>> {
      */
     initialScroll?: number;
 
+    /**
+     * Callback when columns are reordered via drag-and-drop.
+     * @param columns The new column order
+     */
+    onColumnsOrderChange?: (columns: VirtualTableColumn[]) => void;
+
 }
 
 export type CellRendererParams<T = any> = {
@@ -172,6 +178,13 @@ export type CellRendererParams<T = any> = {
     rowIndex: number;
     width: number;
     isScrolling?: boolean;
+    // Sortable props for dnd-kit integration
+    sortableNodeRef?: (node: HTMLElement | null) => void;
+    sortableStyle?: React.CSSProperties;
+    sortableAttributes?: Record<string, any>;
+    isDragging?: boolean;
+    isDraggable?: boolean;
+    frozen?: boolean;
 };
 
 /**

package/src/components/VirtualTable/VirtualTableRow.tsx

@@ -29,7 +29,7 @@ export const VirtualTableRow = React.memo<VirtualTableRowProps<any>>(
         return (
             <div
                 className={cls(
-                    "flex min-w-full text-sm border-b border-surface-200 dark:border-surface-800 border-opacity-40 dark:border-opacity-40",
+                    "flex min-w-full text-sm border-b border-surface-200 dark:border-surface-800 border-opacity-40 border-surface-200/40 dark:border-opacity-40 dark:border-surface-800/40",
                     rowClassName ? rowClassName(rowData) : "",
                     {
                         "hover:bg-opacity-95": hoverRow,

package/src/components/VirtualTable/fields/VirtualTableDateField.tsx

@@ -6,6 +6,7 @@ export function VirtualTableDateField(props: {
     name: string;
     error: Error | undefined;
     mode?: "date" | "date_time";
+    timezone?: string;
     internalValue: Date | undefined | null;
     updateValue: (newValue: (Date | null)) => void;
     focused: boolean;
@@ -18,6 +19,7 @@ export function VirtualTableDateField(props: {
         disabled,
         error,
         mode,
+        timezone,
         internalValue,
         updateValue
     } = props;
@@ -31,6 +33,7 @@ export function VirtualTableDateField(props: {
             inputClassName={cls("w-full h-full", focusedDisabled)}
             className={cls("w-full h-full", focusedDisabled)}
             mode={mode}
+            timezone={timezone}
             locale={locale}
         />
     );

package/src/components/VirtualTable/fields/VirtualTableSelect.tsx

@@ -62,9 +62,19 @@ export function VirtualTableSelect(props: {
             key={`${enumKey}`}
             enumKey={String(enumKey)}
             enumValues={enumValues}
-            size={small ? "small" : "medium"}/>;
+            size={small ? "small" : "medium"} />;
     };
 
+    // When the dropdown closes (including on escape), restore focus to the trigger
+    const handleOpenChange = useCallback((open: boolean) => {
+        if (!open && ref.current) {
+            // Use setTimeout to ensure focus is restored after Radix finishes its cleanup
+            setTimeout(() => {
+                ref.current?.focus({ preventScroll: true });
+            }, 0);
+        }
+    }, []);
+
     return (
         multiple
             ? <MultiSelect
@@ -77,7 +87,8 @@ export function VirtualTableSelect(props: {
                 value={validValue
                     ? ((internalValue as any[]).map(v => v.toString()))
                     : ([])}
-                onValueChange={onChange}>
+                onValueChange={onChange}
+                onOpenChange={handleOpenChange}>
                 {enumValues?.map((enumConfig) => (
                     <MultiSelectItem
                         key={enumConfig.id}
@@ -85,7 +96,7 @@ export function VirtualTableSelect(props: {
                         <EnumValuesChip
                             enumKey={enumConfig.id}
                             enumValues={enumValues}
-                            size={small ? "small" : "medium"}/>
+                            size={small ? "small" : "medium"} />
                     </MultiSelectItem>
                 ))}
             </MultiSelect>
@@ -94,6 +105,7 @@ export function VirtualTableSelect(props: {
                 size={"large"}
                 fullWidth={true}
                 className="w-full h-full p-0 bg-transparent"
+                inputClassName="focus:ring-0 focus-visible:ring-0 outline-none focus:outline-none focus-visible:outline-none"
                 position={"item-aligned"}
                 disabled={disabled}
                 padding={false}
@@ -101,6 +113,7 @@ export function VirtualTableSelect(props: {
                     ? internalValue?.toString()
                     : ""}
                 onValueChange={onChange}
+                onOpenChange={handleOpenChange}
                 renderValue={renderValue}>
                 {enumValues?.map((enumConfig) => (
                     <SelectItem
@@ -109,7 +122,7 @@ export function VirtualTableSelect(props: {
                         <EnumValuesChip
                             enumKey={enumConfig.id}
                             enumValues={enumValues}
-                            size={small ? "small" : "medium"}/>
+                            size={small ? "small" : "medium"} />
                     </SelectItem>
                 ))}
             </Select>

package/src/components/VirtualTable/types.tsx

@@ -40,4 +40,6 @@ export type VirtualTableContextProps<T extends any> = {
     rowClassName?: (rowData: T) => string | undefined;
     endAdornment?: React.ReactNode;
     AddColumnComponent?: React.ComponentType;
+    onColumnsOrderChange?: (columns: VirtualTableColumn[]) => void;
+    draggingColumnId?: string | null;
 };

package/src/components/common/useColumnsIds.tsx

@@ -1,5 +1,6 @@
 import { useMemo } from "react";
 import { EntityCollection, ResolvedEntityCollection, ResolvedProperty } from "../../types";
+import { getPropertyInPath } from "../../util";
 import { getSubcollectionColumnId } from "../EntityCollectionTable/internal/common";
 import { PropertyColumnConfig } from "../EntityCollectionTable/EntityCollectionTableProps";
 
@@ -16,15 +17,45 @@ export function useColumnIds<M extends Record<string, any>>(collection: Resolved
 
 function hideAndExpandKeys<M extends Record<string, any>>(collection: ResolvedEntityCollection<M>, keys: string[]): PropertyColumnConfig[] {
 
-    return keys.flatMap((key) => {
+    // First, figure out which spread map roots have individual child keys in the order
+    // If so, we should NOT auto-expand them - just use the explicit child keys
+    const rootsWithExplicitChildren = new Set<string>();
+    for (const key of keys) {
+        if (key.includes(".")) {
+            const rootKey = key.split(".")[0];
+            const rootProperty = collection.properties[rootKey];
+            if (rootProperty && rootProperty.dataType === "map" && rootProperty.spreadChildren && rootProperty.properties) {
+                rootsWithExplicitChildren.add(rootKey);
+            }
+        }
+    }
+
+    // Track processed keys to avoid duplicates
+    const processedPropertyKeys = new Set<string>();
+
+    const result = keys.flatMap((key) => {
+        // Skip if already processed (handles duplicates in propertiesOrder)
+        if (processedPropertyKeys.has(key)) return [null];
+
+        // Check if it's a top-level property
         const property = collection.properties[key];
         if (property) {
+            processedPropertyKeys.add(key);
             if (property.hideFromCollection)
                 return [null];
             if (property.disabled && typeof property.disabled === "object" && property.disabled.hidden)
                 return [null];
+
             if (property.dataType === "map" && property.spreadChildren && property.properties) {
-                return getColumnKeysForProperty(property, key);
+                // Check if this spread map has explicit child keys in propertiesOrder
+                if (rootsWithExplicitChildren.has(key)) {
+                    // DON'T auto-expand - the children are explicitly listed elsewhere
+                    return [null];
+                }
+                // Auto-expand all children
+                const childConfigs = getColumnKeysForProperty(property, key);
+                childConfigs.forEach(c => processedPropertyKeys.add(c.key));
+                return childConfigs;
             }
             return [{
                 key,
@@ -32,6 +63,33 @@ function hideAndExpandKeys<M extends Record<string, any>>(collection: ResolvedEn
             }];
         }
 
+        // Check if it's a nested key like "data.mode" (for spread map properties)
+        if (key.includes(".")) {
+            const rootKey = key.split(".")[0];
+            const rootProperty = collection.properties[rootKey];
+
+            if (rootProperty && rootProperty.dataType === "map" && rootProperty.properties) {
+                const nestedProperty = getPropertyInPath(collection.properties, key) as ResolvedProperty | undefined;
+                if (nestedProperty) {
+                    processedPropertyKeys.add(key);
+                    // Mark root as seen
+                    processedPropertyKeys.add(rootKey);
+
+                    if (nestedProperty.hideFromCollection)
+                        return [null];
+                    if (nestedProperty.disabled && typeof nestedProperty.disabled === "object" && nestedProperty.disabled.hidden)
+                        return [null];
+
+                    return [{
+                        key,
+                        disabled: Boolean(rootProperty.disabled) || Boolean(rootProperty.readOnly) ||
+                            Boolean(nestedProperty.disabled) || Boolean(nestedProperty.readOnly)
+                    }];
+                }
+            }
+        }
+
+        // Check additional fields
         const additionalField = collection.additionalFields?.find(field => field.key === key);
         if (additionalField) {
             return [{
@@ -40,6 +98,7 @@ function hideAndExpandKeys<M extends Record<string, any>>(collection: ResolvedEn
             }];
         }
 
+        // Check subcollections
         if (collection.subcollections) {
             const subCollection = collection.subcollections.find(subCol => getSubcollectionColumnId(subCol) === key);
             if (subCollection) {
@@ -50,6 +109,7 @@ function hideAndExpandKeys<M extends Record<string, any>>(collection: ResolvedEn
             }
         }
 
+        // Check collection group parent
         if (collection.collectionGroup && key === COLLECTION_GROUP_PARENT_ID) {
             return [{
                 key,
@@ -59,6 +119,37 @@ function hideAndExpandKeys<M extends Record<string, any>>(collection: ResolvedEn
 
         return [null];
     }).filter(Boolean) as PropertyColumnConfig[];
+
+    // Add any missing properties that weren't in propertiesOrder
+    // This ensures properties NEVER disappear
+    for (const propKey of Object.keys(collection.properties)) {
+        // Skip if already processed
+        if (processedPropertyKeys.has(propKey)) continue;
+
+        const property = collection.properties[propKey];
+        if (!property) continue;
+        if (property.hideFromCollection) continue;
+        if (property.disabled && typeof property.disabled === "object" && property.disabled.hidden) continue;
+
+        if (property.dataType === "map" && property.spreadChildren && property.properties) {
+            // For spread maps, add all children that weren't already added
+            const allChildConfigs = getColumnKeysForProperty(property, propKey);
+            for (const childConfig of allChildConfigs) {
+                if (!processedPropertyKeys.has(childConfig.key)) {
+                    result.push(childConfig);
+                    processedPropertyKeys.add(childConfig.key);
+                }
+            }
+        } else {
+            result.push({
+                key: propKey,
+                disabled: Boolean(property.disabled) || Boolean(property.readOnly)
+            });
+            processedPropertyKeys.add(propKey);
+        }
+    }
+
+    return result;
 }
 
 function getDefaultColumnKeys<M extends Record<string, any> = any>(collection: ResolvedEntityCollection<M>, includeSubCollections: boolean) {
@@ -69,7 +160,8 @@ function getDefaultColumnKeys<M extends Record<string, any> = any>(collection: R
 
     const columnIds: string[] = [
         ...propertyKeys,
-        ...additionalFields.map((field) => field.key)
+        // Filter out additional fields whose key already exists in propertyKeys to avoid duplicate column keys
+        ...additionalFields.filter((field) => !propertyKeys.includes(field.key)).map((field) => field.key)
     ];
 
     if (includeSubCollections) {

package/src/components/index.tsx

@@ -16,6 +16,8 @@ export * from "./SelectableTable/SelectableTable";
 export * from "./SelectableTable/SelectableTableContext";
 export * from "./EntityCollectionView/EntityCollectionView";
 export * from "./EntityCollectionView/EntityCollectionViewActions";
+export * from "./EntityCollectionView/EntityCollectionCardView";
+export * from "./EntityCollectionView/EntityCard";
 export * from "./EntityCollectionView/useSelectionController";
 
 export * from "./PropertyConfigBadge";
@@ -38,3 +40,5 @@ export * from "./SearchIconsView";
 export * from "./FieldCaption";
 
 export * from "./EntityPreview";
+
+export * from "./AIIcon";