@vendure/dashboard 3.2.3 → 3.3.0

package/src/app/routes/_authenticated/_system/scheduled-tasks.tsx

@@ -0,0 +1,241 @@
+import { FullWidthPageBlock, Page, PageLayout, PageTitle } from '@/framework/layout-engine/page-layout.js';
+import { api } from '@/graphql/api.js';
+import { graphql } from '@/graphql/graphql.js';
+import { DataTable } from '@/components/data-table/data-table.js';
+import { Trans, useLingui } from '@/lib/trans.js';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { createFileRoute } from '@tanstack/react-router';
+import { createColumnHelper } from '@tanstack/react-table';
+import { ResultOf } from '@/graphql/graphql.js';
+import { PayloadDialog } from './components/payload-dialog.js';
+import { Button } from '@/components/ui/button.js';
+import { Badge } from '@/components/ui/badge.js';
+import { useLocalFormat } from '@/hooks/use-local-format.js';
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu.js';
+import { CirclePlay, EllipsisIcon } from 'lucide-react';
+import { toast } from 'sonner';
+
+export const Route = createFileRoute('/_authenticated/_system/scheduled-tasks')({
+    component: ScheduledTasksPage,
+    loader: () => ({ breadcrumb: () => <Trans>Scheduled Tasks</Trans> }),
+});
+
+const getScheduledTasksDocument = graphql(`
+    query ScheduledTasks {
+        scheduledTasks {
+            id
+            description
+            schedule
+            scheduleDescription
+            lastExecutedAt
+            nextExecutionAt
+            isRunning
+            lastResult
+            enabled
+        }
+    }
+`);
+
+const updateScheduledTaskDocument = graphql(`
+    mutation UpdateScheduledTask($input: UpdateScheduledTaskInput!) {
+        updateScheduledTask(input: $input) {
+            id
+            enabled
+        }
+    }
+`);
+
+const runScheduledTaskDocument = graphql(`
+    mutation RunScheduledTask($id: String!) {
+        runScheduledTask(id: $id) {
+          success
+        }
+    }
+`);
+
+type ScheduledTask = ResultOf<typeof getScheduledTasksDocument>['scheduledTasks'][number];
+
+function ScheduledTasksPage() {
+    const { i18n } = useLingui();
+    const { data } = useQuery({
+        queryKey: ['scheduledTasks'],
+        queryFn: () => api.query(getScheduledTasksDocument),
+    });
+    const queryClient = useQueryClient();
+    const { mutate: updateScheduledTask } = useMutation({
+        mutationFn: api.mutate(updateScheduledTaskDocument),
+        onSuccess: (result) => {
+            refreshScheduledTasks();
+        },
+    });
+    const refreshScheduledTasks = () => {
+        queryClient.invalidateQueries({ queryKey: ['scheduledTasks'] });
+    }
+    const { mutate: runScheduledTask } = useMutation({
+        mutationFn: api.mutate(runScheduledTaskDocument),
+        onSuccess: (result) => {
+            if ((result as ResultOf<typeof runScheduledTaskDocument>).runScheduledTask.success) {
+                toast.success(i18n.t(`Scheduled task will be executed`));
+                queryClient.invalidateQueries({ queryKey: ['scheduledTasks'] });
+            } else {
+                toast.error(i18n.t(`Scheduled task could not be executed`));
+            }
+        },
+    });
+    const { formatDate, formatRelativeDate } = useLocalFormat();
+    const intlDateOptions = {
+        year: 'numeric',
+        month: 'short',
+        day: 'numeric',
+        hour: 'numeric',
+        minute: 'numeric',
+        second: 'numeric',
+    } as const;
+
+    const columnHelper = createColumnHelper<ScheduledTask>();
+    const columns = [
+        columnHelper.accessor('id', {
+            header: 'ID',
+        }),
+        columnHelper.accessor('description', {
+            header: 'Description',
+        }),
+        columnHelper.accessor('enabled', {
+            header: 'Enabled',
+            cell: ({ row }) => {
+                return row.original.enabled ? (
+                    <Badge variant="success">
+                        <Trans>Enabled</Trans>
+                    </Badge>
+                ) : (
+                    <Badge variant="secondary">
+                        <Trans>Disabled</Trans>
+                    </Badge>
+                );
+            },
+        }),
+        columnHelper.accessor('schedule', {
+            header: 'Schedule Pattern',
+        }),
+        columnHelper.accessor('scheduleDescription', {
+            header: 'Schedule',
+        }),
+        columnHelper.accessor('lastExecutedAt', {
+            header: 'Last Executed',
+            cell: ({ row }) => {
+                return row.original.lastExecutedAt ? (
+                    <div title={row.original.lastExecutedAt}>
+                        {formatRelativeDate(row.original.lastExecutedAt)}
+                    </div>
+                ) : (
+                    <Trans>Never</Trans>
+                );
+            },
+        }),
+        columnHelper.accessor('nextExecutionAt', {
+            header: 'Next Execution',
+            cell: ({ row }) => {
+                return row.original.nextExecutionAt ? (
+                    formatDate(row.original.nextExecutionAt, intlDateOptions)
+                ) : (
+                    <Trans>Never</Trans>
+                );
+            },
+        }),
+        columnHelper.accessor('isRunning', {
+            header: 'Running',
+            cell: ({ row }) => {
+                return row.original.isRunning ? (
+                    <Badge variant="success">
+                        <Trans>Running</Trans>
+                    </Badge>
+                ) : (
+                    <Badge variant="secondary">
+                        <Trans>Not Running</Trans>
+                    </Badge>
+                );
+            },
+        }),
+        columnHelper.accessor('lastResult', {
+            header: 'Last Result',
+            cell: ({ row }) => {
+                return row.original.lastResult ? (
+                    <PayloadDialog
+                        payload={row.original.lastResult}
+                        title={<Trans>View job result</Trans>}
+                        description={<Trans>The result of the job</Trans>}
+                        trigger={
+                            <Button size="sm" variant="secondary">
+                                View result
+                            </Button>
+                        }
+                    />
+                ) : (
+                    <div className="text-muted-foreground">
+                        <Trans>No result yet</Trans>
+                    </div>
+                );
+            },
+        }),
+        columnHelper.display({
+            id: 'actions',
+            header: 'Actions',
+            cell: ({ row }) => {
+                return (
+                    <DropdownMenu>
+                        <DropdownMenuTrigger asChild>
+                            <Button variant="ghost" size="icon">
+                                <EllipsisIcon />
+                            </Button>
+                        </DropdownMenuTrigger>
+                        <DropdownMenuContent>
+                            {row.original.enabled && <DropdownMenuItem
+                                onClick={() =>
+                                    runScheduledTask({
+                                        id: row.original.id,
+                                    })
+                                }
+                            >
+                                <CirclePlay className="w-4 h-4" />
+                                <Trans>Run</Trans>
+                            </DropdownMenuItem>}
+                            <DropdownMenuItem
+                                onClick={() =>
+                                    updateScheduledTask({
+                                        input: { id: row.original.id, enabled: !row.original.enabled },
+                                    })
+                                }
+                            >
+                                {row.original.enabled ? <Trans>Disable</Trans> : <Trans>Enable</Trans>}
+                            </DropdownMenuItem>
+                        </DropdownMenuContent>
+                    </DropdownMenu>
+                );
+            },
+        }),
+    ];
+
+    return (
+        <Page pageId="scheduled-tasks-list">
+            <PageTitle>Scheduled Tasks</PageTitle>
+            <PageLayout>
+                <FullWidthPageBlock blockId="list-table">
+                    <DataTable
+                        onRefresh={refreshScheduledTasks}
+                        columns={columns}
+                        data={data?.scheduledTasks ?? []}
+                        totalItems={data?.scheduledTasks?.length ?? 0}
+                        defaultColumnVisibility={{
+                            schedule: false,
+                        }}
+                    />
+                </FullWidthPageBlock>
+            </PageLayout>
+        </Page>
+    );
+}

