From 905cef1ac201ba692546d68efd65b53a4f22f5bf Mon Sep 17 00:00:00 2001
From: Marco Beretta <81851188+berry-13@users.noreply.github.com>
Date: Thu, 25 Sep 2025 00:24:57 +0200
Subject: [PATCH] fix: ensure desktopOnly columns are hidden on mobile in
 DataTable

---
 .../components/DataTable/DataTable.types.ts   |  1 -
 .../DataTable/DataTableComponents.tsx         | 23 +++++++++++++++----
 2 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/packages/client/src/components/DataTable/DataTable.types.ts b/packages/client/src/components/DataTable/DataTable.types.ts
index 262bf0a9cc..183a0a971b 100644
--- a/packages/client/src/components/DataTable/DataTable.types.ts
+++ b/packages/client/src/components/DataTable/DataTable.types.ts
@@ -57,7 +57,6 @@ export interface DataTableProps<TData extends Record<string, unknown>, TValue> {
     selectedCount: number;
     selectedRows: TData[];
     table: Table<TData & { _id: string }>;
-    showToast: (message: string) => void;
   }) => React.ReactNode;
 }
 
diff --git a/packages/client/src/components/DataTable/DataTableComponents.tsx b/packages/client/src/components/DataTable/DataTableComponents.tsx
index 93dce72839..699bcf7467 100644
--- a/packages/client/src/components/DataTable/DataTableComponents.tsx
+++ b/packages/client/src/components/DataTable/DataTableComponents.tsx
@@ -53,11 +53,19 @@ const TableRowComponent = <TData extends Record<string, unknown>>({
     className="border-none hover:bg-surface-secondary"
   >
     {row.getVisibleCells().map((cell) => {
-      const meta = cell.column.columnDef.meta as { className?: string } | undefined;
+      const meta = cell.column.columnDef.meta as
+        | { className?: string; desktopOnly?: boolean }
+        | undefined;
+      const isDesktopOnly = meta?.desktopOnly;
       return (
         <TableCell
           key={cell.id}
-          className={cn('truncate p-3', cell.column.id === 'select' && 'p-1', meta?.className)}
+          className={cn(
+            'truncate p-3',
+            cell.column.id === 'select' && 'p-1',
+            meta?.className,
+            isDesktopOnly && 'hidden md:table-cell',
+          )}
         >
           {flexRender(cell.column.columnDef.cell, cell.getContext())}
         </TableCell>
@@ -89,9 +97,16 @@ export const SkeletonRows = memo(
             const columnKey = String(
               column.id ?? ('accessorKey' in column && column.accessorKey) ?? '',
             );
-            const meta = column.meta as { className?: string } | undefined;
+            const meta = column.meta as { className?: string; desktopOnly?: boolean } | undefined;
             return (
-              <TableCell key={columnKey} className={cn('px-2 py-2 md:px-3', meta?.className)}>
+              <TableCell
+                key={columnKey}
+                className={cn(
+                  'px-2 py-2 md:px-3',
+                  meta?.className,
+                  meta?.desktopOnly && 'hidden md:table-cell',
+                )}
+              >
                 <Skeleton className="h-6 w-full" />
               </TableCell>
             );