@vendure/dashboard 3.4.3-master-202509250229 → 3.5.0-minor-202509261210

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 { Tooltip, TooltipContent, TooltipTrigger } from '@/vdb/components/ui/tooltip.js';
 import { Trans } from '@/vdb/lib/trans.js';
 import { camelCaseToTitleCase } from '@/vdb/lib/utils.js';
 import { Column, ColumnDef } from '@tanstack/react-table';
-import { PlusCircle } from 'lucide-react';
+import { FilterIcon } from 'lucide-react';
 import { useState } from 'react';
 
 export interface AddFilterMenuProps {
@@ -26,12 +27,18 @@ export function AddFilterMenu({ columns }: Readonly<AddFilterMenuProps>) {
     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

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

@@ -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,6 +32,36 @@ 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,
@@ -32,7 +69,7 @@ export function DataTableBulkActionItem({
     className,
     onClick,
     requiresPermission,
-}: DataTableBulkActionItemProps) {
+}: Readonly<DataTableBulkActionItemProps>) {
     const [isOpen, setIsOpen] = useState(false);
     const { hasPermissions } = usePermissions();
     const userHasPermission = hasPermissions(requiresPermission ?? []);

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-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-view-options.tsx

@@ -17,6 +17,7 @@ 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 { usePage } from '@/vdb/hooks/use-page.js';
 import { useUserSettings } from '@/vdb/hooks/use-user-settings.js';
 import { Trans } from '@/vdb/lib/trans.js';
@@ -78,12 +79,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,7 +107,7 @@ 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}
@@ -110,7 +117,9 @@ export function DataTableViewOptions<TData>({ table }: DataTableViewOptionsProps
                             </SortableContext>
                         </DndContext>
                         <DropdownMenuSeparator />
-                        <DropdownMenuItem onClick={handleReset}>Reset</DropdownMenuItem>
+                        <DropdownMenuItem onClick={handleReset}>
+                            <Trans>Reset</Trans>
+                        </DropdownMenuItem>
                     </ScrollArea>
                 </DropdownMenuContent>
             </DropdownMenu>

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

@@ -2,12 +2,19 @@
 
 import { DataTablePagination } from '@/vdb/components/data-table/data-table-pagination.js';
 import { DataTableViewOptions } from '@/vdb/components/data-table/data-table-view-options.js';
+import { GlobalViewsBar } from '@/vdb/components/data-table/global-views-bar.js';
+import { MyViewsButton } from '@/vdb/components/data-table/my-views-button.js';
 import { RefreshButton } from '@/vdb/components/data-table/refresh-button.js';
+import { SaveViewButton } from '@/vdb/components/data-table/save-view-button.js';
+import { Button } from '@/vdb/components/ui/button.js';
 import { Input } from '@/vdb/components/ui/input.js';
 import { Skeleton } from '@/vdb/components/ui/skeleton.js';
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/vdb/components/ui/table.js';
 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 {
     ColumnDef,
     ColumnFilter,
@@ -25,6 +32,7 @@ import { RowSelectionState, TableOptions } from '@tanstack/table-core';
 import React, { Suspense, useEffect } 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 { DataTableFilterBadge } from './data-table-filter-badge.js';
 
@@ -106,7 +114,12 @@ export function DataTable<TData>({
 }: Readonly<DataTableProps<TData>>) {
     const [sorting, setSorting] = React.useState<SortingState>(sortingInitialState || []);
     const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(filtersInitialState || []);
+    const [searchTerm, setSearchTerm] = React.useState<string>('');
     const { activeChannel } = useChannel();
+    const { pageId } = usePage();
+    const savedViewsResult = useSavedViews();
+    const globalViews = pageId && onFilterChange ? savedViewsResult.globalViews : [];
+    const { i18n } = useLingui();
     const [pagination, setPagination] = React.useState<PaginationState>({
         pageIndex: (page ?? 1) - 1,
         pageSize: itemsPerPage ?? 10,
@@ -175,19 +188,37 @@ export function DataTable<TData>({
     }, [columnVisibility]);
 
     const visibleColumnCount = Object.values(columnVisibility).filter(Boolean).length;
+
+    const handleSearchChange = (value: string) => {
+        setSearchTerm(value);
+        onSearchTermChange?.(value);
+    };
+
     return (
-        <>
-            <div className="flex justify-between items-start">
-                <div className="flex flex-col space-y-2">
-                    <div className="flex items-center justify-start gap-2">
+        <DataTableProvider
+            columnFilters={columnFilters}
+            setColumnFilters={setColumnFilters}
+            searchTerm={searchTerm}
+            setSearchTerm={setSearchTerm}
+            sorting={sorting}
+            setSorting={setSorting}
+            pageId={pageId}
+            onFilterChange={onFilterChange}
+            onSearchTermChange={onSearchTermChange}
+            onRefresh={onRefresh}
+            isLoading={isLoading}
+            table={table}
+        >
+            <div className="space-y-2">
+                <div className="flex items-center justify-between gap-2">
+                    <div className="flex items-center gap-2">
                         {onSearchTermChange && (
-                            <div className="flex items-center">
-                                <Input
-                                    placeholder="Filter..."
-                                    onChange={event => onSearchTermChange(event.target.value)}
-                                    className="max-w-sm w-md"
-                                />
-                            </div>
+                            <Input
+                                placeholder={i18n.t('Filter...')}
+                                value={searchTerm}
+                                onChange={event => handleSearchChange(event.target.value)}
+                                className="w-64"
+                            />
                         )}
                         <Suspense>
                             {Object.entries(facetedFilters ?? {}).map(([key, filter]) => (
@@ -201,99 +232,120 @@ export function DataTable<TData>({
                             ))}
                         </Suspense>
                         {onFilterChange && <AddFilterMenu columns={table.getAllColumns()} />}
+                        {pageId && onFilterChange && <MyViewsButton />}
                     </div>
-                    <div className="flex gap-1">
-                        {columnFilters
-                            .filter(f => !facetedFilters?.[f.id])
-                            .map(f => {
-                                const column = table.getColumn(f.id);
-                                const currency = activeChannel?.defaultCurrencyCode ?? 'USD';
-                                return (
-                                    <DataTableFilterBadge
-                                        key={f.id}
-                                        filter={f}
-                                        currencyCode={currency}
-                                        dataType={
-                                            (column?.columnDef.meta as any)?.fieldInfo?.type ?? 'String'
-                                        }
-                                        onRemove={() =>
-                                            setColumnFilters(old => old.filter(x => x.id !== f.id))
-                                        }
-                                    />
-                                );
-                            })}
+                    <div className="flex items-center gap-2">
+                        {pageId && onFilterChange && <SaveViewButton />}
+                        {!disableViewOptions && <DataTableViewOptions table={table} />}
+                        {onRefresh && <RefreshButton onRefresh={onRefresh} isLoading={isLoading ?? false} />}
                     </div>
                 </div>
-                <div className="flex items-center justify-start gap-2">
-                    {!disableViewOptions && <DataTableViewOptions table={table} />}
-                    {onRefresh && <RefreshButton onRefresh={onRefresh} isLoading={isLoading ?? false} />}
-                </div>
-            </div>
 
-            <div className="rounded-md border my-2 relative">
-                <Table>
-                    <TableHeader>
-                        {table.getHeaderGroups().map(headerGroup => (
-                            <TableRow key={headerGroup.id}>
-                                {headerGroup.headers.map(header => {
+                {(pageId && onFilterChange && globalViews.length > 0) ||
+                columnFilters.filter(f => !facetedFilters?.[f.id]).length > 0 ? (
+                    <div className="flex items-center justify-between bg-muted/40 rounded border border-border p-2">
+                        <div className="flex items-center">
+                            {pageId && onFilterChange && <GlobalViewsBar />}
+                        </div>
+                        <div className="flex gap-1 items-center">
+                            {columnFilters
+                                .filter(f => !facetedFilters?.[f.id])
+                                .map(f => {
+                                    const column = table.getColumn(f.id);
+                                    const currency = activeChannel?.defaultCurrencyCode ?? 'USD';
                                     return (
-                                        <TableHead key={header.id}>
-                                            {header.isPlaceholder
-                                                ? null
-                                                : flexRender(
-                                                      header.column.columnDef.header,
-                                                      header.getContext(),
-                                                  )}
-                                        </TableHead>
+                                        <DataTableFilterBadge
+                                            key={f.id}
+                                            filter={f}
+                                            currencyCode={currency}
+                                            dataType={
+                                                (column?.columnDef.meta as any)?.fieldInfo?.type ?? 'String'
+                                            }
+                                            onRemove={() =>
+                                                setColumnFilters(old => old.filter(x => x.id !== f.id))
+                                            }
+                                        />
                                     );
                                 })}
-                            </TableRow>
-                        ))}
-                    </TableHeader>
-                    <TableBody>
-                        {isLoading && !data?.length ? (
-                            Array.from({ length: pagination.pageSize }).map((_, index) => (
-                                <TableRow
-                                    key={`skeleton-${index}`}
-                                    className="animate-in fade-in duration-100"
+                            {columnFilters.filter(f => !facetedFilters?.[f.id]).length > 0 && (
+                                <Button
+                                    variant="ghost"
+                                    size="sm"
+                                    onClick={() => setColumnFilters([])}
+                                    className="text-xs opacity-60 hover:opacity-100"
                                 >
-                                    {Array.from({ length: visibleColumnCount }).map((_, cellIndex) => (
-                                        <TableCell
-                                            key={`skeleton-cell-${index}-${cellIndex}`}
-                                            className="h-12"
-                                        >
-                                            <Skeleton className="h-4 my-2 w-full" />
-                                        </TableCell>
-                                    ))}
+                                    <Trans>Clear all</Trans>
+                                </Button>
+                            )}
+                        </div>
+                    </div>
+                ) : 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>
-                            ))
-                        ) : 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>
-                                    ))}
+                            ))}
+                        </TableHeader>
+                        <TableBody>
+                            {isLoading && !data?.length ? (
+                                Array.from({ length: pagination.pageSize }).map((_, index) => (
+                                    <TableRow
+                                        key={`skeleton-${index}`}
+                                        className="animate-in fade-in duration-100"
+                                    >
+                                        {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 ? (
+                                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>
-                            ))
-                        ) : (
-                            <TableRow className="animate-in fade-in duration-100">
-                                <TableCell colSpan={columns.length} className="h-24 text-center">
-                                    No results.
-                                </TableCell>
-                            </TableRow>
-                        )}
-                        {children}
-                    </TableBody>
-                </Table>
-                <DataTableBulkActions bulkActions={bulkActions ?? []} table={table} />
+                            )}
+                            {children}
+                        </TableBody>
+                    </Table>
+                    <DataTableBulkActions bulkActions={bulkActions ?? []} table={table} />
+                </div>
+                {onPageChange && totalItems != null && <DataTablePagination table={table} />}
             </div>
-            {onPageChange && totalItems != null && <DataTablePagination table={table} />}
-        </>
+        </DataTableProvider>
     );
 }