{"id":17374143,"url":"https://github.com/wangtao0101/react-virtualized-transfer","last_synced_at":"2026-04-08T14:31:27.116Z","repository":{"id":57347454,"uuid":"89133070","full_name":"wangtao0101/react-virtualized-transfer","owner":"wangtao0101","description":"Transfer component with virtualization","archived":false,"fork":false,"pushed_at":"2017-12-11T08:16:42.000Z","size":1320,"stargazers_count":14,"open_issues_count":2,"forks_count":3,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-10-04T13:46:27.540Z","etag":null,"topics":["antd","react","react-virtualized"],"latest_commit_sha":null,"homepage":"https://wangtao0101.github.io/react-virtualized-transfer/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/wangtao0101.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-04-23T10:11:20.000Z","updated_at":"2022-11-03T07:19:56.000Z","dependencies_parsed_at":"2022-08-28T04:00:54.458Z","dependency_job_id":null,"html_url":"https://github.com/wangtao0101/react-virtualized-transfer","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/wangtao0101/react-virtualized-transfer","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wangtao0101%2Freact-virtualized-transfer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wangtao0101%2Freact-virtualized-transfer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wangtao0101%2Freact-virtualized-transfer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wangtao0101%2Freact-virtualized-transfer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/wangtao0101","download_url":"https://codeload.github.com/wangtao0101/react-virtualized-transfer/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wangtao0101%2Freact-virtualized-transfer/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31559701,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-08T14:31:17.711Z","status":"ssl_error","status_checked_at":"2026-04-08T14:31:17.202Z","response_time":54,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["antd","react","react-virtualized"],"created_at":"2024-10-16T03:04:12.986Z","updated_at":"2026-04-08T14:31:27.088Z","avatar_url":"https://github.com/wangtao0101.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-virtualized-transfer\n\n[![NPM version](https://img.shields.io/npm/v/react-virtualized-transfer.svg?style=flat)](https://www.npmjs.com/package/react-virtualized-transfer)\n[![Build Status](https://img.shields.io/travis/wangtao0101/react-virtualized-transfer.svg?style=flat)](https://travis-ci.org/wangtao0101/react-virtualized-transfer)\n[![codecov](https://codecov.io/gh/wangtao0101/react-virtualized-transfer/branch/master/graph/badge.svg)](https://codecov.io/gh/wangtao0101/react-virtualized-transfer)\n\nTransfer component with virtualization based on [antd](https://github.com/ant-design/ant-design), and 10 times performance than antd transfer!\n\nTo develop fast, some code and file maybe come from antd, thank to the great project!\n\nExample: https://wangtao0101.github.io/react-virtualized-transfer/\n\n## Break Change\nuse css.js and less.js to help import css or less !!\nsupport es version !!\n\n## Motivation\nWe should handle more than 10 thousands of data, but the transfer component in antd is very slow when the number comes to 1000\n\n## Difference with antd\n1. needs rowHeight prop (since using [react virtualized](https://github.com/bvaughn/react-virtualized))\n2. fast without using [Animate](https://github.com/react-component/animate)\n3. no i18n, user should realize by yourself\n\n## Getting started\n```\nnpm install react-virtualized-transfer --save\nyarn add react-virtualized-transfer\n```\n\nUse css version\n```\nimport Transfer from 'react-virtualized-transfer';\n\nrequire('react-virtualized-transfer/lib/css')\n// or\nrequire('react-virtualized-transfer/es/css')\n```\nUse less version, then you can [modify less variable](https://ant.design/docs/react/customize-theme-cn)\n```\nimport Transfer from 'react-virtualized-transfer';\n\nrequire('react-virtualized-transfer/lib/less')\n// or\nrequire('react-virtualized-transfer/es/less')\n```\n\n## API (not support means antd support but react-virtualized-transfer not support)\n\n| Property      | Description                                     | Type       | Default |\n|-----------|------------------------------------------|------------|--------|\n| rowHeight  | rowHeight for each item | number | 32\n| dataSource | Used for setting the source data. The elements that are part of this array will be present the left column. Except the elements whose keys are included in `targetKeys` prop. | [TransferItem](https://git.io/vMM64)[] | [] |\n| render | The function to generate the item shown on a column. Based on an record (element of the dataSource array), this function should return a React element which is generated from that record. | Function(record) |     |\n| targetKeys | A set of keys of elements that are listed on the right column. | string[] | [] |\n| selectedKeys | A set of keys of selected items. | string[] | [] |\n| onChange | A callback function that is executed when the transfer between columns is complete. | (targetKeys, direction, moveKeys): void | |\n| onSelectChange | A callback function which is executed when selected items are changed. | (sourceSelectedKeys, targetSelectedKeys): void | |\n| onScroll(not support) | A callback function which is executed when scroll options list | (direction, event): void | |\n| listStyle | A custom CSS style used for rendering the transfer columns. | object |  |\n| className | A custom CSS class. | string | ['', ''] |\n| titles | A set of titles that are sorted from left to right. | string[] | - |\n| operations | A set of operations that are sorted from top to bottom. | string[] | [] |\n| showSearch | If included, a search box is shown on each column. | boolean | false |\n| filterOption | A function to determine whether an item should show in search result list | (inputValue, option): boolean | |\n| searchPlaceholder | The hint text of the search box. | string | 'Search here' |\n| notFoundContent | Text to display when a column is empty. | string\\|ReactNode | 'The list is empty'  |\n| footer | A function used for rendering the footer. | (props): ReactNode |  |\n| lazy(not support) | property of [react-lazy-load](https://github.com/loktar00/react-lazy-load) for lazy rendering items | object | `{ height: 32, offset: 32 }` |\n| onSearchChange(not support) | A callback function which is executed when search field are changed | (direction: 'left'\\|'right', event: Event): void | - |\n\n\n## Example \nexample from [antd transfer](https://ant.design/components/transfer/)\n```js\nexport default class TestTransferList extends React.Component {\n    constructor(props) {\n        super(props);\n        this.state = {\n            selectedKeys: [],\n            targetKeys: [],\n            dataSource: [],\n        };\n        this.getMock = this.getMock.bind(this);\n        this.handleSelectChange = this.handleSelectChange.bind(this);\n        this.handleChange = this.handleChange.bind(this);\n    }\n\n    componentWillMount() {\n        this.getMock();\n    }\n\n    getMock() {\n        const dataSource = [];\n        const targetKeys = [];\n        const length = 5000;\n        for (let i = 0; i \u003c (length \u003c 1 ? 10 : length); i += 1) {\n            const data = {\n                key: i.toString(),\n                title: `content${i + 1}`,\n                description: `description of content${i + 1}`,\n                disabled: i % 3 \u003c 1,\n                chosen: Math.random() * 2 \u003e 1,\n            };\n            if (data.chosen) {\n                targetKeys.push(data.key);\n            }\n            dataSource.push(data);\n        }\n        this.setState({\n            dataSource,\n            selectedKeys: [],\n            targetKeys,\n        });\n    }\n\n    filterOption(inputValue, option) {\n        return option.description.indexOf(inputValue) \u003e -1;\n    }\n\n    handleChange(nextTargetKeys, _direction, _moveKeys) {\n        this.setState({ targetKeys: nextTargetKeys });\n    }\n\n    handleSelectChange(sourceSelectedKeys, targetSelectedKeys) {\n        this.setState({ selectedKeys: [...sourceSelectedKeys, ...targetSelectedKeys] });\n    }\n\n    render() {\n        return (\n            \u003cTransfer\n                render={item =\u003e `${item.title}-${item.description}`}\n                dataSource={this.state.dataSource}\n                targetKeys={this.state.targetKeys}\n                selectedKeys={this.state.selectedKeys}\n                onSelectChange={this.handleSelectChange}\n                filterOption={this.filterOption}\n                onChange={this.handleChange}\n                titles={['source', 'target']}\n                className={'test'}\n                rowHeight={32}\n                listStyle={{\n                    width: '40%',\n                    height: 400,\n                }}\n                operations={['to right', 'to left']}\n                showSearch\n                notFoundContent={'not found'}\n                searchPlaceholder={'Search'}\n            /\u003e\n        );\n    }\n}\n```\n\n\n## Roadmap\n- [ ] onSearchChange props\n- [ ] onScroll props\n- [ ] full test\n- [ ] more example and compare with antd\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwangtao0101%2Freact-virtualized-transfer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwangtao0101%2Freact-virtualized-transfer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwangtao0101%2Freact-virtualized-transfer/lists"}