@firecms/core 3.0.0-alpha.84 → 3.0.0-beta.2-pre.1

package/src/components/EntityCollectionTable/EntityCollectionTable.tsx

@@ -1,35 +1,22 @@
-import React, { useCallback, useContext, useEffect, useMemo, useRef } from "react";
+import React, { useCallback, useContext, useMemo, useRef } from "react";
 import equal from "react-fast-compare";
-import {
-    AdditionalFieldDelegate,
-    CollectionSize,
-    Entity,
-    FilterValues,
-    FireCMSContext,
-    ResolvedProperty,
-    SelectedCellProps,
-    User
-} from "../../types";
+import { AdditionalFieldDelegate, CollectionSize, Entity, FireCMSContext, User } from "../../types";
 import { PropertyTableCell } from "./PropertyTableCell";
 import { ErrorBoundary } from "../ErrorBoundary";
 import { useFireCMSContext, useLargeLayout } from "../../hooks";
-import { CellRendererParams, VirtualTable, VirtualTableColumn } from "../VirtualTable";
-import { enumToObjectEntries, getValueInPath } from "../../util";
+import { CellRendererParams, VirtualTableColumn } from "../VirtualTable";
+import { getValueInPath } from "../../util";
 import { getRowHeight } from "../VirtualTable/common";
 import { EntityCollectionRowActions } from "./EntityCollectionRowActions";
 import { EntityCollectionTableController } from "./types";
 import { CollectionTableToolbar } from "./internal/CollectionTableToolbar";
 import { EntityCollectionTableProps } from "./EntityCollectionTableProps";
 import { EntityTableCell } from "./internal/EntityTableCell";
-import { FilterFormFieldProps } from "../VirtualTable/VirtualTableHeader";
-import { ReferenceFilterField } from "./filters/ReferenceFilterField";
-import { StringNumberFilterField } from "./filters/StringNumberFilterField";
-import { BooleanFilterField } from "./filters/BooleanFilterField";
-import { DateTimeFilterField } from "./filters/DateTimeFilterField";
 import { CustomFieldValidator } from "../../form/validation";
 import { renderSkeletonText } from "../../preview";
 import { propertiesToColumns } from "./column_utils";
-import { useOutsideAlerter } from "@firecms/ui";
+import { ErrorView } from "../ErrorView";
+import { SimpleTable } from "./SimpleTable";
 
 const DEFAULT_STATE = {} as any;
 
