@firecms/core 3.0.0-beta.4.pre.2 → 3.0.0-beta.6

package/dist/internal/useBuildDataSource.d.ts

@@ -1,4 +1,4 @@
-import { DataSource, DataSourceDelegate, EntityReference, GeoPoint, NavigationController, PropertyConfig } from "../types";
+import { DataSource, DataSourceDelegate, NavigationController, PropertyConfig } from "../types";
 /**
  * Use this hook to build a {@link DataSource} based on Firestore
  * @param firebaseApp
@@ -9,18 +9,3 @@ export declare function useBuildDataSource({ delegate, propertyConfigs, navigati
     propertyConfigs?: Record<string, PropertyConfig>;
     navigationController: NavigationController;
 }): DataSource;
-/**
- * Recursive function that converts Firestore data types into CMS or plain
- * JS types.
- * FireCMS uses Javascript dates internally instead of Firestore timestamps.
- * This makes it easier to interact with the rest of the libraries and
- * bindings.
- * Also, Firestore references are replaced with {@link EntityReference}
- * @param data
- * @param buildReference
- * @param buildGeoPoint
- * @param buildDate
- * @param buildDelete
- * @group Firestore
- */
-export declare function cmsToDelegateModel(data: any, buildReference: (reference: EntityReference) => any, buildGeoPoint: (geoPoint: GeoPoint) => any, buildDate: (date: Date) => any, buildDelete: () => any): any;

package/dist/internal/useRestoreScroll.d.ts

@@ -2,5 +2,5 @@ import React from "react";
 export declare function useRestoreScroll(): {
     containerRef: React.RefObject<HTMLDivElement>;
     scroll: number;
-    direction: "down" | "up";
+    direction: "up" | "down";
 };

package/dist/preview/PropertyPreviewProps.d.ts

@@ -6,7 +6,7 @@ export type PreviewSize = "medium" | "small" | "tiny";
 /**
  * @group Preview components
  */
