@asteby/metacore-runtime-react 6.4.0 → 7.1.0

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # @asteby/metacore-runtime-react
 
+## 7.1.0
+
+### Minor Changes
+
+- 0cd085c: Zero-config CRUD UX from a single column flag.
+
+  Three changes that move polish from each app's metadata into the SDK default behaviour, so a model only needs `enableCRUDActions: true` plus `filterable: true` on the columns it wants searchable to get the same UX link / ops / hub render today:
+  1. **Auto-derive filter chip type from column type.** A column flagged `filterable: true` without options or a `searchEndpoint` no longer falls back to "no filter" — it picks the FilterableColumnHeader variant that matches the column type: `text` for text/email/phone/tags, `number_range` for numeric columns, `boolean` for booleans, `select` when options/endpoint are present.
+  2. **Auto-render the row Actions column when `enableCRUDActions` is on.** If the host metadata already declares its own `actions[]`, those win. When it doesn't, the SDK falls back to the canonical View / Edit / Delete trio wired to DynamicTable's existing `view` / `edit` / `delete` handlers — no host-side glue.
+  3. **`<DynamicCRUDPage>` defaults `hideRefresh` to `true`.** The page-level Refresh button duplicated the one DynamicTable's internal toolbar already ships next to "View"; the page chrome now defers to it. Apps that want both back can pass `hideRefresh={false}`.
+
+## 7.0.0
+
+### Patch Changes
+
+- 3450876: Add `getInitials(name)` helper to `@asteby/metacore-ui/lib`.
+
+  Pulls a duplicated 6-line snippet (`name.split(' ').map(n => n[0]).slice(0, 2).join('').toUpperCase()`) out of every avatar across the platform — chat headers, profile dropdowns, dynamic-table avatar cells, sidebar nav. Trims whitespace, caps token count, and falls back to a single character when the input is empty.
+
+  `runtime-react`'s avatar cell renderer now uses it; visually identical, one less inline lambda.
+
+- Updated dependencies [3450876]
+  - @asteby/metacore-ui@0.7.0
+
 ## 6.4.0
 
 ### Minor Changes

package/dist/dynamic-columns.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dynamic-columns.d.ts","sourceRoot":"","sources":["../src/dynamic-columns.tsx"],"names":[],"mappings":"AAqCA,OAAO,KAAK,EAER,iBAAiB,EACpB,MAAM,wBAAwB,CAAA;AAE/B,qEAAqE;AACrE,MAAM,WAAW,qBAAqB;IAClC;;;;OAIG;IACH,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM,CAAA;IACtC;;;;OAIG;IACH,UAAU,CAAC,EAAE,MAAM,CAAA;CACtB;AAwHD;;;;GAIG;AACH,wBAAgB,4BAA4B,CACxC,OAAO,GAAE,qBAA0B,GACpC,iBAAiB,CAmVnB;AAED;;;;GAIG;AACH,eAAO,MAAM,wBAAwB,EAAE,iBACL,CAAA"}
+{"version":3,"file":"dynamic-columns.d.ts","sourceRoot":"","sources":["../src/dynamic-columns.tsx"],"names":[],"mappings":"AAqCA,OAAO,KAAK,EAER,iBAAiB,EACpB,MAAM,wBAAwB,CAAA;AAE/B,qEAAqE;AACrE,MAAM,WAAW,qBAAqB;IAClC;;;;OAIG;IACH,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM,CAAA;IACtC;;;;OAIG;IACH,UAAU,CAAC,EAAE,MAAM,CAAA;CACtB;AAwHD;;;;GAIG;AACH,wBAAgB,4BAA4B,CACxC,OAAO,GAAE,qBAA0B,GACpC,iBAAiB,CAiXnB;AAED;;;;GAIG;AACH,eAAO,MAAM,wBAAwB,EAAE,iBACL,CAAA"}

package/dist/dynamic-columns.js

