@vendure/dashboard 3.5.2-master-202512170238 → 3.5.2-master-202512190240

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

@@ -15,6 +15,17 @@ import { useChannel } from '@/vdb/hooks/use-channel.js';
 import { usePage } from '@/vdb/hooks/use-page.js';
 import { useSavedViews } from '@/vdb/hooks/use-saved-views.js';
 import { Trans, useLingui } from '@lingui/react/macro';
+import {
+    closestCenter,
+    DndContext,
+} from '@dnd-kit/core';
+import { restrictToVerticalAxis } from '@dnd-kit/modifiers';
+import {
+    SortableContext,
+    useSortable,
+    verticalListSortingStrategy,
+} from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
 import {
     ColumnDef,
     ColumnFilter,
@@ -23,18 +34,66 @@ import {
     getCoreRowModel,
     getPaginationRowModel,
     PaginationState,
+    Row,
     SortingState,
     Table as TableType,
     useReactTable,
     VisibilityState,
 } from '@tanstack/react-table';
 import { RowSelectionState, TableOptions } from '@tanstack/table-core';
-import React, { Suspense, useEffect, useRef } from 'react';
+import { GripVertical } from 'lucide-react';
+import React, { Suspense, useEffect, useId, useMemo, useRef } from 'react';
 import { AddFilterMenu } from './add-filter-menu.js';
 import { DataTableBulkActions } from './data-table-bulk-actions.js';
 import { DataTableProvider } from './data-table-context.js';
 import { DataTableFacetedFilter, DataTableFacetedFilterOption } from './data-table-faceted-filter.js';
 import { DataTableFilterBadgeEditable } from './data-table-filter-badge-editable.js';
+import { useDragAndDrop } from '@/vdb/hooks/use-drag-and-drop.js';
+import { toast } from 'sonner';
+
+interface DraggableRowProps<TData> {
+    row: Row<TData>;
+    isDragDisabled: boolean;
+}
+
+function DraggableRow<TData>({ row, isDragDisabled }: Readonly<DraggableRowProps<TData>>) {
+    const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
+        id: row.id,
+        disabled: isDragDisabled,
+    });
+
+    const style = {
+        transform: CSS.Transform.toString(transform),
+        transition,
+        opacity: isDragging ? 0.5 : 1,
+    };
+
+    return (
+        <TableRow
+            ref={setNodeRef}
+            style={style}
+            data-state={row.getIsSelected() && 'selected'}
+            className="animate-in fade-in duration-100"
+        >
+            {!isDragDisabled && (
+                <TableCell className="w-[40px] h-12">
+                    <div
+                        {...attributes}
+                        {...listeners}
+                        className="cursor-move text-muted-foreground hover:text-foreground transition-colors"
+                    >
+                        <GripVertical className="h-4 w-4" />
+                    </div>
+                </TableCell>
+            )}
+            {row.getVisibleCells().filter(cell => cell.column.id !== '__drag_handle__').map(cell => (
+                <TableCell key={cell.id} className="h-12">
+                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                </TableCell>
+            ))}
+        </TableRow>
+    );
+}
 
 export interface FacetedFilter {
     title: string;
@@ -77,6 +136,18 @@ interface DataTableProps<TData> {
      */
     setTableOptions?: (table: TableOptions<TData>) => TableOptions<TData>;
     onRefresh?: () => void;
+    /**
+     * @description
+     * Callback when items are reordered via drag and drop.
+     * When provided, enables drag-and-drop functionality.
+     * The fourth parameter provides all items for context-aware reordering.
+     */
+    onReorder?: (oldIndex: number, newIndex: number, item: TData, allItems?: TData[]) => void | Promise<void>;
+    /**
+     * @description
+     * When true, drag and drop will be disabled. This will only have an effect if the onReorder prop is also set
+     */
+    disableDragAndDrop?: boolean;
 }
 
 /**
@@ -111,6 +182,8 @@ export function DataTable<TData>({
     bulkActions,
     setTableOptions,
     onRefresh,
+    onReorder,
+    disableDragAndDrop = false,
 }: Readonly<DataTableProps<TData>>) {
     const [sorting, setSorting] = React.useState<SortingState>(sortingInitialState || []);
     const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(filtersInitialState || []);
@@ -131,6 +204,16 @@ export function DataTable<TData>({
     const prevSearchTermRef = useRef(searchTerm);
     const prevColumnFiltersRef = useRef(columnFilters);
 
+    const componentId = useId();
+    const { sensors, localData, handleDragEnd, itemIds } = useDragAndDrop({
+        data,
+        onReorder,
+        disabled: disableDragAndDrop,
+        onError: error => {
+            toast.error(t`Failed to reorder items`);
+        },
+    });
+
     useEffect(() => {
         // If the defaultColumnVisibility changes externally (e.g. the user reset the table settings),
         // we want to reset the column visibility to the default.
@@ -143,9 +226,25 @@ export function DataTable<TData>({
         // We intentionally do not include `columnVisibility` in the dependency array
     }, [defaultColumnVisibility]);
 
+    // Add drag handle column if drag and drop is enabled
+    const columnsWithOptionalDragHandle = useMemo(() => {
+        if (!disableDragAndDrop && onReorder) {
+            const dragHandleColumn: ColumnDef<TData, any> = {
+                id: '__drag_handle__',
+                header: '',
+                cell: () => null, // Rendered by DraggableRow
+                size: 40,
+                enableSorting: false,
+                enableHiding: false,
+            };
+            return [dragHandleColumn, ...columns];
+        }
+        return columns;
+    }, [columns, disableDragAndDrop, onReorder]);
+
     let tableOptions: TableOptions<TData> = {
-        data,
-        columns,
+        data: localData,
+        columns: columnsWithOptionalDragHandle,
         getRowId: row => (row as { id: string }).id,
         getCoreRowModel: getCoreRowModel(),
         getPaginationRowModel: getPaginationRowModel(),
@@ -220,6 +319,8 @@ export function DataTable<TData>({
 
     const visibleColumnCount = Object.values(columnVisibility).filter(Boolean).length;
 
+    const isDragDisabled = disableDragAndDrop || !onReorder;
+
     return (
         <DataTableProvider
             columnFilters={columnFilters}
@@ -310,66 +411,94 @@ export function DataTable<TData>({
                 ) : null}
 
                 <div className="rounded-md border my-2 relative shadow-sm">
-                    <Table>
-                        <TableHeader className="bg-muted/50">
-                            {table.getHeaderGroups().map(headerGroup => (
-                                <TableRow key={headerGroup.id}>
-                                    {headerGroup.headers.map(header => {
-                                        return (
-                                            <TableHead key={header.id}>
-                                                {header.isPlaceholder
-                                                    ? null
-                                                    : flexRender(
-                                                          header.column.columnDef.header,
-                                                          header.getContext(),
-                                                      )}
-                                            </TableHead>
-                                        );
-                                    })}
-                                </TableRow>
-                            ))}
-                        </TableHeader>
-                        <TableBody>
-                            {isLoading && !data?.length ? (
-                                Array.from({ length: Math.min(pagination.pageSize, 100) }).map((_, index) => (
-                                    <TableRow
-                                        key={`skeleton-${index}`}
-                                        className="animate-in fade-in duration-100"
-                                    >
-                                        {Array.from({ length: visibleColumnCount }).map((_, cellIndex) => (
+                    <DndContext
+                        sensors={sensors}
+                        collisionDetection={closestCenter}
+                        onDragEnd={handleDragEnd}
+                        modifiers={[restrictToVerticalAxis]}
+                    >
+                        <Table>
+                            <TableHeader className="bg-muted/50">
+                                {table.getHeaderGroups().map(headerGroup => (
+                                    <TableRow key={headerGroup.id}>
+                                        {headerGroup.headers.map(header => {
+                                            return (
+                                                <TableHead key={header.id}>
+                                                    {header.isPlaceholder
+                                                        ? null
+                                                        : flexRender(
+                                                              header.column.columnDef.header,
+                                                              header.getContext(),
+                                                          )}
+                                                </TableHead>
+                                            );
+                                        })}
+                                    </TableRow>
+                                ))}
+                            </TableHeader>
+                            <SortableContext items={itemIds} strategy={verticalListSortingStrategy}>
+                                <TableBody>
+                                    {isLoading && !localData?.length ? (
+                                        Array.from({ length: Math.min(pagination.pageSize, 100) }).map((_, index) => (
+                                            <TableRow
+                                                key={`skeleton-${index}`}
+                                                className="animate-in fade-in duration-100"
+                                            >
+                                                {!isDragDisabled && (
+                                                    <TableCell className="w-[40px] h-12">
+                                                        <Skeleton className="h-4 w-4" />
+                                                    </TableCell>
+                                                )}
+                                                {Array.from({ length: visibleColumnCount }).map((_, cellIndex) => (
+                                                    <TableCell
+                                                        key={`skeleton-cell-${index}-${cellIndex}`}
+                                                        className="h-12"
+                                                    >
+                                                        <Skeleton className="h-4 my-2 w-full" />
+                                                    </TableCell>
+                                                ))}
+                                            </TableRow>
+                                        ))
+                                    ) : table.getRowModel().rows?.length ? (
+                                        (() => {
+                                            const isDraggableEnabled = onReorder && !isDragDisabled;
+                                            const rows = table.getRowModel().rows;
+                                            
+                                            if (isDraggableEnabled) {
+                                                return rows.map(row => (
+                                                    <DraggableRow key={`${row.id}-${componentId}`} row={row} isDragDisabled={isDragDisabled} />
+                                                ));
+                                            }
+                                            
+                                            return rows.map(row => (
+                                                <TableRow
+                                                    key={row.id}
+                                                    data-state={row.getIsSelected() && 'selected'}
+                                                    className="animate-in fade-in duration-100"
+                                                >
+                                                    {row.getVisibleCells().map(cell => (
+                                                        <TableCell key={cell.id} className="h-12">
+                                                            {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                                                        </TableCell>
+                                                    ))}
+                                                </TableRow>
+                                            ));
+                                        })()
+                                    ) : (
+                                        <TableRow className="animate-in fade-in duration-100">
                                             <TableCell
-                                                key={`skeleton-cell-${index}-${cellIndex}`}
-                                                className="h-12"
+                                                colSpan={columnsWithOptionalDragHandle.length + (isDragDisabled ? 0 : 1)}
+                                                className="h-24 text-center"
                                             >
-                                                <Skeleton className="h-4 my-2 w-full" />
+                                                <Trans>No results</Trans>
                                             </TableCell>
-                                        ))}
-                                    </TableRow>
-                                ))
-                            ) : table.getRowModel().rows?.length ? (
-                                table.getRowModel().rows.map(row => (
-                                    <TableRow
-                                        key={row.id}
-                                        data-state={row.getIsSelected() && 'selected'}
-                                        className="animate-in fade-in duration-100"
-                                    >
-                                        {row.getVisibleCells().map(cell => (
-                                            <TableCell key={cell.id} className="h-12">
-                                                {flexRender(cell.column.columnDef.cell, cell.getContext())}
-                                            </TableCell>
-                                        ))}
-                                    </TableRow>
-                                ))
-                            ) : (
-                                <TableRow className="animate-in fade-in duration-100">
-                                    <TableCell colSpan={columns.length} className="h-24 text-center">
-                                        <Trans>No results</Trans>
-                                    </TableCell>
-                                </TableRow>
-                            )}
-                            {children}
-                        </TableBody>
-                    </Table>
+                                        </TableRow>
+                                    )}
+                                    {children}
+                                </TableBody>
+                            </SortableContext>
+                        </Table>
+                    </DndContext>
                     <DataTableBulkActions bulkActions={bulkActions ?? []} table={table} />
                 </div>
                 {onPageChange && totalItems != null && <DataTablePagination table={table} />}

package/src/lib/components/data-table/global-views-bar.tsx

@@ -28,7 +28,7 @@ export const GlobalViewsBar: React.FC = () => {
     );
 
     const handleViewClick = (view: SavedView) => {
-        handleApplyView(view.filters, view.searchTerm);
+        handleApplyView(view.filters, view.columnConfig, view.searchTerm);
     };
 
     const isViewActive = (view: SavedView) => {

package/src/lib/components/data-table/save-view-dialog.tsx

@@ -7,6 +7,8 @@ import { Input } from '../ui/input.js';
 import { Label } from '../ui/label.js';
 import { RadioGroup, RadioGroupItem } from '../ui/radio-group.js';
 import { toast } from 'sonner';
+import { usePage } from '@/vdb/hooks/use-page.js';
+import { useUserSettings } from '@/vdb/hooks/use-user-settings.js';
 
 interface SaveViewDialogProps {
     open: boolean;
@@ -25,6 +27,21 @@ export const SaveViewDialog: React.FC<SaveViewDialogProps> = ({
     const [scope, setScope] = useState<'user' | 'global'>('user');
     const [saving, setSaving] = useState(false);
     const { saveView, userViews, globalViews, canManageGlobalViews } = useSavedViews();
+    const { pageId } = usePage();
+    const { settings } = useUserSettings();
+
+    const defaultVisibility = {
+        id: false,
+        createdAt: false,
+        updatedAt: false,
+        type: false,
+        currencyCode: false,
+    }
+    const tableSettings = pageId ? settings.tableSettings?.[pageId] : undefined;
+    const columnVisibility = pageId
+        ? (tableSettings?.columnVisibility ?? defaultVisibility)
+        : defaultVisibility;
+    const columnOrder = pageId ? (tableSettings?.columnOrder ?? []) : [];
 
     const handleSave = async () => {
         if (!name.trim()) {
@@ -45,6 +62,10 @@ export const SaveViewDialog: React.FC<SaveViewDialogProps> = ({
                 name: name.trim(),
                 scope,
                 filters,
+                columnConfig : {
+                    columnVisibility,
+                    columnOrder,
+                },
                 searchTerm,
             });
             toast.success(`View "${name}" saved successfully`);

package/src/lib/components/data-table/use-generated-columns.tsx

@@ -16,9 +16,15 @@ import { usePage } from '@/vdb/hooks/use-page.js';
 import { TypedDocumentNode } from '@graphql-typed-document-node/core';
 import { Trans, useLingui } from '@lingui/react/macro';
 import { useMutation } from '@tanstack/react-query';
-import { AccessorFnColumnDef, AccessorKeyColumnDef, createColumnHelper, Row } from '@tanstack/react-table';
+import {
+    AccessorFnColumnDef,
+    AccessorKeyColumnDef,
+    CellContext,
+    createColumnHelper,
+    Row,
+} from '@tanstack/react-table';
 import { EllipsisIcon, TrashIcon } from 'lucide-react';
-import { useMemo } from 'react';
+import { memo, useMemo } from 'react';
 import { toast } from 'sonner';
 import {
     AdditionalColumns,
@@ -116,6 +122,25 @@ export function useGeneratedColumns<T extends TypedDocumentNode<any, any>>({
             const customConfig = customizeColumns?.[fieldInfo.name as unknown as AllItemFieldKeys<T>] ?? {};
             const { header, meta, cell: customCell, ...customConfigRest } = customConfig;
             const enableColumnFilter = fieldInfo.isScalar && !facetedFilters?.[fieldInfo.name];
+            const displayComponentId =
+                pageId && pageBlock?.blockId
+                    ? generateDisplayComponentKey(pageId, pageBlock.blockId, fieldInfo.name)
+                    : undefined;
+
+            // If a custom cell function is provided, use it directly (like additionalColumns does).
+            // This preserves the same behavior and prevents cell unmounting issues.
+            // Only use CellWrapper for columns without custom cells.
+            const cellFn =
+                typeof customCell === 'function'
+                    ? customCell
+                    : (cellContext: CellContext<any, any>) => (
+                          <CellWrapper
+                              cellContext={cellContext}
+                              fieldInfo={fieldInfo}
+                              isCustomField={isCustomField}
+                              displayComponentId={displayComponentId}
+                          />
+                      );
 
             return columnHelper.accessor(fieldInfo.name as any, {
                 id: fieldInfo.name,
@@ -126,28 +151,7 @@ export function useGeneratedColumns<T extends TypedDocumentNode<any, any>>({
                 // otherwise the TanStack Table with apply an "auto" function which somehow
                 // prevents certain filters from working.
                 filterFn: 'equalsString',
-                cell: cellContext => {
-                    const { cell, row } = cellContext;
-                    const cellValue = cell.getValue();
-                    const value =
-                        cellValue ??
-                        (isCustomField ? row.original?.customFields?.[fieldInfo.name] : undefined);
-                    const displayComponentId =
-                        pageId && pageBlock?.blockId
-                            ? generateDisplayComponentKey(pageId, pageBlock.blockId, fieldInfo.name)
-                            : undefined;
-
-                    const CustomDisplayComponent =
-                        displayComponentId && getDisplayComponent(displayComponentId);
-
-                    if (CustomDisplayComponent) {
-                        return <CustomDisplayComponent value={value} {...cellContext} />;
-                    }
-                    if (typeof customCell === 'function') {
-                        return customCell(cellContext);
-                    }
-                    return <DefaultDisplayComponent value={value} fieldInfo={fieldInfo} />;
-                },
+                cell: cellFn,
                 header: headerContext => {
                     return (
                         <DataTableColumnHeader headerContext={headerContext} customConfig={customConfig} />
@@ -291,6 +295,34 @@ function DefaultDisplayComponent({ value, fieldInfo }: { value: any; fieldInfo:
     return value;
 }
 
+/**
+ * A cell wrapper component for columns without custom cell functions.
+ * Handles default display logic including custom display components and field-type-based rendering.
+ */
+const CellWrapper = memo(function CellWrapper({
+    cellContext,
+    fieldInfo,
+    isCustomField,
+    displayComponentId,
+}: {
+    cellContext: CellContext<any, any>;
+    fieldInfo: FieldInfo;
+    isCustomField: boolean;
+    displayComponentId?: string;
+}) {
+    const { cell, row } = cellContext;
+    const cellValue = cell.getValue();
+    const value =
+        cellValue ?? (isCustomField ? (row.original as any)?.customFields?.[fieldInfo.name] : undefined);
+
+    const CustomDisplayComponent = displayComponentId && getDisplayComponent(displayComponentId);
+
+    if (CustomDisplayComponent) {
+        return <CustomDisplayComponent value={value} {...cellContext} />;
+    }
+    return <DefaultDisplayComponent value={value} fieldInfo={fieldInfo} />;
+});
+
 function DeleteMutationRowAction({
     deleteMutation,
     row,

package/src/lib/components/data-table/views-sheet.tsx

@@ -44,7 +44,7 @@ export const ViewsSheet: React.FC<ViewsSheetProps> = ({ open, onOpenChange, type
     const isGlobal = type === 'global';
 
     const handleViewApply = (view: SavedView) => {
-        handleApplyView(view.filters, view.searchTerm);
+        handleApplyView(view.filters,view.columnConfig, view.searchTerm);
         const viewName = view.name;
         const message = isGlobal ? t`Applied global view "${viewName}"` : t`Applied view "${viewName}"`;
         toast.success(message);

package/src/lib/components/layout/channel-switcher.tsx

@@ -138,7 +138,7 @@ export function ChannelSwitcher() {
                                         </div>
                                         <ChannelCodeLabel code={channel.code} />
                                         {channel.id === displayChannel?.id && (
-                                            <span className="ml-auto text-xs text-muted-foreground">
+                                            <span className="ms-auto text-xs text-muted-foreground">
                                                 <Trans context="current channel">Current</Trans>
                                             </span>
                                         )}
@@ -146,9 +146,9 @@ export function ChannelSwitcher() {
                                     {/* Show language sub-menu for the current channel */}
                                     {channel.id === displayChannel?.id && (
                                         <DropdownMenuSub>
-                                            <DropdownMenuSubTrigger className="gap-2 p-2 pl-4">
+                                            <DropdownMenuSubTrigger className="gap-2 p-2 ps-4">
                                                 <Languages className="w-4 h-4" />
-                                                <div className="flex gap-1 ml-2">
+                                                <div className="flex gap-1 ms-2">
                                                     <span className="text-muted-foreground">Content: </span>
                                                     {formatLanguageName(contentLanguage)}
                                                 </div>
@@ -167,7 +167,7 @@ export function ChannelSwitcher() {
                                                         </div>
                                                         <span>{label}</span>
                                                         {contentLanguage === languageCode && (
-                                                            <span className="ml-auto text-xs text-muted-foreground">
+                                                            <span className="ms-auto text-xs text-muted-foreground">
                                                                 <Trans context="active language">
                                                                     Active
                                                                 </Trans>
@@ -200,7 +200,9 @@ export function ChannelSwitcher() {
                                     <div className="bg-background flex size-6 items-center justify-center rounded-md border">
                                         <Plus className="size-4" />
                                     </div>
-                                    <div className="text-muted-foreground font-medium">Add channel</div>
+                                    <div className="text-muted-foreground font-medium">
+                                        <Trans>Add channel</Trans>
+                                    </div>
                                 </Link>
                             </DropdownMenuItem>
                         </DropdownMenuContent>

package/src/lib/components/layout/nav-main.tsx

@@ -215,7 +215,7 @@ export function NavMain({ items }: Readonly<{ items: Array<NavMenuSection | NavM
                             <SidebarMenuButton tooltip={item.title}>
                                 {item.icon && <item.icon />}
                                 <span>{i18n.t(item.title)}</span>
-                                <ChevronRight className="ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90" />
+                                <ChevronRight className="ms-auto transition-transform duration-200 rtl:rotate-180 group-data-[state=open]/collapsible:rotate-90" />
                             </SidebarMenuButton>
                         </CollapsibleTrigger>
                         <CollapsibleContent>
@@ -280,7 +280,7 @@ export function NavMain({ items }: Readonly<{ items: Array<NavMenuSection | NavM
                             <SidebarMenuButton tooltip={i18n.t(item.title)}>
                                 {item.icon && <item.icon />}
                                 <span>{i18n.t(item.title)}</span>
-                                <ChevronRight className="ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90" />
+                                <ChevronRight className="ms-auto transition-transform duration-200 rtl:rotate-180 group-data-[state=open]/collapsible:rotate-90" />
                             </SidebarMenuButton>
                         </CollapsibleTrigger>
                         <CollapsibleContent>

package/src/lib/components/shared/alerts.tsx

@@ -29,7 +29,9 @@ export function Alerts() {
                 </Button>
             </DropdownMenuTrigger>
             <DropdownMenuContent align="end" className="max-w-[800px] min-w-96">
-                <DropdownMenuLabel>Alerts</DropdownMenuLabel>
+                <DropdownMenuLabel>
+                    <Trans>Alerts</Trans>
+                </DropdownMenuLabel>
                 <DropdownMenuSeparator />
                 <ScrollArea className="max-h-[500px]">
                     {activeCount > 0 ? (

package/src/lib/components/shared/assign-to-channel-bulk-action.tsx

@@ -23,16 +23,16 @@ interface AssignToChannelBulkActionProps {
 }
 
 export function AssignToChannelBulkAction({
-                                              selection,
-                                              table,
-                                              entityType,
-                                              mutationFn,
-                                              requiredPermissions,
-                                              buildInput,
-                                              additionalFields,
-                                              additionalData = {},
-                                              onSuccess,
-                                          }: Readonly<AssignToChannelBulkActionProps>) {
+    selection,
+    table,
+    entityType,
+    mutationFn,
+    requiredPermissions,
+    buildInput,
+    additionalFields,
+    additionalData = {},
+    onSuccess,
+}: Readonly<AssignToChannelBulkActionProps>) {
     const { refetchPaginatedList } = usePaginatedList();
     const { channels } = useChannel();
     const [dialogOpen, setDialogOpen] = useState(false);

package/src/lib/components/shared/assign-to-channel-dialog.tsx

@@ -70,7 +70,7 @@ export function AssignToChannelDialog({
             onOpenChange(false);
         },
         onError: () => {
-            toast.error(`Failed to assign ${entityIdsLength} ${entityType} to channel`);
+            toast.error(t`Failed to assign ${entityIdsLength} ${entityType} to channel`);
         },
     });