How to remove drop down menu in Transfer ant-design? - css

Question

I want to use Transfer Component from antd but I don't need the drop down menu as you can see in the below picture . How can I remove it?

Answer 1

It looks like the only way is through css selection since the component API doesn't have any control over it via props. Put below code in your css file:
span.ant-transfer-list-header-dropdown {
display: none;
}
DEMO
EDIT
It's possible to "change" the menu options by setting the selectAllLabels props of the component but you'd have to build the dropdown menu yourself. You'll still have to hide their header dropdown in CSS since you're replacing their menu with your own menu.
import React, { useState } from "react";
import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import "./index.css";
import { Transfer, Dropdown, Menu, Space, Button } from "antd";
import { DownOutlined } from "#ant-design/icons";
const mockData = [];
for (let i = 0; i < 20; i++) {
mockData.push({
key: i.toString(),
title: `content${i + 1}`,
description: `description of content${i + 1}`
});
}
const initialTargetKeys = mockData
.filter((item) => +item.key > 10)
.map((item) => item.key);
const App = () => {
const [targetKeys, setTargetKeys] = useState(initialTargetKeys);
const [selectedKeys, setSelectedKeys] = useState([]);
const onChange = (nextTargetKeys, direction, moveKeys) => {
console.log("targetKeys:", nextTargetKeys);
console.log("direction:", direction);
console.log("moveKeys:", moveKeys);
setTargetKeys(nextTargetKeys);
};
const onSelectChange = (sourceSelectedKeys, targetSelectedKeys) => {
console.log("sourceSelectedKeys:", sourceSelectedKeys);
console.log("targetSelectedKeys:", targetSelectedKeys);
setSelectedKeys([...sourceSelectedKeys, ...targetSelectedKeys]);
};
const onScroll = (direction, e) => {
console.log("direction:", direction);
console.log("target:", e.target);
};
const leftLabel = ({ selectedCount, totalCount }) => (
<Space size={5}>
<Dropdown
placement="bottomLeft"
overlay={
<Menu>
<Menu.Item>
<a>Option 1</a>
</Menu.Item>
<Menu.Item>
<a>Option 2</a>
</Menu.Item>
<Menu.Item>
<a>Option 3</a>
</Menu.Item>
</Menu>
}
>
<DownOutlined style={{ fontSize: 11 }} />
</Dropdown>
{selectedCount > 0 ? `${selectedCount}/${totalCount}` : totalCount} items
</Space>
);
const rightLabel = ({ selectedCount, totalCount }) => (
<Space size={5}>
<Dropdown
placement="bottomLeft"
overlay={
<Menu>
<Menu.Item>
<a>Option A</a>
</Menu.Item>
<Menu.Item>
<a>Option B</a>
</Menu.Item>
<Menu.Item>
<a>Option C</a>
</Menu.Item>
</Menu>
}
>
<DownOutlined style={{ fontSize: 11 }} />
</Dropdown>
{selectedCount > 0 ? `${selectedCount}/${totalCount}` : totalCount} items
</Space>
);
return (
<Transfer
dataSource={mockData}
titles={["Source", "Target"]}
targetKeys={targetKeys}
selectedKeys={selectedKeys}
onChange={onChange}
onSelectChange={onSelectChange}
onScroll={onScroll}
render={(item) => item.title}
selectAllLabels={[leftLabel, rightLabel]}
/>
);
};
ReactDOM.render(<App />, document.getElementById("container"));
DEMO