chore: always show the actions column

bleu · Aug 20, 2024 · 7595145 · 7595145
1 parent d92b119
commit 7595145
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 3 deletions.
diff --git a/src/components/DataTable/DataTableColumnHeader.tsx b/src/components/DataTable/DataTableColumnHeader.tsx
@@ -20,6 +20,10 @@ export function DataTableColumnHeader({ column, title, className }) {
     return <div className={cn(className)}>{title}</div>;
   }
 
+  if (column.id === "actions") {
+    return <div className={cn(className)}>{title}</div>;
+  }
+
   return (
     <div className={cn("flex items-center space-x-2", className)}>
       <DropdownMenu>

diff --git a/src/components/DataTable/SWRDataTable/DataTableBody.tsx b/src/components/DataTable/SWRDataTable/DataTableBody.tsx
@@ -7,6 +7,7 @@ import { useNavigate } from "react-router-dom";
 import { TableBody, TableCell, TableRow } from "#/components/ui";
 
 import { useTableContext } from "../TableContext";
+import { cn } from "#/lib/utils";
 
 export function DataTableBody({ hasDetails }) {
   // @ts-expect-error TS(2339) FIXME: Property 'table' does not exist on type '{}'.
@@ -27,7 +28,13 @@ export function DataTableBody({ hasDetails }) {
             }}
           >
             {row.getVisibleCells().map((cell) => (
-              <TableCell key={cell.id}>
+              <TableCell
+                key={cell.id}
+                className={cn({
+                  "bg-background sticky right-0 group-hover:bg-muted/40 transition-colors":
+                    cell.column.id === "actions",
+                })}
+              >
                 {flexRender(cell.column.columnDef.cell, cell.getContext())}
               </TableCell>
             ))}

diff --git a/src/components/DataTable/SWRDataTable/DataTableHeader.tsx b/src/components/DataTable/SWRDataTable/DataTableHeader.tsx
@@ -5,6 +5,7 @@ import { flexRender } from "@tanstack/react-table";
 import { TableHead, TableHeader, TableRow } from "#/components/ui";
 
 import { useTableContext } from "../TableContext";
+import { cn } from "#/lib/utils";
 
 export function DataTableHeader() {
   // @ts-expect-error TS(2339) FIXME: Property 'table' does not exist on type '{}'.
@@ -15,7 +16,12 @@ export function DataTableHeader() {
       {table.getHeaderGroups().map((headerGroup) => (
         <TableRow key={headerGroup.id}>
           {headerGroup.headers.map((header) => (
-            <TableHead key={header.id}>
+            <TableHead
+              key={header.id}
+              className={cn({
+                "sticky right-0": header.id === "actions",
+              })}
+            >
               {header.isPlaceholder
                 ? null
                 : flexRender(

diff --git a/src/components/ui/Table.tsx b/src/components/ui/Table.tsx
@@ -58,7 +58,7 @@ const TableRow = React.forwardRef<
   <tr
     ref={ref}
     className={cn(
-      "hover:bg-muted/50 data-[state=selected]:bg-muted border-b dark:border-b-2 transition-colors",
+      "hover:bg-muted/50 data-[state=selected]:bg-muted border-b dark:border-b-2 transition-colors group",
       className
     )}
     {...props}