@startsimpli/ui 0.1.0

package/src/components/unified-table/components/DataTableCore/index.tsx

@@ -0,0 +1,473 @@
+'use client'
+
+import { useState, useCallback } from 'react'
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '../../../ui/table'
+import { Checkbox } from '../../../ui/checkbox'
+import { Button } from '../../../ui/button'
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuTrigger } from '../../../ui/dropdown-menu'
+import { ArrowUpDown, ArrowUp, ArrowDown, MoreHorizontal, Loader2, GripVertical } from 'lucide-react'
+import { DragDropContext, Droppable, Draggable, DropResult, DragStart } from '@hello-pangea/dnd'
+import { ColumnConfig, RowAction } from '../../types'
+import { InlineEditCell } from '../InlineEditCell'
+import { cn } from '../../../../lib/utils'
+
+interface DataTableCoreProps<TData> {
+  data: TData[]
+  columns: ColumnConfig<TData>[]
+  getRowId: (row: TData) => string
+
+  // Selection
+  selectionEnabled?: boolean
+  selectedIds?: Set<string>
+  onToggleRow?: (id: string) => void
+  onToggleAll?: () => void
+  allRowsSelected?: boolean
+  renderSelectionCell?: (row: TData) => React.ReactNode
+
+  // Sorting
+  sortingEnabled?: boolean
+  sortBy?: string | null
+  sortDirection?: 'asc' | 'desc'
+  onSort?: (columnId: string) => void
+
+  // Column Reordering
+  columnReorderEnabled?: boolean
+  onColumnDragEnd?: (result: DropResult) => void
+
+  // Column Resizing
+  columnResizeEnabled?: boolean
+  columnWidths?: { [columnId: string]: number }
+  onColumnResizeStart?: (columnId: string, startX: number, startWidth: number) => void
+  isResizing?: boolean
+
+  // Inline Editing
+  inlineEditEnabled?: boolean
+  onCellEdit?: (rowId: string, columnId: string, value: any, row: TData) => Promise<void>
+
+  // Row Actions
+  rowActions?: RowAction<TData>[]
+  onRowClick?: (row: TData) => void
+
+  // Loading
+  loadingRows?: Set<string>
+
+  className?: string
+}
+
+export function DataTableCore<TData>({
+  data,
+  columns,
+  getRowId,
+  selectionEnabled,
+  selectedIds = new Set(),
+  onToggleRow,
+  onToggleAll,
+  allRowsSelected,
+  renderSelectionCell,
+  sortingEnabled,
+  sortBy,
+  sortDirection,
+  onSort,
+  columnReorderEnabled,
+  onColumnDragEnd,
+  columnResizeEnabled,
+  columnWidths = {},
+  onColumnResizeStart,
+  isResizing,
+  inlineEditEnabled,
+  onCellEdit,
+  rowActions,
+  onRowClick,
+  loadingRows = new Set(),
+  className,
+}: DataTableCoreProps<TData>) {
+  // State for tracking which cell is being edited
+  const [editingCell, setEditingCell] = useState<{ rowId: string; columnId: string } | null>(null)
+
+  // State for tracking if a column is being dragged (to disable sorting during drag)
+  const [isDraggingColumn, setIsDraggingColumn] = useState(false)
+
+  // Drag handlers
+  const handleDragStart = useCallback((_: DragStart) => {
+    setIsDraggingColumn(true)
+  }, [])
+
+  const handleDragEnd = useCallback((result: DropResult) => {
+    setIsDraggingColumn(false)
+    onColumnDragEnd?.(result)
+  }, [onColumnDragEnd])
+
+  // Get effective column width (resized or default)
+  const getEffectiveWidth = (column: ColumnConfig<TData>) => {
+    if (columnResizeEnabled && columnWidths[column.id]) {
+      return columnWidths[column.id]
+    }
+    return column.width
+  }
+
+  // Resize handle with stable callback reference
+  const handleResizeMouseDown = useCallback((columnId: string, e: React.MouseEvent | React.PointerEvent) => {
+    e.stopPropagation()
+    e.preventDefault()
+    const th = (e.target as HTMLElement).closest('th')
+    if (th && onColumnResizeStart) {
+      onColumnResizeStart(columnId, e.clientX, th.offsetWidth)
+    }
+  }, [onColumnResizeStart])
+
+  // Resize handle component - wider hit area for easier grabbing
+  const renderResizeHandle = (columnId: string) => {
+    if (!columnResizeEnabled) return null
+
+    return (
+      <div
+        data-resize-handle="true"
+        className="absolute right-0 top-0 h-full w-5 cursor-col-resize z-50 flex items-center justify-center group/resize pointer-events-auto"
+        style={{ marginRight: '-10px' }}
+        onMouseDown={(e) => handleResizeMouseDown(columnId, e)}
+        onPointerDown={(e) => handleResizeMouseDown(columnId, e)}
+        onDragStart={(e) => e.preventDefault()}
+      >
+        {/* Visible indicator line */}
+        <div className="w-[3px] h-full bg-transparent group-hover/resize:bg-primary transition-colors rounded-full" />
+      </div>
+    )
+  }
+
+  const renderCellContent = (column: ColumnConfig<TData>, row: TData) => {
+    if (column.cell) {
+      return column.cell(row)
+    }
+
+    if (column.accessorFn) {
+      return column.accessorFn(row)
+    }
+
+    if (column.accessorKey) {
+      const value = (row as any)[column.accessorKey]
+      return value !== null && value !== undefined ? String(value) : '-'
+    }
+
+    return '-'
+  }
+
+  // Sort indicator component for cleaner rendering
+  const SortIndicator = ({ columnId }: { columnId: string }) => {
+    const isSorted = sortBy === columnId
+    const direction = isSorted ? sortDirection : null
+
+    if (direction === 'asc') {
+      return <ArrowUp className="ml-2 h-4 w-4" />
+    } else if (direction === 'desc') {
+      return <ArrowDown className="ml-2 h-4 w-4" />
+    }
+    return <ArrowUpDown className="ml-2 h-4 w-4 opacity-50" />
+  }
+
+  // Handle sort click - disabled during column dragging
+  const handleSortClick = useCallback((columnId: string) => {
+    if (isDraggingColumn) return // Don't sort while dragging columns
+    onSort?.(columnId)
+  }, [isDraggingColumn, onSort])
+
+  const renderHeader = (column: ColumnConfig<TData>, inDragContext = false) => {
+    if (typeof column.header === 'function') {
+      return column.header({})
+    }
+
+    // In drag context, render a simpler header (sorting handled separately)
+    if (inDragContext) {
+      return <span>{column.header}</span>
+    }
+
+    if (sortingEnabled && column.sortable !== false) {
+      return (
+        <Button
+          variant="ghost"
+          onClick={() => handleSortClick(column.id)}
+          className="-ml-4 h-8 hover:bg-transparent"
+        >
+          {column.header}
+          <SortIndicator columnId={column.id} />
+        </Button>
+      )
+    }
+
+    return column.header
+  }
+
+  const renderColumnHeaders = () => {
+    if (columnReorderEnabled && onColumnDragEnd) {
+      return (
+        <DragDropContext onDragStart={handleDragStart} onDragEnd={handleDragEnd}>
+          <TableHeader>
+            <Droppable droppableId="columns" direction="horizontal">
+              {(provided) => (
+                <TableRow
+                  ref={provided.innerRef}
+                  {...provided.droppableProps}
+                >
+                  {/* Selection column */}
+                  {selectionEnabled && (
+                    <TableHead className="w-12">
+                      <Checkbox
+                        checked={allRowsSelected}
+                        onCheckedChange={onToggleAll}
+                        aria-label="Select all"
+                      />
+                    </TableHead>
+                  )}
+
+                  {/* Draggable data columns */}
+                  {columns.map((column, index) => (
+                    <Draggable key={column.id} draggableId={column.id} index={index}>
+                      {(provided, snapshot) => (
+                        <TableHead
+                          ref={provided.innerRef}
+                          {...provided.draggableProps}
+                          style={{
+                            ...provided.draggableProps.style,
+                            width: getEffectiveWidth(column),
+                            minWidth: column.minWidth,
+                            maxWidth: column.maxWidth,
+                          }}
+                          className={cn(
+                            'relative group overflow-visible',
+                            snapshot.isDragging && 'bg-primary/10 shadow-lg ring-2 ring-primary/20 z-50',
+                            columnResizeEnabled && 'select-none'
+                          )}
+                        >
+                          {/* Drag handle area - leaves space for resize handle on the right */}
+                          <div
+                            {...provided.dragHandleProps}
+                            className={cn(
+                              'flex items-center gap-2 cursor-grab active:cursor-grabbing',
+                              'hover:bg-muted/50 rounded px-1 -mx-1 py-1 transition-colors',
+                              columnResizeEnabled && 'pr-4'
+                            )}
+                          >
+                            <GripVertical className="h-4 w-4 text-muted-foreground flex-shrink-0" />
+                            {/* Sortable header text */}
+                            <div
+                              className="flex-1 flex items-center"
+                              onClick={(e) => {
+                                // Only trigger sort if not dragging and column is sortable
+                                if (!snapshot.isDragging && sortingEnabled && column.sortable !== false) {
+                                  e.stopPropagation()
+                                  handleSortClick(column.id)
+                                }
+                              }}
+                            >
+                              {renderHeader(column, true)}
+                              {sortingEnabled && column.sortable !== false && (
+                                <SortIndicator columnId={column.id} />
+                              )}
+                            </div>
+                          </div>
+                          {renderResizeHandle(column.id)}
+                        </TableHead>
+                      )}
+                    </Draggable>
+                  ))}
+                  {provided.placeholder}
+
+                  {/* Actions column */}
+                  {rowActions && rowActions.length > 0 && (
+                    <TableHead className="w-12">
+                      <span className="sr-only">Actions</span>
+                    </TableHead>
+                  )}
+                </TableRow>
+              )}
+            </Droppable>
+          </TableHeader>
+        </DragDropContext>
+      )
+    }
+
+    // Standard non-draggable headers
+    return (
+      <TableHeader>
+        <TableRow>
+          {/* Selection column */}
+          {selectionEnabled && (
+            <TableHead className="w-12">
+              <Checkbox
+                checked={allRowsSelected}
+                onCheckedChange={onToggleAll}
+                aria-label="Select all"
+              />
+            </TableHead>
+          )}
+
+          {/* Data columns */}
+          {columns.map((column) => (
+            <TableHead
+              key={column.id}
+              className={cn('relative group overflow-visible', columnResizeEnabled && 'select-none')}
+              style={{
+                width: getEffectiveWidth(column),
+                minWidth: column.minWidth,
+                maxWidth: column.maxWidth,
+              }}
+            >
+              {renderHeader(column)}
+              {renderResizeHandle(column.id)}
+            </TableHead>
+          ))}
+
+          {/* Actions column */}
+          {rowActions && rowActions.length > 0 && (
+            <TableHead className="w-12">
+              <span className="sr-only">Actions</span>
+            </TableHead>
+          )}
+        </TableRow>
+      </TableHeader>
+    )
+  }
+
+  return (
+    <div className={cn('rounded-md border', className)}>
+      <Table>
+        {renderColumnHeaders()}
+
+        <TableBody>
+          {data.length === 0 ? (
+            <TableRow>
+              <TableCell
+                colSpan={columns.length + (selectionEnabled ? 1 : 0) + (rowActions ? 1 : 0)}
+                className="h-24 text-center"
+              >
+                No results found.
+              </TableCell>
+            </TableRow>
+          ) : (
+            data.map((row, rowIndex) => {
+              const rowId = getRowId(row)
+              const isSelected = selectedIds.has(rowId)
+              const isLoading = loadingRows.has(rowId)
+
+              return (
+                <TableRow
+                  key={rowId}
+                  data-row-index={rowIndex}
+                  data-state={isSelected && 'selected'}
+                  onClick={() => onRowClick?.(row)}
+                  tabIndex={0}
+                  className={cn(
+                    onRowClick && 'cursor-pointer hover:bg-muted/50',
+                    isLoading && 'opacity-50'
+                  )}
+                >
+                  {/* Selection cell */}
+                  {selectionEnabled && (
+                    <TableCell onClick={(e) => e.stopPropagation()}>
+                      <div className="flex items-center gap-1">
+                        <Checkbox
+                          checked={isSelected}
+                          onCheckedChange={() => onToggleRow?.(rowId)}
+                          aria-label="Select row"
+                        />
+                        {renderSelectionCell?.(row)}
+                      </div>
+                    </TableCell>
+                  )}
+
+                  {/* Data cells */}
+                  {columns.map((column) => {
+                    const isEditing = editingCell?.rowId === rowId && editingCell?.columnId === column.id
+                    const canEdit = inlineEditEnabled && column.editable && onCellEdit
+
+                    // Get the cell value for editing
+                    const getCellValue = () => {
+                      if (column.accessorFn) return column.accessorFn(row)
+                      if (column.accessorKey) {
+                        const keys = column.accessorKey.split('.')
+                        return keys.reduce((obj, key) => obj?.[key], row as any)
+                      }
+                      return undefined
+                    }
+
+                    return (
+                      <TableCell
+                        key={column.id}
+                        style={{
+                          width: getEffectiveWidth(column),
+                          minWidth: column.minWidth,
+                          maxWidth: column.maxWidth,
+                        }}
+                        className={cn(
+                          canEdit && !isEditing && 'cursor-pointer hover:bg-muted/50'
+                        )}
+                        onClick={(e) => {
+                          if (canEdit && !isEditing) {
+                            e.stopPropagation()
+                            setEditingCell({ rowId, columnId: column.id })
+                          }
+                        }}
+                      >
+                        {isEditing ? (
+                          <InlineEditCell
+                            value={getCellValue()}
+                            columnId={column.id}
+                            rowId={rowId}
+                            editType={column.editType}
+                            editOptions={column.editOptions}
+                            validate={column.validate ? (v) => column.validate!(v, row) : undefined}
+                            onSave={async (value) => {
+                              await onCellEdit!(rowId, column.id, value, row)
+                              setEditingCell(null)
+                            }}
+                            onCancel={() => setEditingCell(null)}
+                          />
+                        ) : (
+                          <>
+                            {isLoading && <Loader2 className="h-4 w-4 animate-spin inline-block mr-2" />}
+                            {renderCellContent(column, row)}
+                          </>
+                        )}
+                      </TableCell>
+                    )
+                  })}
+
+                  {/* Actions cell */}
+                  {rowActions && rowActions.length > 0 && (
+                    <TableCell onClick={(e) => e.stopPropagation()}>
+                      <DropdownMenu>
+                        <DropdownMenuTrigger asChild>
+                          <Button variant="ghost" className="h-8 w-8 p-0">
+                            <span className="sr-only">Open menu</span>
+                            <MoreHorizontal className="h-4 w-4" />
+                          </Button>
+                        </DropdownMenuTrigger>
+                        <DropdownMenuContent align="end">
+                          <DropdownMenuLabel>Actions</DropdownMenuLabel>
+                          {rowActions.map((action, idx) => {
+                            const isDisabled = action.disabled?.(row) || false
+
+                            return (
+                              <DropdownMenuItem
+                                key={action.id}
+                                onClick={() => !isDisabled && action.onClick(row)}
+                                disabled={isDisabled}
+                                className={cn(action.destructive && 'text-red-600')}
+                              >
+                                {action.icon && <action.icon className="mr-2 h-4 w-4" />}
+                                {action.label}
+                              </DropdownMenuItem>
+                            )
+                          })}
+                        </DropdownMenuContent>
+                      </DropdownMenu>
+                    </TableCell>
+                  )}
+                </TableRow>
+              )
+            })
+          )}
+        </TableBody>
+      </Table>
+    </div>
+  )
+}

