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

package/src/app/routes/_authenticated/_payment-methods/payment-methods.tsx

@@ -4,7 +4,7 @@ import { PermissionGuard } from '@/vdb/components/shared/permission-guard.js';
 import { Button } from '@/vdb/components/ui/button.js';
 import { PageActionBarRight } from '@/vdb/framework/layout-engine/page-layout.js';
 import { ListPage } from '@/vdb/framework/page/list-page.js';
-import { Trans } from '@/vdb/lib/trans.js';
+import { Trans, useLingui } from '@lingui/react/macro';
 import { createFileRoute, Link } from '@tanstack/react-router';
 import { PlusIcon } from 'lucide-react';
 import {
@@ -20,12 +20,13 @@ export const Route = createFileRoute('/_authenticated/_payment-methods/payment-m
 });
 
 function PaymentMethodListPage() {
+    const { t } = useLingui();
     return (
         <ListPage
             pageId="payment-method-list"
             listQuery={paymentMethodListQuery}
             route={Route}
-            title="Payment Methods"
+            title={<Trans>Payment Methods</Trans>}
             defaultVisibility={{
                 name: true,
                 code: true,
@@ -38,7 +39,7 @@ function PaymentMethodListPage() {
             }}
             facetedFilters={{
                 enabled: {
-                    title: 'Enabled',
+                    title: t`Enabled`,
                     options: [
                         { label: 'Enabled', value: true },
                         { label: 'Disabled', value: false },
@@ -47,11 +48,9 @@ function PaymentMethodListPage() {
             }}
             customizeColumns={{
                 name: {
-                    header: 'Name',
                     cell: ({ row }) => <DetailPageButton id={row.original.id} label={row.original.name} />,
                 },
                 enabled: {
-                    header: 'Enabled',
                     cell: ({ row }) => <BooleanDisplayBadge value={row.original.enabled} />,
                 },
             }}
@@ -75,7 +74,7 @@ function PaymentMethodListPage() {
                     <Button asChild>
                         <Link to="./new">
                             <PlusIcon className="mr-2 h-4 w-4" />
-                            New Payment Method
+                            <Trans>New Payment Method</Trans>
                         </Link>
                     </Button>
                 </PermissionGuard>

package/src/app/routes/_authenticated/_payment-methods/payment-methods_.$id.tsx

@@ -19,7 +19,7 @@ import {
 } from '@/vdb/framework/layout-engine/page-layout.js';
 import { detailPageRouteLoader } from '@/vdb/framework/page/detail-page-route-loader.js';
 import { useDetailPage } from '@/vdb/framework/page/use-detail-page.js';
-import { Trans, useLingui } from '@/vdb/lib/trans.js';
+import { Trans, useLingui } from '@lingui/react/macro';
 import { createFileRoute, useNavigate } from '@tanstack/react-router';
 import { toast } from 'sonner';
 import { PaymentEligibilityCheckerSelector } from './components/payment-eligibility-checker-selector.js';
@@ -51,7 +51,7 @@ function PaymentMethodDetailPage() {
     const params = Route.useParams();
     const navigate = useNavigate();
     const creatingNewEntity = params.id === NEW_ENTITY_PATH;
-    const { i18n } = useLingui();
+    const { t } = useLingui();
 
     const { form, submitHandler, entity, isPending, resetForm } = useDetailPage({
         pageId,
@@ -95,16 +95,23 @@ function PaymentMethodDetailPage() {
         },
         params: { id: params.id },
         onSuccess: async data => {
-            toast.success(i18n.t(creatingNewEntity ? 'Successfully created payment method' : 'Successfully updated payment method'));
+            toast.success(
+                creatingNewEntity
+                    ? t`Successfully created payment method`
+                    : t`Successfully updated payment method`,
+            );
             resetForm();
             if (creatingNewEntity) {
                 await navigate({ to: `../$id`, params: { id: data.id } });
             }
         },
         onError: err => {
-            toast.error(i18n.t(creatingNewEntity ? 'Failed to create payment method' : 'Failed to update payment method'), {
-                description: err instanceof Error ? err.message : 'Unknown error',
-            });
+            toast.error(
+                creatingNewEntity ? t`Failed to create payment method` : t`Failed to update payment method`,
+                {
+                    description: err instanceof Error ? err.message : 'Unknown error',
+                },
+            );
         },
     });
 

package/src/app/routes/_authenticated/_product-variants/components/product-variant-bulk-actions.tsx

@@ -9,7 +9,7 @@ import { RemoveFromChannelBulkAction } from '@/vdb/components/shared/remove-from
 import { BulkActionComponent } from '@/vdb/framework/extension-api/types/data-table.js';
 import { api } from '@/vdb/graphql/api.js';
 import { useChannel } from '@/vdb/hooks/use-channel.js';
-import { Trans } from '@/vdb/lib/trans.js';
+import { Trans } from '@lingui/react/macro';
 import { DeleteBulkAction } from '../../../../common/delete-bulk-action.js';
 
 import { AssignFacetValuesDialog } from '../../_products/components/assign-facet-values-dialog.js';

package/src/app/routes/_authenticated/_product-variants/components/variant-price-detail.tsx

@@ -2,7 +2,7 @@ import { Money } from '@/vdb/components/data-display/money.js';
 import { api } from '@/vdb/graphql/api.js';
 import { graphql } from '@/vdb/graphql/graphql.js';
 import { useChannel } from '@/vdb/hooks/use-channel.js';
-import { Trans } from '@/vdb/lib/trans.js';
+import { Trans } from '@lingui/react/macro';
 import { useQuery } from '@tanstack/react-query';
 import { useEffect, useState } from 'react';
 

package/src/app/routes/_authenticated/_product-variants/product-variants.graphql.ts

@@ -60,6 +60,16 @@ export const productVariantDetailDocument = graphql(
                         name
                     }
                 }
+                options {
+                    id
+                    name
+                    code
+                    group {
+                        id
+                        name
+                        code
+                    }
+                }
                 translations {
                     id
                     languageCode

package/src/app/routes/_authenticated/_product-variants/product-variants.tsx

@@ -3,7 +3,7 @@ import { DetailPageButton } from '@/vdb/components/shared/detail-page-button.js'
 import { StockLevelLabel } from '@/vdb/components/shared/stock-level-label.js';
 import { ListPage } from '@/vdb/framework/page/list-page.js';
 import { useLocalFormat } from '@/vdb/hooks/use-local-format.js';
-import { Trans } from '@/vdb/lib/trans.js';
+import { Trans } from '@lingui/react/macro';
 import { createFileRoute } from '@tanstack/react-router';
 import {
     AssignFacetValuesToProductVariantsBulkAction,
@@ -25,6 +25,14 @@ function ProductListPage() {
             pageId="product-variant-list"
             title={<Trans>Product Variants</Trans>}
             listQuery={productVariantListDocument}
+            defaultVisibility={{
+                featuredAsset: true,
+                name: true,
+                sku: true,
+                priceWithTax: true,
+                enabled: true,
+                stockLevels: true,
+            }}
             bulkActions={[
                 {
                     component: AssignProductVariantsToChannelBulkAction,
@@ -45,7 +53,6 @@ function ProductListPage() {
             ]}
             customizeColumns={{
                 name: {
-                    header: 'Product Name',
                     cell: ({ row: { original } }) => (
                         <DetailPageButton id={original.id} label={original.name} />
                     ),

package/src/app/routes/_authenticated/_product-variants/product-variants_.$id.tsx

@@ -25,7 +25,7 @@ import {
 import { detailPageRouteLoader } from '@/vdb/framework/page/detail-page-route-loader.js';
 import { useDetailPage } from '@/vdb/framework/page/use-detail-page.js';
 import { useChannel } from '@/vdb/hooks/use-channel.js';
-import { Trans, useLingui } from '@/vdb/lib/trans.js';
+import { Trans, useLingui } from '@lingui/react/macro';
 import { createFileRoute, useNavigate } from '@tanstack/react-router';
 import { Fragment } from 'react/jsx-runtime';
 import { toast } from 'sonner';
@@ -61,7 +61,7 @@ function ProductVariantDetailPage() {
     const params = Route.useParams();
     const navigate = useNavigate();
     const creatingNewEntity = params.id === NEW_ENTITY_PATH;
-    const { i18n } = useLingui();
+    const { t } = useLingui();
     const { activeChannel } = useChannel();
 
     const { form, submitHandler, entity, isPending, resetForm } = useDetailPage({
@@ -97,16 +97,23 @@ function ProductVariantDetailPage() {
         },
         params: { id: params.id },
         onSuccess: data => {
-            toast.success(i18n.t(creatingNewEntity ? 'Successfully created product variant' : 'Successfully updated product variant'));
+            toast.success(
+                creatingNewEntity
+                    ? t`Successfully created product variant`
+                    : t`Successfully updated product variant`,
+            );
             resetForm();
             if (creatingNewEntity) {
                 navigate({ to: `../${(data as any)?.[0]?.id}`, from: Route.id });
             }
         },
         onError: err => {
-            toast.error(i18n.t(creatingNewEntity ? 'Failed to create product variant' : 'Failed to update product variant'), {
-                description: err instanceof Error ? err.message : 'Unknown error',
-            });
+            toast.error(
+                creatingNewEntity ? t`Failed to create product variant` : t`Failed to update product variant`,
+                {
+                    description: err instanceof Error ? err.message : 'Unknown error',
+                },
+            );
         },
     });
 

package/src/app/routes/_authenticated/_products/components/add-option-group-dialog.tsx

@@ -9,8 +9,8 @@ import {
 } from '@/vdb/components/ui/dialog.js';
 import { Form } from '@/vdb/components/ui/form.js';
 import { api } from '@/vdb/graphql/api.js';
-import { Trans, useLingui } from '@/vdb/lib/trans.js';
 import { zodResolver } from '@hookform/resolvers/zod';
+import { Trans, useLingui } from '@lingui/react/macro';
 import { useMutation } from '@tanstack/react-query';
 import { Plus, Save } from 'lucide-react';
 import { useState } from 'react';
@@ -27,7 +27,7 @@ export function AddOptionGroupDialog({
     onSuccess?: () => void;
 }>) {
     const [open, setOpen] = useState(false);
-    const { i18n } = useLingui();
+    const { t } = useLingui();
 
     const form = useForm<OptionGroup>({
         resolver: zodResolver(optionGroupSchema),
@@ -79,12 +79,12 @@ export function AddOptionGroupDialog({
                 });
             }
 
-            toast.success(i18n.t('Successfully created option group'));
+            toast.success(t`Successfully created option group`);
             setOpen(false);
             onSuccess?.();
         } catch (error) {
-            toast.error(i18n.t('Failed to create option group'), {
-                description: error instanceof Error ? error.message : i18n.t('Unknown error'),
+            toast.error(t`Failed to create option group`, {
+                description: error instanceof Error ? error.message : t`Unknown error`,
             });
         }
     };

package/src/app/routes/_authenticated/_products/components/add-product-variant-dialog.tsx

@@ -14,8 +14,8 @@ import { Input } from '@/vdb/components/ui/input.js';
 import { api } from '@/vdb/graphql/api.js';
 import { graphql, ResultOf, VariablesOf } from '@/vdb/graphql/graphql.js';
 import { useChannel } from '@/vdb/hooks/use-channel.js';
-import { Trans, useLingui } from '@/vdb/lib/trans.js';
 import { zodResolver } from '@hookform/resolvers/zod';
+import { Trans, useLingui } from '@lingui/react/macro';
 import { useMutation, useQuery } from '@tanstack/react-query';
 import { Plus } from 'lucide-react';
 import { useCallback, useEffect, useState } from 'react';
@@ -83,7 +83,7 @@ export function AddProductVariantDialog({
 }) {
     const [open, setOpen] = useState(false);
     const { activeChannel } = useChannel();
-    const { i18n } = useLingui();
+    const { t } = useLingui();
     const [duplicateVariantError, setDuplicateVariantError] = useState<string | null>(null);
     const [nameTouched, setNameTouched] = useState(false);
 
@@ -166,13 +166,13 @@ export function AddProductVariantDialog({
     const createProductVariantMutation = useMutation({
         mutationFn: api.mutate(createProductVariantDocument),
         onSuccess: (result: ResultOf<typeof createProductVariantDocument>) => {
-            toast.success(i18n.t('Successfully created product variant'));
+            toast.success(t`Successfully created product variant`);
             setOpen(false);
             onSuccess?.();
         },
         onError: error => {
-            toast.error(i18n.t('Failed to create product variant'), {
-                description: error instanceof Error ? error.message : i18n.t('Unknown error'),
+            toast.error(t`Failed to create product variant`, {
+                description: error instanceof Error ? error.message : t`Unknown error`,
             });
         },
     });

package/src/app/routes/_authenticated/_products/components/assign-facet-values-dialog.tsx

@@ -14,7 +14,7 @@ import {
     DialogTitle,
 } from '@/vdb/components/ui/dialog.js';
 import { ResultOf } from '@/vdb/graphql/graphql.js';
-import { Trans, useLingui } from '@/vdb/lib/trans.js';
+import { Trans, useLingui } from '@lingui/react/macro';
 
 import { getDetailQueryOptions } from '@/vdb/framework/page/use-detail-page.js';
 
@@ -55,11 +55,12 @@ export function AssignFacetValuesDialog({
     detailDocument,
     onSuccess,
 }: AssignFacetValuesDialogProps) {
-    const { i18n } = useLingui();
+    const { t } = useLingui();
     const [selectedValues, setSelectedValues] = useState<FacetValue[]>([]);
     const [facetValuesRemoved, setFacetValuesRemoved] = useState(false);
     const [removedFacetValues, setRemovedFacetValues] = useState<Set<string>>(new Set());
     const queryClient = useQueryClient();
+    const entityIdsLength = entityIds.length;
 
     // Fetch existing facet values for the entities
     const { data: entitiesData, isLoading } = useQuery({
@@ -71,7 +72,7 @@ export function AssignFacetValuesDialog({
     const { mutate, isPending } = useMutation({
         mutationFn,
         onSuccess: () => {
-            toast.success(i18n.t(`Successfully updated facet values for ${entityIds.length} ${entityType}`));
+            toast.success(t`Successfully updated facet values for ${entityIdsLength} ${entityType}`);
             onSuccess?.();
             onOpenChange(false);
             // Reset state
@@ -84,7 +85,7 @@ export function AssignFacetValuesDialog({
             });
         },
         onError: () => {
-            toast.error(`Failed to update facet values for ${entityIds.length} ${entityType}`);
+            toast.error(`Failed to update facet values for ${entityIdsLength} ${entityType}`);
         },
     });
 

package/src/app/routes/_authenticated/_products/components/create-product-options-dialog.tsx

@@ -12,8 +12,8 @@ import { Form } from '@/vdb/components/ui/form.js';
 import { Input } from '@/vdb/components/ui/input.js';
 import { api } from '@/vdb/graphql/api.js';
 import { graphql } from '@/vdb/graphql/graphql.js';
-import { Trans, useLingui } from '@/vdb/lib/trans.js';
 import { zodResolver } from '@hookform/resolvers/zod';
+import { Trans, useLingui } from '@lingui/react/macro';
 import { useMutation, useQuery } from '@tanstack/react-query';
 import { Plus, Trash2 } from 'lucide-react';
 import { useState } from 'react';
@@ -90,7 +90,7 @@ export function CreateProductOptionsDialog({
     onSuccess?: () => void;
 }) {
     const [open, setOpen] = useState(false);
-    const { i18n } = useLingui();
+    const { t } = useLingui();
 
     const { data: productData } = useQuery({
         queryKey: ['product', productId],
@@ -116,13 +116,13 @@ export function CreateProductOptionsDialog({
     const updateProductVariantMutation = useMutation({
         mutationFn: api.mutate(updateProductVariantDocument),
         onSuccess: () => {
-            toast.success(i18n.t('Successfully created product options'));
+            toast.success(t`Successfully created product options`);
             setOpen(false);
             onSuccess?.();
         },
         onError: error => {
-            toast.error(i18n.t('Failed to create product options'), {
-                description: error instanceof Error ? error.message : i18n.t('Unknown error'),
+            toast.error(t`Failed to create product options`, {
+                description: error instanceof Error ? error.message : t`Unknown error`,
             });
         },
     });
@@ -206,8 +206,8 @@ export function CreateProductOptionsDialog({
                 });
             }
         } catch (error) {
-            toast.error(i18n.t('Failed to create product options'), {
-                description: error instanceof Error ? error.message : i18n.t('Unknown error'),
+            toast.error(t`Failed to create product options`, {
+                description: error instanceof Error ? error.message : t`Unknown error`,
             });
         }
     };
@@ -266,7 +266,7 @@ export function CreateProductOptionsDialog({
                                             name={`optionGroups.${groupIndex}.name`}
                                             label={<Trans>Option group name</Trans>}
                                             render={({ field }) => (
-                                                <Input {...field} placeholder={i18n.t('e.g. Size')} />
+                                                <Input {...field} placeholder={t`e.g. Size`} />
                                             )}
                                         />
                                         {groupIndex > 0 && (
@@ -287,10 +287,7 @@ export function CreateProductOptionsDialog({
                                                     name={`optionGroups.${groupIndex}.options.${optionIndex}`}
                                                     label={<Trans>Option name</Trans>}
                                                     render={({ field }) => (
-                                                        <Input
-                                                            {...field}
-                                                            placeholder={i18n.t('e.g. Small')}
-                                                        />
+                                                        <Input {...field} placeholder={t`e.g. Small`} />
                                                     )}
                                                 />
                                                 {optionIndex > 0 && (

package/src/app/routes/_authenticated/_products/components/create-product-variants-dialog.tsx

@@ -10,7 +10,7 @@ import {
 } from '@/vdb/components/ui/dialog.js';
 import { api } from '@/vdb/graphql/api.js';
 import { useChannel } from '@/vdb/hooks/use-channel.js';
-import { Trans } from '@/vdb/lib/trans.js';
+import { Trans } from '@lingui/react/macro';
 import { normalizeString } from '@/vdb/lib/utils.js';
 import { useMutation } from '@tanstack/react-query';
 import { Plus } from 'lucide-react';

package/src/app/routes/_authenticated/_products/components/create-product-variants.tsx

@@ -5,7 +5,7 @@ import { Input } from '@/vdb/components/ui/input.js';
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/vdb/components/ui/table.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 { zodResolver } from '@hookform/resolvers/zod';
 import { useQuery } from '@tanstack/react-query';
 import { useEffect, useMemo, useState } from 'react';
@@ -83,9 +83,9 @@ interface CreateProductVariantsProps {
 }
 
 export function CreateProductVariants({
-    currencyCode = 'USD',
-    onChange,
-}: Readonly<CreateProductVariantsProps>) {
+                                          currencyCode = 'USD',
+                                          onChange,
+                                      }: Readonly<CreateProductVariantsProps>) {
     const { data: stockLocationsResult } = useQuery({
         queryKey: ['stockLocations'],
         queryFn: () => api.query(getStockLocationsDocument, { options: { take: 100 } }),

package/src/app/routes/_authenticated/_products/components/option-groups-editor.tsx

@@ -2,7 +2,7 @@ import { FormFieldWrapper } from '@/vdb/components/shared/form-field-wrapper.js'
 import { Button } from '@/vdb/components/ui/button.js';
 import { Form } from '@/vdb/components/ui/form.js';
 import { Input } from '@/vdb/components/ui/input.js';
-import { Trans } from '@/vdb/lib/trans.js';
+import { Trans } from '@lingui/react/macro';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { Plus, Trash2 } from 'lucide-react';
 import { useEffect } from 'react';

package/src/app/routes/_authenticated/_products/components/product-bulk-actions.tsx

@@ -9,7 +9,7 @@ import { RemoveFromChannelBulkAction } from '@/vdb/components/shared/remove-from
 import { BulkActionComponent } from '@/vdb/framework/extension-api/types/data-table.js';
 import { api } from '@/vdb/graphql/api.js';
 import { useChannel } from '@/vdb/hooks/use-channel.js';
-import { Trans } from '@/vdb/lib/trans.js';
+import { Trans } from '@lingui/react/macro';
 import { DeleteBulkAction } from '../../../../common/delete-bulk-action.js';
 import { DuplicateBulkAction } from '../../../../common/duplicate-bulk-action.js';
 import {

package/src/app/routes/_authenticated/_products/components/product-option-group-badge.tsx

@@ -0,0 +1,19 @@
+import { Badge } from '@/vdb/components/ui/badge.js';
+import { Link } from '@tanstack/react-router';
+import { Edit2 } from 'lucide-react';
+
+interface ProductOptionGroupBadgeProps {
+    id: string;
+    name: string;
+}
+
+export function ProductOptionGroupBadge({ id, name }: ProductOptionGroupBadgeProps) {
+    return (
+        <Badge variant="secondary" className="text-xs">
+            <span>{name}</span>
+            <Link to={`option-groups/${id}`} className="ml-1.5 inline-flex">
+                <Edit2 className="h-3 w-3" />
+            </Link>
+        </Badge>
+    );
+}

package/src/app/routes/_authenticated/_products/components/product-option-select.tsx

@@ -8,8 +8,8 @@ import {
     CommandItem,
 } from '@/vdb/components/ui/command.js';
 import { Popover, PopoverContent, PopoverTrigger } from '@/vdb/components/ui/popover.js';
-import { Trans, useLingui } from '@/vdb/lib/trans.js';
 import { cn } from '@/vdb/lib/utils.js';
+import { Trans, useLingui } from '@lingui/react/macro';
 import { Check, ChevronsUpDown, Plus } from 'lucide-react';
 import { useState } from 'react';
 
@@ -41,7 +41,7 @@ export function ProductOptionSelect({
 }: Readonly<ProductOptionSelectProps>) {
     const [open, setOpen] = useState(false);
     const [newOptionInput, setNewOptionInput] = useState('');
-    const { i18n } = useLingui();
+    const { t } = useLingui();
 
     return (
         <FormFieldWrapper
@@ -63,7 +63,7 @@ export function ProductOptionSelect({
                     <PopoverContent className="w-full p-0">
                         <Command>
                             <CommandInput
-                                placeholder={i18n.t('Search {name}...').replace('{name}', group.name)}
+                                placeholder={t`Search {name}...`.replace('{name}', group.name)}
                                 onValueChange={setNewOptionInput}
                             />
                             <CommandEmpty className="py-2">

package/src/app/routes/_authenticated/_products/components/product-options-table.tsx

@@ -0,0 +1,114 @@
+import { DetailPageButton } from '@/vdb/components/shared/detail-page-button.js';
+import { PaginatedListDataTable } from '@/vdb/components/shared/paginated-list-data-table.js';
+import { Button } from '@/vdb/components/ui/button.js';
+import { graphql } from '@/vdb/graphql/graphql.js';
+import { Trans } from '@lingui/react/macro';
+import { Link } from '@tanstack/react-router';
+import { ColumnFiltersState, SortingState, VisibilityState } from '@tanstack/react-table';
+import { PlusIcon } from 'lucide-react';
+import { useRef, useState } from 'react';
+import { deleteProductOptionDocument } from '../product-option-groups.graphql.js';
+
+export const productOptionListDocument = graphql(`
+    query ProductOptionList($options: ProductOptionListOptions, $groupId: ID) {
+        productOptions(options: $options, groupId: $groupId) {
+            items {
+                id
+                createdAt
+                updatedAt
+                name
+                code
+            }
+            totalItems
+        }
+    }
+`);
+
+export interface ProductOptionsTableProps {
+    productOptionGroupId: string;
+    registerRefresher?: (refresher: () => void) => void;
+}
+
+export function ProductOptionsTable({
+    productOptionGroupId,
+    registerRefresher,
+}: Readonly<ProductOptionsTableProps>) {
+    const [sorting, setSorting] = useState<SortingState>([]);
+    const [page, setPage] = useState(1);
+    const [pageSize, setPageSize] = useState(10);
+    const [filters, setFilters] = useState<ColumnFiltersState>([]);
+    const [columnVisibility, setColumnVisibility] = useState<VisibilityState>({
+        name: true,
+        code: true,
+    });
+    const refreshRef = useRef<() => void>(() => {});
+
+    return (
+        <>
+            <PaginatedListDataTable
+                listQuery={productOptionListDocument}
+                deleteMutation={deleteProductOptionDocument}
+                page={page}
+                itemsPerPage={pageSize}
+                sorting={sorting}
+                columnFilters={filters}
+                onPageChange={(_, page, perPage) => {
+                    setPage(page);
+                    setPageSize(perPage);
+                }}
+                onSortChange={(_, sorting) => {
+                    setSorting(sorting);
+                }}
+                onColumnVisibilityChange={(_, value) => setColumnVisibility(value)}
+                onFilterChange={(_, filters) => {
+                    setFilters(filters);
+                }}
+                registerRefresher={refresher => {
+                    refreshRef.current = refresher;
+                    registerRefresher?.(refresher);
+                }}
+                transformVariables={variables => {
+                    const filter = variables.options?.filter ?? {};
+                    return {
+                        options: {
+                            filter: {
+                                ...filter,
+                                groupId: { eq: productOptionGroupId },
+                            },
+                            sort: variables.options?.sort,
+                            take: pageSize,
+                            skip: (page - 1) * pageSize,
+                        },
+                    };
+                }}
+                onSearchTermChange={searchTerm => {
+                    return {
+                        name: {
+                            contains: searchTerm,
+                        },
+                    };
+                }}
+                defaultVisibility={columnVisibility}
+                customizeColumns={{
+                    name: {
+                        cell: ({ row }) => (
+                            <DetailPageButton
+                                id={row.original.id}
+                                label={row.original.name}
+                                href={`options/${row.original.id}`}
+                            />
+                        ),
+                    },
+                }}
+            />
+            <div className="mt-4">
+                <Button asChild variant="outline">
+                    <Link to="./options/new">
+                        <PlusIcon />
+                        <Trans>Add product option</Trans>
+                    </Link>
+                </Button>
+            </div>
+        </>
+    );
+}