ScanHistoryTable

Design Principles

• Compact Density: Efficient space usage for scanning large lists
• Sortable Columns: Click headers to sort by date, title, or card count
• Hover Actions: Actions appear on row hover to reduce visual clutter
• Relative Dates: Human-friendly "Today", "Yesterday", "2 days ago" formatting
• Status Badges: Subtle, color-coded status indicators
• Mobile Responsive: Adapts to smaller screens with always-visible actions

Example

Usage

import { ScanHistoryTable } from '@/components/ui/ScanHistoryTable';

// Basic usage
<ScanHistoryTable
  uploads={historyUploads}
  onRename={handleRename}
  onDelete={handleDelete}
/>

Interface

interface ScanUpload {
  id: string;
  created_at: string;
  scan_title: string;
  processing_status: 'queued' | 'processing' | 'review_pending' | 'failed' | 'timeout' | 'cancelled' | 'completed';
  results?: {
    summary_image_path?: string;
    total_cards_detected?: number;
  };
  error_message?: string;
}

interface ScanHistoryTableProps {
  uploads: ScanUpload[];
  onRename?: (upload: ScanUpload) => void;
  onDelete?: (uploadId: string, title: string) => void;
}

TanStack Table Integration

// Built-in TanStack Table features
const table = useReactTable({
  data: uploads,
  columns,
  getCoreRowModel: getCoreRowModel(),
  getSortedRowModel: getSortedRowModel(),
  onSortingChange: setSorting,
  state: { sorting },
});

// Default sorting: Most recent first
const [sorting, setSorting] = useState([
  { id: 'created_at', desc: true }
]);

Column Structure

Status Styling

Best Practices

Technical Notes