Handsontable-multi-select NPM

handsontable-multi-select

Handsontable editor and renderer for a multi select input using chosen.js, no jQuery.

WARNING: all 0.x.x versions are refering to old versions of handsontable. If you have the newest version, please refer to latest 1.x.x.

Installation

yarn add handsontable-multi-select

Usage

Just import the editor class and renderer function from handsontable-multi-select package, and you're good to go.

Options can be passed as an array or as a callback function as below.

import { MultiSelectEditor, MultiSelectRenderer } from 'handsontable-multi-select'
import 'handsontable-multi-select/dist/css/handsontable-multi-select.css'

new Handsontable(el, {
  ...,
  columns: [
    {
      editor: MultiSelectEditor,
      renderer: MultiSelectRenderer,
      readOnly: false,
      select: {
        config: {
          separator: ';',
          valueKey: 'value',
          labelKey: 'label'
        },
        options: [
          { value: 'SE', label: 'Sweden' },
          ...
        ]
        --- OR ---
        options (source, process) {
          return new Promise((resolve) => setTimeout(resolve, 500, [ ... ]))
        }
      }
    }
  ]
})

We also provide default styles for the selector in CSS and LESS that are adapted to handsontable.

handsontable-multi-select/dist/css/handsontable-multi-select.css or handsontable-multi-select/lib/multi-select.less

You can view a demo of the plugin by cloning this repository and yarn demo