@vendure/dashboard 3.4.3-master-202509260228 → 3.5.0-minor-202510012036

package/src/lib/components/data-table/add-filter-menu.tsx

@@ -7,10 +7,11 @@ import {
     DropdownMenuItem,
     DropdownMenuTrigger,
 } from '@/vdb/components/ui/dropdown-menu.js';
-import { Trans } from '@/vdb/lib/trans.js';
-import { camelCaseToTitleCase } from '@/vdb/lib/utils.js';
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/vdb/components/ui/tooltip.js';
+import { useDynamicTranslations } from '@/vdb/hooks/use-dynamic-translations.js';
+import { Trans } from '@lingui/react/macro';
 import { Column, ColumnDef } from '@tanstack/react-table';
-import { PlusCircle } from 'lucide-react';
+import { FilterIcon } from 'lucide-react';
 import { useState } from 'react';
 
 export interface AddFilterMenuProps {
@@ -20,18 +21,24 @@ export interface AddFilterMenuProps {
 export function AddFilterMenu({ columns }: Readonly<AddFilterMenuProps>) {
     const [selectedColumn, setSelectedColumn] = useState<ColumnDef<any> | null>(null);
     const [isDialogOpen, setIsDialogOpen] = useState(false);
-
+    const { getTranslatedFieldName } = useDynamicTranslations();
     const filterableColumns = columns.filter(column => column.getCanFilter());
 
     return (
         <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
             <DropdownMenu>
-                <DropdownMenuTrigger asChild>
-                    <Button variant="outline" size="sm" className="h-8 border-dashed">
-                        <PlusCircle className="mr-2 h-4 w-4" />
+                <Tooltip>
+                    <TooltipTrigger asChild>
+                        <DropdownMenuTrigger asChild>
+                            <Button variant="outline" size="icon">
+                                <FilterIcon />
+                            </Button>
+                        </DropdownMenuTrigger>
+                    </TooltipTrigger>
+                    <TooltipContent>
                         <Trans>Add filter</Trans>
-                    </Button>
-                </DropdownMenuTrigger>
+                    </TooltipContent>
+                </Tooltip>
                 <DropdownMenuContent align="end" className="w-[200px]">
                     {filterableColumns.map(column => (
                         <DropdownMenuItem
@@ -41,7 +48,7 @@ export function AddFilterMenu({ columns }: Readonly<AddFilterMenuProps>) {
                                 setIsDialogOpen(true);
                             }}
                         >
-                            {camelCaseToTitleCase(column.id)}
+                            {getTranslatedFieldName(column.id)}
                         </DropdownMenuItem>
                     ))}
                 </DropdownMenuContent>

package/src/lib/components/data-table/data-table-bulk-action-item.tsx

@@ -1,5 +1,5 @@
 import { usePermissions } from '@/vdb/hooks/use-permissions.js';
-import { Trans } from '@/vdb/lib/trans.js';
+import { Trans } from '@lingui/react/macro';
 import { cn } from '@/vdb/lib/utils.js';
 import { LucideIcon } from 'lucide-react';
 import { useState } from 'react';
@@ -16,6 +16,13 @@ import {
 } from '../ui/alert-dialog.js';
 import { DropdownMenuItem } from '../ui/dropdown-menu.js';
 
+/**
+ * @description
+ *
+ * @docsCategory list-views
+ * @docsPage bulk-actions
+ * @since 3.4.0
+ */
 export interface DataTableBulkActionItemProps {
     label: React.ReactNode;
     icon?: LucideIcon;
@@ -25,14 +32,44 @@ export interface DataTableBulkActionItemProps {
     requiresPermission?: string[];
 }
 
+/**
+ * @description
+ * A component that should be used to implement any bulk actions for list pages & data tables.
+ *
+ * @example
+ * ```tsx
+ * import { DataTableBulkActionItem, Trans } from '\@vendure/dashboard';
+ * import { Check } from 'lucide-react';
+ *
+ * export const MyBulkAction: BulkActionComponent<any> = ({ selection, table }) => {
+ *
+ *   return (
+ *     <DataTableBulkActionItem
+ *       requiresPermission={['ReadMyCustomEntity']}
+ *       onClick={() => {
+ *         console.log('Selected items:', selection);
+ *       }}
+ *       label={<Trans>Delete</Trans>}
+ *       confirmationText={<Trans>Are you sure?</Trans>}
+ *       icon={Check}
+ *       className="text-destructive"
+ *     />
+ *   );
+ * }
+ * ```
+ *
+ * @docsCategory list-views
+ * @docsPage bulk-actions
+ * @since 3.4.0
+ */
 export function DataTableBulkActionItem({
-    label,
-    icon: Icon,
-    confirmationText,
-    className,
-    onClick,
-    requiresPermission,
-}: DataTableBulkActionItemProps) {
+                                            label,
+                                            icon: Icon,
+                                            confirmationText,
+                                            className,
+                                            onClick,
+                                            requiresPermission,
+                                        }: Readonly<DataTableBulkActionItemProps>) {
     const [isOpen, setIsOpen] = useState(false);
     const { hasPermissions } = usePermissions();
     const userHasPermission = hasPermissions(requiresPermission ?? []);

package/src/lib/components/data-table/data-table-bulk-actions.tsx

@@ -8,7 +8,7 @@ import {
 } from '@/vdb/components/ui/dropdown-menu.js';
 import { BulkAction } from '@/vdb/framework/extension-api/types/index.js';
 import { useFloatingBulkActions } from '@/vdb/hooks/use-floating-bulk-actions.js';
-import { Trans } from '@/vdb/lib/trans.js';
+import { Trans } from '@lingui/react/macro';
 import { Table } from '@tanstack/react-table';
 import { ChevronDown } from 'lucide-react';
 import { useRef } from 'react';
@@ -19,9 +19,9 @@ interface DataTableBulkActionsProps<TData> {
 }
 
 export function DataTableBulkActions<TData>({
-    table,
-    bulkActions,
-}: Readonly<DataTableBulkActionsProps<TData>>) {
+                                                table,
+                                                bulkActions,
+                                            }: Readonly<DataTableBulkActionsProps<TData>>) {
     const allBulkActions = useAllBulkActions(bulkActions);
 
     // Cache to store selected items across page changes

package/src/lib/components/data-table/data-table-column-header.tsx

@@ -1,7 +1,8 @@
 import { Button } from '@/vdb/components/ui/button.js';
-import { camelCaseToTitleCase } from '@/vdb/lib/utils.js';
+import { useDynamicTranslations } from '@/vdb/hooks/use-dynamic-translations.js';
 import { ColumnDef, HeaderContext } from '@tanstack/table-core';
 import { ArrowDown, ArrowUp, ArrowUpDown } from 'lucide-react';
+import { useMemo } from 'react';
 
 export interface DataTableColumnHeaderProps {
     customConfig: Partial<ColumnDef<any>>;
@@ -11,14 +12,18 @@ export interface DataTableColumnHeaderProps {
 export function DataTableColumnHeader({ headerContext, customConfig }: Readonly<DataTableColumnHeaderProps>) {
     const { column } = headerContext;
     const isSortable = column.getCanSort();
+    const { getTranslatedFieldName } = useDynamicTranslations();
 
-    const customHeader = customConfig.header;
-    let display = camelCaseToTitleCase(column.id);
-    if (typeof customHeader === 'function') {
-        display = customHeader(headerContext);
-    } else if (typeof customHeader === 'string') {
-        display = customHeader;
-    }
+    const display = useMemo(() => {
+        const customHeader = customConfig.header;
+        let result = getTranslatedFieldName(column.id);
+        if (typeof customHeader === 'function') {
+            result = customHeader(headerContext);
+        } else if (typeof customHeader === 'string') {
+            result = customHeader;
+        }
+        return result;
+    }, [customConfig.header, column.id, getTranslatedFieldName]);
 
     const columSort = column.getIsSorted();
     const nextSort = columSort === 'asc' ? true : columSort === 'desc' ? undefined : false;

package/src/lib/components/data-table/data-table-context.tsx

@@ -0,0 +1,91 @@
+'use client';
+
+import { ColumnFiltersState, SortingState, Table } from '@tanstack/react-table';
+import React, { createContext, ReactNode, useContext } from 'react';
+
+interface DataTableContextValue {
+    columnFilters: ColumnFiltersState;
+    setColumnFilters: React.Dispatch<React.SetStateAction<ColumnFiltersState>>;
+    searchTerm: string;
+    setSearchTerm: React.Dispatch<React.SetStateAction<string>>;
+    sorting: SortingState;
+    setSorting: React.Dispatch<React.SetStateAction<SortingState>>;
+    pageId?: string;
+    onFilterChange?: (table: Table<any>, filters: ColumnFiltersState) => void;
+    onSearchTermChange?: (searchTerm: string) => void;
+    onRefresh?: () => void;
+    isLoading?: boolean;
+    table?: Table<any>;
+    handleApplyView: (filters: ColumnFiltersState, searchTerm?: string) => void;
+}
+
+const DataTableContext = createContext<DataTableContextValue | undefined>(undefined);
+
+export interface DataTableProviderProps {
+    children: ReactNode;
+    columnFilters: ColumnFiltersState;
+    setColumnFilters: React.Dispatch<React.SetStateAction<ColumnFiltersState>>;
+    searchTerm: string;
+    setSearchTerm: React.Dispatch<React.SetStateAction<string>>;
+    sorting: SortingState;
+    setSorting: React.Dispatch<React.SetStateAction<SortingState>>;
+    pageId?: string;
+    onFilterChange?: (table: Table<any>, filters: ColumnFiltersState) => void;
+    onSearchTermChange?: (searchTerm: string) => void;
+    onRefresh?: () => void;
+    isLoading?: boolean;
+    table?: Table<any>;
+}
+
+export function DataTableProvider({
+    children,
+    columnFilters,
+    setColumnFilters,
+    searchTerm,
+    setSearchTerm,
+    sorting,
+    setSorting,
+    pageId,
+    onFilterChange,
+    onSearchTermChange,
+    onRefresh,
+    isLoading,
+    table,
+}: DataTableProviderProps) {
+    const handleApplyView = (filters: ColumnFiltersState, viewSearchTerm?: string) => {
+        setColumnFilters(filters);
+        if (viewSearchTerm !== undefined && onSearchTermChange) {
+            setSearchTerm(viewSearchTerm);
+            onSearchTermChange(viewSearchTerm);
+        }
+        if (onFilterChange && table) {
+            onFilterChange(table, filters);
+        }
+    };
+
+    const value: DataTableContextValue = {
+        columnFilters,
+        setColumnFilters,
+        searchTerm,
+        setSearchTerm,
+        sorting,
+        setSorting,
+        pageId,
+        onFilterChange,
+        onSearchTermChange,
+        onRefresh,
+        isLoading,
+        table,
+        handleApplyView,
+    };
+
+    return <DataTableContext.Provider value={value}>{children}</DataTableContext.Provider>;
+}
+
+export function useDataTableContext() {
+    const context = useContext(DataTableContext);
+    if (context === undefined) {
+        throw new Error('useDataTableContext must be used within a DataTableProvider');
+    }
+    return context;
+}

package/src/lib/components/data-table/data-table-faceted-filter.tsx

@@ -16,6 +16,7 @@ import {
 import { Popover, PopoverContent, PopoverTrigger } from '@/vdb/components/ui/popover.js';
 import { Separator } from '@/vdb/components/ui/separator.js';
 import { cn } from '@/vdb/lib/utils.js';
+import { Trans } from '@lingui/react/macro';
 
 export interface DataTableFacetedFilterOption {
     label: string;
@@ -159,7 +160,7 @@ export function DataTableFacetedFilter<TData, TValue>({
                                         onSelect={() => column?.setFilterValue(undefined)}
                                         className="justify-center text-center"
                                     >
-                                        Clear filters
+                                        <Trans>Clear filters</Trans>
                                     </CommandItem>
                                 </CommandGroup>
                             </>

package/src/lib/components/data-table/data-table-filter-badge.tsx

@@ -1,5 +1,5 @@
 import { useLocalFormat } from '@/vdb/hooks/use-local-format.js';
-import { CircleX, Filter } from 'lucide-react';
+import { Filter, XIcon } from 'lucide-react';
 import { Badge } from '../ui/badge.js';
 import { HumanReadableOperator, Operator } from './human-readable-operator.js';
 import { ColumnDataType } from './types.js';
@@ -17,16 +17,20 @@ export function DataTableFilterBadge({
 }) {
     const [operator, value] = Object.entries(filter.value as Record<string, unknown>)[0];
     return (
-        <Badge key={filter.id} className="flex gap-1 items-center" variant="secondary">
+        <Badge
+            key={filter.id}
+            className="flex gap-1 items-center font-mono cursor-pointer "
+            variant="outline"
+            onClick={() => onRemove(filter)}
+        >
             <Filter size="12" className="opacity-50" />
             <div>{filter.id}</div>
             <div className="text-muted-foreground">
                 <HumanReadableOperator operator={operator as Operator} mode="short" />
             </div>
             <FilterValue value={value} dataType={dataType} currencyCode={currencyCode} />
-            <button className="cursor-pointer" onClick={() => onRemove(filter)}>
-                <CircleX size="14" />
-            </button>
+
+            <XIcon className="h-4" />
         </Badge>
     );
 }

package/src/lib/components/data-table/data-table-filter-dialog.tsx

@@ -7,7 +7,7 @@ import {
     DialogHeader,
     DialogTitle,
 } from '@/vdb/components/ui/dialog.js';
-import { Trans } from '@/vdb/lib/trans.js';
+import { Trans } from '@lingui/react/macro';
 import { Column } from '@tanstack/react-table';
 import { useState } from 'react';
 import { DataTableBooleanFilter } from './filters/data-table-boolean-filter.js';

package/src/lib/components/data-table/data-table-utils.ts

@@ -1,4 +1,5 @@
-import { FieldInfo } from '@/vdb/framework/document-introspection/get-document-structure.js';
+import { AccessorFnColumnDef } from '@tanstack/react-table';
+import { AccessorKeyColumnDef } from '@tanstack/table-core';
 
 /**
  * Returns the default column visibility configuration.
@@ -13,7 +14,7 @@ import { FieldInfo } from '@/vdb/framework/document-introspection/get-document-s
  * ```
  */
 export function getColumnVisibility(
-    fields: FieldInfo[],
+    columns: Array<AccessorKeyColumnDef<any> | AccessorFnColumnDef<any>>,
     defaultVisibility?: Record<string, boolean | undefined>,
     customFieldColumnNames?: string[],
 ): Record<string, boolean> {
@@ -23,12 +24,28 @@ export function getColumnVisibility(
         id: false,
         createdAt: false,
         updatedAt: false,
-        ...(allDefaultsTrue ? { ...Object.fromEntries(fields.map(f => [f.name, false])) } : {}),
-        ...(allDefaultsFalse ? { ...Object.fromEntries(fields.map(f => [f.name, true])) } : {}),
+        ...(allDefaultsTrue ? { ...Object.fromEntries(columns.map(f => [f.id, false])) } : {}),
+        ...(allDefaultsFalse ? { ...Object.fromEntries(columns.map(f => [f.id, true])) } : {}),
         // Make custom fields hidden by default unless overridden
         ...(customFieldColumnNames
             ? { ...Object.fromEntries(customFieldColumnNames.map(f => [f, false])) }
             : {}),
         ...defaultVisibility,
+        selection: true,
+        actions: true,
     };
 }
+
+/**
+ * Ensures that the default column order always starts with `id`, `createdAt`, `deletedAt`
+ */
+export function getStandardizedDefaultColumnOrder<T extends string | number | symbol>(
+    defaultColumnOrder?: T[],
+): T[] {
+    const standardFirstColumns = new Set(['id', 'createdAt', 'updatedAt']);
+    if (!defaultColumnOrder) {
+        return [...standardFirstColumns] as T[];
+    }
+    const rest = defaultColumnOrder.filter(c => !standardFirstColumns.has(c as string));
+    return [...standardFirstColumns, ...rest] as T[];
+}

package/src/lib/components/data-table/data-table-view-options.tsx

@@ -17,9 +17,11 @@ import {
     DropdownMenuTrigger,
 } from '@/vdb/components/ui/dropdown-menu.js';
 import { ScrollArea } from '@/vdb/components/ui/scroll-area.js';
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/vdb/components/ui/tooltip.js';
+import { useDynamicTranslations } from '@/vdb/hooks/use-dynamic-translations.js';
 import { usePage } from '@/vdb/hooks/use-page.js';
 import { useUserSettings } from '@/vdb/hooks/use-user-settings.js';
-import { Trans } from '@/vdb/lib/trans.js';
+import { Trans } from '@lingui/react/macro';
 
 interface DataTableViewOptionsProps<TData> {
     table: Table<TData>;
@@ -45,6 +47,7 @@ function SortableItem({ id, children }: { id: string; children: React.ReactNode
 
 export function DataTableViewOptions<TData>({ table }: DataTableViewOptionsProps<TData>) {
     const { setTableSettings } = useUserSettings();
+    const { getTranslatedFieldName } = useDynamicTranslations();
     const page = usePage();
     const columns = table
         .getAllColumns()
@@ -78,12 +81,18 @@ export function DataTableViewOptions<TData>({ table }: DataTableViewOptionsProps
     return (
         <div className="flex items-center gap-2">
             <DropdownMenu modal={false}>
-                <DropdownMenuTrigger asChild>
-                    <Button variant="ghost" size="sm" className="ml-auto hidden h-8 lg:flex">
-                        <Settings2 />
-                        <Trans>Columns</Trans>
-                    </Button>
-                </DropdownMenuTrigger>
+                <Tooltip>
+                    <TooltipTrigger asChild>
+                        <DropdownMenuTrigger asChild>
+                            <Button variant="outline" size="sm" className="ml-auto hidden h-8 lg:flex">
+                                <Settings2 />
+                            </Button>
+                        </DropdownMenuTrigger>
+                    </TooltipTrigger>
+                    <TooltipContent>
+                        <Trans>Column settings</Trans>
+                    </TooltipContent>
+                </Tooltip>
                 <DropdownMenuContent align="end" className="overflow-auto">
                     <ScrollArea className="max-h-[60vh]" type="always">
                         <DndContext
@@ -100,17 +109,19 @@ export function DataTableViewOptions<TData>({ table }: DataTableViewOptionsProps
                                         <DropdownMenuCheckboxItem
                                             className="capitalize"
                                             checked={column.getIsVisible()}
-                                            onCheckedChange={value => column.toggleVisibility(!!value)}
+                                            onCheckedChange={value => column.toggleVisibility(value)}
                                             onSelect={e => e.preventDefault()}
                                         >
-                                            {column.id}
+                                            {getTranslatedFieldName(column.id)}
                                         </DropdownMenuCheckboxItem>
                                     </SortableItem>
                                 ))}
                             </SortableContext>
                         </DndContext>
                         <DropdownMenuSeparator />
-                        <DropdownMenuItem onClick={handleReset}>Reset</DropdownMenuItem>
+                        <DropdownMenuItem onClick={handleReset}>
+                            <Trans>Reset</Trans>
+                        </DropdownMenuItem>
                     </ScrollArea>
                 </DropdownMenuContent>
             </DropdownMenu>