Transfer

React 5 Transfer plugin

Transfer component allows you to transfer the data between two columns.

Transfer plugin built with the latest Bootstrap 5. Transfer data between two columns. Supports disabled items, one way transfer, pagination, and more.

Note: Read the API tab to find all available options and advanced customization

Basic example

        
            
            import React from 'react';
            import { MDBTransfer } from 'mdb-react-transfer';
    
            export default function App() {
              return (
                <MDBTransfer
                  dataSource={[
                    {
                      text: 'Lorem ipsum',
                    },
                    {
                      text: 'Something special',
                    },
                    {
                      text: 'John Wick',
                    },
                    {
                      text: 'Poland',
                    },
                    {
                      text: 'Germany',
                    },
                    {
                      text: 'USA',
                    },
                    {
                      text: 'China',
                    },
                    {
                      text: 'Madagascar',
                    },
                    {
                      text: 'Argentina',
                    },
                  ]}
                />
              );
            }

Disabled items

To make some of elements unable to select just add 'disabled: true' property to proper item. 

        
            
            import React from 'react';
            import { MDBTransfer } from 'mdb-react-transfer';
    
            export default function App() {
              return (
                <MDBTransfer
                  dataSource={[
                    {
                      text: 'Lorem ipsum',
                    },
                    {
                      text: 'Something special',
                      disabled: true,
                    },
                    {
                      text: 'John Wick',
                      disabled: true,
                    },
                    {
                      text: 'Poland',
                    },
                    {
                      text: 'Germany',
                    },
                    {
                      text: 'USA',
                    },
                    {
                      text: 'China',
                    },
                    {
                      text: 'Madagascar',
                      disabled: true,
                    },
                    {
                      text: 'Argentina',
                    },
                  ]}
                  dataTarget={[
                    {
                      text: 'Russia',
                      disabled: true,
                    },
                    {
                      text: 'Australia',
                    },
                    {
                      text: 'Hungary',
                      disabled: true,
                    },
                    {
                      text: 'France',
                    },
                  ]}
                />
              );
            }

Checked items

By adding property 'checked: true' to item during initialization you can make element checked. 

        
            
            import React from 'react';
            import { MDBTransfer } from 'mdb-react-transfer';
    
            export default function App() {
              return (
                <MDBTransfer
                  dataSource={[
                    {
                      text: 'Lorem ipsum',
                      checked: true,
                    },
                    {
                      text: 'Something special',
                      checked: true,
                    },
                    {
                      text: 'John Wick',
                      checked: true,
                    },
                    {
                      text: 'Poland',
                    },
                    {
                      text: 'Germany',
                    },
                    {
                      text: 'USA',
                      checked: true,
                    },
                    {
                      text: 'China',
                    },
                    {
                      text: 'Madagascar',
                    },
                    {
                      text: 'Argentina',
                    },
                  ]}
                  dataTarget={[
                    {
                      text: 'Russia',
                      checked: true,
                    },
                    {
                      text: 'Australia',
                      checked: true,
                    },
                    {
                      text: 'Hungary',
                    },
                    {
                      text: 'France',
                    },
                  ]}
                />
              );
            }

One way

By adding oneWay property you can set your component to transfer data only to target table. 

        
            
            import React from 'react';
            import { MDBTransfer } from 'mdb-react-transfer';
    
            export default function App() {
              return (
                <MDBTransfer
                  dataSource={[
                    {
                      text: 'Lorem ipsum',
                      checked: true,
                    },
                    {
                      text: 'Something special',
                      checked: true,
                    },
                    {
                      text: 'John Wick',
                      checked: true,
                    },
                    {
                      text: 'Poland',
                    },
                    {
                      text: 'Germany',
                    },
                    {
                      text: 'USA',
                      checked: true,
                    },
                    {
                      text: 'China',
                    },
                    {
                      text: 'Madagascar',
                    },
                    {
                      text: 'Argentina',
                    },
                  ]}
                  dataTarget={[
                    {
                      text: 'Russia',
                      checked: true,
                    },
                    {
                      text: 'Australia',
                      checked: true,
                    },
                    {
                      text: 'Hungary',
                    },
                    {
                      text: 'France',
                    },
                  ]}
                  oneWay
                />
              );
            }

Pagination

