Skip to main content
The transactionList UI Element presents a table interface that displays a paginated list of transactions. This UI element automatically fetches transaction data and renders it in a well-organized table format with support for status indicators and pagination controls. transaction list default style

​
How it works

The transaction list is rendered by calling the createUIElement function with the appropriate settings: 
import { ui } from "@qonto/embed-sdk/ui";

ui.createUIElement({
	uiElementSettings: {
		uiElementName: "transaction-list",
	},
	operationSettings: {
		uiParentElementId: "transaction-list-ui-container",
	},
});
When initialized, the element makes a transparent API call to fetch the list of transactions and displays them in a table. The data fetching happens automatically without requiring additional configuration from your side. For details about the SDK function to call to display the transaction list UI, please refer to the createUIElement API Reference.

​
Emitted events

The transaction list UI Element emits the following events when users interact with it.

​
Transaction selected

Each row in the transactions table rendered by the UI element represents a single transaction. If users click on any of them, the UI Element will emit a transaction-selected event. You can set up a listener for the event by passing a function as the uiElementSettings.uiElementEventListener parameter when calling createUIElement. 
import { ui } from "@qonto/embed-sdk/ui";

ui.createUIElement({
	uiElementSettings: {
		uiElementName: "transaction-list",
		uiElementEventListener: ({ eventName, eventDetail }) => {
			if (eventName === "transaction-selected") {
				// React to the transaction selected event
			}
		},
	},
	operationSettings: {
		uiParentElementId: "transaction-list-ui-container",
	},
});

​
Customizable components

The transaction list UI element is composed of the following customizable components. You can customize their appearance to match your branding:
  • Button - Used for pagination controls (Previous/Next buttons underneath the table) to navigate through the transaction list pages. The buttons are rendered with the secondary variant.
  • Skeleton Loader - Used to display loading placeholders while transactions are being fetched from the API. Each table cell will display the skeleton loader while loading.
  • Table - Used to display the transactions in a structured, scrollable, and paginated grid.
For guidance on how to customize these components and adapt the transaction list UI to your branding, please refer to the customizing UI elements documentation.