Introducing Easy UI Premium - 100+ Blocks and Templates to build your landing page in minutes

Transaction List

Reusable list card with transaction data + popup.

Recent Activity

Netflix
Subscription
-$6.99
Verizon
Mobile Recharge
-$4.05
Big Belly Burger
Restaurant
-$12.05

Installation

npx shadcn@latest add "https://easyui.pro/components-json/transaction-list.json"

Props

Prop NameTypeDefaultDescription
transactionsTransaction[]RequiredAn array of transaction objects to be displayed in the list.
titlestring"Transactions"The title displayed at the top of the transaction list.
maxHeightstring"none"The maximum height of the transaction list. Can be any valid CSS height value.
showAllTransactionsButtonbooleantrueWhether to show the "All Transactions" button at the bottom of the list.
onAllTransactionsClick() => void() => {}A function to be called when the "All Transactions" button is clicked.
classNamestring""Additional CSS classes to be applied to the main container of the TransactionList.
containerClassNamestring""Additional CSS classes to be applied to the inner container of the TransactionList.
headerClassNamestring""Additional CSS classes to be applied to the header (title) of the TransactionList.
transactionClassNamestring""Additional CSS classes to be applied to each transaction item in the list.
iconClassNamestring""Additional CSS classes to be applied to the icon container of each transaction.
titleClassNamestring""Additional CSS classes to be applied to the title of each transaction.
subtitleClassNamestring""Additional CSS classes to be applied to the subtitle of each transaction.
amountClassNamestring""Additional CSS classes to be applied to the amount of each transaction.
allTransactionsButtonClassNamestring""Additional CSS classes to be applied to the "All Transactions" button.
popupClassNamestring""Additional CSS classes to be applied to the transaction details popup container.
popupHeaderClassNamestring""Additional CSS classes to be applied to the header of the transaction details popup.
popupCloseButtonClassNamestring""Additional CSS classes to be applied to the close button of the transaction details popup.
popupContentClassNamestring""Additional CSS classes to be applied to the content container of the transaction details popup.
popupIconClassNamestring""Additional CSS classes to be applied to the icon in the transaction details popup.
popupTitleClassNamestring""Additional CSS classes to be applied to the title in the transaction details popup.
popupSubtitleClassNamestring""Additional CSS classes to be applied to the subtitle in the transaction details popup.
popupAmountClassNamestring""Additional CSS classes to be applied to the amount in the transaction details popup.
popupDetailsClassNamestring""Additional CSS classes to be applied to the details section in the transaction details popup.
renderPopupContent(transaction: Transaction) => ReactNodeundefinedA function that allows custom rendering of the popup content. If provided, it will be used instead of the default popup content.