React component containing orderable and selectable list


stars 🌟issues ⚠️updated 🛠created 🐣size 🏋️‍♀️
62Nov 2, 2019Dec 4, 2017Minified + gzip package size for @opuscapita/react-select-order-list in KB




SelectOrderList component renders two lists. First contains data and we can check and uncheck them. After that selected row appears on second list where we can sort data by drag and drop function. We also have delete option avaiable from second list by remove icon.


npm install @opuscapita/react-select-order-list
  • Install and load font-awesome font to your project


View the DEMO



The default build with compiled styles in the .js file. Also minified version available in the lib/umd directory.

CommonJS/ES Module

You need to configure your module loader to use cjs or es fields of the package.json to use these module types. Also you need to configure sass loader, since all the styles are in sass format.



Prop name Type Default Description
availableData Immutable List of items List() List of the selectable items
onChange function required Callback function, which is called when data selection or order is changed. It returns an object of allSelected (boolean) sign and selectedData (List)
allSelected boolean false Sign of all available items selected
id string '' Id for a component div wrapper
searchPlaceholder string '' Placeholder for search
selectedData Immutable List of items List List of selected and sorted items
translations object { allLabel: '', availableListLabel: '', searchTooltip: '', selectedListLabel: '' } Localized labels
singleColumn boolean false Uses single column layout and shows only selected data cloumn

SelectOrderList - items

Prop name Type Default Description
label string or element required Item label
value string/bool/number required Item value
isLocked bool false Item locked sign

Code example

import React from 'react';
import { List } from 'immutable';
import SelectOrderList from '../../../src/index';

export default class ListItemsView extends React.Component {
  constructor(props) {
    this.state = {
      availableData: List([
          label: 'one',
          value: 1',
          label: 'two',
          value: 2,
          label: 'three',
          value: 3,
      selectedData: List([
          label: 'two',
          value: 2,
          label: 'three',
          value: 3,
      allSelected: false,

  onChange =(data) => {
    this.setState({ ...data });

  render() {
    return (
        availableListLabel="Available data"
        selectedListLabel="Selected data"

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.