Introducing Vue GridMultiselect - Simple Multi-Select Component With Items Displayed in a Table Like UI

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 :).