react-checkbox-selectable

A checkbox selectable input table for large select options with support for drag and drop feature

Installation

Through npm:

npm install --save react-checkbox-selectable

Through yarn:

yarn add react-checkbox-selectable

Usage

import { CheckboxSelectable } from 'react-checkbox-selectable';
 
class Example extends Component {
  render () {
    return (
        <CheckboxSelectable
            items={items}
            selectedItems={selectedItems}
            onChange={selectedItems => {/* Do whatever you want with the selectedItems data*/}}
            customButton={CustomButton}
        />
    )
  }
}

Properties

Name	Type	Default	Option	Description
items	Array	[]	required	list of items.
selectedItems	Array	[]	required	selected list to start with (subgroup of items).
onChange	function	(selectedItems)=>{}	required	callback for changed event.
customButton	Component	Button	optional	toggle to show loading indication.

Notes

In current version, items given to the items and selectedItems props support only as the below format shown. This rule apply similarly as the selectedItems argument that passed through the onChange props. It is in future planning that the provision of getOptionLabel and getOptionId props to be added for better user experience.

 const items = [
    {id: 0, label: 'A'},
    {id: 1, label: 'B'},
    ...
 ]

In addition, drag and Drop feature is only supported on the selected items list.

Contributing

Feel free to make any pull request that will better enhance the component.

License

MIT © Wnyao