@@ -64,7 +51,6 @@ export const useEntityCollectionTableController = () => useContext<EntityCollect
 export const EntityCollectionTable = React.memo<EntityCollectionTableProps<any>>(
     function EntityCollectionTable<M extends Record<string, any>, UserType extends User>
     ({
-         debugKey,
          forceFilter,
          actionsStart,
          actions,
@@ -85,25 +71,7 @@ export const EntityCollectionTable = React.memo<EntityCollectionTableProps<any>>
          displayedColumnIds,
          defaultSize,
          properties,
-         tableController:
-             {
-                 data,
-                 dataLoading,
-                 noMoreToLoad,
-                 dataLoadingError,
-                 filterValues,
-                 setFilterValues,
-                 sortBy,
-                 setSortBy,
-                 setSearchString,
-                 clearFilter,
-                 itemCount,
-                 setItemCount,
-                 pageSize = 50,
-                 paginationEnabled,
-                 checkFilterCombination,
-                 setPopupCell
-             },
+         tableController,
          filterable = true,
          sortable = true,
          endAdornment,
@@ -126,38 +94,9 @@ export const EntityCollectionTable = React.memo<EntityCollectionTableProps<any>>
 
         const [size, setSize] = React.useState<CollectionSize>(defaultSize ?? "m");
 
-        const [selectedCell, setSelectedCell] = React.useState<SelectedCellProps<M> | undefined>(undefined);
-
         const selectedEntityIds = selectedEntities?.map(e => e.id);
 
-        const filterIsSet = !!filterValues && Object.keys(filterValues).length > 0;
-
-        const loadNextPage = useCallback(() => {
-            if (!paginationEnabled || dataLoading || noMoreToLoad)
-                return;
-            if (itemCount !== undefined)
-                setItemCount?.(itemCount + pageSize);
-        }, [dataLoading, itemCount, noMoreToLoad, pageSize, paginationEnabled, setItemCount]);
-
-        useOutsideAlerter(ref,
-            () => {
-                if (selectedCell) {
-                    unselect();
-                }
-            },
-            Boolean(selectedCell));
-
-        const resetPagination = useCallback(() => {
-            setItemCount?.(pageSize);
-        }, [pageSize]);
-
-        const onRowClickCallback = useCallback(({ rowData }: {
-            rowData: Entity<M>
-        }) => {
-            if (inlineEditing)
-                return;
-            return onEntityClick && onEntityClick(rowData);
-        }, [onEntityClick, inlineEditing]);
+        const filterIsSet = !!tableController.filterValues && Object.keys(tableController.filterValues).length > 0;
 
         const updateSize = useCallback((size: CollectionSize) => {
             if (onSizeChanged)
@@ -165,7 +104,7 @@ export const EntityCollectionTable = React.memo<EntityCollectionTableProps<any>>
             setSize(size);
         }, []);
 
-        const onTextSearch = useCallback((newSearchString?: string) => setSearchString?.(newSearchString), []);
+        const onTextSearch = useCallback((newSearchString?: string) => tableController.setSearchString?.(newSearchString), []);
 
         const additionalFieldsMap: Record<string, AdditionalFieldDelegate<M, UserType>> = useMemo(() => {
             return (additionalFields
@@ -175,27 +114,6 @@ export const EntityCollectionTable = React.memo<EntityCollectionTableProps<any>>
                 : {}) as Record<string, AdditionalFieldDelegate<M, UserType>>;
         }, [additionalFields]);
 
-        // on ESC key press
-        useEffect(() => {
-            const escFunction = (event: any) => {
-                if (event.keyCode === 27) {
-                    unselect();
-                }
-            };
-            document.addEventListener("keydown", escFunction, false);
-            return () => {
-                document.removeEventListener("keydown", escFunction, false);
-            };
-        });
-
-        const select = useCallback((cell?: SelectedCellProps<M>) => {
-            setSelectedCell(cell);
-        }, []);
-
-        const unselect = useCallback(() => {
-            setSelectedCell(undefined);
-        }, []);
-
         const customFieldValidator: CustomFieldValidator | undefined = uniqueFieldValidator;
 
         const propertyCellRenderer = useCallback(({
@@ -338,184 +256,82 @@ export const EntityCollectionTable = React.memo<EntityCollectionTableProps<any>>
             const column = props.column;
             const columns = props.columns;
             const columnKey = column.key;
-            if (props.columnIndex === 0) {
-                if (tableRowActionsBuilder)
-                    return tableRowActionsBuilder({
-                        entity: props.rowData,
-                        size,
-                        width: column.width,
-                        frozen: column.frozen
-                    });
-                else
-                    return <EntityCollectionRowActions entity={props.rowData}
-                                                       width={column.width}
-                                                       frozen={column.frozen}
-                                                       isSelected={false}
-                                                       size={size}/>;
-            } else if (additionalFieldsMap[columnKey]) {
-                return additionalCellRenderer(props);
-            } else if (props.columnIndex < columns.length + 1) {
-                return propertyCellRenderer(props);
-            } else {
-                throw Error("Internal: columns not mapped properly");
+
+            try {
+                if (props.columnIndex === 0) {
+                    if (tableRowActionsBuilder)
+                        return tableRowActionsBuilder({
+                            entity: props.rowData,
+                            size,
+                            width: column.width,
+                            frozen: column.frozen
+                        });
+                    else
+                        return <EntityCollectionRowActions entity={props.rowData}
+                                                           width={column.width}
+                                                           frozen={column.frozen}
+                                                           isSelected={false}
+                                                           size={size}/>;
+                } else if (additionalFieldsMap[columnKey]) {
+                    return additionalCellRenderer(props);
+                } else if (props.columnIndex < columns.length + 1) {
+                    return propertyCellRenderer(props);
+                } else {
+                    throw Error("Internal: columns not mapped properly");
+                }
+            } catch (e: any) {
+                console.error("Error rendering cell", e);
+                return <EntityTableCell
+                    size={size}
+                    width={column.width}
+                    saved={false}
+                    value={null}
+                    align={"left"}
+                    fullHeight={false}
+                    disabled={true}>
+                    <ErrorView error={e}/>
+                </EntityTableCell>;
             }
         }, [additionalFieldsMap, tableRowActionsBuilder, size, additionalCellRenderer, propertyCellRenderer])
 
-        const onFilterUpdate = useCallback((updatedFilterValues?: FilterValues<any>) => {
-            setFilterValues?.({ ...updatedFilterValues, ...forceFilter } as FilterValues<any>);
-        }, [forceFilter]);
-
-        // useTraceUpdate({
-        //     data,
-        //     columns,
-        //     inlineEditing,
-        //     size, selectedEntityIds, additionalCellRenderer, propertyCellRenderer,
-        //     cellRenderer,
-        //     onRowClick,
-        //     onEndReached: loadNextPage,
-        //     onResetPagination: resetPagination,
-        //     error: dataLoadingError,
-        //     paginationEnabled,
-        //     onColumnResize,
-        //     loading: dataLoading,
-        //     filter: filterValues,
-        //     onFilterUpdate,
-        //     sortBy,
-        //     onSortByUpdate: setSortBy,
-        //     hoverRow,
-        //     emptyComponent,
-        //     checkFilterCombination,
-        //     createFilterField,
-        // });
-
-        const onRowClick = inlineEditing ? undefined : (onEntityClick ? onRowClickCallback : undefined);
-
         return (
 
-            <EntityCollectionTableContext.Provider
-                value={{
-                    setPopupCell: setPopupCell as ((cell?: SelectedCellProps<M>) => void),
-                    select,
-                    onValueChange,
-                    size,
-                    selectedCell
-                }}
-            >
-
-                <div ref={ref}
-                     className="h-full w-full flex flex-col bg-white dark:bg-gray-950">
-
-                    <CollectionTableToolbar
-                        forceFilter={disabledFilterChange}
-                        filterIsSet={filterIsSet}
-                        onTextSearch={textSearchEnabled ? onTextSearch : undefined}
-                        textSearchLoading={textSearchLoading}
-                        onTextSearchClick={textSearchEnabled ? onTextSearchClick : undefined}
-                        clearFilter={clearFilter}
-                        size={size}
-                        onSizeChanged={updateSize}
-                        title={title}
-                        actionsStart={actionsStart}
-                        actions={actions}
-                        loading={dataLoading}/>
-
-                    <VirtualTable
-                        data={data}
-                        columns={columns}
-                        cellRenderer={cellRenderer}
-                        onRowClick={onRowClick}
-                        onEndReached={loadNextPage}
-                        onResetPagination={resetPagination}
-                        error={dataLoadingError}
-                        paginationEnabled={paginationEnabled}
-                        onColumnResize={onColumnResize}
-                        size={size}
-                        loading={dataLoading}
-                        filter={filterValues}
-                        onFilterUpdate={setFilterValues ? onFilterUpdate : undefined}
-                        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>) => {
-                            return selectedEntityIds?.includes(entity.id) ? "bg-gray-100 bg-opacity-75 dark:bg-gray-800 dark:bg-opacity-75" : "";
-                        }, [selectedEntityIds])}
-                        className="flex-grow"
-                        endAdornment={endAdornment}
-                        AddColumnComponent={AddColumnComponent}
-                    />
-
-                </div>
-            </EntityCollectionTableContext.Provider>
+            <div ref={ref}
+                 className="h-full w-full flex flex-col bg-white dark:bg-gray-950">
+
+                <CollectionTableToolbar
+                    forceFilter={disabledFilterChange}
+                    filterIsSet={filterIsSet}
+                    onTextSearch={textSearchEnabled ? onTextSearch : undefined}
+                    textSearchLoading={textSearchLoading}
+                    onTextSearchClick={textSearchEnabled ? onTextSearchClick : undefined}
+                    clearFilter={tableController.clearFilter}
+                    size={size}
+                    onSizeChanged={updateSize}
+                    title={title}
+                    actionsStart={actionsStart}
+                    actions={actions}
+                    loading={tableController.dataLoading}/>
+
+                <SimpleTable columns={columns}
+                             size={size}
+                             inlineEditing={inlineEditing}
+                             cellRenderer={cellRenderer}
+                             onEntityClick={onEntityClick}
+                             highlightedRow={useCallback((entity: Entity<M>) => selectedEntityIds?.includes(entity.id) ?? false, [selectedEntityIds])}
+                             tableController={tableController}
+                             onValueChange={onValueChange}
+                             onColumnResize={onColumnResize}
+                             hoverRow={hoverRow}
+                             filterable={filterable}
+                             emptyComponent={emptyComponent}
+                             endAdornment={endAdornment}
+                             AddColumnComponent={AddColumnComponent}/>
+
+
+            </div>
         );
 
     },
     equal
 );