-export interface PropertyPreviewProps<T extends CMSType = any, CustomProps = any, M extends Record<string, any> = Record<string, any>> {
+export interface PropertyPreviewProps<T extends CMSType = any, CustomProps = any> {
     /**
      * Name of the property
      */
@@ -19,9 +19,6 @@ export interface PropertyPreviewProps<T extends CMSType = any, CustomProps = any
      * Property this display is related to
      */
     property: Property<T> | ResolvedProperty<T>;
-    /**
-     * Click handler
-     */
     /**
      * Desired size of the preview, depending on the context.
      */

package/dist/types/auth.d.ts

@@ -1,16 +1,23 @@
 import { User } from "./user";
+import { Role } from "./roles";
+import { DataSourceDelegate } from "./datasource";
+import { StorageSource } from "./storage";
 /**
  * Controller for retrieving the logged user or performing auth related operations.
  * Note that if you are implementing your AuthController, you probably will want
  * to do it as the result of a hook.
  * @group Hooks and utilities
  */
-export type AuthController<UserType extends User = User, ExtraData extends any = any> = {
+export type AuthController<UserType extends User = any, ExtraData extends any = any> = {
     /**
      * The user currently logged in
      * The values can be: the user object, null if they skipped login
      */
     user: UserType | null;
+    /**
+     * Roles related to the logged user
+     */
+    roles?: Role[];
     /**
      * Initial loading flag. It is used not to display the login screen
      * when the app first loads, and it has not been checked whether the user
@@ -45,3 +52,25 @@ export type AuthController<UserType extends User = User, ExtraData extends any =
     extra: ExtraData;
     setExtra: (extra: ExtraData) => void;
 };
+/**
+ * Implement this function to allow access to specific users.
+ * @group Hooks and utilities
+ */
+export type Authenticator<UserType extends User = User, Controller extends AuthController<UserType> = AuthController<UserType>> = (props: {
+    /**
+     * Logged-in user or null
+     */
+    user: UserType | null;
+    /**
+     * AuthController
+     */
+    authController: Controller;
+    /**
+     * Connector to your database, e.g. your Firestore database
+     */
+    dataSourceDelegate: DataSourceDelegate;
+    /**
+     * Used storage implementation
+     */
+    storageSource: StorageSource;
+}) => boolean | Promise<boolean>;

package/dist/types/collections.d.ts

@@ -16,7 +16,7 @@ import { EntityOverrides } from "./entity_overrides";
  *
  * @group Models
  */
-export interface EntityCollection<M extends Record<string, any> = any, UserType extends User = User> {
+export interface EntityCollection<M extends Record<string, any> = any, UserType extends User = any> {
     /**
      * You can set an alias that will be used internally instead of the `path`.
      * The `alias` value will be used to determine the URL of the collection,
@@ -94,6 +94,10 @@ export interface EntityCollection<M extends Record<string, any> = any, UserType
      *       `subcollection:`. e.g. `subcollection:orders`.
      *     - If you are using a collection group, you will also have an
      *       additional `collectionGroupParent` column.
+     * You can use this prop to hide some properties from the table view.
+     * Note that if you set this prop, other ways to hide fields, like
+     * `hidden` in the property definition,will be ignored.
+     * `propertiesOrder` has precedence over `hidden`.
      */
     propertiesOrder?: Extract<keyof M, string>[];
     /**
@@ -128,7 +132,7 @@ export interface EntityCollection<M extends Record<string, any> = any, UserType
      * is being created, updated or deleted.
      * Useful for adding your own logic or blocking the execution of the operation.
      */
-    callbacks?: EntityCallbacks<M>;
+    callbacks?: EntityCallbacks<M, UserType>;
     /**
      * Builder for rendering additional components such as buttons in the
      * collection toolbar
@@ -382,7 +386,7 @@ export interface AdditionalFieldDelegate<M extends Record<string, any> = any, Us
      */
     value?: (props: {
         entity: Entity<M>;
-        context: FireCMSContext;
+        context: FireCMSContext<any>;
     }) => string | number | Promise<string | number> | undefined;
 }
 /**
@@ -445,7 +449,7 @@ export type EntityTableController<M extends Record<string, any> = any> = {
     filterValues?: FilterValues<Extract<keyof M, string>>;
     setFilterValues?: (filterValues: FilterValues<Extract<keyof M, string>>) => void;
     sortBy?: [Extract<keyof M, string>, "asc" | "desc"];
-    setSortBy?: (sortBy: [Extract<keyof M, string>, "asc" | "desc"]) => void;
+    setSortBy?: (sortBy?: [Extract<keyof M, string>, "asc" | "desc"]) => void;
     searchString?: string;
     setSearchString?: (searchString?: string) => void;
     clearFilter?: () => void;

package/dist/types/datasource.d.ts

@@ -1,4 +1,4 @@
-import { Entity, EntityReference, EntityStatus, EntityValues, GeoPoint } from "./entities";
+import { Entity, EntityStatus, EntityValues } from "./entities";
 import { EntityCollection, FilterValues } from "./collections";
 import { ResolvedEntityCollection } from "./resolved_entities";
 /**
@@ -7,7 +7,7 @@ import { ResolvedEntityCollection } from "./resolved_entities";
 export interface FetchEntityProps<M extends Record<string, any> = any> {
     path: string;
     entityId: string;
-    collection?: EntityCollection<M>;
+    collection?: EntityCollection<M, any>;
 }
 /**
  * @group Datasource
@@ -245,18 +245,15 @@ export interface DataSourceDelegate {
      * Convert a FireCMS reference to a reference that can be used by the datasource
      * @param reference
      */
-    buildReference: (reference: EntityReference) => any;
     /**
      * Convert a FireCMS GeoPoint to a GeoPoint that can be used by the datasource
      * @param geoPoint
      */
-    buildGeoPoint: (geoPoint: GeoPoint) => any;
     /**
      * Get the object to generate the current time in the datasource
      */
     currentTime(): any;
-    buildDate: (date: Date) => any;
-    buildDeleteFieldValue: () => any;
     delegateToCMSModel: (data: any) => any;
+    cmsToDelegateModel: (data: any) => any;
     setDateToMidnight: (input?: any) => any;
 }

package/dist/types/entities.d.ts

@@ -31,7 +31,7 @@ export type EntityValues<M extends object> = M;
 /**
  * Class used to create a reference to an entity in a different path
  */
-export declare class EntityReference<M extends Record<string, any> = any> {
+export declare class EntityReference {
     /**
      * ID of the entity
      */
@@ -56,3 +56,7 @@ export declare class GeoPoint {
     readonly longitude: number;
     constructor(latitude: number, longitude: number);
 }
+export declare class Vector {
+    readonly value: number[];
+    constructor(value: number[]);
+}

package/dist/types/entity_callbacks.d.ts

@@ -63,7 +63,7 @@ export interface EntityOnFetchProps<M extends Record<string, any> = any, UserTyp
     /**
      * Collection of the entity
      */
-    collection: EntityCollection<M>;
+    collection: EntityCollection<M, UserType>;
     /**
      * Full path of the CMS where this collection is being fetched.
      * Might contain unresolved aliases.
@@ -155,7 +155,7 @@ export interface EntityOnDeleteProps<M extends Record<string, any> = any, UserTy
     /**
      * Context of the app status
      */
-    context: FireCMSContext;
+    context: FireCMSContext<UserType>;
 }
 /**
  * Parameters passed to hooks when an entity is deleted

package/dist/types/index.d.ts

@@ -22,7 +22,7 @@ export * from "./local_config_persistence";
 export * from "./plugins";
 export * from "./analytics";
 export * from "./firecms";
-export * from "./appcheck";
+export * from "./roles";
 export * from "./export_import";
 export * from "./modify_collections";
 export * from "./analytics_controller";

package/dist/types/navigation.d.ts

@@ -6,7 +6,7 @@ import { EntityReference } from "./entities";
  * attributes.
  * @group Models
  */
-export type NavigationController = {
+export type NavigationController<EC extends EntityCollection = EntityCollection<any>> = {
     /**
      * List of the mapped collections in the CMS.
      * Each entry relates to a collection in the root database.
@@ -47,15 +47,15 @@ export type NavigationController = {
      * Get the collection configuration for a given path.
      * The collection is resolved from the given path or alias.
      */
-    getCollection: <EC extends EntityCollection = EntityCollection<any>>(pathOrAlias: string, entityId?: string, includeUserOverride?: boolean) => EC | undefined;
+    getCollection: (pathOrId: string, entityId?: string, includeUserOverride?: boolean) => EC | undefined;
     /**
      * Get the collection configuration from its parent path segments.
      */
-    getCollectionFromIds: <EC extends EntityCollection = EntityCollection<any>>(ids: string[]) => EC | undefined;
+    getCollectionFromIds: (ids: string[]) => EC | undefined;
     /**
      * Get the collection configuration from its parent path segments.
      */
-    getCollectionFromPaths: <EC extends EntityCollection = EntityCollection<any>>(pathSegments: string[]) => EC | undefined;
+    getCollectionFromPaths: (pathSegments: string[]) => EC | undefined;
     /**
      * Default path under the navigation routes of the CMS will be created
      */

package/dist/types/plugins.d.ts

@@ -11,11 +11,11 @@ import { ResolvedProperty } from "./resolved_entities";
  * NOTE: This is a work in progress and the API is not stable yet.
  * @group Core
  */
-export type FireCMSPlugin<PROPS = any, FORM_PROPS = any, EC extends EntityCollection = EntityCollection, COL_ACTIONS_PROPS = any> = {
+export type FireCMSPlugin<PROPS = any, FORM_PROPS = any, EC extends EntityCollection = EntityCollection, COL_ACTIONS_PROPS = any, COL_ACTIONS_START__PROPS = any> = {
     /**
-     * Name of the plugin
+     * Key of the plugin. This is used to identify the plugin in the CMS.
      */
-    name: string;
+    key: string;
     /**
      * If this flag is set to true, no content will be shown in the CMS
      * until the plugin is fully loaded.
@@ -78,6 +78,8 @@ export type FireCMSPlugin<PROPS = any, FORM_PROPS = any, EC extends EntityCollec
          */
         CollectionActions?: React.ComponentType<CollectionActionsProps<any, any, EC> & COL_ACTIONS_PROPS> | React.ComponentType<CollectionActionsProps<any, any, EC> & COL_ACTIONS_PROPS>[];
         collectionActionsProps?: COL_ACTIONS_PROPS;
+        CollectionActionsStart?: React.ComponentType<CollectionActionsProps<any, any, EC> & COL_ACTIONS_START__PROPS> | React.ComponentType<CollectionActionsProps<any, any, EC> & COL_ACTIONS_START__PROPS>[];
+        collectionActionsStartProps?: COL_ACTIONS_START__PROPS;
         showTextSearchBar?: (props: {
             context: FireCMSContext;
             path: string;

package/dist/types/properties.d.ts

@@ -1,14 +1,14 @@
 import React from "react";
 import { FieldProps } from "./fields";
 import { PropertyPreviewProps } from "../preview";
-import { EntityReference, EntityValues, GeoPoint } from "./entities";
+import { EntityReference, EntityValues, GeoPoint, Vector } from "./entities";
 import { ResolvedArrayProperty, ResolvedStringProperty } from "./resolved_entities";
 import { FilterValues } from "./collections";
 import { ChipColorKey, ChipColorScheme } from "@firecms/ui";
 /**
  * @group Entity properties
  */
-export type DataType<T extends CMSType = CMSType> = T extends string ? "string" : T extends number ? "number" : T extends boolean ? "boolean" : T extends Date ? "date" : T extends GeoPoint ? "geopoint" : T extends EntityReference ? "reference" : T extends Array<CMSType> ? "array" : T extends Record<string, any> ? "map" : never;
+export type DataType<T extends CMSType = CMSType> = T extends string ? "string" : T extends number ? "number" : T extends boolean ? "boolean" : T extends Date ? "date" : T extends GeoPoint ? "geopoint" : T extends Vector ? "vector" : T extends EntityReference ? "reference" : T extends Array<CMSType> ? "array" : T extends Record<string, any> ? "map" : never;
 /**
  * @group Entity properties
  */

package/dist/types/roles.d.ts

@@ -0,0 +1,31 @@
+import { Permissions } from "../index";
+export type Role = {
+    /**
+     * ID of the role
+     */
+    id: string;
+    /**
+     * Name of the role
+     */
+    name: string;
+    /**
+     * If this flag is true, the user can perform any action
+     */
+    isAdmin?: boolean;
+    /**
+     * Default permissions for all collections for this role.
+     * You can override this values at the collection level using
+     * {@link collectionPermissions}
+     */
+    defaultPermissions?: Permissions;
+    /**
+     * Record of stripped collection ids to their permissions.
+     * @see stripCollectionPath
+     */
+    collectionPermissions?: Record<string, Permissions>;
+    config?: {
+        createCollections?: boolean;
+        editCollections?: boolean | "own";
+        deleteCollections?: boolean | "own";
+    };
+};

package/dist/types/storage.d.ts

@@ -6,6 +6,7 @@ export interface UploadFileProps {
     fileName?: string;
     path?: string;
     metadata?: any;
+    bucket?: string;
 }
 /**
  * @group Models
@@ -15,6 +16,10 @@ export interface UploadFileResult {
      * Storage path including the file name where the file was uploaded.
      */
     path: string;
+    /**
+     * Bucket where the file was uploaded
+     */
+    bucket: string;
 }
 /**
  * @group Models
@@ -66,17 +71,20 @@ export interface StorageSource {
      * @param fileName
      * @param path
      * @param metadata
+     * @param bucket
      */
-    uploadFile: ({ file, fileName, path, metadata }: UploadFileProps) => Promise<UploadFileResult>;
+    uploadFile: ({ file, fileName, path, metadata, bucket }: UploadFileProps) => Promise<UploadFileResult>;
     /**
      * Convert a storage path or URL into a download configuration
      * @param path
+     * @param bucket
      */
-    getDownloadURL: (pathOrUrl: string) => Promise<DownloadConfig>;
+    getDownloadURL: (pathOrUrl: string, bucket?: string) => Promise<DownloadConfig>;
     /**
      * Get a file from a storage path.
      * It returns null if the file does not exist.
      * @param props
+     * @param bucket
      */
-    getFile: (path: string) => Promise<File | null>;
+    getFile: (path: string, bucket?: string) => Promise<File | null>;
 }

package/dist/types/user.d.ts

@@ -1,3 +1,4 @@
+import { Role } from "./roles";
 /**
  * This interface represents a user.
  * It has some of the same fields as a Firebase User.
@@ -33,4 +34,8 @@ export type User = {
      *
      */
     readonly isAnonymous: boolean;
+    /**
+     *
+     */
+    roles?: Role[];
 };

package/dist/util/collections.d.ts

@@ -8,4 +8,4 @@ export declare function resolveDefaultSelectedView(defaultSelectedView: string |
  * @param collections
  * @param permissionsBuilder
  */
-export declare const applyPermissionsFunctionIfEmpty: (collections: EntityCollection[], permissionsBuilder?: PermissionsBuilder) => EntityCollection[];
+export declare const applyPermissionsFunctionIfEmpty: (collections: EntityCollection[], permissionsBuilder?: PermissionsBuilder<any, any>) => EntityCollection[];

package/dist/util/entities.d.ts

@@ -23,6 +23,6 @@ export declare function updateDateAutoValues<M extends Record<string, any>>({ in
  * @group Datasource
  */
 export declare function sanitizeData<M extends Record<string, any>>(values: EntityValues<M>, properties: ResolvedProperties<M>): any;
-export declare function getReferenceFrom<M extends Record<string, any>>(entity: Entity<M>): EntityReference<M>;
+export declare function getReferenceFrom<M extends Record<string, any>>(entity: Entity<M>): EntityReference;
 export declare function traverseValuesProperties<M extends Record<string, any>>(inputValues: Partial<EntityValues<M>>, properties: ResolvedProperties<M>, operation: (value: any, property: Property) => any): EntityValues<M> | undefined;
 export declare function traverseValueProperty(inputValue: any, property: Property, operation: (value: any, property: Property) => any): any;

package/dist/util/navigation_utils.d.ts

@@ -8,10 +8,10 @@ export declare function resolveCollectionPathIds(path: string, allCollections: E
 /**
  * Find the corresponding view at any depth for a given path.
  * Note that path or segments of the paths can be collection aliases.
- * @param pathOrAlias
+ * @param pathOrId
  * @param collections
  */
-export declare function getCollectionByPathOrId(pathOrAlias: string, collections: EntityCollection[]): EntityCollection | undefined;
+export declare function getCollectionByPathOrId(pathOrId: string, collections: EntityCollection[]): EntityCollection | undefined;
 /**
  * Get the subcollection combinations from a path:
  * "sites/es/locales" => ["sites/es/locales", "sites"]

package/dist/util/resolutions.d.ts

@@ -2,11 +2,11 @@ import { ArrayProperty, CMSType, EntityCollection, EntityCustomView, EntityValue
 export declare const resolveCollection: <M extends Record<string, any>>({ collection, path, entityId, values, previousValues, userConfigPersistence, fields }: {
     collection: EntityCollection<M> | ResolvedEntityCollection<M>;
     path: string;
-    entityId?: string | undefined;
-    values?: Partial<M> | undefined;
-    previousValues?: Partial<M> | undefined;
-    userConfigPersistence?: UserConfigurationPersistence | undefined;
-    fields?: Record<string, PropertyConfig> | undefined;
+    entityId?: string;
+    values?: Partial<EntityValues<M>>;
+    previousValues?: Partial<EntityValues<M>>;
+    userConfigPersistence?: UserConfigurationPersistence;
+    fields?: Record<string, PropertyConfig>;
 }) => ResolvedEntityCollection<M>;
 /**
  * Resolve property builders, enums and arrays.

package/dist/util/useTraceUpdate.d.ts

@@ -1 +1,2 @@
+export declare function printChanged(props: any, prev: any, path?: string | undefined, depth?: number | undefined, maxDepth?: number | undefined): void;
 export declare function useTraceUpdate(props: any, maxDepth?: number): void;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@firecms/core",
   "type": "module",
-  "version": "3.0.0-beta.4.pre.2",
+  "version": "3.0.0-beta.6",
   "description": "Awesome Firebase/Firestore-based headless open-source CMS",
   "funding": {
     "url": "https://github.com/sponsors/firecmsco"
@@ -41,22 +41,25 @@
     ".": {
       "import": "./dist/index.es.js",
       "require": "./dist/index.umd.js",
-      "types": "./dist/src/index.d.ts"
+      "types": "./dist/index.d.ts"
     },
     "./package.json": "./package.json"
   },
   "dependencies": {
-    "@firecms/formex": "^3.0.0-beta.4.pre.2",
-    "@firecms/ui": "^3.0.0-beta.4.pre.2",
-    "@fontsource/ibm-plex-mono": "^5.0.12",
-    "@fontsource/roboto": "^5.0.12",
-    "@hello-pangea/dnd": "^16.5.0",
+    "@firecms/formex": "^3.0.0-beta.6",
+    "@firecms/ui": "^3.0.0-beta.6",
+    "@fontsource/jetbrains-mono": "^5.0.19",
+    "@hello-pangea/dnd": "^16.6.0",
+    "@radix-ui/react-portal": "^1.0.4",
+    "clsx": "^2.1.0",
     "date-fns": "^3.6.0",
     "history": "^5.3.0",
     "js-search": "^2.0.1",
     "markdown-it": "^14.1.0",
     "notistack": "^3.0.1",
     "object-hash": "^3.0.0",
+    "react-dropzone": "^14.2.3",
+    "react-fast-compare": "^3.2.2",
     "react-image-file-resizer": "^0.4.8",
     "react-markdown-editor-lite": "^1.3.4",
     "react-transition-group": "^4.4.5",
@@ -69,8 +72,8 @@
     "firebase": "^10.5.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-router": "^6.2.0",
-    "react-router-dom": "^6.2.0"
+    "react-router": "^6.22.0",
+    "react-router-dom": "^6.22.0"
   },
   "eslintConfig": {
     "extends": [
@@ -81,16 +84,16 @@
   "devDependencies": {
     "@jest/globals": "^29.7.0",
     "@testing-library/jest-dom": "^6.4.2",
-    "@testing-library/react": "^14.2.1",
+    "@testing-library/react": "^14.3.1",
     "@testing-library/user-event": "^14.5.2",
     "@types/jest": "^29.5.12",
-    "@types/node": "^20.11.30",
+    "@types/node": "^20.12.7",
     "@types/object-hash": "^3.0.6",
-    "@types/react": "^18.2.67",
-    "@types/react-dom": "^18.2.22",
+    "@types/react": "^18.2.79",
+    "@types/react-dom": "^18.2.25",
     "@types/react-measure": "^2.0.12",
-    "@typescript-eslint/eslint-plugin": "^7.3.1",
-    "@typescript-eslint/parser": "^7.3.1",
+    "@typescript-eslint/eslint-plugin": "^7.7.0",
+    "@typescript-eslint/parser": "^7.7.0",
     "@vitejs/plugin-react": "^4.2.1",
     "cross-env": "^7.0.3",
     "eslint": "^8.57.0",
@@ -100,22 +103,22 @@
     "eslint-plugin-promise": "^6.1.1",
     "eslint-plugin-react": "^7.34.1",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "firebase": "^10.9.0",
+    "firebase": "^10.11.0",
     "jest": "^29.7.0",
     "npm-run-all": "^4.1.5",
     "react-router": "^6.22.3",
     "react-router-dom": "^6.22.3",
     "ts-jest": "^29.1.2",
     "ts-node": "^10.9.2",
-    "tsd": "^0.30.7",
-    "typescript": "^5.4.2",
-    "vite": "^5.1.6"
+    "tsd": "^0.31.0",
+    "typescript": "^5.4.5",
+    "vite": "^5.2.9"
   },
   "files": [
     "dist",
     "src"
   ],
-  "gitHead": "77875cc369a0bfe7b0b141e794b14a819d5811df",
+  "gitHead": "ffcbddbd73211bb644ff7503c2c62790bff6202a",
   "publishConfig": {
     "access": "public"
   }

package/src/components/ClearFilterSortButton.tsx

@@ -0,0 +1,41 @@
+import { Button, FilterListOffIcon } from "@firecms/ui";
+import { EntityTableController } from "../types";
+
+export function ClearFilterSortButton({
+                                          tableController,
+                                          enabled
+                                      }: {
+    enabled: boolean;
+    tableController: EntityTableController
+}) {
+    if (!enabled) {
+        return null;
+    }
+
+    const filterIsSet = !!tableController.filterValues && Object.keys(tableController.filterValues).length > 0;
+    const sortIsSet = !!tableController.sortBy && tableController.sortBy.length > 0;
+
+    if ((filterIsSet || sortIsSet) && (tableController.clearFilter || tableController.setSortBy)) {
+        let label;
+        if (filterIsSet && sortIsSet) {
+            label = "Clear filter and sort";
+        } else if (filterIsSet) {
+            label = "Clear filter";
+        } else {
+            label = "Clear sort";
+        }
+        return <Button
+            variant={"outlined"}
+            className="h-fit-content"
+            aria-label="filter clear"
+            onClick={() => {
+                tableController.clearFilter?.();
+                tableController.setSortBy?.(undefined);
+            }}
+            size={"small"}>
+            <FilterListOffIcon/>
+            {label}
+        </Button>
+    }
+    return null;
+}

package/src/components/EntityCollectionTable/EntityCollectionTable.tsx

@@ -16,7 +16,6 @@ import { propertiesToColumns } from "./column_utils";
 import { ErrorView } from "../ErrorView";
 import { SelectableTable } from "../SelectableTable/SelectableTable";
 
-
 /**
  * This component is in charge of rendering a collection table with a high
  * degree of customization.
@@ -88,8 +87,6 @@ export const EntityCollectionTable = function EntityCollectionTable<M extends Re
 
     const selectedEntityIds = selectedEntities?.map(e => e.id);
 
-    const filterIsSet = !!tableController.filterValues && Object.keys(tableController.filterValues).length > 0;
-
     const updateSize = useCallback((size: CollectionSize) => {
         if (onSizeChanged)
             onSizeChanged(size);
@@ -179,7 +176,10 @@ export const EntityCollectionTable = function EntityCollectionTable<M extends Re
 
         const child = Builder
             ? <Builder entity={entity} context={context}/>
-            : <>{additionalField.value?.({ entity, context })}</>;
+            : <>{additionalField.value?.({
+                entity,
+                context
+            })}</>;
 
         return (
             <EntityTableCell
@@ -237,10 +237,12 @@ export const EntityCollectionTable = function EntityCollectionTable<M extends Re
 
     const columns: VirtualTableColumn[] = [
         idColumn,
-        ...displayedColumnIds
-            .map((p) => {
-                return collectionColumns.find(c => c.key === p.key);
-            }).filter(Boolean) as VirtualTableColumn[]
+        ...(displayedColumnIds
+            ? displayedColumnIds
+                .map((p) => {
+                    return collectionColumns.find(c => c.key === p.key);
+                }).filter(Boolean)
+            : collectionColumns) as VirtualTableColumn[]
     ];
 
     const cellRenderer = (props: CellRendererParams<any>) => {
@@ -291,12 +293,9 @@ export const EntityCollectionTable = function EntityCollectionTable<M extends Re
              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}