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

# Transfer List

The `transferList` UI Element presents a table interface that displays a paginated list of
transfers. This UI element automatically fetches transfer 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/f-CA-wd5TNKm_ycF/api-reference/sdk-libraries/doc-pages/img/default-transfer-list-styles.png?fit=max&auto=format&n=f-CA-wd5TNKm_ycF&q=85&s=410e2f3b8980d43f5f5bdb64d7857a05" alt="Transfer list default style" width="1103" height="1004" data-path="api-reference/sdk-libraries/doc-pages/img/default-transfer-list-styles.png" />

## How it works

The transfer 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: 'transfer-list',
  },
  operationSettings: {
    uiParentElementId: 'transfer-list-ui-container',
  },
});
```

When initialized, the element makes a transparent API call to fetch the list of
transfers 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 transfer list UI, please refer to
the [createUIElement API Reference](/api-reference/sdk-libraries/variables/ui#createuielement).

## Emitted events

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

### Transfer selected

Each row in the transfers table rendered by the UI element represents a single SEPA transfer. If users click on any of
them, the UI Element will emit a `transfer-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: 'transfer-list',
    uiElementEventListener: ({ eventName, eventDetail }) => {
      if (eventName === 'transfer-selected') {
        // React to the transfer selected event
      }
    },
  },
  operationSettings: {
    uiParentElementId: 'transfer-list-ui-container',
  },
});
```

## Customizable components

The transfer 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 transfer list pages. The
  buttons are rendered with the secondary variant.
* **[Badge Status](/api-reference/sdk-libraries/doc-pages/customizable-components/badge-status)** - Used to
  display the transfer status with visual indicators (e.g., validated, declined, waiting, in-progress, error, inactive)
* **[Skeleton Loader](/api-reference/sdk-libraries/doc-pages/customizable-components/skeleton-loader)** - Used to display loading placeholders while transfers 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 transfers in a structured, scrollable, and paginated grid.

For guidance on how to customize these components and adapt the transfer list UI to your branding,
please refer to the [customizing UI elements](/api-reference/sdk-libraries/doc-pages/customizing-ui-elements)
documentation.