By adding pagination property you can set pagination on transfer component.

        
            
            import React from 'react';
            import { MDBTransfer } from 'mdb-react-transfer';

            export default function App() {
              return (
                <MDBTransfer
                  dataSource={[
                    {
                      text: 'Lorem ipsum',
                      checked: true,
                    },
                    {
                      text: 'Something special',
                      checked: true,
                    },
                    {
                      text: 'John Wick',
                      checked: true,
                    },
                    {
                      text: 'Poland',
                    },
                    {
                      text: 'Germany',
                      disabled: true,
                    },
                    {
                      text: 'USA',
                      checked: true,
                    },
                    {
                      text: 'China',
                    },
                    {
                      text: 'Madagascar',
                    },
                    {
                      text: 'Argentina',
                    },
                  ]}
                  dataTarget={[
                    {
                      text: 'Russia',
                      checked: true,
                    },
                    {
                      text: 'Australia',
                      checked: true,
                    },
                    {
                      text: 'Hungary',
                    },
                    {
                      text: 'France',
                    },
                  ]}
                  pagination
                />
              );
            }

Pagination with custom quantity

Furthermore, if you want to set custom number of elements per page then just use elementsPerPage property. 

        
            
            import React from 'react';
            import { MDBTransfer } from 'mdb-react-transfer';

            export default function App() {
              return (
                <MDBTransfer
                  dataSource={[
                    {
                      text: 'Lorem ipsum',
                      checked: true,
                    },
                    {
                      text: 'Something special',
                      checked: true,
                    },
                    {
                      text: 'John Wick',
                      checked: true,
                    },
                    {
                      text: 'Poland',
                    },
                    {
                      text: 'Germany',
                      disabled: true,
                    },
                    {
                      text: 'USA',
                      checked: true,
                    },
                    {
                      text: 'China',
                    },
                    {
                      text: 'Madagascar',
                    },
                    {
                      text: 'Argentina',
                    },
                  ]}
                  dataTarget={[
                    {
                      text: 'Russia',
                      checked: true,
                    },
                    {
                      text: 'Australia',
                      checked: true,
                    },
                    {
                      text: 'Hungary',
                    },
                    {
                      text: 'France',
                    },
                  ]}
                  pagination
                  elementsPerPage={7}
                />
              );
            }

Transfer - API

Import

        
            
            import { MDBTransfer } from 'mdb-react-transfer';

Properties

MDBTransfer

Name Type Default Description Example
className string '' Adds a custom class to the MDBTransfer <MDBTransfer className="class" />
dataTarget DatasetType[] [] Adds a data to the target table <MDBTransfer dataTarget={{ text: 'Lorem ipsum', checked: true, disabled: false }} />
dataSource DatasetType[] [] Adds a data to the source table <MDBTransfer dataSource={{ text: 'Lorem ipsum', checked: true, disabled: false }} />
elementsPerPage number 5 Works only with a pagination property. Set number of items per page <MDBTransfer elementsPerPage={7} />
oneWay boolean false Allows you to set a way of sending data between tables <MDBTransfer oneWay />
pagination boolean false Adds a pagination to your transfer component <MDBTransfer pagination />
search boolean false Adds a search box to the transfer component <MDBTransfer search />
selectAll boolean true Add select all checkbox to component <MDBTransfer selectAll={false} />
titleTarget string "Target" Changes a title of the target table <MDBTransfer titleTarget='Target title example' />
titleSource string "titleSource" Changes a title of the source table <MDBTransfer titleSource='Source title example' />
targetArrowText string '' Changes a text of the right arrow <MDBTransfer targetArrowText='Transfer to the target' />
sourceArrowText string '' Changes a text of the left arrow <MDBTransfer sourceArrowText='Transfer to the source' />

Advanced types

DatasetType

        
                  
              interface DatasetType {
                text: string | React.ComponentProps<any>;
                disabled?: boolean;
                checked?: boolean;
              }

Events

MDBTransfer

Name Type Description
getTargetItems (items: DatasetType[]) => void This event fires immediately when data in the target table changed
getSourceItems (items: DatasetType[]) => void This event fires immediately when data in the source table changed
onChange (items: DatasetType[]) => any This event fires immediately when data changes
onSelect (item: DatasetType) => item This event fires immediately when you select the items and returns it