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 Name | Type | Default | Description |
---|---|---|---|
transactions | Transaction[] | Required | An array of transaction objects to be displayed in the list. |
title | string | "Transactions" | The title displayed at the top of the transaction list. |
maxHeight | string | "none" | The maximum height of the transaction list. Can be any valid CSS height value. |
showAllTransactionsButton | boolean | true | Whether 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. |
className | string | "" | Additional CSS classes to be applied to the main container of the TransactionList. |
containerClassName | string | "" | Additional CSS classes to be applied to the inner container of the TransactionList. |
headerClassName | string | "" | Additional CSS classes to be applied to the header (title) of the TransactionList. |
transactionClassName | string | "" | Additional CSS classes to be applied to each transaction item in the list. |
iconClassName | string | "" | Additional CSS classes to be applied to the icon container of each transaction. |
titleClassName | string | "" | Additional CSS classes to be applied to the title of each transaction. |
subtitleClassName | string | "" | Additional CSS classes to be applied to the subtitle of each transaction. |
amountClassName | string | "" | Additional CSS classes to be applied to the amount of each transaction. |
allTransactionsButtonClassName | string | "" | Additional CSS classes to be applied to the "All Transactions" button. |
popupClassName | string | "" | Additional CSS classes to be applied to the transaction details popup container. |
popupHeaderClassName | string | "" | Additional CSS classes to be applied to the header of the transaction details popup. |
popupCloseButtonClassName | string | "" | Additional CSS classes to be applied to the close button of the transaction details popup. |
popupContentClassName | string | "" | Additional CSS classes to be applied to the content container of the transaction details popup. |
popupIconClassName | string | "" | Additional CSS classes to be applied to the icon in the transaction details popup. |
popupTitleClassName | string | "" | Additional CSS classes to be applied to the title in the transaction details popup. |
popupSubtitleClassName | string | "" | Additional CSS classes to be applied to the subtitle in the transaction details popup. |
popupAmountClassName | string | "" | Additional CSS classes to be applied to the amount in the transaction details popup. |
popupDetailsClassName | string | "" | Additional CSS classes to be applied to the details section in the transaction details popup. |
renderPopupContent | (transaction: Transaction) => ReactNode | undefined | A function that allows custom rendering of the popup content. If provided, it will be used instead of the default popup content. |