DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 963,864 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Milos Protic
Milos Protic

Posted on

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

Top comments (0)

This post blew up on DEV in 2020:

js visualized

πŸš€βš™οΈ JavaScript Visualized: the JavaScript Engine

As JavaScript devs, we usually don't have to deal with compilers ourselves. However, it's definitely good to know the basics of the JavaScript engine and see how it handles our human-friendly JS code, and turns it into something machines understand! πŸ₯³

Happy coding!