Affichage des données

Billing Ledger Table

Filtrez les statuts des factures, triez les montants et recalculez le total visible.

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

Utiliser Billing Ledger Table

Filtrez les statuts des factures, triez les montants et recalculez le total visible.

Filtrez les statuts des factures, triez les montants et recalculez le total visible. Fournissez invoices et éventuellement statusFilter avec onStatusFilterChange. Le tri est local.

Sélectionnez Overdue pour voir la facture correspondante, puis All et le tri décroissant des montants.

Les montants et décisions sont des exemples locaux. Aucun paiement, changement d’abonnement ou transaction n’est envoyé ; l’application doit valider les prix et enregistrer le résultat.

Propriétés: rowCount, showFooterTotal, accentColor, caption

Comment l’application reçoit-elle les changements ?

Fournissez invoices et éventuellement statusFilter avec onStatusFilterChange. Le tri est local.

Quels frameworks sont disponibles ?

Le catalogue propose ces versions : react, vue, svelte, astro, html. L’aperçu de cette page utilise React.

Comment accéder à l’implémentation ?

Le code, les versions et les commandes d’installation sont disponibles dans le panneau ci-dessus.

Connectez votre agent

Composants proches

2299Animated metric counterAffichage des donnéesUn grand chiffre nu qui jaillit d'une valeur de départ jusqu'à sa valeur cible au moment où il défile, dépassant légèrement avant de se stabiliser, avec des milliers de séparateurs et un suffixe facultatif.

2302Auto-Scroll Message ListAffichage des donnéesUn panneau de discussion déroulant qui reste épinglé sur le message le plus récent à moins que le lecteur ne fasse défiler vers le haut, auquel cas un bouton flottant jump-to-latest apparaît.

1917Avatar Lineup HoverAffichage des donnéesUne rangée de cercles d'avatar qui se chevauchent où le survol de l'un d'entre eux le soulève au-dessus de ses voisins et révèle une info-bulle de nom.

1918Avatar StackAffichage des donnéesUne rangée d'avatars circulaires superposés qui sépare et soulève celui sous le pointeur, révélant une info-bulle de nom au-dessus.

2113Before/After Code DiffAffichage des donnéesDeux panneaux de code côte à côte, étiquetés avant et après, avec des lignes ajoutées et supprimées teintées et un effet de mise au point en survol.

2310Card Style Invoice TableAffichage des donnéesUn tableau de factures présenté sous la forme d'une seule carte surélevée, avec ses première et dernière rangées arrondies pour correspondre à la forme de la carte.