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. |