package/src/app/routes/_authenticated.tsx

@@ -1,7 +1,8 @@
 import { AppLayout } from '@/components/layout/app-layout.js';
-import { createFileRoute, redirect } from '@tanstack/react-router';
+import { createFileRoute, redirect, useNavigate } from '@tanstack/react-router';
 import { AUTHENTICATED_ROUTE_PREFIX } from '@/constants.js';
 import * as React from 'react';
+import { useAuth } from '@/hooks/use-auth.js';
 
 export const Route = createFileRoute(AUTHENTICATED_ROUTE_PREFIX)({
     beforeLoad: ({ context, location }) => {
@@ -21,5 +22,15 @@ export const Route = createFileRoute(AUTHENTICATED_ROUTE_PREFIX)({
 });
 
 function AuthLayout() {
+    const navigate = useNavigate();
+    const { isAuthenticated } = useAuth();
+
+    if (!isAuthenticated) {
+        navigate({
+            to: '/login'
+        });
+        return <></>;
+    }
+
     return <AppLayout />;
 }

package/src/app/styles.css

@@ -76,6 +76,21 @@
     grid-column: span 2 / span 2;
 }
 
+@layer utilities {
+    @keyframes rotate {
+        0% {
+            transform: rotate(0deg);
+        }
+        100% {
+            transform: rotate(360deg);
+        }
+    }
+
+    .animate-rotate {
+        animation: rotate 0.5s linear;
+    }
+}
+
 /* Overrides for the react-grid-layout library */
 .react-grid-item {
     transition: none !important;

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

@@ -0,0 +1,61 @@
+import { Button } from '@/components/ui/button.js';
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu.js';
+import {
+    Dialog,
+    DialogContent,
+    DialogDescription,
+    DialogHeader,
+    DialogTitle,
+    DialogTrigger,
+} from '@/components/ui/dialog.js';
+import { DataTableFilterDialog } from '@/components/data-table/data-table-filter-dialog.js';
+import { Column, ColumnDef } from '@tanstack/react-table';
+import { PlusCircle } from 'lucide-react';
+import { Trans } from '@/lib/trans.js';
+import React, { useState } from 'react';
+import { camelCaseToTitleCase } from '@/lib/utils.js';
+
+export interface AddFilterMenuProps {
+    columns: Column<any, unknown>[];
+}
+
+export function AddFilterMenu({ columns }: AddFilterMenuProps) {
+    const [selectedColumn, setSelectedColumn] = useState<ColumnDef<any> | null>(null);
+    const [isDialogOpen, setIsDialogOpen] = useState(false);
+
+    const filterableColumns = columns.filter(column => column.getCanFilter());
+
+    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" />
+                        <Trans>Add filter</Trans>
+                    </Button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent align="end" className="w-[200px]">
+                    {filterableColumns.map(column => (
+                        <DropdownMenuItem
+                            key={column.id}
+                            onSelect={() => {
+                                setSelectedColumn(column);
+                                setIsDialogOpen(true);
+                            }}
+                        >
+                            {camelCaseToTitleCase(column.id)}
+                        </DropdownMenuItem>
+                    ))}
+                </DropdownMenuContent>
+            </DropdownMenu>
+            {selectedColumn && (
+                <DataTableFilterDialog column={selectedColumn as any} />
+            )}
+        </Dialog>
+    );
+}

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

@@ -29,7 +29,6 @@ export interface DataTableColumnHeaderProps {
 export function DataTableColumnHeader({ headerContext, customConfig }: DataTableColumnHeaderProps) {
     const { column } = headerContext;
     const isSortable = column.getCanSort();
-    const isFilterable = column.getCanFilter();
 
     const customHeader = customConfig.header;
     let display = camelCaseToTitleCase(column.id);
@@ -40,7 +39,6 @@ export function DataTableColumnHeader({ headerContext, customConfig }: DataTable
     }
 
     const columSort = column.getIsSorted();
-    const columnFilter = column.getFilterValue();
     const nextSort = columSort === 'asc' ? true : columSort === 'desc' ? undefined : false;
 
     return (
@@ -57,17 +55,6 @@ export function DataTableColumnHeader({ headerContext, customConfig }: DataTable
                 </Button>
             )}
             <div>{display}</div>
-
-            {isFilterable && (
-                <Dialog>
-                    <DialogTrigger asChild>
-                        <Button size="icon-sm" variant="ghost">
-                            <Filter className={columnFilter ? '' : 'opacity-50'} />
-                        </Button>
-                    </DialogTrigger>
-                    <DataTableFilterDialog column={column} />
-                </Dialog>
-            )}
         </div>
     );
 }

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

@@ -0,0 +1,75 @@
+import { Filter } from 'lucide-react';
+
+import { CircleX } from 'lucide-react';
+import { Badge } from '../ui/badge.js';
+import { useLocalFormat } from '@/hooks/use-local-format.js';
+import { ColumnDataType } from './data-table-types.js';
+import { HumanReadableOperator } from './human-readable-operator.js';
+
+export function DataTableFilterBadge({
+    filter,
+    onRemove,
+    dataType,
+    currencyCode,
+}: {
+    filter: any;
+    onRemove: (filter: any) => void;
+    dataType: ColumnDataType;
+    currencyCode: string;
+}) {
+    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">
+            <Filter size="12" className="opacity-50" />
+            <div>{filter.id}</div>
+            <div className="text-muted-foreground"><HumanReadableOperator operator={operator} mode="short" /></div>
+            <FilterValue value={value} dataType={dataType} currencyCode={currencyCode} />
+            <button className="cursor-pointer" onClick={() => onRemove(filter)}>
+                <CircleX size="14" />
+            </button>
+        </Badge>
+    );
+}
+
+function FilterValue({ value, dataType, currencyCode }: { value: unknown, dataType: ColumnDataType, currencyCode: string }) {
+    const { formatDate, formatCurrency } = useLocalFormat();
+    if (typeof value === 'object' && value !== null && !Array.isArray(value)) {
+        return Object.entries(value as Record<string, unknown>).map(([key, value]) => (
+            <div key={key} className="flex gap-1 items-center">
+                <span className="text-muted-foreground">{key}: </span>
+                <FilterValue value={value} dataType={dataType} currencyCode={currencyCode} />
+            </div>
+        ));
+    }
+    if (Array.isArray(value)) {
+        return (
+            <div className="flex gap-1 items-center">
+                [
+                {value.map(v => (
+                    <FilterValue value={v} dataType={dataType} currencyCode={currencyCode} key={v} />
+                ))}
+                ]
+            </div>
+        );
+    }
+    if (typeof value === 'string' && isDateIsoString(value)) {
+        return <div>{formatDate(value, { dateStyle: 'short', timeStyle: 'short' })}</div>;
+    }
+    if (typeof value === 'boolean') {
+        return <div>{value ? 'true' : 'false'}</div>;
+    }
+    if (typeof value === 'number' && dataType === 'Money') {
+        return <div>{formatCurrency(value, currencyCode)}</div>;
+    }
+    if (typeof value === 'number') {
+        return <div>{value}</div>;
+    }
+    if (typeof value === 'string') {
+        return <div>{value}</div>;
+    }
+    return <div>{value as string}</div>;
+}
+
+function isDateIsoString(value: string) {
+    return /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}\.\d{3}Z$/.test(value);
+}

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

