@vendure/dashboard 3.5.0-minor-202510071456 → 3.5.0-minor-202510201346

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

@@ -0,0 +1,249 @@
+import { Badge } from '@/vdb/components/ui/badge.js';
+import { Button } from '@/vdb/components/ui/button.js';
+import { FullWidthPageBlock, Page, PageLayout } from '@/vdb/framework/layout-engine/page-layout.js';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { ColumnDef, ColumnFiltersState, SortingState } from '@tanstack/react-table';
+import { useState } from 'react';
+import { withDescription } from '../../../../.storybook/with-description.js';
+import { DataTable } from './data-table.js';
+
+// Sample data type
+interface Product {
+    id: string;
+    name: string;
+    category: string;
+    price: number;
+    stock: number;
+    status: 'active' | 'inactive' | 'discontinued';
+    createdAt: string;
+}
+
+// Sample data
+const sampleData: Product[] = Array.from({ length: 100 }, (_, i) => ({
+    id: `product-${i + 1}`,
+    name: `Product ${i + 1}`,
+    category: ['Electronics', 'Clothing', 'Home & Garden', 'Sports', 'Books'][i % 5],
+    price: Math.floor(Math.random() * 1000) + 10,
+    stock: Math.floor(Math.random() * 100),
+    status: (['active', 'inactive', 'discontinued'] as const)[i % 3],
+    createdAt: new Date(Date.now() - Math.random() * 10000000000).toISOString(),
+}));
+
+const meta = {
+    title: 'Components/DataTable',
+    component: DataTable,
+    ...withDescription(import.meta.url, './data-table.js'),
+    parameters: {
+        layout: 'fullscreen',
+    },
+    tags: ['autodocs'],
+} satisfies Meta<typeof DataTable>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Playground: Story = {
+    render: () => {
+        const [page, setPage] = useState(1);
+        const [pageSize, setPageSize] = useState(10);
+        const [sorting, setSorting] = useState<SortingState>([{ id: 'name', desc: false }]);
+        const [filters, setFilters] = useState<ColumnFiltersState>([]);
+        const [searchTerm, setSearchTerm] = useState('');
+
+        // Define columns
+        const columns: ColumnDef<Product>[] = [
+            {
+                id: 'name',
+                accessorKey: 'name',
+                header: 'Product Name',
+                cell: ({ row }) => <span className="font-medium">{row.original.name}</span>,
+            },
+            {
+                id: 'category',
+                accessorKey: 'category',
+                header: 'Category',
+                cell: ({ row }) => <span>{row.original.category}</span>,
+            },
+            {
+                id: 'price',
+                accessorKey: 'price',
+                header: 'Price',
+                cell: ({ row }) => <span>${row.original.price.toFixed(2)}</span>,
+            },
+            {
+                id: 'stock',
+                accessorKey: 'stock',
+                header: 'Stock',
+                cell: ({ row }) => {
+                    const stock = row.original.stock;
+                    return (
+                        <Badge variant={stock > 50 ? 'default' : stock > 20 ? 'secondary' : 'destructive'}>
+                            {stock}
+                        </Badge>
+                    );
+                },
+            },
+            {
+                id: 'status',
+                accessorKey: 'status',
+                header: 'Status',
+                cell: ({ row }) => {
+                    const status = row.original.status;
+                    return (
+                        <Badge
+                            variant={
+                                status === 'active'
+                                    ? 'default'
+                                    : status === 'inactive'
+                                      ? 'secondary'
+                                      : 'outline'
+                            }
+                        >
+                            {status}
+                        </Badge>
+                    );
+                },
+            },
+            {
+                id: 'createdAt',
+                accessorKey: 'createdAt',
+                header: 'Created',
+                cell: ({ row }) => new Date(row.original.createdAt).toLocaleDateString(),
+            },
+            {
+                id: 'actions',
+                header: 'Actions',
+                cell: ({ row }) => (
+                    <div className="flex gap-2">
+                        <Button
+                            variant="ghost"
+                            size="sm"
+                            onClick={() => console.log('Edit', row.original.id)}
+                        >
+                            Edit
+                        </Button>
+                        <Button
+                            variant="ghost"
+                            size="sm"
+                            onClick={() => console.log('Delete', row.original.id)}
+                        >
+                            Delete
+                        </Button>
+                    </div>
+                ),
+            },
+        ];
+
+        // Filter and sort data based on state
+        let filteredData = [...sampleData];
+
+        // Apply search filter
+        if (searchTerm) {
+            filteredData = filteredData.filter(item =>
+                item.name.toLowerCase().includes(searchTerm.toLowerCase()),
+            );
+        }
+
+        // Apply column filters
+        filters.forEach(filter => {
+            if (filter.id === 'status' && Array.isArray(filter.value)) {
+                filteredData = filteredData.filter(item => filter.value.includes(item.status));
+            }
+            if (filter.id === 'category' && Array.isArray(filter.value)) {
+                filteredData = filteredData.filter(item => filter.value.includes(item.category));
+            }
+        });
+
+        // Apply sorting
+        if (sorting.length > 0) {
+            const sort = sorting[0];
+            filteredData.sort((a, b) => {
+                const aValue = a[sort.id as keyof Product];
+                const bValue = b[sort.id as keyof Product];
+                if (aValue < bValue) return sort.desc ? 1 : -1;
+                if (aValue > bValue) return sort.desc ? -1 : 1;
+                return 0;
+            });
+        }
+
+        const totalItems = filteredData.length;
+        const paginatedData = filteredData.slice((page - 1) * pageSize, page * pageSize);
+
+        return (
+            <div className="p-6">
+                <Page pageId="test-page">
+                    <PageLayout>
+                        <FullWidthPageBlock blockId="test-block">
+                            <DataTable
+                                columns={columns}
+                                data={paginatedData}
+                                totalItems={totalItems}
+                                page={page}
+                                itemsPerPage={pageSize}
+                                sorting={sorting}
+                                columnFilters={filters}
+                                defaultColumnVisibility={{
+                                    createdAt: false,
+                                }}
+                                onPageChange={(_, newPage, newPageSize) => {
+                                    setPage(newPage);
+                                    setPageSize(newPageSize);
+                                }}
+                                onSortChange={(_, newSorting) => {
+                                    setSorting(newSorting);
+                                }}
+                                onFilterChange={(_, newFilters) => {
+                                    setFilters(newFilters);
+                                    setPage(1); // Reset to first page when filters change
+                                }}
+                                onSearchTermChange={term => {
+                                    setSearchTerm(term);
+                                    setPage(1); // Reset to first page when search changes
+                                }}
+                                facetedFilters={{
+                                    status: {
+                                        title: 'Status',
+                                        options: [
+                                            { label: 'Active', value: 'active' },
+                                            { label: 'Inactive', value: 'inactive' },
+                                            { label: 'Discontinued', value: 'discontinued' },
+                                        ],
+                                    },
+                                    category: {
+                                        title: 'Category',
+                                        options: [
+                                            { label: 'Electronics', value: 'Electronics' },
+                                            { label: 'Clothing', value: 'Clothing' },
+                                            { label: 'Home & Garden', value: 'Home & Garden' },
+                                            { label: 'Sports', value: 'Sports' },
+                                            { label: 'Books', value: 'Books' },
+                                        ],
+                                    },
+                                }}
+                                bulkActions={[
+                                    {
+                                        label: 'Delete selected',
+                                        icon: 'trash',
+                                        onClick: (selectedItems: Product[]) => {
+                                            console.log('Delete selected:', selectedItems);
+                                        },
+                                    },
+                                    {
+                                        label: 'Export selected',
+                                        icon: 'download',
+                                        onClick: (selectedItems: Product[]) => {
+                                            console.log('Export selected:', selectedItems);
+                                        },
+                                    },
+                                ]}
+                                onRefresh={() => {
+                                    console.log('Refresh data');
+                                }}
+                            />
+                        </FullWidthPageBlock>
+                    </PageLayout>
+                </Page>
+            </div>
+        );
+    },
+};

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

