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
<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.
<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.
<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.
<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.
<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.
<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>
Search
By adding search property you can add search box to
transfer component.
<template>
<MDBTransfer
pagination
search
: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>