2016-08-03 10:10:13 +08:00
---
category: Components
2022-11-09 12:28:04 +08:00
group: Data Entry
2016-08-03 10:10:13 +08:00
title: Transfer
2020-06-05 13:50:09 +08:00
cover: https://gw.alipayobjects.com/zos/alicdn/QAXskNI4G/Transfer.svg
2022-11-09 12:28:04 +08:00
demo:
cols: 2
2016-08-03 10:10:13 +08:00
---
2016-11-09 20:37:10 +08:00
Double column transfer choice box.
2016-08-03 10:10:13 +08:00
2016-08-04 09:45:50 +08:00
## When To Use
2016-08-04 09:33:04 +08:00
2018-12-07 14:23:04 +08:00
- It is a select control essentially which can be use for selecting multiple items.
- Transfer can display more information for items and take up more space.
2016-11-09 20:37:10 +08:00
Transfer the elements between two columns in an intuitive and efficient way.
2018-08-02 21:00:53 +08:00
One or more elements can be selected from either column, one click on the proper `direction` button, and the transfer is done. The left column is considered the `source` and the right column is considered the `target` . As you can see in the API description, these names are reflected in.
2016-08-03 10:10:13 +08:00
2022-11-09 12:28:04 +08:00
## Examples
< code src = "./demo/basic.tsx" > Basic< / code >
< code src = "./demo/oneWay.tsx" > One Way< / code >
< code src = "./demo/search.tsx" > Search< / code >
< code src = "./demo/advanced.tsx" > Advanced< / code >
< code src = "./demo/custom-item.tsx" > Custom datasource< / code >
< code src = "./demo/large-data.tsx" > Pagination< / code >
< code src = "./demo/table-transfer.tsx" > Table Transfer< / code >
< code src = "./demo/tree-transfer.tsx" > Tree Transfer< / code >
< code src = "./demo/status.tsx" > Status< / code >
< code src = "./demo/custom-select-all-labels.tsx" debug > Custom Select All Labels< / code >
2016-08-03 10:10:13 +08:00
## API
2019-05-07 17:10:42 +08:00
| Property | Description | Type | Default | Version |
2019-05-07 17:22:47 +08:00
| --- | --- | --- | --- | --- |
2022-04-27 10:07:16 +08:00
| dataSource | Used for setting the source data. The elements that are part of this array will be present the left column. Except the elements whose keys are included in `targetKeys` prop | [RecordType extends TransferItem = TransferItem ](https://github.com/ant-design/ant-design/blob/1bf0bab2a7bc0a774119f501806e3e0e3a6ba283/components/transfer/index.tsx#L12 )\[] | \[] | |
2019-11-20 14:55:34 +08:00
| disabled | Whether disabled transfer | boolean | false | |
2020-07-01 20:18:48 +08:00
| filterOption | A function to determine whether an item should show in search result list | (inputValue, option): boolean | - | |
2021-06-30 12:10:23 +08:00
| footer | A function used for rendering the footer | (props, { direction }) => ReactNode | - | direction: 4.17.0 |
2020-07-01 20:18:48 +08:00
| listStyle | A custom CSS style used for rendering the transfer columns | object \| ({direction: `left` \| `right` }) => object | - | |
2021-06-23 17:38:16 +08:00
| locale | The i18n text including filter, empty text, item unit, etc | { itemUnit: string; itemsUnit: string; searchPlaceholder: string; notFoundContent: ReactNode \| ReactNode[]; } | { itemUnit: `item` , itemsUnit: `items` , notFoundContent: `The list is empty` , searchPlaceholder: `Search here` } | |
2020-05-13 19:15:40 +08:00
| oneWay | Display as single direction style | boolean | false | 4.3.0 |
2020-10-21 10:33:43 +08:00
| operations | A set of operations that are sorted from top to bottom | string\[] | \[`>` , `<` ] | |
2020-07-01 20:18:48 +08:00
| operationStyle | A custom CSS style used for rendering the operations column | object | - | |
2022-02-10 13:16:45 +08:00
| pagination | Use pagination. Not work in render props | boolean \| { pageSize: number, simple: boolean, showSizeChanger?: boolean, showLessItems?: boolean } | false | 4.3.0 |
2020-07-01 20:18:48 +08:00
| render | The function to generate the item shown on a column. Based on an record (element of the dataSource array), this function should return a React element which is generated from that record. Also, it can return a plain object with `value` and `label` , `label` is a React element and `value` is for title | (record) => ReactNode | - | |
2020-10-21 10:33:43 +08:00
| selectAllLabels | A set of customized labels for select all checkboxs on the header | (ReactNode \| (info: { selectedCount: number, totalCount: number }) => ReactNode)\[] | - | |
2020-07-01 20:18:48 +08:00
| selectedKeys | A set of keys of selected items | string\[] | \[] | |
| showSearch | If included, a search box is shown on each column | boolean | false | |
2019-11-20 14:55:34 +08:00
| showSelectAll | Show select all checkbox on the header | boolean | true | |
2022-02-17 16:43:33 +08:00
| status | Set validation status | 'error' \| 'warning' | - | 4.19.0 |
2020-07-01 20:18:48 +08:00
| targetKeys | A set of keys of elements that are listed on the right column | string\[] | \[] | |
| titles | A set of titles that are sorted from left to right | ReactNode\[] | - | |
| onChange | A callback function that is executed when the transfer between columns is complete | (targetKeys, direction, moveKeys): void | - | |
| onScroll | A callback function which is executed when scroll options list | (direction, event): void | - | |
| onSearch | A callback function which is executed when search field are changed | (direction: `left` \| `right` , value: string): void | - | |
| onSelectChange | A callback function which is executed when selected items are changed | (sourceSelectedKeys, targetSelectedKeys): void | - | |
2019-05-07 17:10:42 +08:00
### Render Props
2019-11-20 14:55:34 +08:00
Transfer accept `children` to customize render list, using follow props:
2019-05-07 17:10:42 +08:00
2021-05-20 15:10:38 +08:00
| Property | Description | Type | Version |
| --------------- | ----------------------- | ------------------------------------ | ------- |
| direction | List render direction | `left` \| `right` | |
| disabled | Disable list or not | boolean | |
| filteredItems | Filtered items | RecordType\[] | |
| selectedKeys | Selected items | string\[] | |
| onItemSelect | Select item | (key: string, selected: boolean) | |
| onItemSelectAll | Select a group of items | (keys: string\[], selected: boolean) | |
2019-05-07 17:10:42 +08:00
#### example
2019-05-07 17:22:47 +08:00
2019-05-07 17:10:42 +08:00
```jsx
2019-05-07 17:22:47 +08:00
< Transfer { . . . props } > {listProps => < YourComponent { . . . listProps } / > }< / Transfer >
2019-05-07 17:10:42 +08:00
```
2017-01-04 18:41:28 +08:00
2016-08-03 10:10:13 +08:00
## Warning
2017-02-19 17:02:58 +08:00
According the [standard ](http://facebook.github.io/react/docs/lists-and-keys.html#keys ) of React, the key should always be supplied directly to the elements in the array. In Transfer, the keys should be set on the elements included in `dataSource` array. By default, `key` property is used as an unique identifier.
2016-08-03 10:10:13 +08:00
2016-08-04 09:33:04 +08:00
If there's no `key` in your data, you should use `rowKey` to specify the key that will be used for uniquely identify each element.
2017-10-25 10:25:44 +08:00
2016-08-03 10:10:13 +08:00
```jsx
// eg. your primary key is `uid`
return < Transfer rowKey = {record = > record.uid} />;
2016-08-04 09:33:04 +08:00
```
2019-08-04 11:33:32 +08:00
## FAQ
### How to support fetch and present data from a remote server in Transfer column.
2021-05-20 15:10:38 +08:00
In order to keep the page number synchronized, you can disable columns you checked without removing the option: < https: / / codesandbox . io / s / objective-wing-6iqbx >