Simple multi-select component with items displayed in a table like UI

Simple multi-select component with items displayed in a table like UI

Vue GridMultiselect .Simple multi-select component with items displayed in a table like UI

Vue GridMultiselect

Simple multi-select component with items displayed in a table like UI

Table of Contents

Installation

Run the following npm command:

source-shell
npm install vue-gridmultiselect --save

Or, place the following tags on your page:

text-html-basic
<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
  • Disabling Items
  • Row Details
  • Easily configurable
  • Custom slots
  • V-model support
  • Vuex support

Basic Usage

via NPM

text-html-basic
<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

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

Getting Started and Documentation

Detailed documentation and demos can be found here.

Custom Heading

text-html-basic
<GridMultiSelect 
  :items="items" 
  item-key="id" 
  item-label="name" 
  v-model="selectedItem" 
  title="Cities"
/>

Custom Labels

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

Grouping

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

Slots

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

Detailed documentation and demos can be found here.

Contribution

source-shell
// install the packages
npm install

// build the component into dist
npm run build

// run tests
npm run test

// serve at localhost:8080
npm run docs:dev

// build the documentation into dist
npm run docs:build

Contributing guide is in progress

License

MIT

Github

ProticM/vue-gridmultiselect

vuejs javascript vue-js programming

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

8 Popular Websites That Use The Vue.JS Framework

In this article, we are going to list out the most popular websites using Vue JS as their frontend framework. Vue JS is one of those elite progressive JavaScript frameworks that has huge demand in the web development industry. Many popular websites are developed using Vue in their frontend development because of its imperative features.

Vue.js Tab Components Based on Vue Router

vue-router-tab .A tab router component based on Vue Router.

Vue ShortKey plugin for Vue.js

Vue-ShortKey - The ultimate shortcut plugin to improve the UX .Vue-ShortKey - plugin for VueJS 2.x accepts shortcuts globaly and in a single listener.

A Vue.js wrapper component for Grid.js

A Vue wrapper component for Grid.js. Grid.js is a Free and open-source HTML table plugin written in TypeScript. It works with most JavaScript frameworks.

Displaying Modals in a Vue App with the vue-js-modal Library

A modal with many options. Displaying Modals in a Vue App with the vue-js-modal Library. Vue.js is an easy to use web app framework that we can use to develop interactive front end apps. In this article, we’ll look at Vue packages for adding modals with the vue-js-modal library.