@postxl/generators 0.2.2

package/dist/frontend-core/template/src/components/ui/data-grid/data-grid-column-header.tsx

@@ -0,0 +1,317 @@
+import type { ColumnSort, Header, SortDirection, SortingState, Table } from '@tanstack/react-table'
+
+import {
+  BaselineIcon,
+  CalendarIcon,
+  CheckSquareIcon,
+  ChevronDownIcon,
+  ChevronUpIcon,
+  EyeOffIcon,
+  HashIcon,
+  ListChecksIcon,
+  ListIcon,
+  PinIcon,
+  PinOffIcon,
+  TextInitialIcon,
+  XIcon,
+} from 'lucide-react'
+import * as React from 'react'
+
+import type { Cell } from '@components/ui/data-grid/data-grid-types'
+import {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@components/ui/dropdown-menu/dropdown-menu'
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@components/ui/tooltip/tooltip'
+import { cn } from '@lib/utils'
+import { GanttTimeline } from './cell-variants/utils/gantt-timeline'
+
+function getColumnVariant(variant?: Cell['variant']): {
+  icon: React.ComponentType<React.SVGProps<SVGSVGElement>>
+  label: string
+} | null {
+  switch (variant) {
+    case 'short-text':
+      return { icon: BaselineIcon, label: 'Short text' }
+    case 'long-text':
+      return { icon: TextInitialIcon, label: 'Long text' }
+    case 'number':
+      return { icon: HashIcon, label: 'Number' }
+    case 'select':
+      return { icon: ListIcon, label: 'Select' }
+    case 'multi-select':
+      return { icon: ListChecksIcon, label: 'Multi-select' }
+    case 'checkbox':
+      return { icon: CheckSquareIcon, label: 'Checkbox' }
+    case 'date':
+      return { icon: CalendarIcon, label: 'Date' }
+    default:
+      return null
+  }
+}
+
+type DataGridColumnHeaderProps<TData, TValue> = {
+  header: Header<TData, TValue>
+  table: Table<TData>
+} & React.ComponentProps<typeof DropdownMenuTrigger>
+
+export function DataGridColumnHeader<TData, TValue>({
+  header,
+  table,
+  className,
+  onPointerDown,
+  ...props
+}: DataGridColumnHeaderProps<TData, TValue>) {
+  const column = header.column
+  const label = column.columnDef.meta?.label
+    ? column.columnDef.meta.label
+    : typeof column.columnDef.header === 'string'
+      ? column.columnDef.header
+      : column.id
+
+  const isAnyColumnResizing = table.getState().columnSizingInfo.isResizingColumn
+
+  const cellVariant = column.columnDef.meta?.cell
+  const columnVariant = getColumnVariant(cellVariant?.variant)
+
+  const pinnedPosition = column.getIsPinned()
+  const isPinnedLeft = pinnedPosition === 'left'
+  const isPinnedRight = pinnedPosition === 'right'
+
+  const onSortingChange = React.useCallback(
+    (direction: SortDirection) => {
+      table.setSorting((prev: SortingState) => {
+        const existingSortIndex = prev.findIndex((sort) => sort.id === column.id)
+        const newSort: ColumnSort = {
+          id: column.id,
+          desc: direction === 'desc',
+        }
+
+        if (existingSortIndex >= 0) {
+          const updated = [...prev]
+          updated[existingSortIndex] = newSort
+          return updated
+        } else {
+          return [...prev, newSort]
+        }
+      })
+    },
+    [column.id, table],
+  )
+
+  const onSortRemove = React.useCallback(() => {
+    table.setSorting((prev: SortingState) => prev.filter((sort) => sort.id !== column.id))
+  }, [column.id, table])
+
+  const onLeftPin = React.useCallback(() => {
+    column.pin('left')
+  }, [column])
+
+  const onRightPin = React.useCallback(() => {
+    column.pin('right')
+  }, [column])
+
+  const onUnpin = React.useCallback(() => {
+    column.pin(false)
+  }, [column])
+
+  const onTriggerPointerDown = React.useCallback(
+    (event: React.PointerEvent<HTMLButtonElement>) => {
+      onPointerDown?.(event)
+      if (event.defaultPrevented) {
+        return
+      }
+
+      if (event.button !== 0) {
+        return
+      }
+      table.options.meta?.onColumnClick?.(column.id)
+    },
+    [table.options.meta, column.id, onPointerDown],
+  )
+
+  return (
+    <>
+      <DropdownMenu>
+        <DropdownMenuTrigger
+          className={cn(
+            'flex size-full items-center justify-between gap-2 p-2 text-sm bg-sidebar-accent/80 font-bold hover:bg-neutral-100/40 data-[state=open]:bg-neutral-100/40 [&_svg]:size-4 dark:hover:bg-neutral-800/40 dark:data-[state=open]:bg-neutral-800/40',
+            isAnyColumnResizing && 'pointer-events-none',
+            className,
+          )}
+          onPointerDown={onTriggerPointerDown}
+          {...props}
+        >
+          <div className="flex min-w-0 flex-1 items-center gap-1.5">
+            {columnVariant && (
+              <TooltipProvider>
+                <Tooltip delayDuration={100}>
+                  <TooltipTrigger asChild>
+                    <columnVariant.icon className="size-3.5 shrink-0 text-neutral-500 dark:text-neutral-400" />
+                  </TooltipTrigger>
+                  <TooltipContent side="top">
+                    <p>{columnVariant.label}</p>
+                  </TooltipContent>
+                </Tooltip>
+              </TooltipProvider>
+            )}
+            <span className="truncate">{label}</span>
+          </div>
+          <ChevronDownIcon className="shrink-0 text-neutral-500 dark:text-neutral-400" />
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="start" sideOffset={0} className="w-60">
+          {column.getCanSort() && (
+            <>
+              <DropdownMenuCheckboxItem
+                className="relative pr-8 pl-2 [&>span:first-child]:right-2 [&>span:first-child]:left-auto [&_svg]:text-neutral-500 dark:[&_svg]:text-neutral-400"
+                checked={column.getIsSorted() === 'asc'}
+                onClick={() => onSortingChange('asc')}
+              >
+                <ChevronUpIcon />
+                Sort asc
+              </DropdownMenuCheckboxItem>
+              <DropdownMenuCheckboxItem
+                className="relative pr-8 pl-2 [&>span:first-child]:right-2 [&>span:first-child]:left-auto [&_svg]:text-neutral-500 dark:[&_svg]:text-neutral-400"
+                checked={column.getIsSorted() === 'desc'}
+                onClick={() => onSortingChange('desc')}
+              >
+                <ChevronDownIcon />
+                Sort desc
+              </DropdownMenuCheckboxItem>
+              {column.getIsSorted() && (
+                <DropdownMenuItem onClick={onSortRemove}>
+                  <XIcon />
+                  Remove sort
+                </DropdownMenuItem>
+              )}
+            </>
+          )}
+          {column.getCanPin() && (
+            <>
+              {column.getCanSort() && <DropdownMenuSeparator />}
+
+              {isPinnedLeft ? (
+                <DropdownMenuItem className="[&_svg]:text-neutral-500 dark:[&_svg]:text-neutral-400" onClick={onUnpin}>
+                  <PinOffIcon />
+                  Unpin from left
+                </DropdownMenuItem>
+              ) : (
+                <DropdownMenuItem
+                  className="[&_svg]:text-neutral-500 dark:[&_svg]:text-neutral-400"
+                  onClick={onLeftPin}
+                >
+                  <PinIcon />
+                  Pin to left
+                </DropdownMenuItem>
+              )}
+              {isPinnedRight ? (
+                <DropdownMenuItem className="[&_svg]:text-neutral-500 dark:[&_svg]:text-neutral-400" onClick={onUnpin}>
+                  <PinOffIcon />
+                  Unpin from right
+                </DropdownMenuItem>
+              ) : (
+                <DropdownMenuItem
+                  className="[&_svg]:text-neutral-500 dark:[&_svg]:text-neutral-400"
+                  onClick={onRightPin}
+                >
+                  <PinIcon />
+                  Pin to right
+                </DropdownMenuItem>
+              )}
+            </>
+          )}
+          {column.getCanHide() && (
+            <>
+              <DropdownMenuSeparator />
+              <DropdownMenuCheckboxItem
+                className="relative pr-8 pl-2 [&>span:first-child]:right-2 [&>span:first-child]:left-auto [&_svg]:text-neutral-500 dark:[&_svg]:text-neutral-400"
+                checked={!column.getIsVisible()}
+                onClick={() => column.toggleVisibility(false)}
+              >
+                <EyeOffIcon />
+                Hide column
+              </DropdownMenuCheckboxItem>
+            </>
+          )}
+        </DropdownMenuContent>
+      </DropdownMenu>
+      {/* Render any variant-provided header component from HeaderComponents. */}
+      {(() => {
+        const variant = column.columnDef.meta?.cell?.variant
+        const variantHeader = variant ? HeaderComponents[variant] : undefined
+        if (variantHeader) {
+          return variantHeader({ header, table })
+        }
+
+        return null
+      })()}
+      {header.column.getCanResize() && <DataGridColumnResizer header={header} table={table} label={label} />}
+    </>
+  )
+}
+
+const DataGridColumnResizer = React.memo(DataGridColumnResizerImpl, (prev, next) => {
+  const prevColumn = prev.header.column
+  const nextColumn = next.header.column
+
+  if (prevColumn.getIsResizing() !== nextColumn.getIsResizing() || prevColumn.getSize() !== nextColumn.getSize()) {
+    return false
+  }
+
+  if (prev.label !== next.label) {
+    return false
+  }
+
+  return true
+}) as typeof DataGridColumnResizerImpl
+
+type DataGridColumnResizerProps<TData, TValue> = {
+  label: string
+} & DataGridColumnHeaderProps<TData, TValue>
+
+function DataGridColumnResizerImpl<TData, TValue>({ header, table, label }: DataGridColumnResizerProps<TData, TValue>) {
+  const defaultColumnDef = table._getDefaultColumnDef()
+
+  const onDoubleClick = React.useCallback(() => {
+    header.column.resetSize()
+  }, [header.column])
+
+  return (
+    <div
+      role="separator"
+      aria-orientation="vertical"
+      aria-label={`Resize ${label} column`}
+      aria-valuenow={header.column.getSize()}
+      aria-valuemin={defaultColumnDef.minSize}
+      aria-valuemax={defaultColumnDef.maxSize}
+      tabIndex={0}
+      className={cn(
+        'right-0 absolute top-0 z-50 h-full w-0 touch-none select-none cursor-ew-resize focus:outline-none',
+        // visible thin line (use right positioning and a stable 1px width)
+        "before:content-[''] before:absolute before:inset-y-0 before:right-0 before:translate-x-1/2 before:w-px before:h-full before:bg-neutral-700 dark:before:bg-neutral-400 before:opacity-0 before:transition-opacity before:duration-150",
+        // large invisible hit area
+        "after:content-[''] after:absolute after:inset-y-0 after:right-0 after:translate-x-1/2 after:w-[18px] after:h-full after:bg-transparent",
+        header.column.getIsResizing()
+          ? 'before:opacity-100 before:bg-neutral-900 dark:before:bg-neutral-50'
+          : 'hover:before:opacity-100',
+      )}
+      style={{ willChange: 'transform, opacity', transform: 'translateZ(0)' }}
+      onDoubleClick={onDoubleClick}
+      onMouseDown={header.getResizeHandler()}
+      onTouchStart={header.getResizeHandler()}
+    />
+  )
+}
+
+/**
+ * Optional header components keyed by cell variant. Components receive { header, table } and
+ * should return a React node (or null). This allows the column header to render variant-specific
+ * header visuals without coupling the header implementation to variants.
+ */
+export const HeaderComponents: Record<string, (props: any) => React.ReactNode | null> = {
+  gantt: (props) => <GanttTimeline {...props} />,
+}

package/dist/frontend-core/template/src/components/ui/data-grid/data-grid-context-menu.tsx

@@ -0,0 +1,262 @@
+import { CopyIcon, EraserIcon, TrashIcon } from '@radix-ui/react-icons'
+import type { Table, TableMeta } from '@tanstack/react-table'
+
+import * as React from 'react'
+import { toast } from 'sonner'
+
+import type { UpdateCell } from '@components/ui/data-grid/data-grid-types'
+import { parseCellKey } from '@components/ui/data-grid/data-grid-utils'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@components/ui/dropdown-menu/dropdown-menu'
+
+type DataGridContextMenuProps<TData> = {
+  table: Table<TData>
+}
+
+export function DataGridContextMenu<TData>({ table }: DataGridContextMenuProps<TData>) {
+  const meta = table.options.meta
+  const contextMenu = meta?.contextMenu
+  const onContextMenuOpenChange = meta?.onContextMenuOpenChange
+  const selectionState = meta?.selectionState
+  const dataGridRef = meta?.dataGridRef
+  const onDataUpdate = meta?.onDataUpdate
+  const onRowsDelete = meta?.onRowsDelete
+
+  if (!contextMenu) {
+    return null
+  }
+
+  return (
+    <ContextMenu
+      table={table}
+      dataGridRef={dataGridRef}
+      contextMenu={contextMenu}
+      onContextMenuOpenChange={onContextMenuOpenChange}
+      selectionState={selectionState}
+      onDataUpdate={onDataUpdate}
+      onRowsDelete={onRowsDelete}
+    />
+  )
+}
+
+type ContextMenuProps<TData> = {
+  table: Table<TData>
+} & Pick<
+  TableMeta<TData>,
+  'dataGridRef' | 'onContextMenuOpenChange' | 'selectionState' | 'onDataUpdate' | 'onRowsDelete'
+> &
+  Required<Pick<TableMeta<TData>, 'contextMenu'>>
+
+const ContextMenu = React.memo(ContextMenuImpl, (prev, next) => {
+  if (prev.contextMenu.open !== next.contextMenu.open) {
+    return false
+  }
+  if (!next.contextMenu.open) {
+    return true
+  }
+  if (prev.contextMenu.x !== next.contextMenu.x) {
+    return false
+  }
+  if (prev.contextMenu.y !== next.contextMenu.y) {
+    return false
+  }
+
+  const prevSize = prev.selectionState?.selectedCells?.size ?? 0
+  const nextSize = next.selectionState?.selectedCells?.size ?? 0
+  if (prevSize !== nextSize) {
+    return false
+  }
+
+  return true
+}) as typeof ContextMenuImpl
+
+function ContextMenuImpl<TData>({
+  table,
+  dataGridRef,
+  contextMenu,
+  onContextMenuOpenChange,
+  selectionState,
+  onDataUpdate,
+  onRowsDelete,
+}: ContextMenuProps<TData>) {
+  const triggerStyle = React.useMemo<React.CSSProperties>(
+    () => ({
+      position: 'fixed',
+      left: `${contextMenu.x}px`,
+      top: `${contextMenu.y}px`,
+      width: '1px',
+      height: '1px',
+      padding: 0,
+      margin: 0,
+      border: 'none',
+      background: 'transparent',
+      pointerEvents: 'none',
+      opacity: 0,
+    }),
+    [contextMenu.x, contextMenu.y],
+  )
+
+  const onCloseAutoFocus: NonNullable<React.ComponentProps<typeof DropdownMenuContent>['onCloseAutoFocus']> =
+    React.useCallback(
+      (event) => {
+        event.preventDefault()
+        dataGridRef?.current?.focus()
+      },
+      [dataGridRef],
+    )
+
+  const onCopy = React.useCallback(async () => {
+    if (!selectionState?.selectedCells || selectionState.selectedCells.size === 0) {
+      return
+    }
+
+    const rows = table.getRowModel().rows
+    const columnIds: string[] = []
+
+    const selectedCellsArray = Array.from(selectionState.selectedCells)
+    for (const cellKey of selectedCellsArray) {
+      const { columnId } = parseCellKey(cellKey)
+      if (columnId && !columnIds.includes(columnId)) {
+        columnIds.push(columnId)
+      }
+    }
+
+    const cellData = new Map<string, string>()
+    for (const cellKey of selectedCellsArray) {
+      const { rowIndex, columnId } = parseCellKey(cellKey)
+      const row = rows[rowIndex]
+      if (row) {
+        const cell = row.getVisibleCells().find((c) => c.column.id === columnId)
+        if (cell) {
+          const value = cell.getValue()
+          cellData.set(cellKey, String(value ?? ''))
+        }
+      }
+    }
+
+    const rowIndices = new Set<number>()
+    const colIndices = new Set<number>()
+
+    for (const cellKey of selectedCellsArray) {
+      const { rowIndex, columnId } = parseCellKey(cellKey)
+      rowIndices.add(rowIndex)
+      const colIndex = columnIds.indexOf(columnId)
+      if (colIndex >= 0) {
+        colIndices.add(colIndex)
+      }
+    }
+
+    const sortedRowIndices = Array.from(rowIndices).sort((a, b) => a - b)
+    const sortedColIndices = Array.from(colIndices).sort((a, b) => a - b)
+    const sortedColumnIds = sortedColIndices.map((i) => columnIds[i])
+
+    const tsvData = sortedRowIndices
+      .map((rowIndex) =>
+        sortedColumnIds
+          .map((columnId) => {
+            const cellKey = `${rowIndex}:${columnId}`
+            return cellData.get(cellKey) ?? ''
+          })
+          .join('\t'),
+      )
+      .join('\n')
+
+    await navigator.clipboard.writeText(tsvData)
+    toast.success(
+      `${selectionState.selectedCells.size} cell${selectionState.selectedCells.size !== 1 ? 's' : ''} copied`,
+    )
+  }, [table, selectionState])
+
+  // Determine whether the selected cells are all editable. If any selected cell belongs to a non-editable column (meta.cell.editable === false), disable the Clear action.
+  const canClear = React.useMemo(() => {
+    if (!selectionState?.selectedCells || selectionState.selectedCells.size === 0) {
+      return false
+    }
+
+    const visibleCols = table.getVisibleLeafColumns()
+
+    for (const cellKey of selectionState.selectedCells) {
+      const { columnId } = parseCellKey(cellKey)
+      if (!columnId) {
+        continue
+      }
+      const col = visibleCols.find((c) => c.id === columnId)
+      const editable = (col?.columnDef as any)?.meta?.cell?.editable
+      if (editable === false) {
+        return false
+      }
+    }
+
+    return true
+  }, [selectionState, table])
+
+  const onClear = React.useCallback(() => {
+    if (!selectionState?.selectedCells || selectionState.selectedCells.size === 0) {
+      return
+    }
+
+    if (!canClear) {
+      return
+    }
+
+    const updates: UpdateCell[] = []
+
+    for (const cellKey of selectionState.selectedCells) {
+      const { rowIndex, columnId } = parseCellKey(cellKey)
+      updates.push({ rowIndex, columnId, value: '' })
+    }
+
+    onDataUpdate?.(updates)
+
+    toast.success(`${updates.length} cell${updates.length !== 1 ? 's' : ''} cleared`)
+  }, [onDataUpdate, selectionState, canClear])
+
+  const onDelete = React.useCallback(async () => {
+    if (!selectionState?.selectedCells || selectionState.selectedCells.size === 0) {
+      return
+    }
+
+    const rowIndices = new Set<number>()
+    for (const cellKey of selectionState.selectedCells) {
+      const { rowIndex } = parseCellKey(cellKey)
+      rowIndices.add(rowIndex)
+    }
+
+    const rowIndicesArray = Array.from(rowIndices).sort((a, b) => a - b)
+    const rowCount = rowIndicesArray.length
+
+    await onRowsDelete?.(rowIndicesArray)
+
+    toast.success(`${rowCount} row${rowCount !== 1 ? 's' : ''} deleted`)
+  }, [onRowsDelete, selectionState])
+
+  return (
+    <DropdownMenu open={contextMenu.open} onOpenChange={onContextMenuOpenChange}>
+      <DropdownMenuTrigger style={triggerStyle} />
+      <DropdownMenuContent data-grid-popover="" align="start" className="w-48" onCloseAutoFocus={onCloseAutoFocus}>
+        <DropdownMenuItem onSelect={onCopy}>
+          <CopyIcon />
+          Copy
+        </DropdownMenuItem>
+        <DropdownMenuItem onSelect={onClear} disabled={!canClear}>
+          <EraserIcon />
+          Clear
+        </DropdownMenuItem>
+        {onRowsDelete && (
+          <>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem variant="destructive" onSelect={onDelete}>
+              <TrashIcon />
+              Delete rows
+            </DropdownMenuItem>
+          </>
+        )}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}

package/dist/frontend-core/template/src/components/ui/data-grid/data-grid-row.tsx

@@ -0,0 +1,123 @@
+import { flexRender, type Row } from '@tanstack/react-table'
+import type { Virtualizer } from '@tanstack/react-virtual'
+
+import * as React from 'react'
+
+import type { CellPosition, RowHeightValue } from '@components/ui/data-grid/data-grid-types'
+import { getCommonPinningStyles, getLineCount } from '@components/ui/data-grid/data-grid-utils'
+import { useComposedRefs } from '@lib/compose-refs'
+import { cn } from '@lib/utils'
+
+type DataGridRowProps<TData> = {
+  row: Row<TData>
+  rowVirtualizer: Virtualizer<HTMLDivElement, Element>
+  virtualRowIndex: number
+  rowMapRef: React.RefObject<Map<number, HTMLDivElement>>
+  rowHeight: RowHeightValue
+  focusedCell: CellPosition | null
+} & React.ComponentProps<'div'>
+
+export const DataGridRow = React.memo(DataGridRowImpl, (prev, next) => {
+  if (prev.row.id !== next.row.id) {
+    return false
+  }
+
+  // Check if the actual row data has changed
+  if (prev.row.original !== next.row.original) {
+    return false
+  }
+
+  const prevRowIndex = prev.virtualRowIndex
+  const nextRowIndex = next.virtualRowIndex
+
+  const prevHasFocus = prev.focusedCell?.rowIndex === prevRowIndex
+  const nextHasFocus = next.focusedCell?.rowIndex === nextRowIndex
+
+  if (prevHasFocus !== nextHasFocus) {
+    return false
+  }
+
+  if (nextHasFocus && prevHasFocus) {
+    const prevFocusedCol = prev.focusedCell?.columnId
+    const nextFocusedCol = next.focusedCell?.columnId
+    if (prevFocusedCol !== nextFocusedCol) {
+      return false
+    }
+  }
+
+  return next.rowVirtualizer.isScrolling
+}) as typeof DataGridRowImpl
+
+function DataGridRowImpl<TData>({
+  row,
+  virtualRowIndex,
+  rowVirtualizer,
+  rowMapRef,
+  rowHeight,
+  focusedCell,
+  ref,
+  className,
+  ...props
+}: DataGridRowProps<TData>) {
+  const rowRef = useComposedRefs(ref, (node) => {
+    if (node && typeof virtualRowIndex !== 'undefined') {
+      rowVirtualizer.measureElement(node)
+      rowMapRef.current.set(virtualRowIndex, node)
+    }
+  })
+
+  const isRowSelected = row.getIsSelected()
+
+  return (
+    <div
+      key={row.id}
+      role="row"
+      aria-rowindex={virtualRowIndex + 2}
+      aria-selected={isRowSelected}
+      data-index={virtualRowIndex}
+      data-slot="grid-row"
+      ref={rowRef}
+      tabIndex={-1}
+      className={cn(
+        'absolute flex w-full border-b h-[calc(var(--line-height-sm)*(var(--line-count))+12px)]',
+        className,
+      )}
+      style={{ '--line-count': `${getLineCount(rowHeight)}` } as React.CSSProperties}
+      {...props}
+    >
+      {row.getVisibleCells().map((cell, colIndex) => {
+        const isCellFocused = focusedCell?.rowIndex === virtualRowIndex && focusedCell?.columnId === cell.column.id
+
+        return (
+          <div
+            key={cell.id}
+            role="gridcell"
+            aria-colindex={colIndex + 1}
+            data-highlighted={isCellFocused ? '' : undefined}
+            data-slot="grid-cell"
+            tabIndex={-1}
+            className={cn({
+              'border-r': cell.column.id !== 'select',
+            })}
+            style={{
+              ...getCommonPinningStyles({ column: cell.column }),
+              width: `calc(var(--col-${cell.column.id}-size) * 1px)`,
+            }}
+          >
+            {typeof cell.column.columnDef.header === 'function' ? (
+              <div
+                className={cn('size-full px-3 py-1.5', {
+                  'bg-neutral-900/10 dark:bg-neutral-50/10': isRowSelected,
+                })}
+              >
+                {flexRender(cell.column.columnDef.cell, cell.getContext())}
+              </div>
+            ) : (
+              flexRender(cell.column.columnDef.cell, cell.getContext())
+            )}
+          </div>
+        )
+      })}
+    </div>
+  )
+}