Interactive Examples

Live, interactive examples showing how DocBits components look and work with real invoice, receipt, and document data.

Try the interactive tables below - click column headers to sort, use checkboxes to select rows, and interact with bulk actions and per-row menus!

Invoice Management

Complete example with sorting, pagination, row selection, bulk actions, and per-row actions.

• ✅ Click column headers to sort by Vendor, Amount, Date, or Status
• ✅ Use checkboxes to select invoices for bulk operations
• ✅ Click the menu icon on each row for per-row actions
• ✅ Use pagination to navigate through pages
• ✅ Bulk actions include Export, Delete, and Copy IDs

Document Processing Queue

Shows document processing status with OCR confidence and extraction metrics.

• ✅ Track document processing status: Queued, Processing, Completed, Failed
• ✅ View OCR confidence scores and extracted field counts
• ✅ Sort by Status, Pages, OCR Confidence, or Fields Extracted
• ✅ Select documents for batch operations (Export, Delete, Reassign)
• ✅ View individual document details via row actions

Purchase Order Matching

Shows PO to invoice matching with confidence scores.

• ✅ View PO status: Pending, Confirmed, Delivered, Cancelled
• ✅ See matched vs total invoices for each PO
• ✅ Sort by PO Number, Supplier, Amount, or Status
• ✅ Select POs for batch operations (Export, Re-match)
• ✅ View matching details and confidence scores
• ✅ Support for multiple currencies (USD, EUR, GBP)

Component Features

The examples above demonstrate the following features across different use cases:

Feature	Invoice	Documents	Purchase Orders
Sorting	✅	✅	✅
Pagination	✅	✅	✅
Row Selection	✅	✅	✅
Bulk Actions	✅	✅	✅
Row Actions	✅	✅	✅
Currency Formatting	✅	-	✅
Status Indicators	✅	✅	✅

Getting Started

See the Components section for detailed documentation:

• DocBitsTable - Full-featured table component with all features
• UnifiedTable - Simplified table for basic data display
• ColumnOrderBy - Sorting indicators and controls
• RowSelectionCheckbox - Row selection UI
• BulkActionsMenu - Bulk operations menu
• RowActionsMenu - Per-row action menus

Real-World Workflows

Invoice Processing

1. View pending invoices in the table
2. Click column headers to sort by vendor, amount, or date
3. Select multiple invoices using checkboxes
4. Use bulk actions to export or approve selected invoices
5. Use per-row menu for individual invoice actions

Document Processing

1. Monitor document processing status (queued, processing, completed, failed)
2. View OCR confidence scores and extracted field counts
3. Select documents for batch operations
4. Export completed documents or retry failed processing
5. Reassign documents to different workers

PO-Invoice Matching

1. View all purchase orders with matching status
2. See how many invoices have been matched to each PO
3. Sort by PO number, supplier, amount, or status
4. Select POs for re-matching or export
5. View detailed matching information per row

Features

All examples showcase:

• Responsive Design - Works on desktop, tablet, and mobile
• Dark Mode Support - Full light/dark theme compatibility
• Accessibility - Keyboard navigation and screen reader support
• Real Data - Realistic production-like data with multiple currencies and statuses
• Interactive Controls - Fully functional sorting, selection, pagination, and actions