fix some minor styling issues with DataTable

src/components/DataTable/DataTable.stories.tsx

@@ -228,6 +228,7 @@ export const Grouped: Story = {
             header: 'Status'
           }
         ],
+        enableResizing: false,
         header: 'Internal'
       },
       {
@@ -241,15 +242,32 @@ export const Grouped: Story = {
             header: 'Amount'
           }
         ],
+        enableResizing: false,
         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');
+        }
+      }
+    ]
   }
 };

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>
               );

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"