TransferList

Move items between two lists
Import

Usage

Frameworks
Libraries
import { useState } from 'react';
import { TransferList, TransferListData } from '@mantine/core';
const initialValues: TransferListData = [
[
{ value: 'react', label: 'React' },
{ value: 'ng', label: 'Angular' },
{ value: 'next', label: 'Next.js' },
{ value: 'blitz', label: 'Blitz.js' },
{ value: 'gatsby', label: 'Gatsby.js' },
{ value: 'vue', label: 'Vue' },
{ value: 'jq', label: 'jQuery' },
],
[
{ value: 'sv', label: 'Svelte' },
{ value: 'rw', label: 'Redwood' },
{ value: 'np', label: 'NumPy' },
{ value: 'dj', label: 'Django' },
{ value: 'fl', label: 'Flask' },
],
];
function Demo() {
const [data, setData] = useState<TransferListData>(initialValues);
return (
<TransferList
value={data}
onChange={setData}
searchPlaceholder="Search..."
nothingFound="Nothing here"
titles={['Frameworks', 'Libraries']}
breakpoint="sm"
/>
);
}

Native scrollbars

By default, TransferList uses ScrollArea to render list. If you want to use native scrollbars instead, set div as a list component:

Frameworks
Libraries
<TransferList listHeight={100} listComponent="div" {/* ...other props */} />

Custom item component

To customize item appearance, replace default item component:

  • Add additional props to data
  • Build a component which will consume your data object
  • Provide custom component via itemComponent prop
  • Customize search with filter function
Employees to hire
Employees to fire
No one here
import { useState } from 'react';
import {
Checkbox,
Group,
Avatar,
Text,
TransferList,
TransferListData,
TransferListItemComponent,
TransferListItemComponentProps,
} from '@mantine/core';
const mockdata = [
{
value: 'bender',
image: 'https://img.icons8.com/clouds/256/000000/futurama-bender.png',
label: 'Bender Bending Rodríguez',
description: 'Fascinated with cooking, though has no sense of taste',
},
{
value: 'carol',
image: 'https://img.icons8.com/clouds/256/000000/futurama-mom.png',
label: 'Carol Miller',
description: 'One of the richest people on Earth',
},
// ...other items
];
const ItemComponent: TransferListItemComponent = ({
data,
selected,
}: TransferListItemComponentProps) => (
<Group noWrap>
<Avatar src={data.image} radius="xl" size="lg" />
<div style={{ flex: 1 }}>
<Text size="sm" weight={500}>
{data.label}
</Text>
<Text size="xs" color="dimmed" weight={400}>
{data.description}
</Text>
</div>
<Checkbox checked={selected} onChange={() => {}} tabIndex={-1} sx={{ pointerEvents: 'none' }} />
</Group>
);
function Demo() {
const [data, setData] = useState<TransferListData>([mockdata, []]);
return (
<TransferList
value={data}
onChange={setData}
searchPlaceholder="Search employees..."
nothingFound="No one here"
titles={['Employees to hire', 'Employees to fire']}
listHeight={300}
breakpoint="sm"
itemComponent={ItemComponent}
filter={(query, item) =>
item.label.toLowerCase().includes(query.toLowerCase().trim()) ||
item.description.toLowerCase().includes(query.toLowerCase().trim())
}
/>
);
}

Initial selection

Set initial selected items with initialSelection prop. Value should be a tuple of two arrays which contain values from data:

Frameworks
Libraries
<TransferList initialSelection={[['react', 'ng'], []]} />

Responsive styles

Set breakpoint prop to specify at which breakpoint TransferList will collapse to 1 column:

// -> breakpoint from theme.breakpoints: value is theme.breakpoints.sm
<TransferList breakpoint="sm" />
// -> breakpoint in px: value is 755px
<TransferList breakpoint={755} />
Build fully functional accessible web applications faster than ever
Feedback
Your feedback is most valuable contribution to the project, please share how you use Mantine, what features are missing and what is done good
Leave feedback