@moontra/moonui-pro 2.20.1 → 2.20.3

package/src/components/data-table/index.tsx

@@ -1,845 +0,0 @@
-"use client"
-
-import React from 'react'
-import {
-  useReactTable,
-  getCoreRowModel,
-  getFilteredRowModel,
-  getPaginationRowModel,
-  getSortedRowModel,
-  ColumnDef,
-  flexRender,
-  SortingState,
-  ColumnFiltersState,
-  VisibilityState,
-  OnChangeFn,
-  Row,
-} from '@tanstack/react-table'
-import { Button } from '../ui/button'
-import { Input } from '../ui/input'
-import { Card, CardContent } from '../ui/card'
-import { 
-  ChevronLeft, 
-  ChevronRight, 
-  ChevronsLeft, 
-  ChevronsRight,
-  ChevronDown,
-  ArrowUpDown,
-  ArrowUp,
-  ArrowDown,
-  Search,
-  Filter,
-  Download,
-  Settings,
-  Lock,
-  Sparkles,
-  Loader2,
-  FileDown,
-  FileJson,
-  FileSpreadsheet
-} from 'lucide-react'
-import { cn } from '../../lib/utils'
-import { useSubscription } from '../../hooks/use-subscription'
-import { motion, AnimatePresence } from 'framer-motion'
-import { DataTableColumnToggle } from './data-table-column-toggle'
-import { DataTableBulkActions, type BulkAction } from './data-table-bulk-actions'
-import { exportData, type ExportFormat, getVisibleColumns } from './data-table-export'
-import { DataTableFilterDrawer, type FilterCondition, type FilterOperator } from './data-table-filter-drawer'
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from '../ui/dropdown-menu'
-
-interface DataTableProps<TData, TValue> {
-  columns: ColumnDef<TData, TValue>[]
-  data: TData[]
-  searchable?: boolean
-  filterable?: boolean
-  exportable?: boolean | {
-    formats?: ExportFormat[]
-    filename?: string
-    onExport?: (data: TData[], format: ExportFormat) => void
-  }
-  selectable?: boolean
-  pagination?: boolean
-  pageSize?: number
-  className?: string
-  onRowSelect?: (rows: TData[]) => void
-  onExport?: (data: TData[]) => void
-  enableExpandable?: boolean
-  renderSubComponent?: (props: { row: { original: TData; id: string } }) => React.ReactNode
-  expandedRows?: Set<string>
-  onRowExpandChange?: (expandedRows: Set<string>) => void
-  bulkActions?: BulkAction<TData>[]
-  // Additional props for compatibility
-  enableSorting?: boolean
-  enableFiltering?: boolean
-  enablePagination?: boolean
-  enableColumnVisibility?: boolean
-  enableRowSelection?: boolean
-  filterPlaceholder?: string
-  defaultPageSize?: number
-  manualPagination?: boolean
-  pageCount?: number
-  onPaginationChange?: (updater: any) => void
-  onSortingChange?: OnChangeFn<SortingState>
-  onColumnFiltersChange?: OnChangeFn<ColumnFiltersState>
-  state?: any
-  features?: {
-    sorting?: boolean
-    filtering?: boolean
-    pagination?: boolean
-    search?: boolean
-    columnVisibility?: boolean
-    rowSelection?: boolean
-    export?: boolean | string[]
-    density?: boolean
-    fullscreen?: boolean
-    print?: boolean
-  }
-  theme?: {
-    headerBg?: string
-    headerText?: string
-    borderColor?: string
-    rowHoverBg?: string
-    selectedRowBg?: string
-  }
-  texts?: {
-    searchPlaceholder?: string
-    noResults?: string
-    rowsPerPage?: string
-    selectedRows?: string
-    exportButton?: string
-    columnsButton?: string
-    densityButton?: string
-    filterButton?: string
-  }
-}
-
-export function DataTable<TData, TValue>({
-  columns: originalColumns,
-  data,
-  searchable = true,
-  filterable = true,
-  exportable = true,
-  selectable = false,
-  pagination = true,
-  pageSize = 10,
-  className,
-  onRowSelect,
-  onExport,
-  enableExpandable = false,
-  renderSubComponent,
-  expandedRows: controlledExpandedRows,
-  onRowExpandChange,
-  bulkActions = [],
-  features = {},
-  theme = {},
-  texts = {},
-  // Additional props
-  enableSorting = true,
-  enableFiltering = true,
-  enablePagination = true,
-  enableColumnVisibility = true,
-  enableRowSelection,
-  filterPlaceholder = "Search all columns...",
-  defaultPageSize,
-  manualPagination = false,
-  pageCount,
-  onPaginationChange,
-  onSortingChange,
-  onColumnFiltersChange,
-  state: externalState,
-}: DataTableProps<TData, TValue>) {
-  // Process columns to ensure they can be hidden and use custom filter
-  const columns = React.useMemo(() => {
-    return originalColumns.map(col => {
-      // Remove any enableHiding: false to avoid conflicts
-      const { enableHiding, ...restCol } = col as any;
-      return {
-        ...restCol,
-        enableHiding: true, // Force all columns to be hideable
-        filterFn: 'custom', // Use our custom filter function
-      }
-    })
-  }, [originalColumns])
-  // Check if we're in docs mode or have pro access
-  const { hasProAccess, isLoading } = useSubscription()
-  
-  // In docs mode, always show the component
-  
-  // If not in docs mode and no pro access, show upgrade prompt
-  if (!isLoading && !hasProAccess) {
-    return (
-      <Card className={cn("w-full", className)}>
-        <CardContent className="py-12 text-center">
-          <div className="max-w-md mx-auto space-y-4">
-            <div className="rounded-full bg-purple-100 dark:bg-purple-900/30 p-3 w-fit mx-auto">
-              <Lock className="h-6 w-6 text-purple-600 dark:text-purple-400" />
-            </div>
-            <div>
-              <h3 className="font-semibold text-lg mb-2">Pro Feature</h3>
-              <p className="text-muted-foreground text-sm mb-4">
-                Data Table is available exclusively to MoonUI Pro subscribers.
-              </p>
-              <div className="flex gap-3 justify-center">
-                <a href="/pricing">
-                  <Button size="sm">
-                    <Sparkles className="mr-2 h-4 w-4" />
-                    Upgrade to Pro
-                  </Button>
-                </a>
-              </div>
-            </div>
-          </div>
-        </CardContent>
-      </Card>
-    )
-  }
-  const [sorting, setSorting] = React.useState<SortingState>([])
-  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>([])
-  const [columnVisibility, setColumnVisibility] = React.useState<VisibilityState>({})
-  const [rowSelection, setRowSelection] = React.useState({})
-  const [globalFilter, setGlobalFilter] = React.useState('')
-  const [isPaginationLoading, setIsPaginationLoading] = React.useState(false)
-  const [internalExpandedRows, setInternalExpandedRows] = React.useState<Set<string>>(new Set())
-  const [filterDrawerOpen, setFilterDrawerOpen] = React.useState(false)
-
-  // Use controlled or internal expanded state
-  const expandedRows = controlledExpandedRows || internalExpandedRows
-  const setExpandedRows = onRowExpandChange ? 
-    (newExpanded: Set<string>) => onRowExpandChange(newExpanded) :
-    setInternalExpandedRows
-
-  const actualPageSize = defaultPageSize || pageSize
-  
-  // Memoize data to prevent unnecessary re-renders
-  const stableData = React.useMemo(() => data, [data])
-  
-  const table = useReactTable({
-    data: stableData,
-    columns,
-    onSortingChange: onSortingChange !== undefined ? onSortingChange : setSorting,
-    onColumnFiltersChange: onColumnFiltersChange !== undefined ? onColumnFiltersChange : setColumnFilters,
-    getCoreRowModel: getCoreRowModel(),
-    getPaginationRowModel: getPaginationRowModel(),
-    getSortedRowModel: getSortedRowModel(),
-    getFilteredRowModel: getFilteredRowModel(),
-    onColumnVisibilityChange: setColumnVisibility,
-    onRowSelectionChange: setRowSelection,
-    onGlobalFilterChange: setGlobalFilter,
-    globalFilterFn: 'includesString',
-    filterFns: {
-      custom: (row, columnId, filterValue) => {
-        if (!filterValue?.custom || !filterValue?.filters) return true
-        
-        const filters = filterValue.filters as FilterCondition[]
-        const matchAll = filterValue.matchAll !== undefined ? filterValue.matchAll : true
-        
-        // Get all filter conditions (not just for this column)
-        const allFilterResults = filters.map(filterCondition => {
-          const cellValue = row.getValue(filterCondition.column)
-          const filterVal = filterCondition.value
-
-          switch (filterCondition.operator) {
-            case 'equals':
-              return cellValue === filterVal
-            case 'notEquals':
-              return cellValue !== filterVal
-            case 'contains':
-              return String(cellValue).toLowerCase().includes(String(filterVal).toLowerCase())
-            case 'notContains':
-              return !String(cellValue).toLowerCase().includes(String(filterVal).toLowerCase())
-            case 'startsWith':
-              return String(cellValue).toLowerCase().startsWith(String(filterVal).toLowerCase())
-            case 'endsWith':
-              return String(cellValue).toLowerCase().endsWith(String(filterVal).toLowerCase())
-            case 'greaterThan':
-              return Number(cellValue) > Number(filterVal)
-            case 'lessThan':
-              return Number(cellValue) < Number(filterVal)
-            case 'greaterThanOrEqual':
-              return Number(cellValue) >= Number(filterVal)
-            case 'lessThanOrEqual':
-              return Number(cellValue) <= Number(filterVal)
-            case 'isNull':
-              return cellValue == null || cellValue === ''
-            case 'isNotNull':
-              return cellValue != null && cellValue !== ''
-            default:
-              return true
-          }
-        })
-        
-        // Apply match logic
-        if (matchAll) {
-          return allFilterResults.every(result => result)
-        } else {
-          return allFilterResults.some(result => result)
-        }
-      }
-    },
-    manualPagination,
-    pageCount,
-    state: {
-      sorting: externalState?.sorting ?? sorting,
-      columnFilters: externalState?.columnFilters ?? columnFilters,
-      columnVisibility: externalState?.columnVisibility ?? columnVisibility,
-      rowSelection: externalState?.rowSelection ?? rowSelection,
-      globalFilter: externalState?.globalFilter ?? globalFilter,
-      ...(externalState || {}),
-    },
-    initialState: {
-      pagination: {
-        pageSize: actualPageSize,
-      },
-    },
-    // Prevent re-renders on state changes
-    autoResetAll: false,
-    autoResetPageIndex: false,
-    autoResetExpanded: false,
-    getRowId: (row: TData) => (row as any).id || (row as any).orderId || Math.random().toString(),
-  })
-
-  React.useEffect(() => {
-    if (onRowSelect && selectable) {
-      const selectedRows = table.getFilteredSelectedRowModel().rows.map(row => row.original)
-      onRowSelect(selectedRows)
-    }
-  }, [rowSelection, onRowSelect, selectable, table])
-  
-  // Memoize row model to prevent unnecessary re-renders when only expanded state changes
-  const tableState = table.getState()
-  const rowModel = table.getRowModel()
-  
-  // Use a ref to track if rows actually changed
-  const rowsRef = React.useRef(rowModel.rows)
-  const rowsChanged = React.useMemo(() => {
-    const changed = rowsRef.current !== rowModel.rows
-    if (changed) {
-      rowsRef.current = rowModel.rows
-    }
-    return changed
-  }, [rowModel.rows])
-  
-  const rows = rowsRef.current
-
-  // Merge features with defaults
-  const enabledFeatures = {
-    sorting: features.sorting !== false,
-    filtering: features.filtering !== false || filterable,
-    pagination: features.pagination !== false || pagination,
-    search: features.search !== false || searchable,
-    columnVisibility: features.columnVisibility !== false,
-    rowSelection: features.rowSelection !== false || selectable,
-    export: features.export !== false || exportable,
-  }
-
-  const handleExport = async (format: ExportFormat) => {
-    const selectedRows = table.getFilteredSelectedRowModel().rows
-    const dataToExport = selectedRows.length > 0 
-      ? selectedRows.map(row => row.original)
-      : table.getFilteredRowModel().rows.map(row => row.original)
-    
-    // Use custom export handler if provided
-    if (typeof exportable === 'object' && exportable.onExport) {
-      exportable.onExport(dataToExport, format)
-      return
-    }
-    
-    // Use legacy onExport if provided
-    if (onExport) {
-      onExport(dataToExport)
-      return
-    }
-    
-    // Default export behavior
-    const filename = typeof exportable === 'object' && exportable.filename 
-      ? exportable.filename 
-      : 'data-export'
-    
-    const visibleColumns = getVisibleColumns(columns as any, columnVisibility)
-    
-    await exportData(dataToExport as Record<string, any>[], {
-      format,
-      filename,
-      columns: visibleColumns,
-      includeHeaders: true
-    })
-  }
-
-  // Parse export options
-  const exportFormats: ExportFormat[] = React.useMemo(() => {
-    if (!exportable) return []
-    if (exportable === true) return ['csv', 'json']
-    if (typeof exportable === 'object' && exportable.formats) {
-      return exportable.formats
-    }
-    return ['csv', 'json']
-  }, [exportable])
-
-  const clearRowSelection = () => {
-    table.resetRowSelection()
-  }
-
-  return (
-    <div className={cn("moonui-pro-datatable-container flex flex-col gap-4", className)}>
-      {/* Toolbar */}
-      <div className="moonui-pro-datatable-toolbar flex items-center justify-between">
-        <div className="flex items-center space-x-2">
-          {searchable && (
-            <div className="relative">
-              <span suppressHydrationWarning>
-                <Search className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
-              </span>
-              <Input
-                placeholder={filterPlaceholder}
-                value={globalFilter}
-                onChange={(e) => setGlobalFilter(e.target.value)}
-                className="pl-8 w-64"
-              />
-            </div>
-          )}
-          
-          {filterable && (
-            <Button 
-              variant="outline" 
-              size="sm"
-              onClick={() => setFilterDrawerOpen(true)}
-            >
-              <span suppressHydrationWarning><Filter className="mr-2 h-4 w-4" /></span>
-              Filters
-              {columnFilters.length > 0 && (
-                <span className="ml-2 rounded-full bg-primary px-2 py-0.5 text-xs text-primary-foreground">
-                  {columnFilters.length}
-                </span>
-              )}
-            </Button>
-          )}
-          
-          {/* Bulk actions */}
-          {selectable && bulkActions.length > 0 && (
-            <DataTableBulkActions
-              selectedRows={table.getFilteredSelectedRowModel().rows.map(row => row.original)}
-              actions={bulkActions}
-              onClearSelection={clearRowSelection}
-            />
-          )}
-        </div>
-
-        <div className="flex items-center space-x-2">
-          {/* Export dropdown */}
-          {exportable && exportFormats.length > 0 && (
-            <DropdownMenu>
-              <DropdownMenuTrigger asChild>
-                <Button variant="outline" size="sm">
-                  <span suppressHydrationWarning><Download className="mr-2 h-4 w-4" /></span>
-                  Export
-                </Button>
-              </DropdownMenuTrigger>
-              <DropdownMenuContent align="end">
-                {exportFormats.includes('csv') && (
-                  <DropdownMenuItem onClick={() => handleExport('csv')}>
-                    <FileSpreadsheet className="mr-2 h-4 w-4" />
-                    Export as CSV
-                  </DropdownMenuItem>
-                )}
-                {exportFormats.includes('json') && (
-                  <DropdownMenuItem onClick={() => handleExport('json')}>
-                    <FileJson className="mr-2 h-4 w-4" />
-                    Export as JSON
-                  </DropdownMenuItem>
-                )}
-                {exportFormats.includes('xlsx') && (
-                  <DropdownMenuItem onClick={() => handleExport('xlsx')}>
-                    <FileDown className="mr-2 h-4 w-4" />
-                    Export as Excel
-                  </DropdownMenuItem>
-                )}
-              </DropdownMenuContent>
-            </DropdownMenu>
-          )}
-          
-          {/* Column visibility toggle */}
-          <DataTableColumnToggle table={table} />
-        </div>
-      </div>
-
-      {/* Table */}
-      <div className="moonui-pro-datatable-wrapper rounded-md border overflow-hidden" style={{ contain: 'layout style' }}>
-        <div style={{ overflowX: 'auto' }}>
-          <table className="moonui-pro-datatable" style={{ width: '100%', tableLayout: 'auto' }}>
-          <thead className="moonui-data-table-header">
-            {table.getHeaderGroups().map((headerGroup) => (
-              <tr key={headerGroup.id} className="moonui-data-table-row border-b">
-                {headerGroup.headers
-                  .filter((header) => header.column.getIsVisible())
-                  .map((header) => (
-                    <th
-                      key={header.id}
-                      className="moonui-data-table-th h-12 px-4 text-left align-middle font-medium text-muted-foreground"
-                    >
-                      {header.isPlaceholder ? null : (
-                        <div
-                          className={cn(
-                            "flex items-center space-x-2",
-                            header.column.getCanSort() && "cursor-pointer select-none"
-                          )}
-                          onClick={header.column.getToggleSortingHandler()}
-                        >
-                          {flexRender(header.column.columnDef.header, header.getContext())}
-                          {header.column.getCanSort() && (
-                            <div className="ml-2">
-                              {header.column.getIsSorted() === 'asc' ? (
-                                <span suppressHydrationWarning><ArrowUp className="h-4 w-4" /></span>
-                              ) : header.column.getIsSorted() === 'desc' ? (
-                                <span suppressHydrationWarning><ArrowDown className="h-4 w-4" /></span>
-                              ) : (
-                                <span suppressHydrationWarning><ArrowUpDown className="h-4 w-4" /></span>
-                              )}
-                            </div>
-                          )}
-                        </div>
-                      )}
-                    </th>
-                  ))}
-              </tr>
-            ))}
-          </thead>
-          <tbody className="moonui-data-table-body">
-            {isPaginationLoading ? (
-              <motion.tr
-                key="loading"
-                initial={{ opacity: 0 }}
-                animate={{ opacity: 1 }}
-                exit={{ opacity: 0 }}
-                transition={{ duration: 0.2 }}
-              >
-                <td colSpan={table.getAllLeafColumns().filter(col => col.getIsVisible()).length} className="h-24 text-center">
-                  <div className="flex items-center justify-center space-x-2">
-                    <span suppressHydrationWarning><Loader2 className="h-4 w-4 animate-spin" /></span>
-                    <span className="text-sm text-muted-foreground">Loading...</span>
-                  </div>
-                </td>
-              </motion.tr>
-            ) : rows?.length ? (
-              <>
-                {rows.map((row, index) => {
-                  const rowId = (row.original as any).id || row.id
-                  const isExpanded = enableExpandable && expandedRows.has(rowId)
-                  
-                  return (
-                    <TableRow
-                      key={rowId}
-                      row={row}
-                      columns={columns}
-                      isExpanded={isExpanded}
-                      enableExpandable={enableExpandable}
-                      renderSubComponent={renderSubComponent}
-                      visibilityState={table.getState().columnVisibility}
-                    />
-                  );
-                })}
-              </>
-            ) : (
-              <motion.tr
-                key="no-results"
-                initial={{ opacity: 0 }}
-                animate={{ opacity: 1 }}
-                exit={{ opacity: 0 }}
-                transition={{ duration: 0.2 }}
-              >
-                <td colSpan={table.getAllLeafColumns().filter(col => col.getIsVisible()).length} className="h-24 text-center">
-                  No results found.
-                </td>
-              </motion.tr>
-            )}
-          </tbody>
-        </table>
-        </div>
-      </div>
-
-      {/* Pagination */}
-      {pagination && (
-        <div className="flex items-center justify-between px-2">
-          <div className="flex-1 text-sm text-muted-foreground">
-            {selectable && table.getFilteredSelectedRowModel().rows.length > 0 && (
-              <span>
-                {table.getFilteredSelectedRowModel().rows.length} of{" "}
-                {table.getFilteredRowModel().rows.length} row(s) selected.
-              </span>
-            )}
-          </div>
-          <div className="flex items-center space-x-6 lg:space-x-8">
-            <div className="flex items-center space-x-2">
-              <p className="text-sm font-medium">Rows per page</p>
-              <select
-                value={table.getState().pagination.pageSize}
-                onChange={async (e) => {
-                  setIsPaginationLoading(true)
-                  await new Promise(resolve => setTimeout(resolve, 300))
-                  table.setPageSize(Number(e.target.value))
-                  setIsPaginationLoading(false)
-                }}
-                className="h-8 w-[70px] rounded border border-input bg-background px-3 py-1 text-sm"
-                disabled={isPaginationLoading}
-              >
-                {[10, 20, 30, 40, 50].map((pageSize) => (
-                  <option key={pageSize} value={pageSize}>
-                    {pageSize}
-                  </option>
-                ))}
-              </select>
-            </div>
-            <div className="flex w-[100px] items-center justify-center text-sm font-medium">
-              Page {table.getState().pagination.pageIndex + 1} of{" "}
-              {table.getPageCount()}
-            </div>
-            <div className="flex items-center space-x-2">
-              <Button
-                variant="outline"
-                className="hidden h-8 w-8 p-0 lg:flex"
-                onClick={async () => {
-                  if (onPaginationChange) {
-                    onPaginationChange({ pageIndex: 0, pageSize: table.getState().pagination.pageSize })
-                  } else {
-                    setIsPaginationLoading(true)
-                    await new Promise(resolve => setTimeout(resolve, 300))
-                    table.setPageIndex(0)
-                    setIsPaginationLoading(false)
-                  }
-                }}
-                disabled={!table.getCanPreviousPage() || isPaginationLoading}
-              >
-                <span suppressHydrationWarning><ChevronsLeft className="h-4 w-4" /></span>
-              </Button>
-              <Button
-                variant="outline"
-                className="h-8 w-8 p-0"
-                onClick={async () => {
-                  if (onPaginationChange) {
-                    const currentIndex = table.getState().pagination.pageIndex
-                    onPaginationChange({ pageIndex: currentIndex - 1, pageSize: table.getState().pagination.pageSize })
-                  } else {
-                    setIsPaginationLoading(true)
-                    await new Promise(resolve => setTimeout(resolve, 300))
-                    table.previousPage()
-                    setIsPaginationLoading(false)
-                  }
-                }}
-                disabled={!table.getCanPreviousPage() || isPaginationLoading}
-              >
-                <span suppressHydrationWarning><ChevronLeft className="h-4 w-4" /></span>
-              </Button>
-              <Button
-                variant="outline"
-                className="h-8 w-8 p-0"
-                onClick={async () => {
-                  setIsPaginationLoading(true)
-                  await new Promise(resolve => setTimeout(resolve, 300))
-                  table.nextPage()
-                  setIsPaginationLoading(false)
-                }}
-                disabled={!table.getCanNextPage() || isPaginationLoading}
-              >
-                <span suppressHydrationWarning><ChevronRight className="h-4 w-4" /></span>
-              </Button>
-              <Button
-                variant="outline"
-                className="hidden h-8 w-8 p-0 lg:flex"
-                onClick={async () => {
-                  setIsPaginationLoading(true)
-                  await new Promise(resolve => setTimeout(resolve, 300))
-                  table.setPageIndex(table.getPageCount() - 1)
-                  setIsPaginationLoading(false)
-                }}
-                disabled={!table.getCanNextPage() || isPaginationLoading}
-              >
-                <span suppressHydrationWarning><ChevronsRight className="h-4 w-4" /></span>
-              </Button>
-            </div>
-          </div>
-        </div>
-      )}
-
-      {/* Filter Drawer */}
-      {filterable && (
-        <DataTableFilterDrawer
-          table={table}
-          open={filterDrawerOpen}
-          onOpenChange={setFilterDrawerOpen}
-        />
-      )}
-    </div>
-  )
-}
-
-/**
- * Helper function to create an expandable column
- * @param expandedRows - Set of expanded row IDs
- * @param onToggle - Function to toggle row expansion
- * @returns ColumnDef for expandable rows
- */
-export function getExpandableColumn<TData>(
-  expandedRows: Set<string>,
-  onToggle: (id: string) => void
-): ColumnDef<TData, any> {
-  return {
-    id: "expander",
-    header: () => null,
-    size: 50,
-    cell: ({ row }) => {
-      const rowId = (row.original as any).id || row.id;
-      const isExpanded = expandedRows.has(rowId);
-      
-      return (
-        <button
-          onClick={(e) => {
-            e.stopPropagation();
-            onToggle(rowId);
-          }}
-          className="p-2 hover:bg-muted rounded-md transition-colors"
-          aria-label={isExpanded ? "Collapse row" : "Expand row"}
-        >
-          <span suppressHydrationWarning>
-            {isExpanded ? (
-              <ChevronDown className="h-4 w-4 text-muted-foreground" />
-            ) : (
-              <ChevronRight className="h-4 w-4 text-muted-foreground" />
-            )}
-          </span>
-        </button>
-      );
-    },
-  };
-}
-
-/**
- * Hook for managing expandable rows
- * @param initialExpanded - Initial set of expanded row IDs
- * @returns Object with expandedRows, toggleRow, and expandAll/collapseAll functions
- */
-export function useExpandableRows(initialExpanded: Set<string> = new Set()) {
-  const [expandedRows, setExpandedRows] = React.useState<Set<string>>(initialExpanded);
-
-  const toggleRow = React.useCallback((id: string) => {
-    setExpandedRows(prev => {
-      const newExpanded = new Set(prev);
-      if (newExpanded.has(id)) {
-        newExpanded.delete(id);
-      } else {
-        newExpanded.add(id);
-      }
-      return newExpanded;
-    });
-  }, []);
-
-  const expandAll = React.useCallback((rowIds: string[]) => {
-    setExpandedRows(new Set(rowIds));
-  }, []);
-
-  const collapseAll = React.useCallback(() => {
-    setExpandedRows(new Set());
-  }, []);
-
-  return {
-    expandedRows,
-    setExpandedRows,
-    toggleRow,
-    expandAll,
-    collapseAll,
-  };
-}
-
-// Memoized table row component
-interface TableRowProps {
-  row: Row<any>
-  columns: ColumnDef<any, any>[]
-  isExpanded: boolean
-  enableExpandable: boolean
-  renderSubComponent?: (props: { row: { original: any; id: string } }) => React.ReactNode
-  visibilityState: Record<string, boolean>
-}
-
-const TableRow = React.memo(({ 
-  row, 
-  columns, 
-  isExpanded, 
-  enableExpandable,
-  renderSubComponent,
-  visibilityState 
-}: TableRowProps) => {
-  const rowId = (row.original as any).id || row.id
-  
-  return (
-    <>
-      <tr
-        className={cn(
-          "border-b transition-colors hover:bg-muted/50",
-          row.getIsSelected() && "bg-muted",
-          isExpanded && "border-b-0"
-        )}
-      >
-        {row.getAllCells()
-          .filter((cell) => {
-            // Manual visibility check
-            const isVisible = visibilityState[cell.column.id] !== false;
-            return isVisible;
-          })
-          .map((cell) => {
-            return (
-              <td key={cell.id} className="moonui-data-table-td p-4 align-middle">
-                {flexRender(cell.column.columnDef.cell, cell.getContext())}
-              </td>
-            );
-          })}
-      </tr>
-      
-      {isExpanded && renderSubComponent && (
-        <tr className="border-b">
-          <td colSpan={row.getAllCells().filter(cell => 
-            visibilityState[cell.column.id] !== false
-          ).length || 1} className="p-0 overflow-hidden">
-            <div 
-              className="transition-all duration-300 ease-out"
-              style={{
-                maxHeight: isExpanded ? '1000px' : '0',
-                opacity: isExpanded ? 1 : 0,
-              }}
-            >
-              <div className="border-t border-border/50">
-                {renderSubComponent({ row: { original: row.original, id: rowId } })}
-              </div>
-            </div>
-          </td>
-        </tr>
-      )}
-    </>
-  )
-}, (prevProps, nextProps) => {
-  // Custom comparison - only re-render if row data, expanded state, or visibility changed
-  const prevRowId = (prevProps.row.original as any).id || prevProps.row.id
-  const nextRowId = (nextProps.row.original as any).id || nextProps.row.id
-  
-  // Include visibility state in comparison
-  const prevVisibilityKeys = Object.keys(prevProps.visibilityState).sort().join(',')
-  const nextVisibilityKeys = Object.keys(nextProps.visibilityState).sort().join(',')
-  const prevVisibilityValues = Object.values(prevProps.visibilityState).join(',')
-  const nextVisibilityValues = Object.values(nextProps.visibilityState).join(',')
-  
-  return prevRowId === nextRowId && 
-         prevProps.isExpanded === nextProps.isExpanded &&
-         prevProps.row.getIsSelected() === nextProps.row.getIsSelected() &&
-         prevVisibilityKeys === nextVisibilityKeys &&
-         prevVisibilityValues === nextVisibilityValues
-})
-
-TableRow.displayName = 'TableRow'
-
-// Re-export types for convenience
-export { type ColumnDef } from "@tanstack/react-table";
-export type { BulkAction } from './data-table-bulk-actions';
-export type { ExportFormat } from './data-table-export';
-export type { FilterCondition, FilterOperator } from './data-table-filter-drawer';