Pick List

Components > Editing Data > Pick List

Use this component to...

Allow the user to easily move items between two lists

See this component in action...

Test out this component in a hosted version of the sample app

Overview

Use the pick list component to allow the user to easily move items between two lists.

Two lists are displayed next to each other.
The user can move either one or more selected items or move all items at once.
The user can use either drag and drop or the move buttons to move items between the lists
The pick list optionally allows the user to filter items in each list. This can be useful if the list contains a large number of items.

This pick list allows the user to move items between a list of available options and another list of selected options

Development

Web component development

Component reference

p-pickList

Module: PickListModule - Package: primeng

⚠️ This component requires the use of Angular and will not work in non-Angular applications.

Used to reorder and move items between different lists

View the p-pickList reference doc

If you're adding PrimeNG to your solution for the first time, reference their setup documentation. It's important to note that the inclusion of the nova-light theme css is not necessary to work with Responsive UI. Styling for the PrimeNG components is provided by Responsive UI's theming.

Implementation

Add primeng and primeicons as dependencies to your package.json file.

Package dependencies

"primeicons": "x.y.z",
"primeng": "x.y.z",

Import the PickListModule module in app.module.ts.

Import the module

import { PickListModule } from 'primeng/picklist';

@NgModule({
    declarations: [...],
    imports: [
        ...
        PickListModule
    ],
    providers: [...],
    bootstrap: [AppComponent]
})
export class AppModule { }

Add a <p-pickList> component to your view. Bind the source and target properties to object arrays of your items. Set text values for the sourceHeader and targetHeader and enable dragdrop and responsive by binding both to true.

If you want the user to be able to filter the lists, specify which data field to filter by in the filterBy property and enter text values for the sourceFilterPlaceholder and the targetFilterPlaceholder.

Finally, create an ng-template to layout the list data.

Pick list HTML

<p-pickList
    [source]="sourceProducts"
    sourceHeader="Available"
    sourceFilterPlaceholder="Search by name"

    [target]="targetProducts"
    targetHeader="Selected"
    targetFilterPlaceholder="Search by name"

    dragdrop="true"
    [responsive]="true"
    filterBy="name">
    <ng-template let-product pTemplate="item">
        <div class="product-item">
            <div class="product-list-detail">
                <h5>{{product.name}}</h5>
                <span class="product-category">{{product.category}}</span>
            </div>
            <div class="product-list-action">
                <h6>$ {{product.price}}</h6>
                <span>{{product.inventoryStatus}}</span>
            </div>
        </div>
    </ng-template>
</p-pickList>

In the Typescript file, fetch and assign the data for the source and target lists.

Import the module

export class PickListComponent implements OnInit {
    sourceProducts: any[];
    targetProducts: any[];

    constructor(private productService: ProductService) { }

    ngOnInit() {
        this.productService.getProducts().then(products => this.sourceProducts = products);
        this.targetProducts = [];
    }
}

Angular component development

Component reference

p-pickList

Module: PickListModule - Package: primeng

Used to reorder and move items between different lists

View the p-pickList reference doc

Implementation

Add primeng and primeicons as dependencies to your package.json file.

Package dependencies

"primeicons": "x.y.z",
"primeng": "x.y.z",

Import the PickListModule module in app.module.ts.

Import the module

import { PickListModule } from 'primeng/picklist';

@NgModule({
    declarations: [...],
    imports: [
        ...
        PickListModule
    ],
    providers: [...],
    bootstrap: [AppComponent]
})
export class AppModule { }

Finally, create an ng-template to layout the list data.

Pick list HTML

<p-pickList
    [source]="sourceProducts"
    sourceHeader="Available"
    sourceFilterPlaceholder="Search by name"

    [target]="targetProducts"
    targetHeader="Selected"
    targetFilterPlaceholder="Search by name"

    dragdrop="true"
    [responsive]="true"
    filterBy="name">
    <ng-template let-product pTemplate="item">
        <div class="product-item">
            <div class="product-list-detail">
                <h5>{{product.name}}</h5>
                <span class="product-category">{{product.category}}</span>
            </div>
            <div class="product-list-action">
                <h6>$ {{product.price}}</h6>
                <span>{{product.inventoryStatus}}</span>
            </div>
        </div>
    </ng-template>
</p-pickList>

In the Typescript file, fetch and assign the data for the source and target lists.

Import the module

export class PickListComponent implements OnInit {
    sourceProducts: any[];
    targetProducts: any[];

    constructor(private productService: ProductService) { }

    ngOnInit() {
        this.productService.getProducts().then(products => this.sourceProducts = products);
        this.targetProducts = [];
    }
}

Design

Figma design

Figma design info

You can find this component in the Components - List Categorization page in the Figma UI Kit.

Dev Component	Design Component Name
Pick List	RUI / Pick List
Pick List with Up/Down buttons	RUI / Pick List with Reorder Buttons

Add a pick list component if the user cannot reorder the items in either list.

Add a pick list with up and down buttons component if the user can reorder the items in both lists.

Add a template for each item in the list. See the Text design documentation for more details on displaying different types of text and the Templated Lists design documentation for more details on designing templated lists.

Adobe XD design

Adobe XD design info

You can find this component in these artboards in the Adobe XD design samples:

Sample App - List Categorization - Pick List

Dev Component	Design Component Name
Pick List	JHA / Pick List
Pick List with Up/Down buttons	JHA / Pick List with Up and Down Buttons

Add a pick list component if the user cannot reorder the items in either list.

Add a pick list with up and down buttons component if the user can reorder the items in both lists.

Support options

Have questions on this topic?

Join the Responsive UI team in Microsoft Teams to connect with the community.

See something in this page that needs to change?

Send us feedback on this page.

Last updated Wed Apr 19 2023