Transfer

Double column transfer choice box.

When To Use#

Transfer the elements between two columns intuitively and efficiently.

The left column is considered the 'source', and the right column is considered the 'target'. One or more elements can be selected from either column, one click on the proper 'direction' button, and the transfer is done. As you can see in the API description, these names are reflected in.

import { NzTransferModule } from 'ng-zorro-antd/transfer';

Examples

18 items Source
1/2 items Target

The most basic usage of nz-transfer involves providing the source data and target keys arrays, plus the rendering and some callback functions.

expand codeexpand code
Loading...
11 items
9 items

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.

expand codeexpand code
Loading...
15 items
5 items

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

expand codeexpand code
Loading...
18 items
NameTagDescription
content1catdescription of content1
content2dogdescription of content2
content5dogdescription of content5
content6birddescription of content6
content7catdescription of content7
content8dogdescription of content8
content9birddescription of content9
content10catdescription of content10
content11dogdescription of content11
content12birddescription of content12
2 items
NameDescription
content3description of content3
content4description of content4

Customize render list with Table component.

expand codeexpand code
Loading...
5 items
0-00-10-1-00-1-10-3
0 item

No Data

Customize render list with Tree component.

expand codeexpand code
Loading...
0 item

No Data

0 item

No Data

0 item
0 item

Add status to Transfer with nzStatus, which could be error or warning.

expand codeexpand code
Loading...

API#

nz-transfer#

PropertyDescriptionTypeDefault
[nzDataSource]Used for setting the data source. Except for the elements whose keys are direction: 'right' prop, or using nzTargetKeys prop.TransferItem[][]
[nzDisabled]Whether the transfer is disabledbooleanfalse
[nzTitles]A set of titles that are sorted from left to right.string[]['', '']
[nzOperations]A set of operations that are sorted from bottom to top.string[]['', '']
[nzListStyle]A custom CSS style used for rendering the transfer columns. equals to ngStyleobject-
[nzItemUnit]single unitstring'item'
[nzItemsUnit]multiple unitstring'items'
[nzRenderList]Customize render list, please refer to the case.Array<TemplateRef<void> | null>[null, null]
[nzRender]The function to generate the item shown on a column. please refer to the case.TemplateRef<void>-
[nzFooter]A function used for rendering the footer. please refer to the case.TemplateRef<void>-
[nzShowSearch]Whether a search box is shown on each column.booleanfalse
[nzFilterOption]A function to determine whether an item should be shown in a search result list(inputValue: string, item: TransferItem) => boolean-
[nzSearchPlaceholder]The hint text of the search box.string'Search here'
[nzNotFoundContent]Text to display when a column is empty.string'The list is empty'
[nzCanMove]A function to determine what items should be moved (by default all checked items are moved). please refer to the case.(arg: TransferCanMove) => Observable<TransferItem[]>-
[nzSelectedKeys]A set of keys of selected items.string[]-
[nzTargetKeys]A set of keys of elements that are listed on the right column.string[]-
[nzStatus]Set validation status'error' | 'warning'-
(nzChange)A callback function that is executed when the transfer between columns is complete.EventEmitter<TransferChange>-
(nzSearchChange)A callback function which is executed when search field are changedEventEmitter<TransferSearchChange>-
(nzSelectChange)A callback function which is executed when selected items are changed.EventEmitter<TransferSearchChange>-

TransferItem#

PropertyDescriptionTypeDefault
titleUsed to display and search keywordstring-
directionUsed for setting the data source. Except the elements whose keys are direction: 'right' prop.'left' | 'right'-
disabledspecifies whether the checkbox is disabledbooleanfalse
checkedspecifies whether the checkbox is selectedbooleanfalse

TransferCanMove#

PropertyDescriptionTypeDefault
directiondata direction'left' | 'right'-
listUsed for setting the source data.TransferItem[][]

TransferChange#

PropertyDescriptionTypeDefault
fromdata direction'left' | 'right'-
todata direction'left' | 'right'-
listUsed for setting the source data.TransferItem[][]

TransferSearchChange#

PropertyDescriptionTypeDefault
directiondata direction'left' | 'right'-
valueSearch keywordstring-

nzRenderList#

PropertyDescriptionTypeDefault
directionList render direction'left' | 'right'-
disabledDisable list or notboolean-
itemsFiltered itemsTransferItem[]-
onItemSelectSelect item(item: TransferItem) => void-
onItemSelectAllSelect a group of items(selected: boolean) => void-