> ## Documentation Index
> Fetch the complete documentation index at: https://docs.qonto.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Transaction List

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.

<img src="https://mintcdn.com/qonto-6237c309/guy0yCQclO_M6DFI/api-reference/sdk-libraries/doc-pages/img/default-transaction-list-styles.png?fit=max&auto=format&n=guy0yCQclO_M6DFI&q=85&s=7276d536e1365e64a5e08c069270de10" alt="transaction list default style" width="1406" height="450" data-path="api-reference/sdk-libraries/doc-pages/img/default-transaction-list-styles.png" />

## How it works

The transaction list is rendered by calling the [`createUIElement`](/api-reference/sdk-libraries/variables/ui#createuielement) function with the appropriate
settings:

```ts theme={null}
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](/api-reference/sdk-libraries/variables/ui#createuielement).

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

```ts theme={null}
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](/api-reference/sdk-libraries/doc-pages/customizable-components/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](/api-reference/sdk-libraries/doc-pages/customizable-components/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](/api-reference/sdk-libraries/doc-pages/customizable-components/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](/api-reference/sdk-libraries/doc-pages/customizing-ui-elements)
documentation.