From 3110d629ce62e6ce1f229b241dbc7727ca410d22 Mon Sep 17 00:00:00 2001
From: Kasper Fabricius Kristensen
 <45367945+kasperkristensen@users.noreply.github.com>
Date: Wed, 10 Jul 2024 10:26:34 +0200
Subject: [PATCH 1/2] progress

---
 .../data-table-root/data-table-root.tsx       | 32 +++++++++++++------
 1 file changed, 22 insertions(+), 10 deletions(-)

diff --git a/packages/admin-next/dashboard/src/components/table/data-table/data-table-root/data-table-root.tsx b/packages/admin-next/dashboard/src/components/table/data-table/data-table-root/data-table-root.tsx
index 99ebdf467423e..964094809954b 100644
--- a/packages/admin-next/dashboard/src/components/table/data-table/data-table-root/data-table-root.tsx
+++ b/packages/admin-next/dashboard/src/components/table/data-table/data-table-root/data-table-root.tsx
@@ -140,7 +140,7 @@ export const DataTableRoot = <TData,>({
                   <Table.Row
                     key={headerGroup.id}
                     className={clx({
-                      "border-b-0 [&_th:last-of-type]:w-[1%] [&_th:last-of-type]:whitespace-nowrap":
+                      "relative border-b-0 [&_th:last-of-type]:w-[1%] [&_th:last-of-type]:whitespace-nowrap":
                         hasActions,
                       "[&_th:first-of-type]:w-[1%] [&_th:first-of-type]:whitespace-nowrap":
                         hasSelect,
@@ -171,7 +171,7 @@ export const DataTableRoot = <TData,>({
                               : undefined,
                           }}
                           className={clx({
-                            "bg-ui-bg-base sticky left-0 after:absolute after:inset-y-0 after:right-0 after:h-full after:w-px after:bg-transparent after:content-['']":
+                            "bg-ui-bg-base sticky inset-y-0 left-0 h-12 after:absolute after:inset-y-0 after:right-0 after:h-full after:w-px after:bg-transparent after:content-['']":
                               isStickyHeader,
                             "left-[68px]":
                               isStickyHeader && hasSelect && !isSelectHeader,
@@ -206,7 +206,7 @@ export const DataTableRoot = <TData,>({
                     key={row.id}
                     data-selected={row.getIsSelected()}
                     className={clx(
-                      "transition-fg group/row [&_td:last-of-type]:w-[1%] [&_td:last-of-type]:whitespace-nowrap",
+                      "transition-fg group/row group relative [&_td:last-of-type]:w-[1%] [&_td:last-of-type]:whitespace-nowrap",
                       "has-[[data-row-link]:focus-visible]:bg-ui-bg-base-hover",
                       {
                         "bg-ui-bg-subtle hover:bg-ui-bg-subtle-hover": isOdd,
@@ -241,23 +241,26 @@ export const DataTableRoot = <TData,>({
                           ? row.depth * 14 + 24
                           : undefined
 
+                      const hasLeftOfsset =
+                        isStickyCell && hasSelect && !isSelectCell
+
                       const Inner = flexRender(
                         cell.column.columnDef.cell,
                         cell.getContext()
                       )
 
-                      const isTabableLink = index === 0 && !!to
+                      const isTabableLink = isFirstCell && !!to
+                      const shouldRenderAsLink = !!to && !isSelectCell
 
                       return (
                         <Table.Cell
                           key={cell.id}
                           className={clx({
-                            "bg-ui-bg-base group-data-[selected=true]/row:bg-ui-bg-highlight group-data-[selected=true]/row:group-hover/row:bg-ui-bg-highlight-hover group-hover/row:bg-ui-bg-base-hover transition-fg has-[[data-row-link]:focus-visible]:bg-ui-bg-base-hover sticky left-0 after:absolute after:inset-y-0 after:right-0 after:h-full after:w-px after:bg-transparent after:content-['']":
+                            "bg-ui-bg-base group-data-[selected=true]/row:bg-ui-bg-highlight group-data-[selected=true]/row:group-hover/row:bg-ui-bg-highlight-hover group-hover/row:bg-ui-bg-base-hover transition-fg group-has-[[data-row-link]:focus-visible]:bg-ui-bg-base-hover sticky inset-y-0 left-0 after:absolute after:inset-y-0 after:right-0 after:h-full after:w-px after:bg-transparent after:content-['']":
                               isStickyCell,
                             "bg-ui-bg-subtle group-hover/row:bg-ui-bg-subtle-hover":
                               isOdd && isStickyCell,
-                            "left-[68px]":
-                              isStickyCell && hasSelect && !isSelectCell,
+                            "bottom-0 left-[68px] top-0": hasLeftOfsset,
                             "after:bg-ui-border-base":
                               showStickyBorder && isStickyCell && !isSelectCell,
                             "!bg-ui-bg-disabled !hover:bg-ui-bg-disabled":
@@ -269,14 +272,23 @@ export const DataTableRoot = <TData,>({
                               : undefined,
                           }}
                         >
-                          {to ? (
+                          {shouldRenderAsLink ? (
                             <Link
                               to={to}
-                              className="outline-none"
+                              className="size-full outline-none"
                               data-row-link
                               tabIndex={isTabableLink ? 0 : -1}
                             >
-                              {Inner}
+                              <div
+                                className={clx(
+                                  "flex size-full items-center pr-6",
+                                  {
+                                    "pl-6": isTabableLink && !hasLeftOfsset,
+                                  }
+                                )}
+                              >
+                                {Inner}
+                              </div>
                             </Link>
                           ) : (
                             Inner

From 6adaecc7362d665be79779452997e0e1dc326855 Mon Sep 17 00:00:00 2001
From: Kasper Fabricius Kristensen
 <45367945+kasperkristensen@users.noreply.github.com>
Date: Wed, 10 Jul 2024 11:21:58 +0200
Subject: [PATCH 2/2] fix

---
 .../table/data-table/data-table-root/data-table-root.tsx       | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/admin-next/dashboard/src/components/table/data-table/data-table-root/data-table-root.tsx b/packages/admin-next/dashboard/src/components/table/data-table/data-table-root/data-table-root.tsx
index 964094809954b..4eb520bb6b5d2 100644
--- a/packages/admin-next/dashboard/src/components/table/data-table/data-table-root/data-table-root.tsx
+++ b/packages/admin-next/dashboard/src/components/table/data-table/data-table-root/data-table-root.tsx
@@ -171,7 +171,7 @@ export const DataTableRoot = <TData,>({
                               : undefined,
                           }}
                           className={clx({
-                            "bg-ui-bg-base sticky inset-y-0 left-0 h-12 after:absolute after:inset-y-0 after:right-0 after:h-full after:w-px after:bg-transparent after:content-['']":
+                            "bg-ui-bg-base sticky inset-y-0 left-0 after:absolute after:inset-y-0 after:right-0 after:h-full after:w-px after:bg-transparent after:content-['']":
                               isStickyHeader,
                             "left-[68px]":
                               isStickyHeader && hasSelect && !isSelectHeader,
@@ -256,6 +256,7 @@ export const DataTableRoot = <TData,>({
                         <Table.Cell
                           key={cell.id}
                           className={clx({
+                            "!pl-0 !pr-0": shouldRenderAsLink,
                             "bg-ui-bg-base group-data-[selected=true]/row:bg-ui-bg-highlight group-data-[selected=true]/row:group-hover/row:bg-ui-bg-highlight-hover group-hover/row:bg-ui-bg-base-hover transition-fg group-has-[[data-row-link]:focus-visible]:bg-ui-bg-base-hover sticky inset-y-0 left-0 after:absolute after:inset-y-0 after:right-0 after:h-full after:w-px after:bg-transparent after:content-['']":
                               isStickyCell,
                             "bg-ui-bg-subtle group-hover/row:bg-ui-bg-subtle-hover":