Awesome

<p align="center"> <a href="https://github.com/ProticM/vue-gridmultiselect"> <img src="https://raw.githubusercontent.com/ProticM/vue-gridmultiselect/master/cover-img.jpg" /> </a> <h1 align="center"> Vue GridMultiselect <br> <a href="https://www.npmjs.com/package/vue-gridmultiselect"> <img src="https://img.shields.io/badge/License-MIT-brightgreen.svg" alt="license-mit" /> </a> <a href="https://www.npmjs.com/package/vue-gridmultiselect"> <img src="https://img.shields.io/npm/v/vue-gridmultiselect.svg?style=flat" alt="version" /> </a> <a href="https://npmcharts.com/compare/vue-gridmultiselect?minimal=true"> <img src="https://img.shields.io/npm/dt/vue-gridmultiselect.svg" alt="downloads" /> </a> <a href="https://www.jsdelivr.com/package/npm/vue-gridmultiselect"> <img src="https://data.jsdelivr.com/v1/package/npm/vue-gridmultiselect/badge?style=rounded" alt="jsdelivr" /> </a> <a href="https://bundlephobia.com/result?p=vue-gridmultiselect"> <img src="https://badgen.net/bundlephobia/min/vue-gridmultiselect" alt="min-size" /> </a> </h1> </p> <p align="center"> Simple multi-select component with items displayed in a table like UI </p>

:hammer: Installation
:loudspeaker: Introduction
:loudspeaker: Basic Usage
:book: Getting Started and Documentation
:thumbsup: Contribution

Installation

Run the following npm command:

npm install vue-gridmultiselect --save

Or, place the following tags on your page:

<script src="https://cdn.jsdelivr.net/npm/vue-gridmultiselect"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vue-gridmultiselect/dist/vue-gridmultiselect.css">

Introduction

A simple multi-select component for Vue framework with items displayed in a table like UI. An alternative to dropdown based select components.

Features and Characteristics

No dependencies
Searching
Grouping
Split View
Labeling (title, no data messages, multiple keys as a label source...)
Disabling Items
Row Details
Menu Positioning
Easily configurable
Custom slots
V-model support
Vuex support

Basic Usage

via NPM

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

<script>
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", state: "USA" },
        { id: 2, name: "Las Vegas", state: "USA" },
        { id: 3, name: "Washington", state: "USA" },
        { id: 4, name: "Munich", state: "Germany" },
        { id: 5, name: "Berlin", state: "Germany" },
        { id: 6, name: "Rome", state: "Italy" }
      ]
    };
  }
};
</script>

via CDN

Vue.component('vue-gridmultiselect', VueGridMultiselect);

Getting Started and Documentation

Detailed documentation and demos can be found here.

Custom Heading

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

Custom Labels

<GridMultiSelect 
  :items="items" 
  item-key="id" 
  :item-label="['name', 'state|name']"
  v-model="selectedItems" 
  title="Cities" 
/>

Grouping

<GridMultiSelect 
  :items="items" 
  item-key="id" 
  item-label="name" 
  group-by="state"
  v-model="selectedItems" 
  title="Cities" 
/>

Slots

<GridMultiSelect
  :items="items"
  item-key="id"
  item-label="name"
  group-by="state"
  v-model="selectedItems"
  title="Cities">
    <template v-slot:selected-item="{selectedItem}">
        The city {{selectedItem.name}} is located in {{selectedItem.state}}
    </template>
</GridMultiSelect>