@vendure/dashboard 3.5.0-minor-202509261210 → 3.5.0-minor-202510031341

package/src/lib/components/data-input/combination-mode-input.tsx

@@ -1,5 +1,5 @@
 import { DashboardFormComponentProps } from '@/vdb/framework/form-engine/form-engine-types.js';
-import { Trans } from '@/vdb/lib/trans.js';
+import { Trans } from '@lingui/react/macro';
 
 export type CombinationModeInputProps = DashboardFormComponentProps & {
     position?: number;

package/src/lib/components/data-input/custom-field-list-input.tsx

@@ -1,6 +1,5 @@
 import { Button } from '@/vdb/components/ui/button.js';
 import { DashboardFormComponentProps } from '@/vdb/framework/form-engine/form-engine-types.js';
-import { useLingui } from '@/vdb/lib/trans.js';
 import {
     closestCenter,
     DndContext,
@@ -18,6 +17,7 @@ import {
     verticalListSortingStrategy,
 } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
+import { useLingui } from '@lingui/react/macro';
 import { GripVertical, Plus, X } from 'lucide-react';
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { ControllerRenderProps } from 'react-hook-form';
@@ -53,7 +53,7 @@ function SortableItem({
     field,
     isFullWidth = false,
 }: Readonly<SortableItemProps>) {
-    const { i18n } = useLingui();
+    const { t } = useLingui();
     const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
         id: itemWithId._id,
         disabled,
@@ -69,7 +69,7 @@ function SortableItem({
             {...attributes}
             {...listeners}
             className="cursor-move text-muted-foreground hover:text-foreground transition-colors"
-            title={i18n.t('Drag to reorder')}
+            title={t`Drag to reorder`}
         >
             <GripVertical className="h-4 w-4" />
         </div>
@@ -82,7 +82,7 @@ function SortableItem({
             size="sm"
             onClick={() => onRemove(itemWithId._id)}
             className="h-6 w-6 p-0 text-muted-foreground hover:text-destructive transition-colors opacity-0 group-hover:opacity-100"
-            title={i18n.t('Remove item')}
+            title={t`Remove item`}
         >
             <X className="h-3 w-3" />
         </Button>
@@ -169,9 +169,13 @@ function convertToFlatArray(itemsWithIds: ListItemWithId[]): any[] {
     return itemsWithIds.map(item => item.value);
 }
 
-export const CustomFieldListInput = ({ renderInput, defaultValue, ...fieldProps }: CustomFieldListInputProps) => {
+export const CustomFieldListInput = ({
+    renderInput,
+    defaultValue,
+    ...fieldProps
+}: CustomFieldListInputProps) => {
     const { value, onChange, disabled } = fieldProps;
-    const { i18n } = useLingui();
+    const { t } = useLingui();
     const sensors = useSensors(
         useSensor(PointerSensor),
         useSensor(KeyboardSensor, {
@@ -282,7 +286,7 @@ export const CustomFieldListInput = ({ renderInput, defaultValue, ...fieldProps
             {!disabled && (
                 <Button type="button" variant="outline" size="sm" onClick={handleAddItem} className="w-full">
                     <Plus className="h-4 w-4 mr-2" />
-                    {i18n.t('Add item')}
+                    {t`Add item`}
                 </Button>
             )}
         </div>

package/src/lib/components/data-input/customer-group-input.tsx

@@ -6,13 +6,11 @@ import { CustomerGroupSelector } from '../shared/customer-group-selector.js';
 
 import { DashboardFormComponentProps } from '@/vdb/framework/form-engine/form-engine-types.js';
 
-const customerGroupsDocument = graphql(`
-    query GetCustomerGroups($options: CustomerGroupListOptions) {
-        customerGroups(options: $options) {
-            items {
-                id
-                name
-            }
+const customerGroupDocument = graphql(`
+    query GetCustomerGroup($id: ID!) {
+        customerGroup(id: $id) {
+            id
+            name
         }
     }
 `);
@@ -22,47 +20,43 @@ export interface CustomerGroup {
     name: string;
 }
 
-export function CustomerGroupInput({ value, onChange, disabled }: Readonly<DashboardFormComponentProps>) {
-    const ids = decodeIds(value);
-    const { data: groups } = useQuery({
-        queryKey: ['customerGroups', ids],
+export function CustomerGroupInput({
+    value,
+    onChange,
+    disabled,
+    fieldDef,
+}: Readonly<DashboardFormComponentProps>) {
+    console.log(fieldDef);
+    const { data } = useQuery({
+        queryKey: ['customerGroups', value],
         queryFn: () =>
-            api.query(customerGroupsDocument, {
-                options: {
-                    filter: {
-                        id: { in: ids },
-                    },
-                },
+            api.query(customerGroupDocument, {
+                id: value,
             }),
+        enabled: !!value,
     });
 
     const onValueSelectHandler = (value: CustomerGroup) => {
-        const newIds = new Set([...ids, value.id]);
-        onChange(JSON.stringify(Array.from(newIds)));
+        onChange(value.id);
     };
 
-    const onValueRemoveHandler = (id: string) => {
-        const newIds = new Set(ids.filter(existingId => existingId !== id));
-        onChange(JSON.stringify(Array.from(newIds)));
+    const onValueRemoveHandler = () => {
+        onChange(null);
     };
 
     return (
         <div>
             <div className="flex flex-wrap gap-2 mb-2">
-                {groups?.customerGroups.items.map(group => (
-                    <CustomerGroupChip key={group.id} group={group} onRemove={onValueRemoveHandler} />
-                ))}
+                {data?.customerGroup ? (
+                    <CustomerGroupChip
+                        key={data.customerGroup.id}
+                        group={data.customerGroup}
+                        onRemove={onValueRemoveHandler}
+                    />
+                ) : null}
             </div>
 
             <CustomerGroupSelector onSelect={onValueSelectHandler} readOnly={disabled} />
         </div>
     );
 }
-
-function decodeIds(idsString: string): string[] {
-    try {
-        return JSON.parse(idsString);
-    } catch (error) {
-        return [];
-    }
-}

package/src/lib/components/data-input/datetime-input.tsx

@@ -2,15 +2,34 @@
 
 import { format } from 'date-fns';
 import * as React from 'react';
+import { useEffect, useState } from 'react';
 
 import { Button } from '@/vdb/components/ui/button.js';
 import { Calendar } from '@/vdb/components/ui/calendar.js';
 import { Popover, PopoverContent, PopoverTrigger } from '@/vdb/components/ui/popover.js';
 import { ScrollArea, ScrollBar } from '@/vdb/components/ui/scroll-area.js';
 import { DashboardFormComponentProps } from '@/vdb/framework/form-engine/form-engine-types.js';
+import { isReadonlyField } from '@/vdb/framework/form-engine/utils.js';
+import { useDisplayLocale } from '@/vdb/hooks/use-display-locale.js';
 import { cn } from '@/vdb/lib/utils.js';
+import type { Locale } from 'date-fns/locale';
 import { CalendarClock } from 'lucide-react';
-import { isReadonlyField } from '@/vdb/framework/form-engine/utils.js';
+
+/**
+ * @description
+ * Returns a `Locale` object that can be passed to the react-day-picker
+ * `locale` prop.
+ */
+export function useDayPickerLocale() {
+    const { bcp47Tag } = useDisplayLocale();
+    const [calendarLocale, setCalendarLocale] = useState<Locale | undefined>(undefined);
+    useEffect(() => {
+        import('react-day-picker/locale').then(mod => {
+            setCalendarLocale(bcpTagToDatePickerLocale(bcp47Tag, mod));
+        });
+    }, [bcp47Tag]);
+    return calendarLocale;
+}
 
 /**
  * @description
@@ -21,6 +40,7 @@ import { isReadonlyField } from '@/vdb/framework/form-engine/utils.js';
  */
 export function DateTimeInput({ value, onChange, fieldDef }: Readonly<DashboardFormComponentProps>) {
     const readOnly = isReadonlyField(fieldDef);
+    const locale = useDayPickerLocale();
     const date = value && value instanceof Date ? value.toISOString() : (value ?? '');
     const [isOpen, setIsOpen] = React.useState(false);
 
@@ -65,6 +85,7 @@ export function DateTimeInput({ value, onChange, fieldDef }: Readonly<DashboardF
                 <div className="sm:flex">
                     <Calendar
                         mode="single"
+                        locale={locale}
                         selected={new Date(date)}
                         onSelect={handleDateSelect}
                         initialFocus
@@ -137,3 +158,21 @@ export function DateTimeInput({ value, onChange, fieldDef }: Readonly<DashboardF
         </Popover>
     );
 }
+
+function bcpTagToDatePickerLocale(
+    tag: string,
+    module: typeof import('react-day-picker/locale'),
+): Locale | undefined {
+    switch (tag) {
+        case 'zh-Hans':
+            return module.zhCN;
+        case 'zh-Hant':
+            return module.zhTW;
+        case 'pt-BR':
+            return module.ptBR;
+        default: {
+            const lang = tag.split('-').at(0);
+            return lang ? module[lang as keyof typeof module] : undefined;
+        }
+    }
+}

package/src/lib/components/data-input/default-relation-input.tsx

@@ -1,5 +1,5 @@
 import { graphql } from '@/vdb/graphql/graphql.js';
-import { Trans, useLingui } from '@/vdb/lib/trans.js';
+import { Trans, useLingui } from '@lingui/react/macro';
 import { RelationCustomFieldConfig } from '@vendure/common/lib/generated-types';
 import { ControllerRenderProps } from 'react-hook-form';
 import { MultiRelationInput, SingleRelationInput } from './relation-input.js';
@@ -100,10 +100,11 @@ function createBaseEntityConfig(
     labelKey: 'name' | 'code' | 'emailAddress' = 'name',
     searchField: string = 'name',
 ) {
+    const entityNameLower = entityName.toLowerCase();
     return {
         idKey: 'id',
         labelKey,
-        placeholder: i18n.t(`Search ${entityName.toLowerCase()}s...`),
+        placeholder: i18n`Search ${entityNameLower}...`,
         buildSearchFilter: (term: string) => ({
             [searchField]: { contains: term },
         }),
@@ -563,12 +564,12 @@ export function DefaultRelationInput({
     ref,
     disabled,
 }: Readonly<DashboardFormComponentProps>) {
-    const { i18n } = useLingui();
+    const { t } = useLingui();
     if (!fieldDef || !isRelationCustomFieldConfig(fieldDef)) {
         return null;
     }
     const entityName = fieldDef.entity;
-    const ENTITY_CONFIGS = createEntityConfigs(i18n);
+    const ENTITY_CONFIGS = createEntityConfigs(t);
     const config = ENTITY_CONFIGS[entityName as keyof typeof ENTITY_CONFIGS];
 
     if (!config) {

package/src/lib/components/data-input/product-multi-selector-input.tsx

@@ -13,7 +13,7 @@ import { Input } from '@/vdb/components/ui/input.js';
 import { DashboardFormComponent } from '@/vdb/framework/form-engine/form-engine-types.js';
 import { api } from '@/vdb/graphql/api.js';
 import { graphql } from '@/vdb/graphql/graphql.js';
-import { Trans } from '@/vdb/lib/trans.js';
+import { Trans } from '@lingui/react/macro';
 import { useQuery } from '@tanstack/react-query';
 import { useDebounce } from '@uidotdev/usehooks';
 import { Plus, X } from 'lucide-react';
@@ -93,13 +93,13 @@ function EmptyState() {
 }
 
 function ProductList({
-    items,
-    mode,
-    selectedIds,
-    getItemId,
-    getItemName,
-    toggleSelection,
-}: Readonly<{
+                         items,
+                         mode,
+                         selectedIds,
+                         getItemId,
+                         getItemName,
+                         toggleSelection,
+                     }: Readonly<{
     items: SearchItem[];
     mode: 'product' | 'variant';
     selectedIds: Set<string>;
@@ -163,12 +163,12 @@ function ProductList({
 }
 
 function ProductMultiSelectorDialog({
-    mode,
-    initialSelectionIds = [],
-    onSelectionChange,
-    open,
-    onOpenChange,
-}: Readonly<ProductMultiSelectorProps>) {
+                                        mode,
+                                        initialSelectionIds = [],
+                                        onSelectionChange,
+                                        open,
+                                        onOpenChange,
+                                    }: Readonly<ProductMultiSelectorProps>) {
     const [searchTerm, setSearchTerm] = useState('');
     const [selectedItems, setSelectedItems] = useState<SearchItem[]>([]);
     const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set());

package/src/lib/components/data-input/relation-selector.tsx

@@ -10,7 +10,7 @@ import {
 import { Popover, PopoverContent, PopoverTrigger } from '@/vdb/components/ui/popover.js';
 import { getQueryName } from '@/vdb/framework/document-introspection/get-document-structure.js';
 import { api } from '@/vdb/graphql/api.js';
-import { Trans } from '@/vdb/lib/trans.js';
+import { Trans } from '@lingui/react/macro';
 import { cn } from '@/vdb/lib/utils.js';
 import { useInfiniteQuery } from '@tanstack/react-query';
 import { useDebounce } from '@uidotdev/usehooks';

package/src/lib/components/data-input/select-with-options.tsx

@@ -6,7 +6,7 @@ import {
 } from '@/vdb/framework/form-engine/form-engine-types.js';
 import { isReadonlyField, isStringFieldWithOptions } from '@/vdb/framework/form-engine/utils.js';
 import { useUserSettings } from '@/vdb/hooks/use-user-settings.js';
-import { Trans } from '@/vdb/lib/trans.js';
+import { Trans } from '@lingui/react/macro';
 import React from 'react';
 import { MultiSelect } from '../shared/multi-select.js';
 

package/src/lib/components/data-input/slug-input.tsx

@@ -5,8 +5,8 @@ import { isReadonlyField } from '@/vdb/framework/form-engine/utils.js';
 import { api } from '@/vdb/graphql/api.js';
 import { graphql } from '@/vdb/graphql/graphql.js';
 import { useUserSettings } from '@/vdb/hooks/use-user-settings.js';
-import { useLingui } from '@/vdb/lib/trans.js';
 import { cn } from '@/vdb/lib/utils.js';
+import { useLingui } from '@lingui/react/macro';
 import { useQuery } from '@tanstack/react-query';
 import { useDebounce } from '@uidotdev/usehooks';
 import { Edit, Lock, RefreshCw } from 'lucide-react';
@@ -147,7 +147,7 @@ export function SlugInput({
     name,
     ...props
 }: SlugInputProps) {
-    const { i18n } = useLingui();
+    const { t } = useLingui();
     const form = useFormContext();
     const { contentLanguage } = useUserSettings().settings;
     const isFormReadonly = isReadonlyField(fieldDef);
@@ -234,9 +234,9 @@ export function SlugInput({
                     placeholder={
                         isReadonly
                             ? value
-                                ? i18n.t('Slug is set')
-                                : i18n.t('Slug will be generated automatically...')
-                            : i18n.t('Enter slug manually')
+                                ? t`Slug is set`
+                                : t`Slug will be generated automatically...`
+                            : t`Enter slug manually`
                     }
                     className={cn(
                         'pr-8',
@@ -262,8 +262,8 @@ export function SlugInput({
                             size="sm"
                             onClick={handleRegenerate}
                             className="shrink-0"
-                            title={i18n.t('Regenerate slug from source field')}
-                            aria-label={i18n.t('Regenerate slug from source field')}
+                            title={t`Regenerate slug from source field`}
+                            aria-label={t`Regenerate slug from source field`}
                             disabled={!watchedValue || isLoading}
                         >
                             <RefreshCw className="h-4 w-4" />
@@ -276,15 +276,9 @@ export function SlugInput({
                         size="sm"
                         onClick={toggleReadonly}
                         className="shrink-0"
-                        title={
-                            isManuallyReadonly
-                                ? i18n.t('Edit slug manually')
-                                : i18n.t('Generate slug automatically')
-                        }
+                        title={isManuallyReadonly ? t`Edit slug manually` : t`Generate slug automatically`}
                         aria-label={
-                            isManuallyReadonly
-                                ? i18n.t('Edit slug manually')
-                                : i18n.t('Generate slug automatically')
+                            isManuallyReadonly ? t`Edit slug manually` : t`Generate slug automatically`
                         }
                     >
                         {isManuallyReadonly ? <Edit className="h-4 w-4" /> : <Lock className="h-4 w-4" />}

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

@@ -8,8 +8,8 @@ import {
     DropdownMenuTrigger,
 } from '@/vdb/components/ui/dropdown-menu.js';
 import { Tooltip, TooltipContent, TooltipTrigger } from '@/vdb/components/ui/tooltip.js';
-import { Trans } from '@/vdb/lib/trans.js';
-import { camelCaseToTitleCase } from '@/vdb/lib/utils.js';
+import { useDynamicTranslations } from '@/vdb/hooks/use-dynamic-translations.js';
+import { Trans } from '@lingui/react/macro';
 import { Column, ColumnDef } from '@tanstack/react-table';
 import { FilterIcon } from 'lucide-react';
 import { useState } from 'react';
@@ -21,7 +21,7 @@ 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 (
@@ -48,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';
@@ -63,13 +63,13 @@ export interface DataTableBulkActionItemProps {
  * @since 3.4.0
  */
 export function DataTableBulkActionItem({
-    label,
-    icon: Icon,
-    confirmationText,
-    className,
-    onClick,
-    requiresPermission,
-}: Readonly<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-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-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

@@ -18,9 +18,10 @@ import {
 } 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>;
@@ -46,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()
@@ -110,7 +112,7 @@ export function DataTableViewOptions<TData>({ table }: DataTableViewOptionsProps
                                             onCheckedChange={value => column.toggleVisibility(value)}
                                             onSelect={e => e.preventDefault()}
                                         >
-                                            {column.id}
+                                            {getTranslatedFieldName(column.id)}
                                         </DropdownMenuCheckboxItem>
                                     </SortableItem>
                                 ))}

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

@@ -14,7 +14,7 @@ import { BulkAction } from '@/vdb/framework/extension-api/types/index.js';
 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 '@/vdb/lib/trans.js';
+import { Trans, useLingui } from '@lingui/react/macro';
 import {
     ColumnDef,
     ColumnFilter,
@@ -119,7 +119,7 @@ export function DataTable<TData>({
     const { pageId } = usePage();
     const savedViewsResult = useSavedViews();
     const globalViews = pageId && onFilterChange ? savedViewsResult.globalViews : [];
-    const { i18n } = useLingui();
+    const { t } = useLingui();
     const [pagination, setPagination] = React.useState<PaginationState>({
         pageIndex: (page ?? 1) - 1,
         pageSize: itemsPerPage ?? 10,
@@ -214,7 +214,7 @@ export function DataTable<TData>({
                     <div className="flex items-center gap-2">
                         {onSearchTermChange && (
                             <Input
-                                placeholder={i18n.t('Filter...')}
+                                placeholder={t`Filter...`}
                                 value={searchTerm}
                                 onChange={event => handleSearchChange(event.target.value)}
                                 className="w-64"