-
-function createFilterField({
-                               id,
-                               filterValue,
-                               setFilterValue,
-                               column,
-                               hidden,
-                               setHidden
-                           }: FilterFormFieldProps<{
-    resolvedProperty: ResolvedProperty,
-    disabled: boolean,
-}>): React.ReactNode {
-
-    if (!column.custom) {
-        return null;
-    }
-
-    const { resolvedProperty } = column.custom;
-
-    const isArray = resolvedProperty?.dataType === "array";
-    const baseProperty: ResolvedProperty = isArray ? resolvedProperty.of : resolvedProperty;
-    if (!baseProperty) {
-        return null;
-    }
-    if (baseProperty.dataType === "reference") {
-        return <ReferenceFilterField value={filterValue}
-                                     setValue={setFilterValue}
-                                     name={id as string}
-                                     isArray={isArray}
-                                     path={baseProperty.path}
-                                     title={resolvedProperty?.name}
-                                     previewProperties={baseProperty?.previewProperties}
-                                     hidden={hidden}
-                                     setHidden={setHidden}/>;
-    } else if (baseProperty.dataType === "number" || baseProperty.dataType === "string") {
-        const name = baseProperty.name;
-        const enumValues = baseProperty.enumValues ? enumToObjectEntries(baseProperty.enumValues) : undefined;
-        return <StringNumberFilterField value={filterValue}
-                                        setValue={setFilterValue}
-                                        name={id as string}
-                                        dataType={baseProperty.dataType}
-                                        isArray={isArray}
-                                        enumValues={enumValues}
-                                        title={name}/>;
-    } else if (baseProperty.dataType === "boolean") {
-        const name = baseProperty.name;
-        return <BooleanFilterField value={filterValue}
-                                   setValue={setFilterValue}
-                                   name={id as string}
-                                   title={name}/>;
-
-    } else if (baseProperty.dataType === "date") {
-        const title = baseProperty.name;
-        return <DateTimeFilterField value={filterValue}
-                                    setValue={setFilterValue}
-                                    name={id as string}
-                                    mode={baseProperty.mode}
-                                    isArray={isArray}
-                                    title={title}/>;
-    }
-
-    return (
-        <div>{`Currently the filter field ${resolvedProperty.dataType} is not supported`}</div>
-    );
-}

