Transfer

Vue Bootstrap 5 Transfer plugin

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

Transfer plugin built with the latest Bootstrap 5 and Vue 3. 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

To create basic example just use MDBTransfer component

Source
0/ 8
Target
0/ 0
    No Data
<template>
  <MDBTransfer
    :dataSource="[
      { data: 'Lorem ipsum' },
      { data: 'Something special' },
      { data: 'John Wick' },
      { data: 'Poland' },
      { data: 'Germany' },
      { data: 'USA' },
      { data: 'China' },
      { data: 'Madagascar' },
      { data: 'Argentina' },
    ]"
  />
</template>
<script>
  import { MDBTransfer } from "mdb-vue-transfer";
  export default {
    components: {
      MDBTransfer
    }
  };
</script>
<script setup lang="ts">
  import { MDBTransfer } from "mdb-vue-transfer";
</script>

Disabled items

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

Source
0/ 9
Target
0/ 4
<template>
  <MDBTransfer
      :dataSource="[
        { 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' },
      ]"
      :dataTarget="[
        { data: 'Russia', disabled: true },
        { data: 'Australia' },
        { data: 'Hungary', disabled: true },
        { data: 'France' },
      ]"
    />
</template>
<script>
  import { MDBTransfer } from "mdb-vue-transfer";
  export default {
    components: {
      MDBTransfer
    }
  };
</script>
<script setup lang="ts">
  import { MDBTransfer } from "mdb-vue-transfer";
</script>

Checked items

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

Source
4/ 9
Target
2/ 4
<template>
  <MDBTransfer
    :dataSource="[
      { data: 'Lorem ipsum' },
      { data: 'Something special' },
      { data: 'John Wick' },
      { data: 'Poland' },
      { data: 'Germany' },
      { data: 'USA' },
      { data: 'China' },
      { data: 'Madagascar' },
      { data: 'Argentina' },
    ]"
    :dataTarget="[
      { data: 'Russia', checked: true },
      { data: 'Australia', checked: true },
      { data: 'Hungary' },
      { data: 'France' },
    ]"
  />
</template>
<script>
  import { MDBTransfer } from "mdb-vue-transfer";
  export default {
    components: {
      MDBTransfer
    }
  };
</script>
<script setup lang="ts">
  import { MDBTransfer } from "mdb-vue-transfer";
</script>

One way

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

Source
4/ 9
Target
2/ 4
<template>
  <MDBTransfer
    oneWay
    :dataSource="[
      { 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' },
    ]"
    :dataTarget="[
      { data: 'Russia', checked: true },
      { data: 'Australia', checked: true },
      { data: 'Hungary' },
      { data: 'France' },
    ]"
  />
</template>
<script>
  import { MDBTransfer } from "mdb-vue-transfer";
  export default {
    components: {
      MDBTransfer
    }
  };
</script>
<script setup lang="ts">
  import { MDBTransfer } from "mdb-vue-transfer";
</script>

Pagination

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

Source
4/ 9
1
Target
2/ 4
1
<template>
  <MDBTransfer
    pagination
    :dataSource="[
      { 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' },
    ]"
    :dataTarget="[
      { data: 'Russia', checked: true },
      { data: 'Australia', checked: true },
      { data: 'Hungary' },
      { data: 'France' },
    ]"
  />
</template>
<script>
  import { MDBTransfer } from "mdb-vue-transfer";
  export default {
    components: {
      MDBTransfer
    }
  };
</script>
<script setup lang="ts">
  import { MDBTransfer } from "mdb-vue-transfer";
</script>

Pagination with custom quantity

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

Source
4/ 9
1
Target
2/ 4
1
<template>
  <MDBTransfer
    pagination
    :elementsPerPage="7"
    :dataSource="[
      { 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' },
    ]"
    :dataTarget="[
      { data: 'Russia', checked: true },
      { data: 'Australia', checked: true },
      { data: 'Hungary' },
      { data: 'France' },
    ]"
  />
</template>
<script>
  import { MDBTransfer } from "mdb-vue-transfer";
  export default {
    components: {
      MDBTransfer
    }
  };
</script>
<script setup lang="ts">
  import { MDBTransfer } from "mdb-vue-transfer";
</script>

Transfer - API

Import

<script>
  import { MDBTransfer } from "mdb-vue-transfer";
</script>

Properties

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 transfer component
selectAll Boolean 'true' Add select all checkbox to component
tag String 'div' Sets wrapper tag element
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
getTarget Returns current target array.
getSource Returns current source array. 
<template>
  <MDBTransfer
    ref="transferRef"
    :dataSource="[
      { data: 'Poland' },
      { data: 'Germany' },
      { data: 'USA' },
      { data: 'China' },
      { data: 'Madagascar' },
      { data: 'Argentina' },
    ]"
  />
</template>
<script>
  import { MDBTransfer } from "mdb-vue-transfer";
  import { onMounted, ref } from "vue";

  export default {
    components: {
      MDBTransfer,
    },
    setup() {
      const transferRef = ref(null);

      const source = () => console.log(transferRef.value?.getSource());
      const target = () => console.log(transferRef.value?.getTarget());

      onMounted(() => {
        source();
        target();
      });

      return {
        transferRef,
      };
    },
  };
</script>
<script setup lang="ts">
  import { MDBTransfer } from "mdb-vue-transfer";
  import { onMounted, ref } from "vue";

  const transferRef = ref<InstanceType<typeof MDBTransfer> | null>(null);

  const source = () => console.log(transferRef.value?.getSource());
  const target = () => console.log(transferRef.value?.getTarget());

  onMounted(() => {
    source();
    target();
  });
</script>

Events

Name Description
onChange This event fires immediately when the data changes.
onSearch This event fires immediately when you search some items in search box.
onSelect This event fires immediately when you select some item.

For example, to listen on file change add an event

<template>
  <MDBTransfer @onChange="handleChange" />
</template>