loading...

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

proticm profile image Milos Protic ・1 min read

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

Discussion

pic
Editor guide