Transfer MDB Pro component

Transfer - Bootstrap 5 & Material Design 2.0 plugin

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

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


Basic example

To create basic example just add main div container and initialize its 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 some of elements unable to select just add 'disabled: true' property to proper 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 property 'checked: true' to item during initialization you can make element mark.


          <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,
            });
        

Transfer - API


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.


        $('.example-class').transfer(options);
      

Options

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
pagination Boolean 'false' Add pagination to your transfer component
search Boolean 'false' Add search box to trnsfer 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

Methods

Name Description Example
dispose Manually removes transfer transfer.dispose()

        const transferEl = document.getElementById('mdb-transfer'); 
        const transfer = new Transfer(transferEl);
        transfer.toggle();
      

Events

Name Description
change.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.
select.mdb.transfer This event fires immediately when you select some item.

        const transferEl = document.getElementById('mdb-transfer')
        transferEl.addEventListener('change.mdb.transfer', (e) => {
          // do something...
        })
      

Import

MDB UI KIT also works with module bundlers. Use the following code to import this component:


        import { Transfer } from 'mdb-ui-kit';