ReactJS UI Ant Design Transfer Component

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.

Project Structure

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/