Searchable & Groupable Multi Select Component - GridMultiselect

Install & Download:

# NPM
$ npm install vue-gridmultiselect --save

Description:

The GridMultiselect Vue.js component provides a user-friendly interface to select multiple options from a searchable and groupable list.

Basic Usage:

1. Import Vue & Vue GridMultiselect into the app.

import GridMultiSelect from 'vue-gridmultiselect';
import 'vue-gridmultiselect/dist/vue-gridmultiselect.css';

2. Register the component and define the options as follows:

export default {
  name: "example",
  components: { GridMultiSelect },
  data() {
    return {
    selectedItems: null,
      items: [
        { id: 1, name: "San Francisco" },
        { id: 2, name: "Las Vegas" },
        { id: 3, name: "Washington" },
        { id: 4, name: "Munich" },
        { id: 5, name: "Berlin" },
        { id: 6, name: "Rome" }
      ]
    };
  }
};

3. Create the GridMultiSelect component in your template.

<GridMultiSelect 
  :items="items" 
  item-key="id" 
  item-label="name" 
  v-model="selectedItems" 
/>

4. Default props.

title: {
  type: String,
  default: "Grid Multiselect"
},
itemLabel: {
  value: [String, Array],
  required: true
},
itemKey: {
  type: String,
  required: true
},
items: {
  type: Array,
  default: () => []
},
value: {
  type: Array,
  default: () => []
},
searchable: {
  type: Boolean,
  default: true
},
emptyMessage: {
  type: String,
  default: "No Data"
},
groupBy: {
  type: String
},
itemDetails: {
  type: String
}