package/src/components/unified-table/components/InlineEditCell/index.tsx

@@ -0,0 +1,159 @@
+'use client'
+
+import { useState, useRef, useEffect, useCallback } from 'react'
+import { Input } from '../../../ui/input'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '../../../ui/select'
+import { Check, X, Loader2 } from 'lucide-react'
+import { cn } from '../../../../lib/utils'
+
+interface InlineEditCellProps {
+  value: any
+  columnId: string
+  rowId: string
+  editType?: 'text' | 'number' | 'select' | 'date'
+  editOptions?: string[]
+  onSave: (value: any) => Promise<void>
+  onCancel: () => void
+  validate?: (value: any) => string | null
+}
+
+export function InlineEditCell({
+  value: initialValue,
+  columnId,
+  rowId,
+  editType = 'text',
+  editOptions = [],
+  onSave,
+  onCancel,
+  validate,
+}: InlineEditCellProps) {
+  const [value, setValue] = useState(initialValue ?? '')
+  const [error, setError] = useState<string | null>(null)
+  const [isSaving, setIsSaving] = useState(false)
+  const inputRef = useRef<HTMLInputElement>(null)
+
+  // Focus the input on mount
+  useEffect(() => {
+    if (inputRef.current) {
+      inputRef.current.focus()
+      inputRef.current.select()
+    }
+  }, [])
+
+  // Handle save
+  const handleSave = useCallback(async () => {
+    // Validate if validator provided
+    if (validate) {
+      const validationError = validate(value)
+      if (validationError) {
+        setError(validationError)
+        return
+      }
+    }
+
+    setIsSaving(true)
+    setError(null)
+
+    try {
+      await onSave(value)
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to save')
+      setIsSaving(false)
+    }
+  }, [value, validate, onSave])
+
+  // Handle keyboard events
+  const handleKeyDown = useCallback((e: React.KeyboardEvent) => {
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault()
+      handleSave()
+    } else if (e.key === 'Escape') {
+      e.preventDefault()
+      onCancel()
+    }
+  }, [handleSave, onCancel])
+
+  // Render select editor
+  if (editType === 'select') {
+    return (
+      <div className="flex items-center gap-1">
+        <Select
+          value={String(value)}
+          onValueChange={(newValue) => {
+            setValue(newValue)
+            // Auto-save on select
+            onSave(newValue)
+          }}
+        >
+          <SelectTrigger className="h-8 w-full">
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            {editOptions.map((option) => (
+              <SelectItem key={option} value={option}>
+                {option}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+        <button
+          onClick={onCancel}
+          className="p-1 hover:bg-muted rounded"
+          disabled={isSaving}
+        >
+          <X className="h-4 w-4 text-muted-foreground" />
+        </button>
+      </div>
+    )
+  }
+
+  // Render text/number/date editor
+  return (
+    <div className="flex flex-col gap-1">
+      <div className="flex items-center gap-1">
+        <Input
+          ref={inputRef}
+          type={editType === 'number' ? 'number' : editType === 'date' ? 'date' : 'text'}
+          value={value}
+          onChange={(e) => {
+            setValue(e.target.value)
+            setError(null)
+          }}
+          onKeyDown={handleKeyDown}
+          className={cn(
+            'h-8 w-full',
+            error && 'border-red-500 focus-visible:ring-red-500'
+          )}
+          disabled={isSaving}
+        />
+        <button
+          onClick={handleSave}
+          className="p-1 hover:bg-green-100 rounded"
+          disabled={isSaving}
+        >
+          {isSaving ? (
+            <Loader2 className="h-4 w-4 animate-spin text-muted-foreground" />
+          ) : (
+            <Check className="h-4 w-4 text-green-600" />
+          )}
+        </button>
+        <button
+          onClick={onCancel}
+          className="p-1 hover:bg-red-100 rounded"
+          disabled={isSaving}
+        >
+          <X className="h-4 w-4 text-red-600" />
+        </button>
+      </div>
+      {error && (
+        <span className="text-xs text-red-500">{error}</span>
+      )}
+    </div>
+  )
+}