Lately, I've been working on a Vue component called Vue GridMultiselect. It's a simple component and it gives you the ability to select items and display them in a table-like UI. Like a dropdown list but a little different.

Core Features and Characteristics

• No dependencies
• Searching
• Grouping
• Disabling Items
• Row Details
• Easily configurable
• Custom slots
• Menu Positioning
• V-model support
• Vuex support

Example usage:

HTML

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

JS

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

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" }
      ]
    };
  }
};

It's still a work in progress, and by publishing this post, I'm providing access to the alpha version.

I've published a pre-release, and you can find the source code here, and the documentation here.

Looking forward to your feedback. If you find it useful show your love by starring the repo :).