feat(dashboard): Add reset button for data table columns

packages/dashboard/src/lib/components/data-table/data-table-view-options.tsx

@@ -6,15 +6,16 @@ import {
 } 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 { GripVertical, Settings2 } from 'lucide-react';
 
 import { Button } from '@/components/ui/button.js';
 import {
+    DropdownMenuSeparator, DropdownMenuTrigger,
     DropdownMenu,
     DropdownMenuCheckboxItem,
-    DropdownMenuContent
+    DropdownMenuContent,
+    DropdownMenuItem
 } from '@/components/ui/dropdown-menu.js';
 import { usePage } from '@/hooks/use-page.js';
 import { useUserSettings } from '@/hooks/use-user-settings.js';
@@ -69,6 +70,13 @@ export function DataTableViewOptions<TData>({ table }: DataTableViewOptionsProps
         }
     };
 
+    const handleReset = () => {
+        if (page?.pageId) {
+            setTableSettings(page.pageId, 'columnOrder', undefined);
+            setTableSettings(page.pageId, 'columnVisibility', undefined);
+        }
+    };
+
     return (
         <div className="flex items-center gap-2">
             <DropdownMenu>
@@ -95,6 +103,8 @@ export function DataTableViewOptions<TData>({ table }: DataTableViewOptionsProps
                             ))}
                         </SortableContext>
                     </DndContext>
+                    <DropdownMenuSeparator />
+                    <DropdownMenuItem onClick={handleReset}>Reset</DropdownMenuItem>
                 </DropdownMenuContent>
             </DropdownMenu>
         </div>

packages/dashboard/src/lib/components/data-table/data-table.tsx

@@ -86,6 +86,15 @@ export function DataTable<TData>({
         defaultColumnVisibility ?? {},
     );
 
+    useEffect(() => {
+        // If the defaultColumnVisibility changes externally (e.g. the user reset the table settings),
+        // we want to reset the column visibility to the default.
+        if (defaultColumnVisibility && JSON.stringify(defaultColumnVisibility) !== JSON.stringify(columnVisibility)) {
+            setColumnVisibility(defaultColumnVisibility);
+        }
+        // We intentionally do not include `columnVisibility` in the dependency array
+    }, [defaultColumnVisibility]);
+
     let tableOptions: TableOptions<TData> = {
         data,
         columns,