From 02621d05d848b0c058ca4a09f1b6b06acd78948e Mon Sep 17 00:00:00 2001
From: ghost2023 <nathnaelwonisha@gmail.com>
Date: Wed, 10 Jun 2026 10:02:09 +0300
Subject: [PATCH] chore: migrate to mantine from shadcn for datatable

---
 .../src/components/data-table/error.tsx       | 10 ++---
 .../src/components/data-table/skeleton.tsx    | 10 ++---
 .../src/components/data-table/table.tsx       | 41 ++++++++-----------
 3 files changed, 27 insertions(+), 34 deletions(-)

diff --git a/packages/ui-common/src/components/data-table/error.tsx b/packages/ui-common/src/components/data-table/error.tsx
index e240784d7..6db0a7fef 100644
--- a/packages/ui-common/src/components/data-table/error.tsx
+++ b/packages/ui-common/src/components/data-table/error.tsx
@@ -1,6 +1,6 @@
+import { Table } from "@mantine/core";
 import { Table as TanstackTable } from "@tanstack/react-table";
 
-import { TableCell, TableRow } from "../table";
 import { Button } from "../button";
 
 export function DataTableError({
@@ -15,8 +15,8 @@ export function DataTableError({
   onRetry?: () => void;
 }) {
   return (
-    <TableRow>
-      <TableCell colSpan={table.getVisibleFlatColumns().length}>
+    <Table.Tr>
+      <Table.Td colSpan={table.getVisibleFlatColumns().length}>
         <div className="flex items-center my-6 justify-center">
           <div className="text-center">
             <div className="my-4">
@@ -34,7 +34,7 @@ export function DataTableError({
             )}
           </div>
         </div>
-      </TableCell>
-    </TableRow>
+      </Table.Td>
+    </Table.Tr>
   );
 }
diff --git a/packages/ui-common/src/components/data-table/skeleton.tsx b/packages/ui-common/src/components/data-table/skeleton.tsx
index 307f47bdc..bd6ffed36 100644
--- a/packages/ui-common/src/components/data-table/skeleton.tsx
+++ b/packages/ui-common/src/components/data-table/skeleton.tsx
@@ -1,16 +1,16 @@
+import { Table } from "@mantine/core";
 import { Table as TanstackTable } from "@tanstack/react-table";
 
 import { Skeleton } from "../skeleton";
-import { TableCell, TableRow } from "../table";
 
 export function DataTableSkeleton({ table }: { table: TanstackTable<any> }) {
   return Array.from({ length: 10 }).map((_, i) => (
-    <TableRow key={i}>
+    <Table.Tr key={i}>
       {table.getAllColumns().map((column) => (
-        <TableCell key={column.id}>
+        <Table.Td key={column.id}>
           <Skeleton className="h-8" />
-        </TableCell>
+        </Table.Td>
       ))}
-    </TableRow>
+    </Table.Tr>
   ));
 }
diff --git a/packages/ui-common/src/components/data-table/table.tsx b/packages/ui-common/src/components/data-table/table.tsx
index adbd6e428..5dbe7277b 100644
--- a/packages/ui-common/src/components/data-table/table.tsx
+++ b/packages/ui-common/src/components/data-table/table.tsx
@@ -4,14 +4,7 @@ import {
   getPaginationRowModel,
   useReactTable,
 } from "@tanstack/react-table";
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "../table";
+import { Table } from "@mantine/core";
 import { DataTableProps } from "./types";
 import { DataTableSkeleton } from "./skeleton";
 import { DataTableError } from "./error";
@@ -56,12 +49,12 @@ export function DataTable<TData, TValue>({
     <>
       <div className={containerClassName}>
         <Table>
-          <TableHeader>
+          <Table.Thead>
             {table.getHeaderGroups().map((headerGroup) => (
-              <TableRow key={headerGroup.id}>
+              <Table.Tr key={headerGroup.id}>
                 {headerGroup.headers.map((header) => {
                   return (
-                    <TableHead
+                    <Table.Th
                       key={header.id}
                       className={
                         (header.column.columnDef.meta as Record<string, any>)
@@ -75,13 +68,13 @@ export function DataTable<TData, TValue>({
                           header.column.columnDef.header,
                           header.getContext(),
                         )}
-                    </TableHead>
+                    </Table.Th>
                   );
                 })}
-              </TableRow>
+              </Table.Tr>
             ))}
-          </TableHeader>
-          <TableBody>
+          </Table.Thead>
+          <Table.Tbody>
             {status === "loading" && <DataTableSkeleton table={table} />}
             {status === "error" && (
               <DataTableError
@@ -94,7 +87,7 @@ export function DataTable<TData, TValue>({
             {status === "success" &&
               (table.getRowModel().rows?.length ? (
                 table.getRowModel().rows.map((row) => (
-                  <TableRow
+                  <Table.Tr
                     key={row.id}
                     data-state={row.getIsSelected() && "selected"}
                     onClick={(event) => {
@@ -129,7 +122,7 @@ export function DataTable<TData, TValue>({
                     }
                   >
                     {row.getVisibleCells().map((cell) => (
-                      <TableCell
+                      <Table.Td
                         key={cell.id}
                         className={
                           (cell.column.columnDef.meta as Record<string, any>)
@@ -140,21 +133,21 @@ export function DataTable<TData, TValue>({
                           cell.column.columnDef.cell,
                           cell.getContext(),
                         )}
-                      </TableCell>
+                      </Table.Td>
                     ))}
-                  </TableRow>
+                  </Table.Tr>
                 ))
               ) : (
-                <TableRow>
-                  <TableCell
+                <Table.Tr>
+                  <Table.Td
                     colSpan={table.getVisibleFlatColumns().length}
                     className="h-24 text-center"
                   >
                     {emptyMessage ?? "No data"}
-                  </TableCell>
-                </TableRow>
+                  </Table.Td>
+                </Table.Tr>
               ))}
-          </TableBody>
+          </Table.Tbody>
         </Table>
       </div>