Search
Transfer

Double column transfer choice box.

Transfer

When to use

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.
Transfer the elements between two columns in an intuitive and efficient way.
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.


Basic

The most basic usage of Transfer involves providing the source data and target keys arrays, plus the rendering and some callback functions.
14 itemsSource
  • content1
  • content2
  • content4
  • content5
  • content7
  • content8
  • content10
  • content11
  • content13
  • content14
  • content16
  • content17
  • content19
  • content20
6 itemsTarget
  • content3
  • content6
  • content9
  • content12
  • content15
  • content18
Disabled:

One Way

Use oneWay to makes Transfer to one way style.
14 itemsSource
  • content1
  • content2
  • content4
  • content5
  • content7
  • content8
  • content10
  • content11
  • content13
  • content14
  • content16
  • content17
  • content19
  • content20
6 itemsTarget
  • content3
  • content6
  • content9
  • content12
  • content15
  • content18
Disabled:
Transfer with a search box.
0 item

No Data

0 item

No Data

Advanced

Advanced Usage of Transfer.
You can customize the labels of the transfer buttons, the width and height of the columns, and what should be displayed in the footer.
0 item

No Data

0 item

No Data

Custom datasource

Custom each Transfer Item, and in this way you can render a complex datasource.
0 item

No Data

0 item

No Data

Pagination

large count of items with pagination.
0 item

No Data

0 item

No Data


One way:

Table Transfer

Customize render list with Table component.
14 items
NameTagDescription
Content 1Developerdescription
Content 2Designerdescription
Content 4Designerdescription
Content 5Developerdescription
Content 7Developerdescription
Content 8Designerdescription
Content 10Designerdescription
Content 11Developerdescription
Content 13Developerdescription
Content 14Designerdescription
6 items
Name
Content 3
Content 6
Content 9
Content 12
Content 15
Content 18
Disabled:
Show Search:

Tree Transfer

Customize render list with Tree component.
5 items
0-0
0-1
0-1-0
0-1-1
0-3
0 item

No Data

API

PropertyDescriptionTypeDefault
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
TransferItem[]
[]
disabled
Whether disabled transfer
boolean
false
filterOption
A function to determine whether an item should show in search result list
(inputValue, option): boolean
-
footer
A function used for rendering the footer
(props) => ReactNode
-
listStyle
A custom CSS style used for rendering the transfer columns
object | ({direction: left | right}) => object
-
locale
The i18n text including filter, empty text, item unit, etc
{ itemUnit: string; itemsUnit: string; searchPlaceholder: string; notFoundContent: ReactNode; }
{ itemUnit: item, itemsUnit: items, notFoundContent: The list is empty, searchPlaceholder: Search here }
operations
A set of operations that are sorted from top to bottom
string[]
[>, <]
oneWay
Display as single direction style
boolean
false
operationStyle
A custom CSS style used for rendering the operations column
object
-
pagination
Use pagination. Not work in render props
boolean | { pageSize: number }
false
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
-
selectedKeys
A set of keys of selected items
string[]
[]
showSearch
If included, a search box is shown on each column
boolean
false
showSelectAll
Show select all checkbox on the header
boolean
true
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[]
-
selectAllLabels
A set of customized labels for select all checkboxs on the header
(ReactNode | (info: { selectedCount: number, totalCount: number }) => 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
-

Render Props

Transfer accept children to customize render list, using follow props:
PropertyDescriptionTypeDefault
direction
List render direction
left | right
disabled
Disable list or not
boolean
filteredItems
Filtered items
TransferItem[]
onItemSelect
Select item
(key: string, selected: boolean)
onItemSelectAll
Select a group of items
(keys: string[], selected: boolean)
selectedKeys
Selected items
string[]