@@ -29,12 +29,12 @@ import {
     VisibilityState,
 } from '@tanstack/react-table';
 import { RowSelectionState, TableOptions } from '@tanstack/table-core';
-import React, { Suspense, useEffect } from 'react';
+import React, { Suspense, useEffect, 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 { DataTableFilterBadge } from './data-table-filter-badge.js';
+import { DataTableFilterBadgeEditable } from './data-table-filter-badge-editable.js';
 
 export interface FacetedFilter {
     title: string;
@@ -128,6 +128,8 @@ export function DataTable<TData>({
         defaultColumnVisibility ?? {},
     );
     const [rowSelection, setRowSelection] = React.useState<RowSelectionState>({});
+    const prevSearchTermRef = useRef(searchTerm);
+    const prevColumnFiltersRef = useRef(columnFilters);
 
     useEffect(() => {
         // If the defaultColumnVisibility changes externally (e.g. the user reset the table settings),
@@ -179,21 +181,46 @@ export function DataTable<TData>({
         onSortChange?.(table, sorting);
     }, [sorting]);
 
-    useEffect(() => {
-        onFilterChange?.(table, columnFilters);
-    }, [columnFilters]);
-
     useEffect(() => {
         onColumnVisibilityChange?.(table, columnVisibility);
     }, [columnVisibility]);
 
-    const visibleColumnCount = Object.values(columnVisibility).filter(Boolean).length;
+    useEffect(() => {
+        if (page && page > 1 && itemsPerPage && prevSearchTermRef.current !== searchTerm) {
+            // Set the page back to 1 when searchTerm changes
+            setPagination({
+                ...pagination,
+                pageIndex: 0,
+            });
+        }
+        prevSearchTermRef.current = searchTerm;
+    }, [onPageChange, searchTerm]);
+
+    useEffect(() => {
+        onFilterChange?.(table, columnFilters);
+        if (
+            page &&
+            page > 1 &&
+            itemsPerPage &&
+            JSON.stringify(prevColumnFiltersRef.current) !== JSON.stringify(columnFilters)
+        ) {
+            // Set the page back to 1 when filters change
+            setPagination({
+                ...pagination,
+                pageIndex: 0,
+            });
+            pagination.pageIndex;
+        }
+        prevColumnFiltersRef.current = columnFilters;
+    }, [columnFilters]);
 
     const handleSearchChange = (value: string) => {
         setSearchTerm(value);
         onSearchTermChange?.(value);
     };
 
+    const visibleColumnCount = Object.values(columnVisibility).filter(Boolean).length;
+
     return (
         <DataTableProvider
             columnFilters={columnFilters}
@@ -254,9 +281,10 @@ export function DataTable<TData>({
                                     const column = table.getColumn(f.id);
                                     const currency = activeChannel?.defaultCurrencyCode ?? 'USD';
                                     return (
-                                        <DataTableFilterBadge
+                                        <DataTableFilterBadgeEditable
                                             key={f.id}
                                             filter={f}
+                                            column={column}
                                             currencyCode={currency}
                                             dataType={
                                                 (column?.columnDef.meta as any)?.fieldInfo?.type ?? 'String'
@@ -303,7 +331,7 @@ export function DataTable<TData>({
                         </TableHeader>
                         <TableBody>
                             {isLoading && !data?.length ? (
-                                Array.from({ length: pagination.pageSize }).map((_, index) => (
+                                Array.from({ length: Math.min(pagination.pageSize, 100) }).map((_, index) => (
                                     <TableRow
                                         key={`skeleton-${index}`}
                                         className="animate-in fade-in duration-100"

package/src/lib/components/data-table/filters/data-table-datetime-filter.tsx

@@ -10,47 +10,92 @@ export interface DataTableDateTimeFilterProps {
 
 export const DATETIME_OPERATORS = ['eq', 'before', 'after', 'between', 'isNull'] as const;
 
+export interface DateTimeFilterResult {
+    filter: Record<string, any>;
+    error?: string;
+}
+
+export interface ParsedDateTimeFilter {
+    operator: string;
+    value?: Date;
+    startDate?: Date;
+    endDate?: Date;
+}
+
+export function parseDateTimeFilter(incomingValue: Record<string, any> | undefined): ParsedDateTimeFilter {
+    if (!incomingValue || Object.keys(incomingValue).length === 0) {
+        return { operator: 'eq' };
+    }
+
+    const operator = Object.keys(incomingValue)[0];
+    const value = Object.values(incomingValue)[0];
+
+    if (operator === 'isNull') {
+        return { operator };
+    }
+
+    if (operator === 'between' && typeof value === 'object' && value !== null) {
+        return {
+            operator,
+            startDate: value.start ? new Date(value.start) : undefined,
+            endDate: value.end ? new Date(value.end) : undefined,
+        };
+    }
+
+    // For eq, before, after operators
+    return {
+        operator,
+        value: typeof value === 'string' ? new Date(value) : undefined,
+    };
+}
+
+export function buildDateTimeFilter(
+    operator: string,
+    value?: Date,
+    startDate?: Date,
+    endDate?: Date,
+): DateTimeFilterResult {
+    if (operator === 'isNull') {
+        return { filter: { [operator]: true } };
+    }
+
+    if (operator === 'between') {
+        if (!startDate && !endDate) {
+            return { filter: {} };
+        }
+        if (!startDate || !endDate) {
+            return { filter: {}, error: 'Please enter both start and end dates' };
+        }
+        if (startDate > endDate) {
+            return { filter: {}, error: 'Start date must be before end date' };
+        }
+        return {
+            filter: { [operator]: { start: startDate.toISOString(), end: endDate.toISOString() } },
+        };
+    } else {
+        if (!value) {
+            return { filter: {} };
+        }
+        return { filter: { [operator]: value.toISOString() } };
+    }
+}
+
 export function DataTableDateTimeFilter({
     value: incomingValue,
     onChange,
 }: Readonly<DataTableDateTimeFilterProps>) {
-    const initialOperator = incomingValue ? Object.keys(incomingValue)[0] : 'eq';
-    const initialValue = incomingValue ? Object.values(incomingValue)[0] : '';
-    const [operator, setOperator] = useState<string>(initialOperator ?? 'eq');
-    const [value, setValue] = useState<Date | undefined>(initialValue ? new Date(initialValue) : undefined);
-    const [startDate, setStartDate] = useState<Date | undefined>(undefined);
-    const [endDate, setEndDate] = useState<Date | undefined>(undefined);
+    const parsed = parseDateTimeFilter(incomingValue);
+    const [operator, setOperator] = useState<string>(parsed.operator);
+    const [value, setValue] = useState<Date | undefined>(parsed.value);
+    const [startDate, setStartDate] = useState<Date | undefined>(parsed.startDate);
+    const [endDate, setEndDate] = useState<Date | undefined>(parsed.endDate);
     const [error, setError] = useState<string>('');
 
-    useEffect(() => {
-        if (operator === 'isNull') {
-            onChange({ [operator]: true });
-            return;
-        }
 
-        if (operator === 'between') {
-            if (!startDate && !endDate) {
-                onChange({});
-                return;
-            }
-            if (!startDate || !endDate) {
-                setError('Please enter both start and end dates');
-                return;
-            }
-            if (startDate > endDate) {
-                setError('Start date must be before end date');
-                return;
-            }
-            setError('');
-            onChange({ [operator]: { start: startDate.toISOString(), end: endDate.toISOString() } });
-        } else {
-            if (!value) {
-                onChange({});
-                return;
-            }
-            setError('');
-            onChange({ [operator]: value.toISOString() });
-        }
+    useEffect(() => {
+        const result = buildDateTimeFilter(operator, value, startDate, endDate);
+        onChange(result.filter);
+        setError(result.error ?? '');
     }, [operator, value, startDate, endDate]);
 
     const parseToDate = (input: unknown): Date | undefined => {

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

@@ -5,8 +5,14 @@ import {
     getOperationVariablesFields,
     getTypeFieldInfo,
 } from '@/vdb/framework/document-introspection/get-document-structure.js';
+import {
+    generateDisplayComponentKey,
+    getDisplayComponent,
+} from '@/vdb/framework/extension-api/display-component-extensions.js';
 import { BulkAction } from '@/vdb/framework/extension-api/types/index.js';
 import { api } from '@/vdb/graphql/api.js';
+import { usePageBlock } from '@/vdb/hooks/use-page-block.js';
+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';
@@ -36,7 +42,12 @@ import {
 } from '../ui/alert-dialog.js';
 import { Button } from '../ui/button.js';
 import { Checkbox } from '../ui/checkbox.js';
-import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '../ui/dropdown-menu.js';
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuTrigger,
+} from '../ui/dropdown-menu.js';
 import { DataTableColumnHeader } from './data-table-column-header.js';
 
 /**
@@ -77,6 +88,8 @@ export function useGeneratedColumns<T extends TypedDocumentNode<any, any>>({
     columns: Array<AccessorKeyColumnDef<any> | AccessorFnColumnDef<any>>;
     customFieldColumnNames: string[];
 } {
+    const { pageId } = usePage();
+    const pageBlock = usePageBlock();
     const columnHelper = createColumnHelper<PaginatedListItemFields<T>>();
     const allBulkActions = useAllBulkActions(bulkActions ?? []);
 
@@ -101,47 +114,39 @@ export function useGeneratedColumns<T extends TypedDocumentNode<any, any>>({
 
         const queryBasedColumns = columnConfigs.map(({ fieldInfo, isCustomField }) => {
             const customConfig = customizeColumns?.[fieldInfo.name as unknown as AllItemFieldKeys<T>] ?? {};
-            const { header, ...customConfigRest } = customConfig;
+            const { header, meta, cell: customCell, ...customConfigRest } = customConfig;
             const enableColumnFilter = fieldInfo.isScalar && !facetedFilters?.[fieldInfo.name];
 
             return columnHelper.accessor(fieldInfo.name as any, {
                 id: fieldInfo.name,
-                meta: { fieldInfo, isCustomField },
+                meta: { fieldInfo, isCustomField, ...(meta ?? {}) },
                 enableColumnFilter,
-                enableSorting: fieldInfo.isScalar && enableSorting,
+                enableSorting: fieldInfo.isScalar && fieldInfo.type !== 'Boolean' && enableSorting,
                 // Filtering is done on the server side, but we set this to 'equalsString' because
                 // otherwise the TanStack Table with apply an "auto" function which somehow
                 // prevents certain filters from working.
                 filterFn: 'equalsString',
-                cell: ({ cell, row }) => {
+                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;
 
-                    if (fieldInfo.list && Array.isArray(value)) {
-                        return value.join(', ');
-                    }
-                    if (
-                        (fieldInfo.type === 'DateTime' && typeof value === 'string') ||
-                        value instanceof Date
-                    ) {
-                        return <DisplayComponent id="vendure:dateTime" value={value} />;
-                    }
-                    if (fieldInfo.type === 'Boolean') {
-                        if (cell.column.id === 'enabled') {
-                            return <DisplayComponent id="vendure:booleanBadge" value={value} />;
-                        } else {
-                            return <DisplayComponent id="vendure:booleanCheckbox" value={value} />;
-                        }
-                    }
-                    if (fieldInfo.type === 'Asset') {
-                        return <DisplayComponent id="vendure:asset" value={value} />;
+                    const CustomDisplayComponent =
+                        displayComponentId && getDisplayComponent(displayComponentId);
+
+                    if (CustomDisplayComponent) {
+                        return <CustomDisplayComponent value={value} {...cellContext} />;
                     }
-                    if (value !== null && typeof value === 'object') {
-                        return <DisplayComponent id="vendure:json" value={value} />;
+                    if (typeof customCell === 'function') {
+                        return customCell(cellContext);
                     }
-                    return value;
+                    return <DefaultDisplayComponent value={value} fieldInfo={fieldInfo} />;
                 },
                 header: headerContext => {
                     return (
@@ -158,7 +163,7 @@ export function useGeneratedColumns<T extends TypedDocumentNode<any, any>>({
             if (!id) {
                 throw new Error('Column id is required');
             }
-            finalColumns.push(columnHelper.accessor(id as any, { ...column, id }));
+            finalColumns.push(columnHelper.accessor(id as any, { ...column, id, enableColumnFilter: false }));
         }
 
         if (defaultColumnOrder) {
@@ -259,6 +264,29 @@ function getRowActions(
     };
 }
 
+function DefaultDisplayComponent({ value, fieldInfo }: { value: any; fieldInfo: FieldInfo }) {
+    if (fieldInfo.list && Array.isArray(value)) {
+        return value.join(', ');
+    }
+    if ((fieldInfo.type === 'DateTime' && typeof value === 'string') || value instanceof Date) {
+        return <DisplayComponent id="vendure:dateTime" value={value} />;
+    }
+    if (fieldInfo.type === 'Boolean') {
+        if (fieldInfo.name === 'enabled') {
+            return <DisplayComponent id="vendure:booleanBadge" value={value} />;
+        } else {
+            return <DisplayComponent id="vendure:booleanCheckbox" value={value} />;
+        }
+    }
+    if (fieldInfo.type === 'Asset') {
+        return <DisplayComponent id="vendure:asset" value={value} />;
+    }
+    if (value !== null && typeof value === 'object') {
+        return <DisplayComponent id="vendure:json" value={value} />;
+    }
+    return value;
+}
+
 function DeleteMutationRowAction({
     deleteMutation,
     row,