package/src/components/EntityCollectionTable/EntityCollectionTableProps.tsx

@@ -23,7 +23,6 @@ export type OnColumnResizeParams = { width: number, key: string };
 export type EntityCollectionTableProps<M extends Record<string, any>,
     UserType extends User = User> = {
 
-    debugKey?: string;
     /**
      * Display these entities as selected
      */
@@ -103,7 +102,7 @@ export type EntityCollectionTableProps<M extends Record<string, any>,
 
     textSearchEnabled?: boolean;
 
-    inlineEditing?: boolean | ((entity: Entity<M>) => boolean);
+    inlineEditing?: boolean;
 
     additionalFields?: AdditionalFieldDelegate<M, UserType>[];
 

package/src/components/EntityCollectionTable/{SimpleEntityCollectionTable.tsx → SimpleTable.tsx}

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect } from "react";
+import React, { useCallback, useEffect, useRef } from "react";
 import equal from "react-fast-compare";
 import {
     CollectionSize,
@@ -6,33 +6,21 @@ import {
     EntityTableController,
     FilterValues,
     ResolvedProperty,
-    SelectedCellProps,
-    User
+    SelectedCellProps
 } from "../../types";
-import { useLargeLayout } from "../../hooks";
 import { CellRendererParams, VirtualTable, VirtualTableColumn } from "../VirtualTable";
 import { enumToObjectEntries } from "../../util";
 import { OnCellValueChange } from "./types";
-import { CollectionTableToolbar } from "./internal/CollectionTableToolbar";
-import { EntityCollectionTableProps, OnColumnResizeParams } from "./EntityCollectionTableProps";
+import { OnColumnResizeParams } from "./EntityCollectionTableProps";
 import { FilterFormFieldProps } from "../VirtualTable/VirtualTableHeader";
 import { ReferenceFilterField } from "./filters/ReferenceFilterField";
 import { StringNumberFilterField } from "./filters/StringNumberFilterField";
 import { BooleanFilterField } from "./filters/BooleanFilterField";
 import { DateTimeFilterField } from "./filters/DateTimeFilterField";
 import { EntityCollectionTableContext } from "./EntityCollectionTable";
+import { useOutsideAlerter } from "@firecms/ui";
 
-export type SimpleEntityCollectionTableProps<M extends Record<string, any>> = {
-
-    /**
-     * List of entities that will be displayed as selected;
-     */
-    highlightedEntities?: Entity<M>[];
-
-    /**
-     * Override the title in the toolbar
-     */
-    title?: React.ReactNode;
+export type SimpleTableProps<M extends Record<string, any>> = {
 
     /**
      * Callback when a cell value changes.
@@ -65,28 +53,11 @@ export type SimpleEntityCollectionTableProps<M extends Record<string, any>> = {
      */
     onColumnResize?(params: OnColumnResizeParams): void;
 
-    /**
-     * Callback when the selected size of the table is changed
-     */
-    onSizeChanged?(size: CollectionSize): void;
-
     /**
      * Should apply a different style to a row when hovering
      */
     hoverRow?: boolean;
 
-    /**
-     * Additional component that renders actions such as buttons in the
-     * collection toolbar, displayed on the left side
-     */
-    actionsStart?: React.ReactNode;
-
-    /**
-     * Additional component that renders actions such as buttons in the
-     * collection toolbar, displayed on the right side
-     */
-    actions?: React.ReactNode;
-
     /**
      * Controller holding the logic for the table
      * {@link useDataSourceEntityCollectionTableController}
@@ -100,14 +71,18 @@ export type SimpleEntityCollectionTableProps<M extends Record<string, any>> = {
 
     inlineEditing?: boolean;
 
-    textSearchEnabled?: boolean;
+    forceFilter?: FilterValues<keyof M extends string ? keyof M : never>;
+
+    highlightedRow?: (data: Entity<M>) => boolean;
 
-    emptyComponent?: React.ReactNode;
+    size?: CollectionSize;
 
-    forceFilter?: FilterValues<keyof M extends string ? keyof M : never>;
-}
+    emptyComponent?: React.ReactNode;
 
+    endAdornment?: React.ReactNode;
 
+    AddColumnComponent?: React.ComponentType;
+}
 
 /**
  * This component is in charge of rendering a collection table with a high
@@ -133,18 +108,13 @@ export type SimpleEntityCollectionTableProps<M extends Record<string, any>> = {
  * @see VirtualTable
  * @group Components
  */
-export const SimpleEntityCollectionTable = React.memo<SimpleEntityCollectionTableProps<any>>(
-    function SimpleEntityCollectionTable<M extends Record<string, any>, UserType extends User>
+export const SimpleTable = React.memo<SimpleTableProps<any>>(
+    function SimpleTable<M extends Record<string, any>>
     ({
-         actionsStart,
-         actions,
-         title,
          onValueChange,
          cellRenderer,
-         highlightedEntities,
          onEntityClick,
          onColumnResize,
-         onSizeChanged,
          hoverRow = true,
          inlineEditing = false,
          tableController:
@@ -167,21 +137,19 @@ export const SimpleEntityCollectionTable = React.memo<SimpleEntityCollectionTabl
                  setPopupCell
              },
          filterable = true,
-         sortable = true,
          emptyComponent,
-         textSearchEnabled,
          columns,
-         forceFilter
-     }: SimpleEntityCollectionTableProps<M>) {
-
-        const largeLayout = useLargeLayout();
+         forceFilter,
+         highlightedRow,
+         endAdornment,
+         AddColumnComponent
+     }: SimpleTableProps<M>) {
 
+        const ref = useRef<HTMLDivElement>(null);
         const [size, setSize] = React.useState<CollectionSize>("m");
 
         const [selectedCell, setSelectedCell] = React.useState<SelectedCellProps<M> | undefined>(undefined);
 
-        const filterIsSet = !!filterValues && Object.keys(filterValues).length > 0;
-
         const loadNextPage = () => {
             if (!paginationEnabled || dataLoading || noMoreToLoad)
                 return;
@@ -201,13 +169,13 @@ export const SimpleEntityCollectionTable = React.memo<SimpleEntityCollectionTabl
             return onEntityClick && onEntityClick(rowData);
         }, [onEntityClick, inlineEditing]);
 
-        const updateSize = useCallback((size: CollectionSize) => {
-            if (onSizeChanged)
-                onSizeChanged(size);
-            setSize(size);
-        }, []);
-
-        const onTextSearch = useCallback((newSearchString?: string) => setSearchString?.(newSearchString), []);
+        useOutsideAlerter(ref,
+            () => {
+                if (selectedCell) {
+                    unselect();
+                }
+            },
+            Boolean(selectedCell));
 
         // on ESC key press
         useEffect(() => {
@@ -244,18 +212,8 @@ export const SimpleEntityCollectionTable = React.memo<SimpleEntityCollectionTabl
                     selectedCell,
                 }}
             >
-                <div className="h-full w-full flex flex-col bg-white dark:bg-gray-950">
-
-                    <CollectionTableToolbar
-                        filterIsSet={filterIsSet}
-                        onTextSearch={textSearchEnabled ? onTextSearch : undefined}
-                        clearFilter={clearFilter}
-                        size={size}
-                        onSizeChanged={updateSize}
-                        title={title}
-                        actionsStart={actionsStart}
-                        actions={actions}
-                        loading={dataLoading}/>
+                <div className="h-full w-full flex flex-col bg-white dark:bg-gray-950"
+                     ref={ref}>
 
                     <VirtualTable
                         data={data}
@@ -274,10 +232,15 @@ export const SimpleEntityCollectionTable = React.memo<SimpleEntityCollectionTabl
                         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>) => {
+                            return highlightedRow?.(entity) ? "bg-gray-100 bg-opacity-75 dark:bg-gray-800 dark:bg-opacity-75" : "";
+                        }, [highlightedRow])}
                         className="flex-grow"
