ReactJS UI Ant Design Transfer Component

Last Updated : 02 Jun, 2021

Ant Design Library has this component pre-built, and it is very easy to integrate as well. Transfer Component is used for the double column transfer choice box. It is used to transfer the items between two columns effectively. We can use the following approach in ReactJS to use the Ant Design Transfer Component.

Transfer Props:

dataSource: It is used for setting the source data.
disabled: It is used to indicate whether to disabled transfer or not.
filterOption: It is a function to check whether an item should show in the search result list or not.
footer: It is a function that is used for rendering the footer.
listStyle: It is used to pass a custom CSS style used for rendering the transfer columns.
locale: It is used to denote the i18n text including filter, empty-text, item-unit, etc.
oneWay: It is used to display as single direction style.
operations: It is used to denote a set of operations that are sorted from top to bottom.
operationStyle: It is used to pass a custom CSS style used for rendering the operations' column.
pagination: It is used for pagination.
render: It is a function to generate the item shown on a column.
selectAllLabels: It is used to denote a set of customized labels for select all checkboxes on the header.
selectedKeys: It is used to denote a set of keys of selected items.
showSearch: It is used to indicate whether to show a search box on each column or not.
showSelectAll: It is used to show select all checkboxes on the header.
targetKeys: It is used to denote a set of keys of elements that are listed on the right column.
titles: It is used to denote a set of titles that are sorted from left to right.
onChange: It is a callback function that is triggered when the transfer between columns is complete.
onScroll: It is a callback function that is triggered when scroll options list.
onSearch: It is a callback function that is triggered when search fields are changed.
onSelectChange: It is a callback function that is triggered when selected items are changed.

Render Props:

direction: It is used to denote the list render direction.
disabled: It is used to indicate whether to disable the list or not.
filteredItems: It is used to denote the Filtered items.
selectedKeys: It is used to denote the selected items.
onItemSelect: It is used to denote the Selected item.
onItemSelectAll: It is used to sele ct a group of items.

Creating React Application And Installing Module:

Step 1: Create a React application using the following command:
```
npx create-react-app foldername
```
Step 2: After creating your project folder i.e. foldername, move to it using the following command:
```
cd foldername
```
Step 3: After creating the ReactJS application, Install the required module using the following command:
```
npm install antd
```

Project Structure: It will look like the following.

Example: Now write down the following code in the App.js file. Here, App is our default component where we have written our code.

App.js

import React, { useState } from 'react'; import "antd/dist/antd.css"; import { Transfer } from 'antd';  // Our sample Mock Data const mockData = [   {key: "0", title: "Title 0", description: "Sample Description 0"},    {key: "1", title: "Title 1", description: "Sample Description 1"},   {key: "2", title: "Title 2", description: "Sample Description 2"},   {key: "3", title: "Title 3", description: "Sample Description 3"},   {key: "4", title: "Title 4", description: "Sample Description 4"},   {key: "5", title: "Title 5", description: "Sample Description 5"}, ];  export default function App() {    // To set target keys   const [targetKeys, setTargetKeys] = useState(mockData);      // Contains the selected keys   const [selectedKeys, setSelectedKeys] = useState([]);    return (     <div style={{       display: 'block', width: 700, padding: 30     }}>       <h4>ReactJS Ant-Design Transfer Component</h4>       <Transfer         dataSource={mockData}         titles={['Source', 'Target']}         render={item => item.title}         selectedKeys={selectedKeys}         targetKeys={targetKeys}         onChange={(nextTargetKeys) => {           setTargetKeys(nextTargetKeys);         }}         onSelectChange={(sourceSelectedKeys, targetSelectedKeys) => {           setSelectedKeys([...sourceSelectedKeys, ...targetSelectedKeys]);         }}       />     </div>   ); }

Step to Run Application: Run the application using the following command from the root directory of the project:

npm start

Output: Now open your browser and go to http://localhost:3000/, you will see the following output:

Reference: https://ant.design/components/transfer/

ReactJS UI Ant Design TreeSelect Component

gouravhammad

Improve

Article Tags :

ReactJS UI Ant Design Transfer Component

Similar Reads

Ant Design General Components

Ant Design Layout Components

Ant Design Navigation Component

Design Data Entry Components

Ant Design Data Display Components

Ant Design Feedback Components

Ant Design Other Components