Transfer
Bootstrap 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
Note: Currently, the plugin is only compatible with the basic MDB package imported in UMD format. More about import MDB formats.
Basic example
To create a basic example, add a main div container and initialize it via JavaScript.
<div id="transfer-basic" class="transfer"></div>
const transferEl = document.getElementById('transfer-basic');
const data1 = [
{ data: 'Lorem ipsum' },
{ data: 'Something special' },
{ data: 'John Wick' },
{ data: 'Poland' },
{ data: 'Germany' },
{ data: 'USA' },
{ data: 'China' },
{ data: 'Madagascar' },
{ data: 'Argentina' },
];
const instanceTransfer = new Transfer(transferEl, {
dataSource: data1,
});
Disabled items
To make certain elements unselectable, add the 'disabled: true'
property to the respective item.
<div id="transfer-disabled" class="transfer"></div>
const transferEl = document.getElementById('transfer-disabled');
const data1 = [
{ data: 'Lorem ipsum' },
{ data: 'Something special', disabled: true },
{ data: 'John Wick' disabled: true },
{ data: 'Poland' },
{ data: 'Germany' },
{ data: 'USA' },
{ data: 'China' },
{ data: 'Madagascar', disabled: true },
{ data: 'Argentina' },
];
const data2 = [
{ data: 'Russia', disabled: true },
{ data: 'Australia' },
{ data: 'Hungary', disabled: true },
{ data: 'France' },
];
const instanceTransfer = new Transfer(transferEl, {
dataSource: data1,
dataTarget: data2,
});
Checked items
By adding the property 'checked: true'
to an item during initialization, you can mark the element.
<div id="transfer-checked" class="transfer"></div>
const transferEl = document.getElementById('transfer-checked');
const data1 = [
{ data: 'Lorem ipsum', checked: true },
{ data: 'Something special', checked: true },
{ data: 'John Wick', checked: true },
{ data: 'Poland' },
{ data: 'Germany' },
{ data: 'USA', checked: true },
{ data: 'China' },
{ data: 'Madagascar' },
{ data: 'Argentina' },
];
const data2 = [
{ data: 'Russia', checked: true },
{ data: 'Australia', checked: true },
{ data: 'Hungary' },
{ data: 'France' },
];
const instanceTransfer = new Transfer(transferEl, {
dataSource: data1,
dataTarget: data2,
});
One way
By adding 'oneWay: true'
property you can set your component to transfer data
only to target table.
<div id="transfer-one-way" class="transfer"></div>
const transferEl = document.getElementById('transfer-one-way');
const data1 = [
{ data: 'Lorem ipsum', checked: true },
{ data: 'Something special', checked: true },
{ data: 'John Wick', checked: true },
{ data: 'Poland' },
{ data: 'Germany' },
{ data: 'USA', checked: true },
{ data: 'China' },
{ data: 'Madagascar' },
{ data: 'Argentina' },
];
const data2 = [
{ data: 'Russia', checked: true },
{ data: 'Australia', checked: true },
{ data: 'Hungary' },
{ data: 'France' },
];
const instanceTransfer = new Transfer(transferEl, {
dataSource: data1,
dataTarget: data2,
oneWay: true,
});
Pagination
By adding 'pagination: true'
you can set pagination on transfer component.
<div id="transfer-pagination" class="transfer"></div>
const transferEl = document.getElementById('transfer-pagination');
const data1 = [
{ data: 'Lorem ipsum', checked: true },
{ data: 'Something special', checked: true },
{ data: 'John Wick', checked: true },
{ data: 'Poland' },
{ data: 'Germany', disabled: true },
{ data: 'USA', checked: true },
{ data: 'China' },
{ data: 'Madagascar' },
{ data: 'Argentina' },
];
const data2 = [
{ data: 'Russia', checked: true },
{ data: 'Australia', checked: true },
{ data: 'Hungary' },
{ data: 'France' },
];
const instanceTransfer = new Transfer(transferEl, {
dataSource: data1,
dataTarget: data2,
pagination: true,
});
Pagination with custom quantity
Furthermore, if you want to set custom number of elements per page then just use
'elementsPerPage'
property.
<div id="transfer-pagination-with-custom-quantity" class="transfer"></div>
const transferEl = document.getElementById('transfer-pagination-with-custom-quantity');
const data1 = [
{ data: 'Lorem ipsum', checked: true },
{ data: 'Something special', checked: true },
{ data: 'John Wick', checked: true },
{ data: 'Poland' },
{ data: 'Germany', disabled: true },
{ data: 'USA', checked: true },
{ data: 'China' },
{ data: 'Madagascar' },
{ data: 'Argentina' },
];
const data2 = [
{ data: 'Russia', checked: true },
{ data: 'Australia', checked: true },
{ data: 'Hungary' },
{ data: 'France' },
];
const instanceTransfer = new Transfer(transferEl, {
dataSource: data1,
dataTarget: data2,
pagination: true,
elementsPerPage: 7,
});
Search
By adding 'search: true'
property you can add search box to transfer component.
<div id="transfer-search" class="transfer"></div>
const transferEl = document.getElementById('transfer-search');
const data1 = [
{ data: 'Lorem ipsum', checked: true },
{ data: 'Something special', checked: true },
{ data: 'John Wick', checked: true },
{ data: 'Poland' },
{ data: 'Germany', disabled: true },
{ data: 'USA', checked: true },
{ data: 'China' },
{ data: 'Madagascar' },
{ data: 'Argentina' },
];
const data2 = [
{ data: 'Russia', checked: true },
{ data: 'Australia', checked: true },
{ data: 'Hungary' },
{ data: 'France' },
];
const instanceTransfer = new Transfer(transferEl, {
dataSource: data1,
dataTarget: data2,
pagination: true,
search: true,
});
Transfer - API
Import
import Transfer from 'mdb-transfer';
@import '~mdb-transfer/css/transfer.min.css';
Usage
Via JavaScript
const transfer = new Transfer(document.getElementById('mdb-transfer'), options)
Via jQuery
Note: By default, MDB does not include jQuery and you have to add it to the project on your own.
$(document).ready(() => {
$('.example-class').transfer(options);
});
Options
Options can be passed via data attributes or JavaScript. For data attributes, append the option name to
data-mdb-
, as in data-mdb-search="true"
.
Name | Type | Default | Description |
---|---|---|---|
dataTarget
|
Array | [] |
Add data to target table |
dataSource
|
Array | [] |
Add data to source table |
elementsPerPage
|
Number | 5 |
Work only with 'pagination:true' . Set number of items per page |
oneWay |
Boolean | false |
Allows you to set a way of sending data between tables |
noDataText |
String | 'No Data' |
Changes text displayed in an empty table |
pagination
|
Boolean | false |
Add pagination to your transfer component |
search |
Boolean | false |
Add search box to transfer component |
selectAll
|
Boolean | true |
Add select all checkbox to component |
titleTarget
|
String | 'Target' |
Changes title of target table |
titleSource
|
String | 'Source' |
Changes title of source table |
toTargetArrow
|
String | '' |
Changes text of right arrow |
toSourceArrow
|
String | '' |
Changes test of left arrow |
Element options
Name | Type | Default | Description |
---|---|---|---|
disabled
|
Boolean | 'false' |
Prevents an item from being selected |
checked
|
Boolean | 'false' |
Element checkbox is checked by default |
customId
|
String | null |
Assign customId to element |
Methods
Name | Description | Example |
---|---|---|
dispose
|
Manually removes transfer |
transfer.dispose()
|
getInstance
|
Static method which allows you to get the transfer instance associated to a DOM element. |
Transfer.getInstance(transferEl)
|
const transferEl = document.getElementById('mdb-transfer');
const transfer = new Transfer(transferEl);
transfer.toggle();
Events
Name | Description |
---|---|
listChange.mdb.transfer
|
This event fires immediately when the data changes. |
search.mdb.transfer
|
This event fires immediately when you search some items in search box. |
itemSelected.mdb.transfer
|
This event fires immediately when you select some item. |
const transferEl = document.getElementById('mdb-transfer')
transferEl.addEventListener('listChange.mdb.transfer', (e) => {
// do something...
})