From c8c904fb4ff6947f86374bacb805478841945082 Mon Sep 17 00:00:00 2001
From: joshunrau <contact@joshuaunrau.com>
Date: Sun, 22 Mar 2026 21:22:08 -0400
Subject: [PATCH 1/4] chore: add actions to grouped data table story

---
 .../DataTable/DataTable.stories.tsx           | 23 ++++++++++++++++++-
 1 file changed, 22 insertions(+), 1 deletion(-)

diff --git a/src/components/DataTable/DataTable.stories.tsx b/src/components/DataTable/DataTable.stories.tsx
index 2e7a7a4..9fc5a4a 100644
--- a/src/components/DataTable/DataTable.stories.tsx
+++ b/src/components/DataTable/DataTable.stories.tsx
@@ -221,35 +221,56 @@ export const Grouped: Story = {
         columns: [
           {
             accessorKey: 'id',
+            enableResizing: false,
             header: 'ID'
           },
           {
             accessorKey: 'status',
+            enableResizing: false,
             header: 'Status'
           }
         ],
+        enableResizing: false,
         header: 'Internal'
       },
       {
         columns: [
           {
             accessorKey: 'email',
+            enableResizing: false,
             header: 'Email'
           },
           {
             accessorKey: 'amount',
+            enableResizing: false,
             header: 'Amount'
           }
         ],
         header: 'Details'
       }
     ],
+
     data: createData(100),
     onRowDoubleClick(row) {
       alert(`row with ID ${row.id} double clicked`);
     },
     onSearchChange: () => {
       return;
-    }
+    },
+    rowActions: [
+      {
+        label: 'Modify',
+        onSelect: () => {
+          alert('Modify');
+        }
+      },
+      {
+        destructive: true,
+        label: 'Delete',
+        onSelect: () => {
+          alert('Delete');
+        }
+      }
+    ]
   }
 };

From bf88543a8d542c80b6f9fdd331cf181d74bb38a5 Mon Sep 17 00:00:00 2001
From: joshunrau <contact@joshuaunrau.com>
Date: Sun, 22 Mar 2026 22:07:12 -0400
Subject: [PATCH 2/4] fix: issue with background color of actions column

---
 src/components/DataTable/DataTableBody.tsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/components/DataTable/DataTableBody.tsx b/src/components/DataTable/DataTableBody.tsx
index c515a69..4c7d8f9 100644
--- a/src/components/DataTable/DataTableBody.tsx
+++ b/src/components/DataTable/DataTableBody.tsx
@@ -63,7 +63,11 @@ export const DataTableBody: React.FC<
               }
               const content = flexRender(cell.column.columnDef.cell, cell.getContext());
               return (
-                <div className="flex items-center border-r px-4 py-2 last:border-r-0" key={cell.id} style={style}>
+                <div
+                  className="flex items-center border-r bg-inherit px-4 py-2 last:border-r-0"
+                  key={cell.id}
+                  style={style}
+                >
                   {content && typeof content === 'object' ? content : <span className="block truncate">{content}</span>}
                 </div>
               );

From 995a1f7cec65d13cca52302a42c8d036d14deb29 Mon Sep 17 00:00:00 2001
From: joshunrau <contact@joshuaunrau.com>
Date: Sun, 22 Mar 2026 22:09:04 -0400
Subject: [PATCH 3/4] chore: enable resizing for bottom-level headers in
 grouped story

---
 src/components/DataTable/DataTable.stories.tsx | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/src/components/DataTable/DataTable.stories.tsx b/src/components/DataTable/DataTable.stories.tsx
index 9fc5a4a..54fd716 100644
--- a/src/components/DataTable/DataTable.stories.tsx
+++ b/src/components/DataTable/DataTable.stories.tsx
@@ -221,12 +221,10 @@ export const Grouped: Story = {
         columns: [
           {
             accessorKey: 'id',
-            enableResizing: false,
             header: 'ID'
           },
           {
             accessorKey: 'status',
-            enableResizing: false,
             header: 'Status'
           }
         ],
@@ -237,15 +235,14 @@ export const Grouped: Story = {
         columns: [
           {
             accessorKey: 'email',
-            enableResizing: false,
             header: 'Email'
           },
           {
             accessorKey: 'amount',
-            enableResizing: false,
             header: 'Amount'
           }
         ],
+        enableResizing: false,
         header: 'Details'
       }
     ],

From a4c2aa2d06735f2444ad3456cf38d8cbcc93660c Mon Sep 17 00:00:00 2001
From: joshunrau <contact@joshuaunrau.com>
Date: Sun, 22 Mar 2026 22:33:17 -0400
Subject: [PATCH 4/4] fix: issue with styling for grouped headers in DataTable

---
 src/components/DataTable/DataTableHead.tsx | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/components/DataTable/DataTableHead.tsx b/src/components/DataTable/DataTableHead.tsx
index f720eb4..857517f 100644
--- a/src/components/DataTable/DataTableHead.tsx
+++ b/src/components/DataTable/DataTableHead.tsx
@@ -1,3 +1,4 @@
+import { ACTIONS_COLUMN_ID } from './constants.ts';
 import { useDataTableHandle } from './hooks.ts';
 import { flexRender } from './utils.tsx';
 
@@ -24,11 +25,12 @@ export const DataTableHead = () => {
               style.position = 'sticky';
               style.zIndex = 20;
             }
-            // no border with actions on right
-            // TODO - consider resizing toggle in this case
-            if (header.column.getIsLastColumn('center')) {
+
+            const nextHeader = headerGroup.headers[header.index + 1];
+            if (nextHeader?.column.id === ACTIONS_COLUMN_ID) {
               style.borderRight = 'none';
             }
+
             return (
               <div
                 className="group/cell bg-background relative flex items-center border-r border-b px-4 py-2 last:border-r-0"