@firecms/core 3.0.0-alpha.28 → 3.0.0-alpha.30

package/dist/styles.d.ts

@@ -1,4 +1,4 @@
-export declare const focusedMixin = "focus:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-opacity-75 focus-visible:ring-offset-2 focus-visible:ring-offset-transparent";
+export declare const focusedMixin = "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-opacity-75 focus-visible:ring-offset-2 focus-visible:ring-offset-transparent";
 export declare const focusedInvisibleMixin = "focus:bg-opacity-70 focus:bg-gray-100 focus:dark:bg-gray-800 focus:dark:bg-opacity-60";
 export declare const focusedClasses = "z-30 outline-none ring-2 ring-primary ring-opacity-75 ring-offset-2 ring-offset-transparent ";
 export declare const fieldBackgroundMixin = "bg-opacity-70 bg-gray-100 dark:bg-gray-800 dark:bg-opacity-60 transition duration-150 ease-in-out";

package/dist/types/collections.d.ts

@@ -6,6 +6,7 @@ import { EntityCallbacks } from "./entity_callbacks";
 import { Permissions, PermissionsBuilder } from "./permissions";
 import { EnumValues, PropertiesOrBuilders } from "./properties";
 import { FormContext } from "./fields";
+import { EntityAction } from "./entity_actions";
 /**
  * This interface represents a view that includes a collection of entities.
  * It can be in the root level of the configuration, defining the main
@@ -13,7 +14,7 @@ import { FormContext } from "./fields";
  *
  * @category Models
  */