+                        emptyComponent={emptyComponent}
+                        endAdornment={endAdornment}
+                        AddColumnComponent={AddColumnComponent}
                     />
 
                 </div>

package/src/components/EntityCollectionTable/index.tsx

@@ -14,7 +14,7 @@ export type {
 } from "./types";
 
 export * from "./PropertyTableCell";
-export * from "./SimpleEntityCollectionTable";
+export * from "./SimpleTable";
 export * from "./EntityCollectionRowActions";
 export * from "./useDataSourceEntityCollectionTableController";
 export * from "./column_utils";

package/src/components/EntityCollectionTable/useDataSourceEntityCollectionTableController.tsx

@@ -5,10 +5,10 @@ import { useDataOrder } from "../../hooks/data/useDataOrder";
 import {
     Entity,
     EntityCollection,
+    EntityTableController,
     FilterValues,
     FireCMSContext,
     SelectedCellProps,
-    EntityTableController,
     User
 } from "../../types";
 import { useDebouncedData } from "./useDebouncedData";

package/src/components/EntityCollectionView/EntityCollectionView.tsx

@@ -754,14 +754,15 @@ function EntitiesCount({
     const resolvedPath = useMemo(() => navigation.resolveAliasesFrom(fullPath), [fullPath, navigation.resolveAliasesFrom]);
 
     useEffect(() => {
-        dataSource.countEntities({
-            path: resolvedPath,
-            collection,
-            filter,
-            orderBy: sortByProperty,
-            order: currentSort
-        }).then(setCount).catch(setError);
-    }, [fullPath, dataSource, resolvedPath, collection, filter, sortByProperty, currentSort]);
+        if (dataSource.countEntities)
+            dataSource.countEntities({
+                path: resolvedPath,
+                collection,
+                filter,
+                orderBy: sortByProperty,
+                order: currentSort
+            }).then(setCount).catch(setError);
+    }, [fullPath, dataSource.countEntities, resolvedPath, collection, filter, sortByProperty, currentSort]);
 
     useEffect(() => {
         if (onCountChange) {