import React, { useState } from 'react'; import difference from 'lodash/difference'; import { Space, Switch, Table, Tag, Transfer } from 'antd'; import type { ColumnsType, TableRowSelection } from 'antd/es/table/interface'; import type { TransferItem, TransferProps } from 'antd/es/transfer'; interface RecordType { key: string; title: string; description: string; disabled: boolean; tag: string; } interface DataType { key: string; title: string; description: string; disabled: boolean; tag: string; } interface TableTransferProps extends TransferProps { dataSource: DataType[]; leftColumns: ColumnsType; rightColumns: ColumnsType; } // Customize Table Transfer const TableTransfer = ({ leftColumns, rightColumns, ...restProps }: TableTransferProps) => ( {({ direction, filteredItems, onItemSelectAll, onItemSelect, selectedKeys: listSelectedKeys, disabled: listDisabled, }) => { const columns = direction === 'left' ? leftColumns : rightColumns; const rowSelection: TableRowSelection = { getCheckboxProps: (item) => ({ disabled: listDisabled || item.disabled }), onSelectAll(selected, selectedRows) { const treeSelectedKeys = selectedRows .filter((item) => !item.disabled) .map(({ key }) => key); const diffKeys = selected ? difference(treeSelectedKeys, listSelectedKeys) : difference(listSelectedKeys, treeSelectedKeys); onItemSelectAll(diffKeys as string[], selected); }, onSelect({ key }, selected) { onItemSelect(key as string, selected); }, selectedRowKeys: listSelectedKeys, }; return ( ({ onClick: () => { if (itemDisabled || listDisabled) return; onItemSelect(key as string, !listSelectedKeys.includes(key as string)); }, })} /> ); }} ); const mockTags = ['cat', 'dog', 'bird']; const mockData: RecordType[] = Array.from({ length: 20 }).map((_, i) => ({ key: i.toString(), title: `content${i + 1}`, description: `description of content${i + 1}`, disabled: i % 4 === 0, tag: mockTags[i % 3], })); const originTargetKeys = mockData .filter((item) => Number(item.key) % 3 > 1) .map((item) => item.key); const leftTableColumns: ColumnsType = [ { dataIndex: 'title', title: 'Name', }, { dataIndex: 'tag', title: 'Tag', render: (tag) => {tag}, }, { dataIndex: 'description', title: 'Description', }, ]; const rightTableColumns: ColumnsType> = [ { dataIndex: 'title', title: 'Name', }, ]; const App: React.FC = () => { const [targetKeys, setTargetKeys] = useState(originTargetKeys); const [disabled, setDisabled] = useState(false); const [showSearch, setShowSearch] = useState(false); const onChange = (nextTargetKeys: string[]) => { setTargetKeys(nextTargetKeys); }; const triggerDisable = (checked: boolean) => { setDisabled(checked); }; const triggerShowSearch = (checked: boolean) => { setShowSearch(checked); }; return ( <> item.title!.indexOf(inputValue) !== -1 || item.tag.indexOf(inputValue) !== -1 } leftColumns={leftTableColumns} rightColumns={rightTableColumns} /> ); }; export default App;