@@ -7,23 +7,25 @@ import {
     DialogHeader,
     DialogTitle,
 } from '@/components/ui/dialog.js';
-import { Input } from '@/components/ui/input.js';
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select.js';
 import { Trans } from '@/lib/trans.js';
 import { Column } from '@tanstack/react-table';
-import React, { useState } from 'react';
+import { useState } from 'react';
+import { DataTableBooleanFilter } from './filters/data-table-boolean-filter.js';
+import { DataTableDateTimeFilter } from './filters/data-table-datetime-filter.js';
+import { DataTableIdFilter } from './filters/data-table-id-filter.js';
+import { DataTableNumberFilter } from './filters/data-table-number-filter.js';
+import { DataTableStringFilter } from './filters/data-table-string-filter.js';
+import { ColumnDataType } from './data-table-types.js';
 
 export interface DataTableFilterDialogProps {
     column: Column<any>;
 }
 
-const STRING_OPERATORS = ['eq', 'notEq', 'contains', 'notContains', 'in', 'notIn', 'regex', 'isNull'];
-
 export function DataTableFilterDialog({ column }: DataTableFilterDialogProps) {
     const columnFilter = column.getFilterValue() as Record<string, string> | undefined;
-    const [initialOperator, initialValue] = columnFilter ? Object.entries(columnFilter as any)[0] : [];
-    const [operator, setOperator] = useState<string>(initialOperator ?? 'contains');
-    const [value, setValue] = useState((initialValue as string) ?? '');
+    const [filter, setFilter] = useState(columnFilter);
+
+    const columnDataType = (column.columnDef.meta as any)?.fieldInfo?.type as ColumnDataType;
     const columnId = column.id;
     return (
         <DialogContent>
@@ -33,25 +35,19 @@ export function DataTableFilterDialog({ column }: DataTableFilterDialogProps) {
                 </DialogTitle>
                 <DialogDescription></DialogDescription>
             </DialogHeader>
-            <div className="flex flex-col md:flex-row gap-2">
-                <Select value={operator} onValueChange={value => setOperator(value)}>
-                    <SelectTrigger>
-                        <SelectValue placeholder="Select operator" />
-                    </SelectTrigger>
-                    <SelectContent>
-                        {STRING_OPERATORS.map(op => (
-                            <SelectItem key={op} value={op}>
-                                <Trans context="filter-operator">{op}</Trans>
-                            </SelectItem>
-                        ))}
-                    </SelectContent>
-                </Select>
-                <Input
-                    placeholder="Enter filter value..."
-                    value={value}
-                    onChange={e => setValue(e.target.value)}
-                />
-            </div>
+            {columnDataType === 'String' ? (
+                <DataTableStringFilter value={filter} onChange={e => setFilter(e)} />
+            ) : columnDataType === 'Int' || columnDataType === 'Float' ? (
+                <DataTableNumberFilter value={filter} onChange={e => setFilter(e)} mode='number' />
+            ) : columnDataType === 'DateTime' ? (
+                <DataTableDateTimeFilter value={filter} onChange={e => setFilter(e)} />
+            ) : columnDataType === 'Boolean' ? (
+                <DataTableBooleanFilter value={filter} onChange={e => setFilter(e)} />
+            ) : columnDataType === 'ID' ? (
+                <DataTableIdFilter value={filter} onChange={e => setFilter(e)} />
+            ) : columnDataType === 'Money' ? (
+                <DataTableNumberFilter value={filter} onChange={e => setFilter(e)} mode='money' />
+            ) : null}
             <DialogFooter className="sm:justify-end">
                 {columnFilter && (
                     <Button type="button" variant="secondary" onClick={e => column.setFilterValue(undefined)}>
@@ -62,7 +58,10 @@ export function DataTableFilterDialog({ column }: DataTableFilterDialogProps) {
                     <Button
                         type="button"
                         variant="secondary"
-                        onClick={e => column.setFilterValue({ [operator]: value })}
+                            onClick={e => {
+                            column.setFilterValue(filter);
+                            setFilter(undefined);
+                        }}
                     >
                         <Trans>Apply filter</Trans>
                     </Button>

package/src/lib/components/data-table/data-table-types.ts

@@ -0,0 +1 @@
+export type ColumnDataType = 'String' | 'Int' | 'Float' | 'DateTime' | 'Boolean' | 'ID' | 'Money';

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

@@ -1,51 +1,100 @@
 'use client';
 
-import { Badge } from '@/components/ui/badge.js';
+import { DndContext, closestCenter } from '@dnd-kit/core';
+import {
+    restrictToVerticalAxis,
+} from '@dnd-kit/modifiers';
+import { SortableContext, useSortable, verticalListSortingStrategy } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
 import { DropdownMenuTrigger } from '@radix-ui/react-dropdown-menu';
 import { Table } from '@tanstack/react-table';
-import { CircleX, Cross, Filter, Settings2 } from 'lucide-react';
+import { GripVertical, Settings2 } from 'lucide-react';
 
 import { Button } from '@/components/ui/button.js';
 import {
     DropdownMenu,
     DropdownMenuCheckboxItem,
-    DropdownMenuContent,
-    DropdownMenuLabel,
-    DropdownMenuSeparator,
+    DropdownMenuContent
 } from '@/components/ui/dropdown-menu.js';
+import { usePage } from '@/hooks/use-page.js';
+import { useUserSettings } from '@/hooks/use-user-settings.js';
+import { Trans } from '@/lib/trans.js';
 
 interface DataTableViewOptionsProps<TData> {
     table: Table<TData>;
 }
 
+function SortableItem({ id, children }: { id: string; children: React.ReactNode }) {
+    const {
+        attributes,
+        listeners,
+        setNodeRef,
+        transform,
+        transition,
+    } = useSortable({ id });
+
+    const style = {
+        transform: CSS.Transform.toString(transform),
+        transition,
+    };
+
+    return (
+        <div ref={setNodeRef} style={style} className="flex items-center gap-.5">
+            <div {...attributes} {...listeners} className="cursor-grab">
+                <GripVertical className="h-4 w-4 text-muted-foreground" />
+            </div>
+            {children}
+        </div>
+    );
+}
+
 export function DataTableViewOptions<TData>({ table }: DataTableViewOptionsProps<TData>) {
+    const { setTableSettings } = useUserSettings();
+    const page = usePage();
+    const columns = table
+        .getAllColumns()
+        .filter(column => typeof column.accessorFn !== 'undefined' && column.getCanHide());
+
+    const handleDragEnd = (event: any) => {
+        const { active, over } = event;
+        if (active.id !== over.id) {
+            const activeIndex = columns.findIndex(col => col.id === active.id);
+            const overIndex = columns.findIndex(col => col.id === over.id);
+            // update the column order in the `columns` array
+            const newColumns = [...columns];
+            newColumns.splice(overIndex, 0, newColumns.splice(activeIndex, 1)[0]);
+            if (page?.pageId) {
+                setTableSettings(page.pageId, 'columnOrder', newColumns.map(col => col.id));
+            }
+        }
+    };
+
     return (
         <div className="flex items-center gap-2">
             <DropdownMenu>
                 <DropdownMenuTrigger asChild>
-                    <Button variant="outline" size="sm" className="ml-auto hidden h-8 lg:flex">
+                    <Button variant="ghost" size="sm" className="ml-auto hidden h-8 lg:flex">
                         <Settings2 />
-                        View
+                        <Trans>Columns</Trans>
                     </Button>
                 </DropdownMenuTrigger>
                 <DropdownMenuContent align="end" className="w-[150px]">
-                    <DropdownMenuLabel>Toggle columns</DropdownMenuLabel>
-                    <DropdownMenuSeparator />
-                    {table
-                        .getAllColumns()
-                        .filter(column => typeof column.accessorFn !== 'undefined' && column.getCanHide())
-                        .map(column => {
-                            return (
-                                <DropdownMenuCheckboxItem
-                                    key={column.id}
-                                    className="capitalize"
-                                    checked={column.getIsVisible()}
-                                    onCheckedChange={value => column.toggleVisibility(!!value)}
-                                >
-                                    {column.id}
-                                </DropdownMenuCheckboxItem>
-                            );
-                        })}
+                    <DndContext collisionDetection={closestCenter} onDragEnd={handleDragEnd} modifiers={[restrictToVerticalAxis]}>
+                        <SortableContext items={columns.map(col => col.id)} strategy={verticalListSortingStrategy}>
+                            {columns.map(column => (
+                                <SortableItem key={column.id} id={column.id}>
+                                    <DropdownMenuCheckboxItem
+                                        className="capitalize"
+                                        checked={column.getIsVisible()}
+                                        onCheckedChange={value => column.toggleVisibility(!!value)}
+                                        onSelect={(e) => e.preventDefault()}
+                                    >
+                                        {column.id}
+                                    </DropdownMenuCheckboxItem>
+                                </SortableItem>
+                            ))}
+                        </SortableContext>
+                    </DndContext>
                 </DropdownMenuContent>
             </DropdownMenu>
         </div>