PaymentQueueTable
High-density payment queue table with bulk-select checkboxes, priority accents, approve/reject/view actions, and pagination — composes PaymentStatusBadge and ClearingNetworkIndicator per row
import { PaymentQueueTable } from "@danagraph/design-system/finance"Props
| Prop | Type | Default | Description |
|---|---|---|---|
paymentsreq | PaymentQueueEntry[] | — | Queue entries — id, reference, beneficiary, amount, status, plus optional network, counterpartyId, valueDate, submittedAt, priority |
currency | string | — | Default ISO 4217 currency for entries without one |
locale | string | — | BCP 47 locale override |
label | string | Payment Queue | Accessible region/table label |
density | 'compact' | 'default' | 'spacious' | default | Row height / padding density |
showHeaders | boolean | true | Show column headers |
selectable | boolean | false | Enable bulk-select checkboxes |
onSelectionChange | (selectedIds: string[]) => void | — | Called when the selection set changes |
showActions | boolean | false | Show approve/reject/view action buttons column |
onAction | (action: 'approve' | 'reject' | 'view', paymentId: string) => void | — | Called when an action button is clicked |
totalCount | number | — | Total items in the full dataset — enables the pagination footer |
page | number | 1 | Current page (1-based) |
pageSize | number | 20 | Items per page |
onPageChange | (page: number) => void | — | Pagination callback — required for the footer to render |
style | CSSProperties | — | Style override |
paymentsrequiredPaymentQueueEntry[]Default —Queue entries — id, reference, beneficiary, amount, status, plus optional network, counterpartyId, valueDate, submittedAt, priority
currencystringDefault —Default ISO 4217 currency for entries without one
localestringDefault —BCP 47 locale override
labelstringDefault Payment QueueAccessible region/table label
density'compact' | 'default' | 'spacious'Default defaultRow height / padding density
showHeadersbooleanDefault trueShow column headers
selectablebooleanDefault falseEnable bulk-select checkboxes
onSelectionChange(selectedIds: string[]) => voidDefault —Called when the selection set changes
showActionsbooleanDefault falseShow approve/reject/view action buttons column
onAction(action: 'approve' | 'reject' | 'view', paymentId: string) => voidDefault —Called when an action button is clicked
totalCountnumberDefault —Total items in the full dataset — enables the pagination footer
pagenumberDefault 1Current page (1-based)
pageSizenumberDefault 20Items per page
onPageChange(page: number) => voidDefault —Pagination callback — required for the footer to render
styleCSSPropertiesDefault —Style override
Accessibility
- Wrapped in role="region" with an aria-label; the table itself carries the same label.
- Select-all and per-row checkboxes have explicit aria-labels; selected rows set aria-selected.
- Approve/reject/view buttons are icon-only glyphs with per-payment aria-labels — ensure 44px touch targets on mobile.
- Blocked payments (on_hold/failed/recalled) get an agency-subtle row tint in addition to the status badge — never color-only.
Table activates horizontal scroll on mobile. Action buttons are compact glyphs — enforce 44px touch targets when showActions is enabled.
This component was designed to express:
Explore Related
Queued payment list with priority ordering, amount, and approval status
Payment lifecycle status badge covering the full payment state machine from pending through settlement — distinct from StatusBadge (compliance), with temporal/agency color semantics for in-flight vs. blocked payments
Clearing network chip with optional message type and settlement type — gold = high-value RTGS (CHIPS, Fedwire, LVTS), blue = messaging networks (SWIFT, SEPA, CHAPS, TARGET2), green = instant networks (FPS, RTP)
Compact pagination for large financial datasets