@@ -15,7 +15,7 @@ import * as icons from 'lucide-react';
 import { MoreHorizontal } from 'lucide-react';
 import { Avatar, AvatarFallback, AvatarImage, Badge, Button, Checkbox, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, } from '@asteby/metacore-ui';
 import { DataTableColumnHeader, FilterableColumnHeader, } from '@asteby/metacore-ui/data-table';
-import { generateBadgeStyles } from '@asteby/metacore-ui/lib';
+import { generateBadgeStyles, getInitials } from '@asteby/metacore-ui/lib';
 import { OptionsContext } from './options-context';
 import { DynamicIcon } from './dynamic-icon';
 const defaultGetImageUrl = (path) => path;
@@ -207,12 +207,7 @@ export function makeDefaultGetDynamicColumns(helpers = {}) {
                             else if (value) {
                                 avatarSrc = `${apiBaseUrl}${col.basePath || ''}${value}`;
                             }
-                            return (_jsxs("div", { className: "flex items-center gap-3 min-w-0", children: [_jsxs(Avatar, { className: "h-8 w-8 rounded-lg ring-1 ring-border/50", children: [_jsx(AvatarImage, { src: getImageUrl(avatarSrc || ''), alt: String(name), className: "object-cover" }), _jsx(AvatarFallback, { className: "text-[10px] font-bold bg-primary/5 text-primary rounded-lg", children: String(name)
-                                                    .split(' ')
-                                                    .map((n) => n[0])
-                                                    .slice(0, 2)
-                                                    .join('')
-                                                    .toUpperCase() })] }), _jsxs("div", { className: "flex flex-col min-w-0 overflow-hidden", children: [_jsx("span", { className: "font-medium text-sm truncate leading-none mb-0.5 text-foreground/90", children: String(name) }), desc && (_jsx("span", { className: "text-[11px] text-muted-foreground truncate leading-none", children: String(desc) }))] })] }));
+                            return (_jsxs("div", { className: "flex items-center gap-3 min-w-0", children: [_jsxs(Avatar, { className: "h-8 w-8 rounded-lg ring-1 ring-border/50", children: [_jsx(AvatarImage, { src: getImageUrl(avatarSrc || ''), alt: String(name), className: "object-cover" }), _jsx(AvatarFallback, { className: "text-[10px] font-bold bg-primary/5 text-primary rounded-lg", children: getInitials(String(name)) })] }), _jsxs("div", { className: "flex flex-col min-w-0 overflow-hidden", children: [_jsx("span", { className: "font-medium text-sm truncate leading-none mb-0.5 text-foreground/90", children: String(name) }), desc && (_jsx("span", { className: "text-[11px] text-muted-foreground truncate leading-none", children: String(desc) }))] })] }));
                         }
                         case 'relation-badge-list':
                             return renderRelationBadges(value, col);
@@ -271,14 +266,47 @@ export function makeDefaultGetDynamicColumns(helpers = {}) {
                 enableHiding: true,
             });
         });
