fix: placement of drag handles

Author: srindom

packages/design-system/ui/src/blocks/data-table/components/data-table-non-sortable-header-cell.tsx

@@ -6,12 +6,13 @@ import { Table } from "@/components/table"
 interface DataTableNonSortableHeaderCellProps extends React.HTMLAttributes<HTMLTableCellElement> {
   id: string
   children: React.ReactNode
+  isFirstColumn?: boolean
 }
 
 export const DataTableNonSortableHeaderCell = React.forwardRef<
   HTMLTableCellElement,
   DataTableNonSortableHeaderCellProps
->(({ id, children, className, style: propStyle, ...props }, ref) => {
+>(({ id, children, className, style: propStyle, isFirstColumn, ...props }, ref) => {
   // Still use sortable hook but without listeners
   const {
     setNodeRef,

packages/design-system/ui/src/blocks/data-table/components/data-table-sortable-header-cell.tsx

@@ -8,12 +8,13 @@ import { Table } from "@/components/table"
 interface DataTableSortableHeaderCellProps extends React.HTMLAttributes<HTMLTableCellElement> {
   id: string
   children: React.ReactNode
+  isFirstColumn?: boolean
 }
 
 export const DataTableSortableHeaderCell = React.forwardRef<
   HTMLTableCellElement,
   DataTableSortableHeaderCellProps
->(({ id, children, className, style: propStyle, ...props }, ref) => {
+>(({ id, children, className, style: propStyle, isFirstColumn, ...props }, ref) => {
   const {
     attributes,
     listeners,
@@ -58,32 +59,32 @@ export const DataTableSortableHeaderCell = React.forwardRef<
     <Table.HeaderCell
       ref={combineRefs}
       style={style}
-      className={clx(className, {
+      className={clx(className, "group/header-cell relative", {
         "cursor-grabbing": isDragging,
       })}
       {...props}
     >
-      <div className="group/header-cell flex h-full w-full items-center gap-1">
-        <button
-          type="button"
-          className={clx(
-            "flex h-5 w-4 cursor-grab items-center justify-center rounded outline-none",
-            "text-ui-text-subtle transition-all",
-            "opacity-0 group-hover/header-cell:opacity-100",
-            "hover:text-ui-text-base",
-            "focus-visible:text-ui-text-base focus-visible:opacity-100 focus-visible:ring-2 focus-visible:ring-ui-focus",
-            "disabled:cursor-not-allowed disabled:text-ui-text-disabled",
-            {
-              "opacity-100": isDragging,
-            }
-          )}
-          {...attributes}
-          {...listeners}
-        >
-          <DotsSix className="h-4 w-4" />
-        </button>
-        <div className="flex-1">{children}</div>
-      </div>
+      <button
+        type="button"
+        className={clx(
+          "absolute top-1/2 -translate-y-1/2 z-10",
+          isFirstColumn ? "left-[6px]" : "-left-[18px]",
+          "flex h-5 w-4 cursor-grab items-center justify-center rounded outline-none",
+          "text-ui-text-subtle transition-all",
+          "opacity-0 group-hover/header-cell:opacity-100",
+          "hover:text-ui-text-base",
+          "focus-visible:text-ui-text-base focus-visible:opacity-100 focus-visible:ring-2 focus-visible:ring-ui-focus",
+          "disabled:cursor-not-allowed disabled:text-ui-text-disabled",
+          {
+            "opacity-100": isDragging,
+          }
+        )}
+        {...attributes}
+        {...listeners}
+      >
+        <DotsSix className="h-4 w-4" />
+      </button>
+      {children}
     </Table.HeaderCell>
   )
 })

packages/design-system/ui/src/blocks/data-table/components/data-table-table.tsx

@@ -241,6 +241,7 @@ const DataTableTable = (props: DataTableTableProps) => {
                       <HeaderCellComponent
                         key={header.id}
                         id={header.id}
+                        isFirstColumn={isFirstColumn}
                         className={clx("whitespace-nowrap", {
                           "w-[calc(20px+24px+24px)] min-w-[calc(20px+24px+24px)] max-w-[calc(20px+24px+24px)]":
                             isSelectHeader,