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

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

@@ -1,12 +1,11 @@
 import React, { MouseEvent, useCallback } from "react";
+import equal from "react-fast-compare"
 
-import { CollectionSize, Entity } from "../../../../types";
-import { Checkbox, IconButton, Tooltip, Typography } from "../../../../components";
-import { useLargeLayout } from "../../../../hooks/useLargeLayout";
-import { DeleteIcon, FileCopyIcon, KeyboardTabIcon, MoreVertIcon } from "../../../../icons";
-import { Menu, MenuItem } from "../../../../components/Menu";
+import { CollectionSize, Entity, EntityAction, EntityCollection, SelectionController } from "../../../../types";
+import { Checkbox, cn, IconButton, Menu, MenuItem, Tooltip, Typography } from "../../../../components";
+import { useFireCMSContext, useLargeLayout } from "../../../../hooks";
+import { MoreVertIcon } from "../../../../icons";
 import { Skeleton } from "../../../../components/Skeleton";
-import { cn } from "../../../../components/util/cn";
 
 /**
  *
@@ -25,62 +24,57 @@ import { cn } from "../../../../components/util/cn";
  *
  * @category Collection components
  */
-export function EntityCollectionRowActions<M extends Record<string, any>>({
-                                                                              entity,
-                                                                              width,
-                                                                              frozen,
-                                                                              isSelected,
-                                                                              selectionEnabled,
-                                                                              size,
-                                                                              toggleEntitySelection,
-                                                                              onCopyClicked,
-                                                                              onEditClicked,
-                                                                              onDeleteClicked,
-                                                                              hideId
-                                                                          }:
-                                                                              {
-                                                                                  entity: Entity<M>,
-                                                                                  width: number,
-                                                                                  frozen?: boolean,
-                                                                                  size: CollectionSize,
-                                                                                  isSelected: boolean,
-                                                                                  selectionEnabled?: boolean,
-                                                                                  toggleEntitySelection?: (selectedEntity: Entity<M>) => void
-                                                                                  onEditClicked?: (selectedEntity: Entity<M>) => void,
-                                                                                  onCopyClicked?: (selectedEntity: Entity<M>) => void,
-                                                                                  onDeleteClicked?: (selectedEntity: Entity<M>) => void,
-                                                                                  hideId?: boolean
-                                                                              }) {
+export const EntityCollectionRowActions = React.memo(function EntityCollectionRowActions({
+                                                                                             entity,
+                                                                                             collection,
+                                                                                             fullPath,
+                                                                                             width,
+                                                                                             frozen,
+                                                                                             isSelected,
+                                                                                             selectionEnabled,
+                                                                                             size,
+                                                                                             highlightEntity,
+                                                                                             onCollectionChange,
+                                                                                             unhighlightEntity,
+                                                                                             actions = [],
+                                                                                             hideId,
+                                                                                             selectionController
+                                                                                         }:
+                                                                                             {
+                                                                                                 entity: Entity<any>,
+                                                                                                 collection?: EntityCollection<any>,
+                                                                                                 fullPath?: string,
+                                                                                                 width: number,
+                                                                                                 frozen?: boolean,
+                                                                                                 size: CollectionSize,
+                                                                                                 isSelected: boolean,
+                                                                                                 selectionEnabled?: boolean,
+                                                                                                 actions?: EntityAction[],
+                                                                                                 hideId?: boolean,
+                                                                                                 onCollectionChange?: () => void,
+                                                                                                 selectionController?: SelectionController;
+                                                                                                 highlightEntity?: (entity: Entity<any>) => void;
+                                                                                                 unhighlightEntity?: (entity: Entity<any>) => void;
+                                                                                             }) {
 
     const largeLayout = useLargeLayout();
 
-    const editEnabled = Boolean(onEditClicked);
-    const copyEnabled = Boolean(onCopyClicked);
-    const deleteEnabled = Boolean(onDeleteClicked);
+    const context = useFireCMSContext();
 
     const onCheckedChange = useCallback((checked: boolean) => {
-        if (toggleEntitySelection)
-            toggleEntitySelection(entity);
-    }, [entity, toggleEntitySelection]);
-
-    const onDeleteClick = useCallback((event: MouseEvent) => {
-        event.stopPropagation();
-        if (onDeleteClicked)
-            onDeleteClicked(entity);
-    }, [entity, onDeleteClicked]);
-
-    const onCopyClick = useCallback((event: MouseEvent) => {
-        event.stopPropagation();
-        if (onCopyClicked)
-            onCopyClicked(entity);
-    }, [entity, onCopyClicked]);
+        selectionController?.toggleEntitySelection(entity);
+    }, [entity, selectionController?.toggleEntitySelection]);
 
     const onClick = useCallback((event: MouseEvent) => {
         event.stopPropagation();
-        if (toggleEntitySelection)
-            toggleEntitySelection(entity);
-    }, [entity, toggleEntitySelection]);
+        selectionController?.toggleEntitySelection(entity);
+    }, [entity, selectionController?.toggleEntitySelection]);
+
+    const hasActions = actions.length > 0;
+    const hasCollapsedActions = actions.some(a => a.collapsed || a.collapsed === undefined);
 
