From 75951452d06da5de212c3188d45334625b50ca61 Mon Sep 17 00:00:00 2001
From: devjoaov <joaovictorass95@gmail.com>
Date: Tue, 20 Aug 2024 15:49:27 -0300
Subject: [PATCH] chore: always show the actions column

---
 src/components/DataTable/DataTableColumnHeader.tsx       | 4 ++++
 src/components/DataTable/SWRDataTable/DataTableBody.tsx  | 9 ++++++++-
 .../DataTable/SWRDataTable/DataTableHeader.tsx           | 8 +++++++-
 src/components/ui/Table.tsx                              | 2 +-
 4 files changed, 20 insertions(+), 3 deletions(-)

diff --git a/src/components/DataTable/DataTableColumnHeader.tsx b/src/components/DataTable/DataTableColumnHeader.tsx
index 3d9d7a4..3dd0f45 100644
--- 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
index c630874..996e140 100644
--- 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
index 236ba08..813d6f9 100644
--- 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
index 5971df1..230c4ed 100644
--- 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}