Exibição de dados

Billing Ledger Table

Filtre os estados das faturas, ordene os valores e recalcule o total visível do registro.

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

Como usar Billing Ledger Table

Filtre os estados das faturas, ordene os valores e recalcule o total visível do registro.

Filtre os estados das faturas, ordene os valores e recalcule o total visível do registro. Passe invoices e, opcionalmente, statusFilter com onStatusFilterChange. A ordenação é local.

Selecione Overdue para ver a fatura correspondente, volte para All e ordene os valores do maior para o menor.

Os valores e decisões são exemplos locais. Nenhuma cobrança, alteração de assinatura ou transação é enviada; o aplicativo deve validar preços e salvar o resultado.

Propriedades: rowCount, showFooterTotal, accentColor, caption

Como o aplicativo recebe as alterações?

Passe invoices e, opcionalmente, statusFilter com onStatusFilterChange. A ordenação é local.

Quais frameworks estão disponíveis?

O catálogo inclui estas versões: react, vue, svelte, astro, html. A prévia desta página usa React.

Como acessar a implementação?

O código, as versões e os comandos de instalação estão disponíveis no painel acima.

Conecte seu agente

Componentes relacionados

2299Animated metric counterExibição de dadosUm grande número simples que surge de um valor inicial até seu destino no momento em que é exibido, ultrapassando um pouco antes de se estabilizar, com separadores de milhares e um sufixo opcional.

2302Auto-Scroll Message ListExibição de dadosUm painel de bate-papo rolável que se mantém fixado na mensagem mais recente, a menos que o leitor role para cima, momento em que um botão flutuante jump-to-latest aparece.

1917Avatar Lineup HoverExibição de dadosUma fileira de círculos de avatar sobrepostos onde passar o mouse o eleva acima de seus vizinhos e revela uma dica de nome.

1918Avatar StackExibição de dadosUma linha de avatares circulares sobrepostos que separa e levanta aquele que está sob o ponteiro, revelando uma dica de nome acima dele.

2113Before/After Code DiffExibição de dadosDois painéis de código lado a lado, rotulados antes e depois, com linhas adicionadas e removidas coloridas e um efeito de foco flutuante.

2310Card Style Invoice TableExibição de dadosUma tabela de faturas renderizada como um cartão elevado, com a primeira e a última linhas arredondadas para corresponder ao formato do cartão.