-export interface EntityCollection<M extends Record<string, any> = any, AdditionalKey extends string = string, UserType extends User = User> {
+export interface EntityCollection<M extends Record<string, any> = any, UserType extends User = User> {
     /**
      * Name of the collection, typically plural.
      * E.g. `Products`, `Blog`
@@ -48,9 +49,9 @@ export interface EntityCollection<M extends Record<string, any> = any, Additiona
     alias?: string;
     /**
      * Icon key to use in this collection.
-     * You can use any of the icons in the MUI specs:
-     * https://mui.com/material-ui/material-icons/
-     * e.g. 'AccountTree' or 'Person'
+     * You can use any of the icons in the Material specs:
+     * https://fonts.google.com/icons
+     * e.g. 'account_tree' or 'person'
      */
     icon?: string;
     /**
@@ -80,7 +81,7 @@ export interface EntityCollection<M extends Record<string, any> = any, Additiona
      *     - If you are using a collection group, you will also have an
      *       additional `collectionGroupParent` column.
      */
-    propertiesOrder?: Extract<keyof M | AdditionalKey, string>[];
+    propertiesOrder?: Extract<keyof M, string>[];
     /**
      * If enabled, content is loaded in batches. If `false` all entities in the
      * collection are loaded.
@@ -97,7 +98,7 @@ export interface EntityCollection<M extends Record<string, any> = any, Additiona
      * Permissions the logged-in user can perform on this collection.
      * If not specified everything defaults to `true`.
      */
-    permissions?: Permissions | PermissionsBuilder<EntityCollection<M>, UserType, M>;
+    permissions?: Permissions | PermissionsBuilder<any, UserType, M>;
     /**
      * Are the entities in this collection selectable. Defaults to `true`
      */
@@ -119,6 +120,30 @@ export interface EntityCollection<M extends Record<string, any> = any, Additiona
      * collection toolbar
      */
     Actions?: React.ComponentType<CollectionActionsProps> | React.ComponentType<CollectionActionsProps>[];
+    /**
+     * You can define additional actions that can be performed on the entities
+     * in this collection. These actions can be displayed in the collection
+     * view or in the entity view.
+     *
+     * You can use the `onClick` method to implement your own logic.
+     * In the `context` prop you can access all the controllers of FireCMS.
+     *
+     * ```
+     * const archiveEntityAction: EntityAction = {
+     *     icon: <ArchiveIcon/>,
+     *     name: "Archive",
+     *     onClick({
+     *                 entity,
+     *                 collection,
+     *                 context,
+     *             }): Promise<void> {
+     *         // Add your code here
+     *         return Promise.resolve(undefined);
+     *     }
+     * }
+     * ```
+     */
+    entityActions?: EntityAction<M, UserType>[];
     /**
      * Pass your own selection controller if you want to control selected
      * entities externally.
@@ -163,7 +188,7 @@ export interface EntityCollection<M extends Record<string, any> = any, Additiona
      * You can add additional fields to the collection view by implementing
      * an additional field delegate.
      */
-    additionalFields?: AdditionalFieldDelegate<M, AdditionalKey, UserType>[];
+    additionalFields?: AdditionalFieldDelegate<M, UserType>[];
     /**
      * Default size of the rendered collection
      */
@@ -208,10 +233,8 @@ export interface EntityCollection<M extends Record<string, any> = any, Additiona
 }
 /**
  * Parameter passed to the `Actions` prop in the collection configuration.
- * Note that actions are rendered in the collection toolbar, as well
- * as in the home page card.
- * If you don't want to render the actions in the home page card, you can
- * return `null` if mode is `home`.
+ * The component will receive this prop when it is rendered in the collection
+ * toolbar.
  *
  * @category Models
  */
@@ -296,12 +319,12 @@ export type AdditionalFieldDelegateProps<M extends Record<string, any> = any, Us
  * If you need to do some async loading you can use {@link AsyncPreviewComponent}
  * @category Models
  */
-export interface AdditionalFieldDelegate<M extends Record<string, any> = any, AdditionalKey extends string = string, UserType extends User = User> {
+export interface AdditionalFieldDelegate<M extends Record<string, any> = any, UserType extends User = User> {
     /**
      * ID of this column. You can use this id in the `properties` field of the
      * collection in any order you want
      */
-    id: AdditionalKey;
+    id: string;
     /**
      * Header of this column
      */

package/dist/types/dialogs_controller.d.ts

@@ -0,0 +1,30 @@
+/**
+ * Controller to open the side dialog
+ * @category Hooks and utilities
+ */
+export interface DialogsController {
+    /**
+     * Close the last dialog
+     */
+    close: () => void;
+    /**
+     * Open a dialog
+     * @param props
+     */
+    open: (props: DialogControllerEntryProps) => {
+        closeDialog: () => void;
+    };
+}
+/**
+ * Props used to open a side dialog
+ * @category Hooks and utilities
+ */
+export interface DialogControllerEntryProps {
+    key: string;
+    /**
+     * The component type that will be rendered
+     */
+    Component: React.ComponentType<{
+        open: boolean;
+    }>;
+}

package/dist/types/entity_actions.d.ts

@@ -0,0 +1,33 @@
+import React from "react";
+import { FireCMSContext } from "./firecms_context";
+import { Entity } from "./entities";
+import { EntityCollection, SelectionController } from "./collections";
+import { User } from "./user";
+import { SideEntityController } from "./side_entity_controller";
+export type EntityAction<M extends object = any, UserType extends User = User> = {
+    name: string;
+    icon?: React.ReactElement;
+    onClick: (props: EntityActionClickProps<M, UserType>) => Promise<void>;
+    /**
+     * Show this action in the menu, defaults to true
+     */
+    collapsed?: boolean;
+    /**
+     * Show this action in the form, defaults to true
+     */
+    includeInForm?: boolean;
+};
+export type EntityActionClickProps<M extends object, UserType extends User = User> = {
+    entity: Entity<M>;
+    context: FireCMSContext<UserType>;
+    fullPath?: string;
+    collection?: EntityCollection<M>;
+    selectionController?: SelectionController;
+    highlightEntity?: (entity: Entity<any>) => void;
+    unhighlightEntity?: (entity: Entity<any>) => void;
+    onCollectionChange?: () => void;
+    /**
+     * If this actions is being called from a side dialog
+     */
+    sideEntityController?: SideEntityController;
+};

package/dist/types/firecms.d.ts

@@ -22,11 +22,11 @@ import { CMSAnalyticsEvent } from "./analytics";
  * APIs directly, or a REST API.
  * @category Models
  */
-export type EntityCollectionsBuilder = (params: {
+export type EntityCollectionsBuilder<EC extends EntityCollection> = (params: {
     user: User | null;
     authController: AuthController;
     dataSource: DataSource;
-}) => EntityCollection[] | Promise<EntityCollection[]>;
+}) => EC[] | Promise<EC[]>;
 /**
  * Use this callback to build custom views dynamically.
  * You can use the user to decide which views to show.
@@ -44,7 +44,7 @@ export type CMSViewsBuilder = (params: {
 /**
  * @category Models
  */
-export type FireCMSProps<UserType extends User> = {
+export type FireCMSProps<UserType extends User, EC extends EntityCollection> = {
     /**
      * Use this function to return the components you want to render under
      * FireCMS
@@ -68,7 +68,7 @@ export type FireCMSProps<UserType extends User> = {
      * Each of the navigation entries in this field
      * generates an entry in the main menu.
      */
-    collections?: EntityCollection[] | EntityCollectionsBuilder;
+    collections?: EC[] | EntityCollectionsBuilder<EC>;
     /**
      * Custom additional views created by the developer, added to the main
      * navigation
@@ -130,7 +130,7 @@ export type FireCMSProps<UserType extends User> = {
      * Use plugins to modify the behaviour of the CMS.
      * Currently, in ALPHA, and likely subject to change.
      */
-    plugins?: FireCMSPlugin[];
+    plugins?: FireCMSPlugin<any, any, any>[];
     /**
      * Callback used to get analytics events from the CMS
      */

package/dist/types/firecms_context.d.ts

@@ -13,6 +13,7 @@ import { FireCMSPlugin } from "./plugins";
 import { CMSAnalyticsEvent } from "./analytics";
 import { PropertyConfig } from "./property_config";
 import { EntityCustomView } from "./collections";
+import { DialogsController } from "./dialogs_controller";
 /**
  * Context that includes the internal controllers and contexts used by the app.
  * Some controllers and context included in this context can be accessed
@@ -51,8 +52,14 @@ export type FireCMSContext<UserType extends User = User, AuthControllerType exte
     sideEntityController: SideEntityController;
     /**
      * Controller used to open side dialogs
+     * This is the controller used internally by side entity dialogs
+     * or reference dialogs.
      */
     sideDialogsController: SideDialogsController;
+    /**
+     * Controller used to open regular dialogs
+     */
+    dialogsController: DialogsController;
     /**
      * Used auth controller
      */

package/dist/types/index.d.ts

@@ -1,5 +1,6 @@
 export * from "./auth";
 export * from "./entities";
+export * from "./entity_actions";
 export * from "./resolved_entities";
 export * from "./properties";
 export * from "./collections";

package/dist/types/navigation.d.ts

@@ -127,9 +127,9 @@ export interface CMSView {
     description?: string;
     /**
      * Icon key to use in this view.
-     * You can use any of the icons in the MUI specs:
-     * https://mui.com/material-ui/material-icons/
-     * e.g. 'AccountTree' or 'Person'
+     * You can use any of the icons in the Material specs:
+     * https://fonts.google.com/icons
+     * e.g. 'account_tree' or 'person'
      */
     icon?: string;
     /**

package/dist/types/plugins.d.ts

@@ -11,7 +11,7 @@ import { ResolvedProperty } from "./resolved_entities";
  * NOTE: This is a work in progress and the API is not stable yet.
  * @category Core
  */
-export type FireCMSPlugin<PROPS = any, FORM_PROPS = any> = {
+export type FireCMSPlugin<PROPS = any, FORM_PROPS = any, EC extends EntityCollection = EntityCollection> = {
     /**
      * Name of the plugin
      */
@@ -34,15 +34,15 @@ export type FireCMSPlugin<PROPS = any, FORM_PROPS = any> = {
          * Use this component to add custom actions to the entity collections
          * toolbar.
          */
-        CollectionActions?: React.ComponentType<CollectionActionsProps> | React.ComponentType<CollectionActionsProps>[];
+        CollectionActions?: React.ComponentType<CollectionActionsProps<any, any, EC>> | React.ComponentType<CollectionActionsProps<any, any, EC>>[];
     };
     form?: {
         provider?: {
-            Component: React.ComponentType<PropsWithChildren<FORM_PROPS & PluginFormActionProps<any>>>;
+            Component: React.ComponentType<PropsWithChildren<FORM_PROPS & PluginFormActionProps<any, EC>>>;
             props?: FORM_PROPS;
         };
-        Actions?: React.ComponentType<PluginFormActionProps>;
-        fieldBuilder?: <T extends CMSType = CMSType>(props: PluginFieldBuilderParams<T>) => React.ComponentType<FieldProps<T>> | null;
+        Actions?: React.ComponentType<PluginFormActionProps<any, EC>>;
+        fieldBuilder?: <T extends CMSType = CMSType>(props: PluginFieldBuilderParams<T, any, EC>) => React.ComponentType<FieldProps<T>> | null;
         fieldBuilderEnabled?: <T extends CMSType = CMSType>(props: PluginFieldBuilderParams<T>) => boolean;
     };
     /**
@@ -95,6 +95,7 @@ export type FireCMSPlugin<PROPS = any, FORM_PROPS = any> = {
             fullPath: string;
             parentPathSegments: string[];
             onHover: boolean;
+            collection: EC;
         }>;
         /**
          * If you add this callback to your plugin, an add button will be added to the collection table.
@@ -103,7 +104,7 @@ export type FireCMSPlugin<PROPS = any, FORM_PROPS = any> = {
         AddColumnComponent?: React.ComponentType<{
             fullPath: string;
             parentPathSegments: string[];
-            collection: EntityCollection;
+            collection: EC;
         }>;
     };
 };
@@ -129,23 +130,23 @@ export interface PluginHomePageActionsProps<EP extends object = object, M extend
     context: FireCMSContext<UserType>;
     extraProps?: EP;
 }
-export interface PluginFormActionProps<UserType extends User = User> {
+export interface PluginFormActionProps<UserType extends User = User, EC extends EntityCollection = EntityCollection> {
     entityId?: string;
     path: string;
     status: EntityStatus;
-    collection: EntityCollection;
+    collection: EC;
     formContext?: FormContext<any>;
     context: FireCMSContext<UserType>;
     currentEntityId?: string;
 }
-export type PluginFieldBuilderParams<T extends CMSType = CMSType, M extends Record<string, any> = any> = {
+export type PluginFieldBuilderParams<T extends CMSType = CMSType, M extends Record<string, any> = any, EC extends EntityCollection<M> = EntityCollection<M>> = {
     fieldConfigId: string;
     propertyKey: string;
     property: Property<T> | ResolvedProperty<T>;
     Field: React.ComponentType<FieldProps<T, any, M>>;
     plugin: FireCMSPlugin;
     path: string;
-    collection: EntityCollection<M>;
+    collection: EC;
 };
 export interface PluginGenericProps<UserType extends User = User> {
     context: FireCMSContext<UserType>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@firecms/core",
-  "version": "3.0.0-alpha.28",
+  "version": "3.0.0-alpha.30",
   "description": "Awesome Firebase/Firestore-based headless open-source CMS",
   "funding": {
     "url": "https://github.com/sponsors/firecmsco"
@@ -101,7 +101,7 @@
     "@testing-library/react": "^14.0.0",
     "@testing-library/user-event": "^14.5.1",
     "@types/jest": "^29.5.6",
-    "@types/node": "^18.18.7",
+    "@types/node": "^20.8.9",
     "@types/object-hash": "^3.0.5",
     "@types/react": "^18.2.33",
     "@types/react-dom": "^18.2.14",
@@ -133,7 +133,7 @@
     "dist",
     "src"
   ],
-  "gitHead": "aba9501b45cf2dc84dc172084510b90e417b42f1",
+  "gitHead": "89854d00f9088e09134623a84be752990c6cbc32",
   "publishConfig": {
     "access": "public"
   }

package/src/components/Sheet.tsx

@@ -61,6 +61,7 @@ export const Sheet: React.FC<SheetProps> = ({
                     {...props}
                     className={cn(
                         // "transform-gpu",
+                        "will-change-transform",
                         "text-gray-900 dark:text-white",
                         "fixed transform z-20 transition-all duration-[240ms] ease-in-out",
                         "outline-none focus:outline-none",

package/src/core/FireCMS.tsx

@@ -1,6 +1,6 @@
 import React, { useMemo } from "react";
 
-import { FireCMSContext, FireCMSPlugin, FireCMSProps, User } from "../types";
+import { EntityCollection, FireCMSContext, FireCMSPlugin, FireCMSProps, User } from "../types";
 import { BreadcrumbsProvider } from "./contexts/BreacrumbsContext";
 import { ModeControllerContext } from "./contexts/ModeController";
 import { useBuildSideEntityController } from "./internal/useBuildSideEntityController";
@@ -17,6 +17,7 @@ import { AuthControllerContext } from "./contexts/AuthControllerContext";
 import { SideDialogsControllerContext } from "./contexts/SideDialogsControllerContext";
 import { useLocaleConfig } from "./internal/useLocaleConfig";
 import { CenteredView } from "../components";
+import { DialogsProvider } from "./contexts/DialogsProvider";
 
 const DEFAULT_BASE_PATH = "/";
 const DEFAULT_COLLECTION_PATH = "/c";
@@ -34,7 +35,7 @@ const DEFAULT_COLLECTION_PATH = "/c";
  * @constructor
  * @category Core
  */
-export function FireCMS<UserType extends User>(props: FireCMSProps<UserType>) {
+export function FireCMS<UserType extends User, EC extends EntityCollection>(props: FireCMSProps<UserType, EC>) {
 
     const modeController = useModeController();
     const {
@@ -124,10 +125,12 @@ export function FireCMS<UserType extends User>(props: FireCMSProps<UserType>) {
                                         <NavigationContextInstance.Provider
                                             value={navigation}>
                                             <BreadcrumbsProvider>
-                                                <FireCMSInternal
-                                                    loading={loading}>
-                                                    {children}
-                                                </FireCMSInternal>
+                                                <DialogsProvider>
+                                                    <FireCMSInternal
+                                                        loading={loading}>
+                                                        {children}
+                                                    </FireCMSInternal>
+                                                </DialogsProvider>
                                             </BreadcrumbsProvider>
                                         </NavigationContextInstance.Provider>
                                     </SideEntityControllerContext.Provider>

package/src/core/builders.ts

@@ -27,10 +27,10 @@ import {
  * @category Builder
  */
 export function buildCollection<M extends Record<string, any> = any,
-    AdditionalKey extends string = string,
+
     UserType extends User = User>(
-    collection: EntityCollection<M, AdditionalKey, UserType>
-): EntityCollection<M, AdditionalKey, UserType> {
+    collection: EntityCollection<M,  UserType>
+): EntityCollection<M,  UserType> {
     return collection;
 }
 
@@ -121,9 +121,9 @@ export function buildEntityCallbacks<M extends Record<string, any> = any>(
  * @param additionalFieldDelegate
  * @category Builder
  */
-export function buildAdditionalFieldDelegate<M extends Record<string, any>, AdditionalKey extends string = string, UserType extends User = User>(
-    additionalFieldDelegate: AdditionalFieldDelegate<M, AdditionalKey, UserType>
-): AdditionalFieldDelegate<M, AdditionalKey, UserType> {
+export function buildAdditionalFieldDelegate<M extends Record<string, any>,  UserType extends User = User>(
+    additionalFieldDelegate: AdditionalFieldDelegate<M,  UserType>
+): AdditionalFieldDelegate<M,  UserType> {
     return additionalFieldDelegate;
 }
 

package/src/core/components/ArrayContainer.tsx

@@ -175,7 +175,7 @@ export function ArrayContainer<T>({
 
                         {droppableProvided.placeholder}
 
-                        {includeAddButton && <div className="p-4 justify-center text-left">
+                        {includeAddButton && <div className="py-4 justify-center text-left">
                             <Button
                                 variant={size === "small" ? "text" : "outlined"}
                                 size={size === "small" ? "small" : "medium"}

package/src/core/components/EntityCollectionTable/EntityCollectionTable.tsx

@@ -63,7 +63,7 @@ export const useEntityCollectionTableController = () => useContext<EntityCollect
  * @category Components
  */
 export const EntityCollectionTable = React.memo<EntityCollectionTableProps<any>>(
-    function EntityCollectionTable<M extends Record<string, any>, AdditionalKey extends string, UserType extends User>
+    function EntityCollectionTable<M extends Record<string, any>, UserType extends User>
     ({
          forceFilter,
          actionsStart,
@@ -110,7 +110,9 @@ export const EntityCollectionTable = React.memo<EntityCollectionTableProps<any>>
          endAdornment,
          AddColumnComponent,
          AdditionalHeaderWidget,
-         additionalIDHeaderWidget
+         additionalIDHeaderWidget,
+         emptyComponent,
+         getIdColumnWidth
      }: EntityCollectionTableProps<M>) {
 
         const largeLayout = useLargeLayout();
@@ -154,12 +156,12 @@ export const EntityCollectionTable = React.memo<EntityCollectionTableProps<any>>
 
         const onTextSearch = useCallback((newSearchString?: string) => setSearchString?.(newSearchString), []);
 
-        const additionalFieldsMap: Record<string, AdditionalFieldDelegate<M, string, UserType>> = useMemo(() => {
+        const additionalFieldsMap: Record<string, AdditionalFieldDelegate<M, UserType>> = useMemo(() => {
             return (additionalFields
                 ? additionalFields
-                    .map((aC) => ({ [aC.id]: aC as AdditionalFieldDelegate<M, string, any> }))
+                    .map((aC) => ({ [aC.id]: aC as AdditionalFieldDelegate<M, any> }))
                     .reduce((a, b) => ({ ...a, ...b }), {})
-                : {}) as Record<string, AdditionalFieldDelegate<M, string, UserType>>;
+                : {}) as Record<string, AdditionalFieldDelegate<M, UserType>>;
         }, [additionalFields]);
 
         // on ESC key press
@@ -198,7 +200,11 @@ export const EntityCollectionTable = React.memo<EntityCollectionTableProps<any>>
 
             let disabled = column.custom?.disabled;
             const propertyValue = entity.values ? getValueInPath(entity.values, propertyKey) : undefined;
-            const property = getPropertyFor?.({ propertyKey, propertyValue, entity }) ?? column.custom.resolvedProperty;
+            const property = getPropertyFor?.({
+                propertyKey,
+                propertyValue,
+                entity
+            }) ?? column.custom.resolvedProperty;
             if (!property?.disabled) {
                 disabled = false;
             }
@@ -238,7 +244,7 @@ export const EntityCollectionTable = React.memo<EntityCollectionTableProps<any>>
 
             const entity: Entity<M> = rowData;
 
-            const additionalField = additionalFieldsMap[column.key as AdditionalKey];
+            const additionalField = additionalFieldsMap[column.key as string];
             const value = additionalField.dependencies
                 ? Object.entries(entity.values)
                     .filter(([key, value]) => additionalField.dependencies!.includes(key as Extract<keyof M, string>))
@@ -318,14 +324,14 @@ export const EntityCollectionTable = React.memo<EntityCollectionTableProps<any>>
 
         const idColumn: VirtualTableColumn = useMemo(() => ({
             key: "id_ewcfedcswdf3",
-            width: largeLayout ? 160 : 130,
+            width: getIdColumnWidth?.() ?? (largeLayout ? 160 : 130),
             title: "ID",
             resizable: false,
             frozen: largeLayout,
             headerAlign: "center",
             align: "center",
             AdditionalHeaderWidget: () => additionalIDHeaderWidget
-        }), [largeLayout])
+        }), [getIdColumnWidth, largeLayout])
 
         const columns: VirtualTableColumn[] = useMemo(() => [
             idColumn,
@@ -410,6 +416,7 @@ export const EntityCollectionTable = React.memo<EntityCollectionTableProps<any>>
                         sortBy={sortBy}
                         onSortByUpdate={setSortBy as ((sortBy?: [string, "asc" | "desc"]) => void)}
                         hoverRow={hoverRow}
+                        emptyComponent={emptyComponent}
                         checkFilterCombination={checkFilterCombination}
                         createFilterField={filterable ? createFilterField : undefined}
                         rowClassName={useCallback((entity: Entity<M>) => {

package/src/core/components/EntityCollectionTable/EntityCollectionTableProps.tsx

@@ -21,7 +21,7 @@ export type OnColumnResizeParams = { width: number, key: string };
  * @category Collection components
  */
 export type EntityCollectionTableProps<M extends Record<string, any>,
-    AdditionalKey extends string = string,
+
     UserType extends User = User> = {
 
     /**
@@ -105,7 +105,7 @@ export type EntityCollectionTableProps<M extends Record<string, any>,
 
     inlineEditing?: boolean | ((entity: Entity<M>) => boolean);
 
-    additionalFields?: AdditionalFieldDelegate<M, AdditionalKey, UserType>[];
+    additionalFields?: AdditionalFieldDelegate<M,  UserType>[];
 
     defaultSize?: CollectionSize;
 
@@ -129,6 +129,9 @@ export type EntityCollectionTableProps<M extends Record<string, any>,
 
     additionalIDHeaderWidget?: React.ReactNode;
 
+    emptyComponent?: React.ReactNode;
+
+    getIdColumnWidth?: () => number;
 }
 
 export type GetPropertyForProps<M extends Record<string, any>> = {