feat: Integrated Refine into Data Table

app/components/data-table.tsx

@@ -1,10 +1,10 @@
+import { useState } from "react";
+import { BaseRecord } from "@refinedev/core";
+import { useTable } from "@refinedev/react-table";
 import {
   ColumnDef,
   flexRender,
-  getCoreRowModel,
+} from "@tanstack/react-table";
-  useReactTable,
-  getPaginationRowModel,
-} from "@tanstack/react-table"
 
 import {
   Table,
@@ -16,20 +16,23 @@ import {
 } from "./ui/table"
 import { DataTablePagination } from "./table-pagination"
 
-interface DataTableProps<TData, TValue> {
+interface DataTableProps<TData extends BaseRecord = BaseRecord, TValue = unknown> {
   columns: ColumnDef<TData, TValue>[]
-  data: TData[]
 }
 
-export function DataTable<TData, TValue>({
+export function DataTable<TData extends BaseRecord, TValue>({
-  columns,
+  columns
-  data,
 }: DataTableProps<TData, TValue>) {
-  const table = useReactTable({
+  const [hoveredRowId, setHoveredRowId] = useState<string>("");
-    data,
+
+  const table = useTable({
     columns,
-    getCoreRowModel: getCoreRowModel(),
+    meta: {
-    getPaginationRowModel: getPaginationRowModel(),
+      hoveredRowId,
+    },
+    refineCoreProps: {
+      resource: "files"
+    }
   })
 
   return (
@@ -40,7 +43,7 @@ export function DataTable<TData, TValue>({
             <TableRow key={headerGroup.id}>
               {headerGroup.headers.map((header) => {
                 return (
-                  <TableHead key={header.id}>
+                  <TableHead key={header.id} style={{ width: header.getSize() }}>
                     {header.isPlaceholder
                       ? null
                       : flexRender(
@@ -59,6 +62,10 @@ export function DataTable<TData, TValue>({
               <TableRow
                 key={row.id}
                 data-state={row.getIsSelected() && "selected"}
+                onMouseEnter={() => {
+                  console.log(hoveredRowId, row.id);
+                  setHoveredRowId(row.id)
+                }}
               >
                 {row.getVisibleCells().map((cell) => (
                   <TableCell key={cell.id}>

app/components/ui/dropdown-menu.tsx

@@ -67,7 +67,7 @@ const DropdownMenuContent = React.forwardRef<
       ref={ref}
       sideOffset={sideOffset}
       className={cn(
-        "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md",
+        "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-primary p-1 text-white shadow-md",
         "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
         className
       )}
@@ -80,14 +80,17 @@ DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName
 const DropdownMenuItem = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.Item>,
   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
-    inset?: boolean
+    inset?: boolean,
+    variant?: string
   }
->(({ className, inset, ...props }, ref) => (
+>(({ className, inset, variant, ...props }, ref) => (
   <DropdownMenuPrimitive.Item
     ref={ref}
     className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "relative flex cursor-default select-none items-center rounded-md px-2 py-1.5 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       inset && "pl-8",
+      !variant && "focus:bg-primary-2/50 focus:text-primary-2-foreground",
+      variant === "destructive" && "focus:bg-destructive/50 focus:text-white",
       className
     )}
     {...props}
@@ -165,7 +168,7 @@ const DropdownMenuSeparator = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <DropdownMenuPrimitive.Separator
     ref={ref}
-    className={cn("-mx-1 my-1 h-px bg-muted", className)}
+    className={cn("-mx-1 my-1 h-px bg-primary-2/75", className)}
     {...props}
   />
 ))

app/routes/file-manager/columns.tsx

@@ -1,6 +1,8 @@
-import type { ColumnDef } from "@tanstack/react-table";
+import { DrawingPinIcon, TrashIcon } from "@radix-ui/react-icons";
+import type { ColumnDef, RowData } from "@tanstack/react-table";
 import { FileIcon, MoreIcon } from "~/components/icons";
 import { Checkbox } from "~/components/ui/checkbox";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger } from "~/components/ui/dropdown-menu";
 
 // This type is used to define the shape of our data.
 // You can use a Zod schema here if you want.
@@ -11,9 +13,16 @@ export type File = {
     createdOn: string;
 };
 
+declare module '@tanstack/table-core' {
+  interface TableMeta<TData extends RowData> {
+      hoveredRowId: string,
+  }
+}
+
 export const columns: ColumnDef<File>[] = [
     {
       id: "select",
+      size: 20,
       header: ({ table }) => (
         <Checkbox
           
@@ -55,11 +64,31 @@ export const columns: ColumnDef<File>[] = [
     },
     {
         accessorKey: "createdOn",
+        size: 200,
         header: "Created On",
-        cell: ({ row }) => (
+        cell: ({ row, table }) => (
           <div className="flex items-center justify-between">
             {row.getValue("createdOn")}
-            {row.getIsSelected() && <MoreIcon />}
+            {(row.getIsSelected() || table.options.meta?.hoveredRowId === row.id)  && (
+              <DropdownMenu>
+              <DropdownMenuTrigger>
+                <MoreIcon />
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="end">
+                <DropdownMenuGroup>
+                  <DropdownMenuItem>
+                    <DrawingPinIcon className="mr-2" />
+                    Ping CID
+                  </DropdownMenuItem>
+                  <DropdownMenuSeparator />
+                  <DropdownMenuItem variant="destructive">
+                    <TrashIcon className="mr-2" />
+                    Delete
+                  </DropdownMenuItem>
+                </DropdownMenuGroup>
+              </DropdownMenuContent>
+            </DropdownMenu>
+            )}
           </div>
         )
     }

app/routes/file-manager/index.tsx

@@ -7,11 +7,6 @@ import { Button } from "~/components/ui/button";
 import { AddIcon } from "~/components/icons";
 
 export default function FileManager() {
-  const isLogged = true;
-  if (!isLogged) {
-    window.location.href = "/login";
-  }
-
   return (
     <GeneralLayout>
       <h1 className="font-bold mb-4 text-lg">File Manager</h1>
@@ -60,20 +55,6 @@ export default function FileManager() {
       </div>
       <DataTable
         columns={columns}
-        data={[
-          {
-            name: "whirly-final-draft.psd",
-            cid: "0xB45165ED3CD437B",
-            size: "1.89 MB",
-            createdOn: "03/02/2024 at 13:29 PM",
-          },
-          {
-            name: "whirly-final-draft.psd",
-            cid: "0xB45165ED3CD437B",
-            size: "1.89 MB",
-            createdOn: "03/02/2024 at 13:29 PM",
-          },
-        ]}
       />
     </GeneralLayout>
   );

package.json

@@ -28,6 +28,7 @@
     "@refinedev/core": "https://gitpkg.now.sh/LumeWeb/refine/packages/core?remix",
     "@refinedev/devtools-internal": "https://gitpkg.now.sh/LumeWeb/refine/packages/devtools-internal?remix",
     "@refinedev/devtools-shared": "https://gitpkg.now.sh/LumeWeb/refine/packages/devtools-shared?remix",
+    "@refinedev/react-table": "https://gitpkg.now.sh/LumeWeb/refine/packages/react-table?remix",
     "@refinedev/remix-router": "https://gitpkg.now.sh/LumeWeb/refine/packages/remix?remix",
     "@remix-run/node": "^2.8.0",
     "@remix-run/react": "^2.8.0",