Quarry Data Table
A compact financial transaction table designed for fintech dashboards and banking applications.
Features
- 8 sample financial transactions with realistic data
- 6 columns: Transaction ID, Date, Description, Category, Amount, Status
- Color-coded category badges (Transfer, Payment, Deposit, Withdrawal, Fee, Refund)
- Green/red amount indicators with directional arrows for credit/debit
- Status dots: Completed (green), Pending (amber), Failed (red)
- Sortable column headers with ArrowUpDown icons
- Monospace font for transaction IDs and amounts
- Tabular number formatting for aligned decimals
- Filter and Export action buttons
- Pagination footer with Previous/Next controls
- Legend bar for credit/debit indicators
- Warm stone (#FAF9F6) light mode background
- Deep stone (#1C1917) dark mode background
- Muted olive (#5C6247) accent for transaction IDs
- WCAG AA compliant color contrast
- Semantic HTML with proper table structure and aria-labels
Usage
import RegistryItem from './registry-item';
export default function Page() {
return <RegistryItem />;
}
Customization
- Replace sample transactions with real data from your API
- Add or remove columns by editing the table head and body
- Modify category colors in the
categoryConfig object
- Change the amount formatting in
formatAmount()
- Wire up Filter/Export buttons to your data layer
- Add actual sorting logic to the column header buttons
- Connect pagination buttons to your data source