+    const collapsedActions = actions.filter(a => a.collapsed || a.collapsed === undefined);
+    const uncollapsedActions = actions.filter(a => a.collapsed === false);
     return (
         <div
             onClick={onClick}
@@ -95,20 +89,58 @@ export function EntityCollectionRowActions<M extends Record<string, any>>({
                 contain: "strict"
             }}>
 
-            {(editEnabled || deleteEnabled || selectionEnabled) &&
+            {(hasActions || selectionEnabled) &&
                 <div className="w-34 flex justify-center">
-                    {editEnabled &&
-                        <Tooltip title={`Edit ${entity.id}`}>
+
+                    {uncollapsedActions.map((action, index) => (
+                        <Tooltip key={index} title={action.name}>
                             <IconButton
                                 onClick={(event: MouseEvent) => {
                                     event.stopPropagation();
-                                    if (onEditClicked)
-                                        onEditClicked(entity);
+                                    action.onClick({
+                                        entity,
+                                        fullPath,
+                                        collection,
+                                        context,
+                                        selectionController,
+                                        highlightEntity,
+                                        unhighlightEntity,
+                                        onCollectionChange
+                                    });
                                 }}
                                 size={largeLayout ? "medium" : "small"}>
-                                <KeyboardTabIcon/>
+                                {action.icon}
                             </IconButton>
                         </Tooltip>
+                    ))}
+
+                    {hasCollapsedActions &&
+                        <Menu
+                            trigger={<IconButton
+                                size={largeLayout ? "medium" : "small"}>
+                                <MoreVertIcon/>
+                            </IconButton>}>
+                            {collapsedActions.map((action, index) => (
+                                <MenuItem
+                                    key={index}
+                                    onClick={(e) => {
+                                        e.stopPropagation();
+                                        action.onClick({
+                                            entity,
+                                            fullPath,
+                                            collection,
+                                            context,
+                                            selectionController,
+                                            highlightEntity,
+                                            unhighlightEntity,
+                                            onCollectionChange
+                                        });
+                                    }}>
+                                    {action.icon}
+                                    {action.name}
+                                </MenuItem>
+                            ))}
+                        </Menu>
                     }
 
                     {selectionEnabled &&
@@ -120,24 +152,6 @@ export function EntityCollectionRowActions<M extends Record<string, any>>({
                             />
                         </Tooltip>}
 
-                    {(copyEnabled || deleteEnabled) &&
-                        <Menu
-                            trigger={<IconButton
-                                size={largeLayout ? "medium" : "small"}>
-                                <MoreVertIcon/>
-                            </IconButton>}>
-                            {deleteEnabled && <MenuItem onClick={onDeleteClick}>
-                                <DeleteIcon/>
-                                Delete
-                            </MenuItem>}
-
-                            {copyEnabled && <MenuItem onClick={onCopyClick}>
-                                <FileCopyIcon/>
-                                Copy
-                            </MenuItem>}
-                        </Menu>
-                    }
-
                 </div>}
 
             {!hideId && size !== "xs" && (
@@ -145,7 +159,10 @@ export function EntityCollectionRowActions<M extends Record<string, any>>({
 
                     {entity
                         ? <Typography
-                            className={"font-mono"}
+                            onClick={(event) => {
+                                event.stopPropagation();
+                            }}
+                            className={"font-mono select-all"}
                             variant={"caption"}
                             color={"secondary"}> {entity.id} </Typography>
                         : <Skeleton/>
@@ -156,4 +173,4 @@ export function EntityCollectionRowActions<M extends Record<string, any>>({
         </div>
     );
 
-}
+}, equal);

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

@@ -0,0 +1,107 @@
+import { EntityAction } from "../../../../types";
+import { DeleteEntityDialog } from "./DeleteEntityDialog";
+import { ArchiveIcon, DeleteIcon, FileCopyIcon, KeyboardTabIcon } from "../../../../icons";
+
+export const editEntityAction: EntityAction = {
+    icon: <KeyboardTabIcon/>,
+    name: "Edit",
+    collapsed: false,
+    onClick({
+                entity,
+                collection,
+                context,
+                highlightEntity,
+                unhighlightEntity
+            }): Promise<void> {
+        highlightEntity?.(entity);
+        context.onAnalyticsEvent?.("entity_click", {
+            path: entity.path,
+            entityId: entity.id
+        });
+        context.sideEntityController.open({
+            entityId: entity.id,
+            path: entity.path,
+            collection,
+            updateUrl: true,
+            onClose: () => unhighlightEntity?.(entity)
+        });
+        return Promise.resolve(undefined);
+    }
+}
+
+export const copyEntityAction: EntityAction = {
+    icon: <FileCopyIcon/>,
+    name: "Copy",
+    onClick({
+                entity,
+                collection,
+                context,
+                highlightEntity,
+                unhighlightEntity
+            }): Promise<void> {
+        highlightEntity?.(entity);
+        context.onAnalyticsEvent?.("copy_entity_click", {
+            path: entity.path,
+            entityId: entity.id
+        });
+        context.sideEntityController.open({
+            entityId: entity.id,
+            path: entity.path,
+            copy: true,
+            collection,
+            updateUrl: true,
+            onClose: () => unhighlightEntity?.(entity)
+        });
+        return Promise.resolve(undefined);
+    }
+}
+export const archiveEntityAction: EntityAction = {
+    icon: <ArchiveIcon/>,
+    name: "Archive",
+    onClick({
+                entity,
+                collection,
+                context,
+            }): Promise<void> {
+        // Add your code here
+        return Promise.resolve(undefined);
+    }
+}
+
+export const deleteEntityAction: EntityAction = {
+    icon: <DeleteIcon/>,
+    name: "Delete",
+    onClick({
+                entity,
+                fullPath,
+                collection,
+                context,
+                selectionController,
+                onCollectionChange,
+                sideEntityController
+            }): Promise<void> {
+        const { closeDialog } = context.dialogsController.open({
+            key: "delete_entity_dialog_" + entity.id,
+            Component: ({ open }) => {
+                if (!collection || !fullPath)
+                    throw new Error("deleteEntityAction: Collection is undefined");
+                return <DeleteEntityDialog
+                    entityOrEntitiesToDelete={entity}
+                    path={fullPath}
+                    collection={collection}
+                    callbacks={collection.callbacks}
+                    open={open}
+                    onEntityDelete={() => {
+                        context.onAnalyticsEvent?.("single_entity_deleted", {
+                            path: fullPath
+                        });
+                        selectionController?.setSelectedEntities(selectionController.selectedEntities.filter(e => e.id !== entity.id));
+                        onCollectionChange?.();
+                        sideEntityController?.close();
+                    }}
+                    onClose={closeDialog}/>;
+            }
+        })
+        return Promise.resolve(undefined);
+    }
+}

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

@@ -1,59 +1,4 @@
-import {
-    CollectionSize,
-    DataSource,
-    Entity,
-    EntityCollection,
-    FireCMSContext,
-    ResolvedProperty, SelectedCellProps,
-    User
-} from "../../../types";
-
-export type EntityCollectionTableProviderProps<M extends Record<string, any>, AdditionalKey extends string, UserType extends User> = {
-
-    /**
-     * Absolute collection path
-     */
-    path: string;
-
-    /**
-     * Use to resolve the collection properties for specific path, entity id or values
-     */
-    collection: EntityCollection<M>
-
-    /**
-     * List of entities that will be displayed on top, no matter the ordering.
-     * This is used for reference fields selection
-     */
-    entitiesDisplayedFirst?: Entity<M>[];
-
-    /**
-     * Callback when anywhere on the table is clicked
-     */
-    onEntityClick?(entity: Entity<M>): void;
-
-    /**
-     * Callback when the selected size of the table is changed
-     */
-    onSizeChanged?(size: CollectionSize): void;
-
-    /**
-     * Can the table be edited inline
-     */
-    inlineEditing: ((entity: Entity<any>) => boolean) | boolean;
-
-    /**
-     * Builder for creating the buttons in each row
-     * @param entity
-     * @param size
-     */
-    tableRowActionsBuilder?: ({
-                                  entity,
-                                  size
-                              }: {
-        entity: Entity<M>,
-        size: CollectionSize
-    }) => React.ReactNode;
-};
+import { CollectionSize, Entity, FireCMSContext, ResolvedProperty, SelectedCellProps } from "../../../types";
 
 export type EntityCollectionTableController<M extends Record<string, any>> = {
 

package/src/core/components/EntityCollectionView/EntityCollectionView.tsx

@@ -6,6 +6,7 @@ import {
     AdditionalFieldDelegate,
     CollectionSize,
     Entity,
+    EntityAction,
     EntityCollection,
     FilterValues,
     PartialEntityCollection,
@@ -40,14 +41,14 @@ import {
     useAuthController,
     useDataSource,
     useFireCMSContext,
+    useLargeLayout,
     useNavigationContext,
     useSideEntityController
 } from "../../../hooks";
 import { useUserConfigurationPersistence } from "../../../hooks/useUserConfigurationPersistence";
 import { EntityCollectionViewActions } from "./EntityCollectionViewActions";
 import { useEntityCollectionTableController } from "../EntityCollectionTable/useEntityCollectionTableController";
-import { Button, cn, IconButton, TextField, Tooltip, Typography } from "../../../components";
-import { Popover } from "../../../components/Popover";
+import { Button, cn, IconButton, Popover, TextField, Tooltip, Typography } from "../../../components";
 import { Skeleton } from "../../../components/Skeleton";
 import { setIn } from "formik";
 import { getSubcollectionColumnId } from "../EntityCollectionTable/internal/common";
@@ -55,6 +56,11 @@ import { KeyboardTabIcon, SearchIcon } from "../../../icons";
 import { useColumnIds } from "./useColumnsIds";
 import { PopupFormField } from "../EntityCollectionTable/internal/popup_field/PopupFormField";
 import { GetPropertyForProps } from "../EntityCollectionTable/EntityCollectionTableProps";
+import {
+    copyEntityAction,
+    deleteEntityAction,
+    editEntityAction
+} from "../EntityCollectionTable/internal/default_entity_actions";
 
 const COLLECTION_GROUP_PARENT_ID = "collectionGroupParent";
 
@@ -116,6 +122,7 @@ export const EntityCollectionView = React.memo(
             return (userOverride ? mergeDeep(collectionProp, userOverride) : collectionProp) as EntityCollection<M>;
         }, [collectionProp, fullPath, userConfigPersistence?.getCollectionConfig]);
 
+        const canCreateEntities = canCreateEntity(collection, authController, fullPathToCollectionSegments(fullPath), null);
         const [selectedNavigationEntity, setSelectedNavigationEntity] = useState<Entity<M> | undefined>(undefined);
         const [deleteEntityClicked, setDeleteEntityClicked] = React.useState<Entity<M> | Entity<M>[] | undefined>(undefined);
 
@@ -343,39 +350,8 @@ export const EntityCollectionView = React.memo(
 
         const displayedColumnIds = useColumnIds(resolvedCollection, true);
 
-        const onCopyClicked = useCallback((clickedEntity: Entity<M>) => {
-            setSelectedNavigationEntity(clickedEntity);
-            context.onAnalyticsEvent?.("copy_entity_click", {
-                path: clickedEntity.path,
-                entityId: clickedEntity.id
-            });
-            sideEntityController.open({
-                entityId: clickedEntity.id,
-                path: clickedEntity.path,
-                copy: true,
-                collection,
-                updateUrl: true,
-                onClose: unselectNavigatedEntity
-            });
-        }, [sideEntityController, collection, fullPath, unselectNavigatedEntity]);
-
-        const onEditClicked = useCallback((clickedEntity: Entity<M>) => {
-            setSelectedNavigationEntity(clickedEntity);
-            context.onAnalyticsEvent?.("entity_click", {
-                path: clickedEntity.path,
-                entityId: clickedEntity.id
-            });
-            sideEntityController.open({
-                entityId: clickedEntity.id,
-                path: clickedEntity.path,
-                collection,
-                updateUrl: true,
-                onClose: unselectNavigatedEntity
-            });
-        }, [sideEntityController, collection, fullPath, unselectNavigatedEntity]);
-
         const additionalFields = useMemo(() => {
-            const subcollectionColumns: AdditionalFieldDelegate<M, any, any>[] = collection.subcollections?.map((subcollection) => {
+            const subcollectionColumns: AdditionalFieldDelegate<M, any>[] = collection.subcollections?.map((subcollection) => {
                 return {
                     id: getSubcollectionColumnId(subcollection),
                     name: subcollection.name,
@@ -401,7 +377,7 @@ export const EntityCollectionView = React.memo(
                 };
             }) ?? [];
 
-            const collectionGroupParentCollections: AdditionalFieldDelegate<M, any, any>[] = collection.collectionGroup
+            const collectionGroupParentCollections: AdditionalFieldDelegate<M, any>[] = collection.collectionGroup
                 ? [{
                     id: COLLECTION_GROUP_PARENT_ID,
                     name: "Parent entities",
@@ -432,6 +408,32 @@ export const EntityCollectionView = React.memo(
             ];
         }, [collection, fullPath]);
 
+        const updateLastDeleteTimestamp = useCallback(() => {
+            setLastDeleteTimestamp(Date.now());
+        }, []);
+
+        const largeLayout = useLargeLayout();
+
+        const getActionsForEntity = useCallback(({ entity, customEntityActions }: { entity?: Entity<M>, customEntityActions?: EntityAction[] }): EntityAction[] => {
+            const deleteEnabled = entity ? canDeleteEntity(collection, authController, fullPathToCollectionSegments(fullPath), entity) : true;
+            const actions: EntityAction[] = [editEntityAction];
+            if (createEnabled)
+                actions.push(copyEntityAction);
+            if (deleteEnabled)
+                actions.push(deleteEntityAction);
+            if (customEntityActions)
+                actions.push(...customEntityActions);
+            return actions;
+        }, [authController, collection, createEnabled, fullPath]);
+
+        const getIdColumnWidth = useCallback(() => {
+            const entityActions = getActionsForEntity({});
+            const collapsedActions = entityActions.filter(a => a.collapsed !== false);
+            const uncollapsedActions = entityActions.filter(a => a.collapsed === false);
+            const actionsWidth = uncollapsedActions.length * (largeLayout ? 40 : 30);
+            return (largeLayout ? (80 + actionsWidth) : (70 + actionsWidth)) + (collapsedActions.length > 0 ? (largeLayout ? 40 : 30) : 0);
+        }, [largeLayout, getActionsForEntity]);
+
         const tableRowActionsBuilder = useCallback(({
                                                         entity,
                                                         size,
@@ -446,7 +448,7 @@ export const EntityCollectionView = React.memo(
 
             const isSelected = isEntitySelected(entity);
 
-            const deleteEnabled = canDeleteEntity(collection, authController, fullPathToCollectionSegments(fullPath), entity);
+            const actions = getActionsForEntity({ entity, customEntityActions: collection.entityActions });
 
             return (
                 <EntityCollectionRowActions
@@ -456,15 +458,18 @@ export const EntityCollectionView = React.memo(
                     isSelected={isSelected}
                     selectionEnabled={selectionEnabled}
                     size={size}
-                    toggleEntitySelection={toggleEntitySelection}
-                    onEditClicked={onEditClicked}
-                    onCopyClicked={createEnabled ? onCopyClicked : undefined}
-                    onDeleteClicked={deleteEnabled ? onSingleDeleteClick : undefined}
+                    highlightEntity={setSelectedNavigationEntity}
+                    unhighlightEntity={unselectNavigatedEntity}
+                    collection={collection}
+                    fullPath={fullPath}
+                    actions={actions}
                     hideId={collection?.hideIdFromCollection}
+                    onCollectionChange={updateLastDeleteTimestamp}
+                    selectionController={usedSelectionController}
                 />
             );
 
-        }, [isEntitySelected, collection, authController, fullPath, selectionEnabled, toggleEntitySelection, onEditClicked, createEnabled, onCopyClicked]);
+        }, [isEntitySelected, collection, authController, fullPath, selectionEnabled, toggleEntitySelection, createEnabled]);
 
         const title = <Popover
             open={popOverOpen}
@@ -522,6 +527,7 @@ export const EntityCollectionView = React.memo(
                             propertyKey={propertyKey}
                             property={property}
                             fullPath={fullPath}
+                            collection={collection}
                             parentPathSegments={parentPathSegments ?? []}/>;
                     })}
             </>;
@@ -569,10 +575,25 @@ export const EntityCollectionView = React.memo(
                         selectionEnabled={selectionEnabled}
                         collectionEntitiesCount={docsCount}
                     />}
+                    emptyComponent={canCreateEntities
+                        ? <div className="flex flex-col items-center justify-center">
+                            <Typography variant={"subtitle2"}>So empty...</Typography>
+                            <Button
+                                color={"primary"}
+                                variant={"outlined"}
+                                onClick={onNewClick}
+                                className="mt-4"
+                            >
+                                Create your first entity
+                            </Button>
+                        </div>
+                        : undefined
+                    }
                     hoverRow={hoverRow}
                     inlineEditing={checkInlineEditing()}
                     AdditionalHeaderWidget={buildAdditionalHeaderWidget}
                     AddColumnComponent={addColumnComponentInternal}
+                    getIdColumnWidth={getIdColumnWidth}
                     additionalIDHeaderWidget={<EntityIdHeaderWidget
                         path={fullPath}
                         collection={collection}/>}
@@ -690,7 +711,10 @@ function buildPropertyWidthOverwrite(key: string, width: number): PartialEntityC
     return { properties: { [key]: { columnWidth: width } } } as PartialEntityCollection;
 }
 
-function EntityIdHeaderWidget({ collection, path }: {
+function EntityIdHeaderWidget({
+                                  collection,
+                                  path
+                              }: {
     collection: EntityCollection,
     path: string
 }) {

package/src/core/components/ReferenceSelectionInner.tsx

@@ -230,9 +230,9 @@ export function ReferenceSelectionInner<M extends Record<string, any>>(
             size={size}
             isSelected={isSelected}
             selectionEnabled={multiselect}
-            toggleEntitySelection={toggleEntitySelection}
             hideId={collection?.hideIdFromCollection}
-        />;
+            fullPath={fullPath}
+            selectionController={selectionController}/>;
 
     }, [multiselect, selectionController.selectedEntities, toggleEntitySelection, collection?.hideIdFromCollection]);
 

package/src/core/components/VirtualTable/VirtualTable.tsx

@@ -102,7 +102,7 @@ export const VirtualTable = React.memo<VirtualTableProps<any>>(
                                                              onFilterUpdate,
                                                              sortBy,
                                                              error,
-                                                             emptyMessage,
+                                                             emptyComponent,
                                                              onSortByUpdate,
                                                              loading,
                                                              cellRenderer,
@@ -249,13 +249,11 @@ export const VirtualTable = React.memo<VirtualTableProps<any>>(
             if (loading)
                 return <CircularProgressCenter/>;
             return <div
-                className="flex overflow-auto items-center justify-center p-2 gap-2 h-full">
+                className="flex flex-col overflow-auto items-center justify-center p-2 gap-2 h-full">
                 <AssignmentIcon/>
-                <Typography>
-                    {emptyMessage}
-                </Typography>
+                {emptyComponent}
             </div>;
-        }, [emptyMessage, loading]);
+        }, [emptyComponent, loading]);
 
         const empty = !loading && (data?.length ?? 0) === 0;
         const customView = error ? buildErrorView() : (empty ? buildEmptyView() : undefined);

package/src/core/components/VirtualTable/VirtualTableProps.tsx

@@ -102,7 +102,7 @@ export interface VirtualTableProps<T extends Record<string, any>> {
     /**
      * Message displayed when there is no data
      */
-    emptyMessage?: string;
+    emptyComponent?: React.ReactNode;
 
     /**
      * Is the table in a loading state