Data display

Billing Ledger Table

Billing Ledger Table: Filter invoice statuses, sort amounts, and recalculate the visible ledger total.

StatusSort7 invoices shown

A list of your recent invoices.
Invoice	Status	Method	Amount
INV-1042	Paid	Visa •••• 4242	$1,240.00
INV-1043	Pending	ACH transfer	$860.50
INV-1044	Overdue	Mastercard •••• 1881	$420.00
INV-1045	Paid	PayPal	$3,120.75
INV-1046	Refunded	Visa •••• 4242	$95.00
INV-1047	Paid	Wire transfer	$1,780.20
INV-1048	Pending	Mastercard •••• 1881	$640.00
Total			$8,156.45

Using Billing Ledger Table

Filter invoice statuses, sort amounts, and recalculate the visible ledger total. Pass invoices and optionally statusFilter with onStatusFilterChange. Sorting is local.

Billing Ledger Table uses the wide preview frame with a light/dark theme setting.

Select Overdue to show the matching invoice, then restore All and sort amounts descending.

Amounts and decisions are illustrative local data. No charge, subscription change, or financial transaction is sent; the host must validate prices and persist the result.

Customize the preview

These controls are passed to the demo. Defaults and limits describe the preview; consult the implementation for its full prop API.

Control	Type	Default	Preview limits
`rowCount`	`number`	`7`	From 3 to 10; step 1
`showFooterTotal`	`boolean`	`true`	No additional limit in the metadata.
`accentColor`	`color`	`#38BDF8`	No additional limit in the metadata.
`caption`	`text`	`A list of your recent invoices.`	Up to 60 characters

How does the application receive changes?

Pass invoices and optionally statusFilter with onStatusFilterChange. Sorting is local.

Which frameworks are available for Billing Ledger Table?

Billing Ledger Table is available for React, Vue, Svelte, Astro, HTML. The live preview uses React; the source observations below apply to index.tsx. Check the selected port before relying on the same interactions.

What does Billing Ledger Table depend on?

The React metadata lists no additional npm dependencies beyond React.

What accessibility details are visible in Billing Ledger Table?

The React source for Billing Ledger Table includes: native elements (caption, label, select, table, th); attributes and handlers (aria-hidden, aria-label); explicit roles (status). These are source observations. Verify accessible names, focus order and keyboard behavior in the composed page.

How does Billing Ledger Table handle reduced motion?

The source scan found no direct useReducedMotion() or matchMedia preference read in Billing Ledger Table's index.tsx. Check the full implementation, shared styles and selected port with reduced motion enabled; these observations do not establish that every animation stops.

Connect your agent

Related open components

Still of the Animated metric counter component, a Fieldbook UI component in Data display.

2299Animated metric counterData displayA large bare numeral that springs up from a starting value to its target the moment it scrolls into view, overshooting slightly before it settles, with thousands separators and an optional suffix.

Still of the Before/After Code Diff component, a Fieldbook UI component in Data display.

2113Before/After Code DiffData displayTwo code panels side by side, labeled before and after, with added and removed lines tinted and a hover focus effect.

Still of the Concentric goal rings component, a Fieldbook UI component in Data display.

2128Concentric goal ringsData displayThree nested progress rings that draw themselves in sequence beside a readout of each goal's current and target value.

Still of the Counting number readout component, a Fieldbook UI component in Data display.

2328Counting number readoutData displayA large stat that counts up to its value on a decelerating curve, writing the text directly each frame so the layout never jitters.

Still of the Credit balance ledger component, a Fieldbook UI component in Data display.

2856Credit balance ledgerData displayInspect account credits and apply an eligible balance to an open invoice with a ledger entry.

Still of the Detail list item component, a Fieldbook UI component in Data display.

2140Detail list itemData displayA list row combining a leading icon or avatar, a title and description, and a trailing action, for notification lists, menus, or settings rows.