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}
/>
);
}
Search
By adding search property you can add search box to 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
search
/>
);
}
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;
}
Methods
| Name | Type | Default | Description | Example |
|---|---|---|---|---|
getTargetItems
|
(items: DatasetType[]) => void | |
This event fires immediately when data in the target table changed |
<MDBTransfer getTargetItems={(e) => console.log(e)} />
|
getSourceItems
|
(items: DatasetType[]) => void | |
This event fires immediately when data in the source table changed |
<MDBTransfer getSourceItems={(e) => console.log(e)} />
|