-        if (metadata.hasActions && metadata.actions.length > 0) {
+        // Resolve which actions to surface in the row dropdown:
+        //   1. If the host metadata declares its own actions, use them as-is.
+        //   2. Otherwise, when enableCRUDActions is true, fall back to the
+        //      canonical View / Edit / Delete trio so any model with CRUD on
+        //      gets the same dropdown without the host having to declare it.
+        // The DynamicTable wires `view`/`edit`/`delete` to its own dialogs
+        // through onAction, so labels/icons are the only thing this needs to
+        // ship.
+        const explicitActions = metadata.actions ?? [];
+        const hasExplicitActions = (metadata.hasActions ?? explicitActions.length > 0) && explicitActions.length > 0;
+        const defaultCRUDActions = metadata.enableCRUDActions
+            ? [
+                {
+                    key: 'view',
+                    name: 'view',
+                    label: t ? t('datatable.view_record') : 'Ver',
+                    icon: 'Eye',
+                },
+                {
+                    key: 'edit',
+                    name: 'edit',
+                    label: t ? t('datatable.edit') : 'Editar',
+                    icon: 'Pencil',
+                },
+                {
+                    key: 'delete',
+                    name: 'delete',
+                    label: t ? t('datatable.delete') : 'Eliminar',
+                    icon: 'Trash2',
+                },
+            ]
+            : [];
+        const resolvedActions = hasExplicitActions ? explicitActions : defaultCRUDActions;
+        if (resolvedActions.length > 0) {
             columns.push({
                 id: 'actions',
                 header: () => _jsx("div", { className: "text-right", children: t ? t('common.actions') : 'Acciones' }),
                 size: 80,
                 maxSize: 80,
                 meta: {},
-                cell: ({ row }) => (_jsx("div", { className: "flex items-center justify-end", children: _jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsxs(Button, { variant: "ghost", className: "h-8 w-8 p-0", children: [_jsx("span", { className: "sr-only", children: "Abrir men\u00FA" }), _jsx(MoreHorizontal, { className: "h-4 w-4" })] }) }), _jsx(DropdownMenuContent, { align: "end", children: metadata.actions
+                cell: ({ row }) => (_jsx("div", { className: "flex items-center justify-end", children: _jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsxs(Button, { variant: "ghost", className: "h-8 w-8 p-0", children: [_jsx("span", { className: "sr-only", children: "Abrir men\u00FA" }), _jsx(MoreHorizontal, { className: "h-4 w-4" })] }) }), _jsx(DropdownMenuContent, { align: "end", children: resolvedActions
                                     .filter((action) => {
                                     if (!action.condition)
                                         return true;

package/dist/dynamic-crud-page.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dynamic-crud-page.d.ts","sourceRoot":"","sources":["../src/dynamic-crud-page.tsx"],"names":[],"mappings":"AAwBA,OAAO,KAKN,MAAM,OAAO,CAAA;AAWd,MAAM,WAAW,sBAAsB;IACnC,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,MAAM,CAAC,EAAE,MAAM,CAAA;IACf;mDAC+C;IAC/C,SAAS,CAAC,EAAE,MAAM,CAAA;CACrB;AASD,MAAM,WAAW,sBAAsB;IACnC,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,YAAY,CAAC,EAAE,MAAM,CAAA;CACxB;AAED,MAAM,WAAW,oBAAoB;IACjC,iEAAiE;IACjE,KAAK,EAAE,MAAM,CAAA;IACb,kEAAkE;IAClE,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,8DAA8D;IAC9D,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,gFAAgF;IAChF,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,4EAA4E;IAC5E,IAAI,CAAC,EAAE,sBAAsB,CAAA;IAC7B,+EAA+E;IAC/E,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,2EAA2E;IAC3E,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC9B,8DAA8D;IAC9D,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC/B,sDAAsD;IACtD,OAAO,CAAC,EAAE,sBAAsB,CAAA;IAChC,0EAA0E;IAC1E,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;CACxB;AAED;;;;GAIG;AACH,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,2CAkL1D"}
+{"version":3,"file":"dynamic-crud-page.d.ts","sourceRoot":"","sources":["../src/dynamic-crud-page.tsx"],"names":[],"mappings":"AAwBA,OAAO,KAKN,MAAM,OAAO,CAAA;AAWd,MAAM,WAAW,sBAAsB;IACnC,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,MAAM,CAAC,EAAE,MAAM,CAAA;IACf;mDAC+C;IAC/C,SAAS,CAAC,EAAE,MAAM,CAAA;CACrB;AASD,MAAM,WAAW,sBAAsB;IACnC,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,YAAY,CAAC,EAAE,MAAM,CAAA;CACxB;AAED,MAAM,WAAW,oBAAoB;IACjC,iEAAiE;IACjE,KAAK,EAAE,MAAM,CAAA;IACb,kEAAkE;IAClE,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,8DAA8D;IAC9D,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,gFAAgF;IAChF,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,4EAA4E;IAC5E,IAAI,CAAC,EAAE,sBAAsB,CAAA;IAC7B,+EAA+E;IAC/E,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,2EAA2E;IAC3E,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC9B,8DAA8D;IAC9D,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC/B,sDAAsD;IACtD,OAAO,CAAC,EAAE,sBAAsB,CAAA;IAChC,0EAA0E;IAC1E,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;CACxB;AAED;;;;GAIG;AACH,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,2CAsL1D"}

package/dist/dynamic-crud-page.js

@@ -87,7 +87,11 @@ export function DynamicCRUDPage(props) {
     const effectiveHideCreate = hideCreate || ext?.hideCreate;
     const effectiveHideExport = hideExport || ext?.hideExport;
     const effectiveHideImport = hideImport || ext?.hideImport;
-    const effectiveHideRefresh = hideRefresh || ext?.hideRefresh;
+    // Refresh defaults to hidden in the page header — <DynamicTable> ships
+    // its own refresh icon next to the View / column-visibility toolbar, so
+    // showing one in the page chrome is just visual duplication. Apps that
+    // want it back can pass `hideRefresh={false}`.
+    const effectiveHideRefresh = hideRefresh ?? ext?.hideRefresh ?? true;
     const showCreate = enableCRUD && !effectiveHideCreate;
     const showImport = enableCRUD && !effectiveHideImport;
     const showExport = !effectiveHideExport;

package/dist/dynamic-table.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dynamic-table.d.ts","sourceRoot":"","sources":["../src/dynamic-table.tsx"],"names":[],"mappings":"AAiBA,OAAO,EAKH,KAAK,SAAS,EAajB,MAAM,uBAAuB,CAAA;AA+B9B,OAAO,KAAK,EAAsB,iBAAiB,EAAE,MAAM,wBAAwB,CAAA;AASnF,UAAU,iBAAiB;IACvB,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,aAAa,CAAC,EAAE,MAAM,EAAE,CAAA;IACxB,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,GAAG,EAAE,GAAG,KAAK,IAAI,CAAA;IAC7C,cAAc,CAAC,EAAE,GAAG,CAAA;IACpB,cAAc,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IACpC,YAAY,CAAC,EAAE,SAAS,CAAC,GAAG,CAAC,EAAE,CAAA;IAC/B;;;;;OAKG;IACH,iBAAiB,CAAC,EAAE,iBAAiB,CAAA;CACxC;AAED,wBAAgB,YAAY,CAAC,EACzB,KAAK,EACL,QAAQ,EACR,aAAoB,EACpB,aAAkB,EAClB,QAAQ,EACR,cAAc,EACd,cAAc,EACd,YAAiB,EACjB,iBAA4C,GAC/C,EAAE,iBAAiB,2CA4qBnB"}
+{"version":3,"file":"dynamic-table.d.ts","sourceRoot":"","sources":["../src/dynamic-table.tsx"],"names":[],"mappings":"AAiBA,OAAO,EAKH,KAAK,SAAS,EAajB,MAAM,uBAAuB,CAAA;AA+B9B,OAAO,KAAK,EAAsB,iBAAiB,EAAE,MAAM,wBAAwB,CAAA;AASnF,UAAU,iBAAiB;IACvB,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,aAAa,CAAC,EAAE,MAAM,EAAE,CAAA;IACxB,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,GAAG,EAAE,GAAG,KAAK,IAAI,CAAA;IAC7C,cAAc,CAAC,EAAE,GAAG,CAAA;IACpB,cAAc,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IACpC,YAAY,CAAC,EAAE,SAAS,CAAC,GAAG,CAAC,EAAE,CAAA;IAC/B;;;;;OAKG;IACH,iBAAiB,CAAC,EAAE,iBAAiB,CAAA;CACxC;AAED,wBAAgB,YAAY,CAAC,EACzB,KAAK,EACL,QAAQ,EACR,aAAoB,EACpB,aAAkB,EAClB,QAAQ,EACR,cAAc,EACd,cAAc,EACd,YAAiB,EACjB,iBAA4C,GAC/C,EAAE,iBAAiB,2CAsrBnB"}

package/dist/dynamic-table.js

@@ -469,8 +469,20 @@ export function DynamicTable({ model, endpoint, enableUrlSync = true, hiddenColu
                 continue;
             const hasStaticOptions = (c.options?.length ?? 0) > 0;
             const hasEndpoint = !!c.searchEndpoint;
-            if (!hasStaticOptions && !hasEndpoint && c.type !== 'boolean')
-                continue;
+            // Pick the filter UI from column type:
+            //   - explicit options or searchEndpoint → multi-select dropdown
+            //   - boolean → boolean toggle (renders as select under the hood)
+            //   - number / number_range / numeric → number range
+            //   - everything else (text, email, phone, tags…) → text contains
+            let filterType = 'select';
+            if (hasStaticOptions || hasEndpoint)
+                filterType = 'select';
+            else if (c.type === 'boolean')
+                filterType = 'boolean';
+            else if (c.type === 'number')
+                filterType = 'number_range';
+            else
+                filterType = 'text';
             const options = hasStaticOptions
                 ? c.options.map(o => ({
                     label: o.label,
@@ -482,7 +494,7 @@ export function DynamicTable({ model, endpoint, enableUrlSync = true, hiddenColu
                     ? filterOptionsMap.get(c.searchEndpoint) || []
                     : [];
             map.set(c.key, {
-                filterType: 'select',
+                filterType,
                 filterKey: c.key,
                 options,
                 selectedValues: dynamicFilters[c.key] || [],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@asteby/metacore-runtime-react",
-  "version": "6.4.0",
+  "version": "7.1.0",
   "description": "React runtime for metacore hosts — renders addon contributions dynamically",
   "repository": {
     "type": "git",
@@ -30,7 +30,7 @@
     "date-fns": ">=3",
     "react-day-picker": ">=8",
     "@asteby/metacore-sdk": "^2.2.0",
-    "@asteby/metacore-ui": "^0.6.0"
+    "@asteby/metacore-ui": "^0.7.0"
   },
   "peerDependenciesMeta": {
     "@tanstack/react-router": {
@@ -56,7 +56,7 @@
     "typescript": "^5.6.0",
     "zustand": "^5.0.0",
     "@asteby/metacore-sdk": "2.2.0",
-    "@asteby/metacore-ui": "0.6.0"
+    "@asteby/metacore-ui": "0.7.0"
   },
   "scripts": {
     "build": "tsc -p tsconfig.json",

package/src/dynamic-columns.tsx

@@ -31,7 +31,7 @@ import {
     FilterableColumnHeader,
     type ColumnFilterMeta,
 } from '@asteby/metacore-ui/data-table'
-import { generateBadgeStyles } from '@asteby/metacore-ui/lib'
+import { generateBadgeStyles, getInitials } from '@asteby/metacore-ui/lib'
 import { OptionsContext } from './options-context'
 import { DynamicIcon } from './dynamic-icon'
 import type { TableMetadata, ColumnDefinition } from './types'
@@ -329,12 +329,7 @@ export function makeDefaultGetDynamicColumns(
                                             className="object-cover"
                                         />
                                         <AvatarFallback className="text-[10px] font-bold bg-primary/5 text-primary rounded-lg">
-                                            {String(name)
-                                                .split(' ')
-                                                .map((n: string) => n[0])
-                                                .slice(0, 2)
-                                                .join('')
-                                                .toUpperCase()}
+                                            {getInitials(String(name))}
                                         </AvatarFallback>
                                     </Avatar>
                                     <div className="flex flex-col min-w-0 overflow-hidden">
@@ -466,7 +461,42 @@ export function makeDefaultGetDynamicColumns(
             })
         })
 
-        if (metadata.hasActions && metadata.actions.length > 0) {
+        // Resolve which actions to surface in the row dropdown:
+        //   1. If the host metadata declares its own actions, use them as-is.
+        //   2. Otherwise, when enableCRUDActions is true, fall back to the
+        //      canonical View / Edit / Delete trio so any model with CRUD on
+        //      gets the same dropdown without the host having to declare it.
+        // The DynamicTable wires `view`/`edit`/`delete` to its own dialogs
+        // through onAction, so labels/icons are the only thing this needs to
+        // ship.
+        const explicitActions = metadata.actions ?? []
+        const hasExplicitActions = (metadata.hasActions ?? explicitActions.length > 0) && explicitActions.length > 0
+        const defaultCRUDActions: typeof explicitActions =
+            metadata.enableCRUDActions
+                ? [
+                      {
+                          key: 'view',
+                          name: 'view',
+                          label: t ? t('datatable.view_record') : 'Ver',
+                          icon: 'Eye',
+                      } as any,
+                      {
+                          key: 'edit',
+                          name: 'edit',
+                          label: t ? t('datatable.edit') : 'Editar',
+                          icon: 'Pencil',
+                      } as any,
+                      {
+                          key: 'delete',
+                          name: 'delete',
+                          label: t ? t('datatable.delete') : 'Eliminar',
+                          icon: 'Trash2',
+                      } as any,
+                  ]
+                : []
+        const resolvedActions = hasExplicitActions ? explicitActions : defaultCRUDActions
+
+        if (resolvedActions.length > 0) {
             columns.push({
                 id: 'actions',
                 header: () => <div className="text-right">{t ? t('common.actions') : 'Acciones'}</div>,
@@ -483,7 +513,7 @@ export function makeDefaultGetDynamicColumns(
                                 </Button>
                             </DropdownMenuTrigger>
                             <DropdownMenuContent align="end">
-                                {metadata.actions
+                                {resolvedActions
                                     .filter((action) => {
                                         if (!action.condition) return true
                                         const { field, operator, value } = action.condition

package/src/dynamic-crud-page.tsx

@@ -156,7 +156,11 @@ export function DynamicCRUDPage(props: DynamicCRUDPageProps) {
     const effectiveHideCreate = hideCreate || ext?.hideCreate
     const effectiveHideExport = hideExport || ext?.hideExport
     const effectiveHideImport = hideImport || ext?.hideImport
-    const effectiveHideRefresh = hideRefresh || ext?.hideRefresh
+    // Refresh defaults to hidden in the page header — <DynamicTable> ships
+    // its own refresh icon next to the View / column-visibility toolbar, so
+    // showing one in the page chrome is just visual duplication. Apps that
+    // want it back can pass `hideRefresh={false}`.
+    const effectiveHideRefresh = hideRefresh ?? ext?.hideRefresh ?? true
     const showCreate = enableCRUD && !effectiveHideCreate
     const showImport = enableCRUD && !effectiveHideImport
     const showExport = !effectiveHideExport

package/src/dynamic-table.tsx

@@ -507,7 +507,17 @@ export function DynamicTable({
             if (!c.filterable || map.has(c.key)) continue
             const hasStaticOptions = (c.options?.length ?? 0) > 0
             const hasEndpoint = !!c.searchEndpoint
-            if (!hasStaticOptions && !hasEndpoint && c.type !== 'boolean') continue
+            // Pick the filter UI from column type:
+            //   - explicit options or searchEndpoint → multi-select dropdown
+            //   - boolean → boolean toggle (renders as select under the hood)
+            //   - number / number_range / numeric → number range
+            //   - everything else (text, email, phone, tags…) → text contains
+            let filterType: ColumnFilterConfig['filterType'] = 'select'
+            if (hasStaticOptions || hasEndpoint) filterType = 'select'
+            else if (c.type === 'boolean') filterType = 'boolean'
+            else if (c.type === 'number') filterType = 'number_range'
+            else filterType = 'text'
+
             const options = hasStaticOptions
                 ? c.options!.map(o => ({
                       label: o.label,
@@ -519,7 +529,7 @@ export function DynamicTable({
                   ? filterOptionsMap.get(c.searchEndpoint!) || []
                   : []
             map.set(c.key, {
-                filterType: 'select',
+                filterType,
                 filterKey: c.key,
                 options,
                 selectedValues: dynamicFilters[c.key] || [],