fix: allow custom Link element on table row (#728)

Author: jsladerman

src/components/ModalWrapper.tsx

@@ -1,9 +1,13 @@
 // styling here mostly just for the overlay and animations
 import * as Dialog from '@radix-ui/react-dialog'
 import { FocusScope } from '@radix-ui/react-focus-scope'
-import { type ComponentPropsWithRef, type ReactNode } from 'react'
+import {
+  CSSProperties,
+  type ComponentPropsWithRef,
+  type ReactNode,
+} from 'react'
 import { VisuallyHidden } from 'react-aria'
-import styled, { type CSSObject, useTheme } from 'styled-components'
+import styled, { useTheme } from 'styled-components'
 
 import WrapWithIf from './WrapWithIf'
 
@@ -12,7 +16,7 @@ const ANIMATION_SPEED = '150ms'
 export type ModalWrapperProps = {
   open: boolean
   onOpenChange?: (open: boolean) => void
-  overlayStyles?: CSSObject
+  overlayStyles?: CSSProperties
   children?: ReactNode
 } & ComponentPropsWithRef<typeof Dialog.Content>
 

src/components/table/Table.tsx

@@ -401,7 +401,7 @@ function Table({
                                 <TdGhostLink
                                   key={cell.id}
                                   width={tableWidth}
-                                  href={getRowLink?.(tableRow)}
+                                  link={getRowLink?.(tableRow)}
                                 />
                               ) : (
                                 <Td

src/components/table/Td.tsx

@@ -1,5 +1,6 @@
 import styled from 'styled-components'
 
+import { ReactElement } from 'react'
 import {
   tableFillLevelToBorder,
   tableFillLevelToHeaderBorder,
@@ -108,13 +109,26 @@ export const TdBasic = styled.td({
   overflow: 'hidden',
 })
 
-export function TdGhostLink({ width, href }: { width: number; href: string }) {
+export function TdGhostLink({
+  width,
+  link,
+}: {
+  width: number
+  link: Nullable<string | ReactElement>
+}) {
   return (
-    <td style={{ position: 'relative', width: 0 }}>
-      <a
-        style={{ width, position: 'absolute', inset: '0 0 0 auto', zIndex: 0 }}
-        href={href}
-      />
-    </td>
+    <TdGhostLinkSC style={{ ['--ghost-link-width']: `${width}px` }}>
+      {typeof link === 'string' ? <a href={link} /> : link}
+    </TdGhostLinkSC>
   )
 }
+const TdGhostLinkSC = styled.td(() => ({
+  position: 'relative',
+  width: 0,
+  '& > *': {
+    position: 'absolute',
+    inset: '0 0 0 auto',
+    zIndex: 0,
+    width: 'var(--ghost-link-width)',
+  },
+}))

src/components/table/tableUtils.ts

@@ -8,6 +8,7 @@ import type {
 import type { VirtualItem } from '@tanstack/react-virtual'
 import { useVirtualizer } from '@tanstack/react-virtual'
 import {
+  ReactElement,
   type CSSProperties,
   type MouseEvent,
   type RefObject,
@@ -46,7 +47,7 @@ export type TableBaseProps = {
   >
   reactTableOptions?: Partial<Omit<TableOptions<any>, 'data' | 'columns'>>
   onRowClick?: (e: MouseEvent<HTMLTableRowElement>, row: Row<any>) => void
-  getRowLink?: (row: Row<unknown>) => Nullable<string>
+  getRowLink?: (row: Row<unknown>) => Nullable<string | ReactElement>
   emptyStateProps?: EmptyStateProps
   hasNextPage?: boolean
   fetchNextPage?: () => void

src/stories/Table.stories.tsx

@@ -285,7 +285,7 @@ function SelectableTemplate(args: any) {
     <Table
       {...args}
       onRowClick={(_, row) => {
-        setSelectedId(row.original.id)
+        setSelectedId(row.original.id?.toString() ?? '')
       }}
       reactTableOptions={{
         state: { rowSelection: { [selectedId]: true } },

src/types/styled.d.ts

@@ -8,6 +8,9 @@ declare module 'react' {
   interface Attributes {
     css?: CSSProp | undefined
   }
+  interface CSSProperties {
+    [key: `--${string}`]: Nullable<string | number>
+  }
 }
 
 type StyledTheme = typeof styledTheme