Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

https://github.com/ProticM/vue-gridmultiselect

Simple multi-select component with items displayed in a table like UI
https://github.com/ProticM/vue-gridmultiselect

component grid javascript select vue

Last synced: 2 months ago
JSON representation

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

Lists

README 

        


  

    

  

  


    Vue GridMultiselect

   


  

    license-mit

    

    

    version

    

    

    downloads

    

    

    jsdelivr

    

    

    min-size

    

    





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




## Table of Contents



- :hammer: [Installation](#installation)

- :loudspeaker: [Introduction](#introduction)

- :loudspeaker: [Basic Usage](#basic-usage)

- :book: [Getting Started and Documentation](#getting-started-and-documentation)

- :thumbsup: [Contribution](#contribution)



## Installation



Run the following npm command:

```bash

npm install vue-gridmultiselect --save

```

Or, place the following tags on your page:

```html



```



## 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



```html



  



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" }

      ]

    };

  }

};



```

#### via CDN



```html

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

```



## Getting Started and Documentation



Detailed documentation and demos can be found [here](https://proticm.github.io/vue-gridmultiselect/).



#### Custom Heading



```html



```



#### Custom Labels



```html



```



#### Grouping



```html



```

#### Slots



```html



    

        The city {{selectedItem.name}} is located in {{selectedItem.state}}

    



```

Detailed documentation and demos can be found [here](https://proticm.github.io/vue-gridmultiselect/).



## Contribution



```bash

// 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

```



Please read the full [Contributing Guide](https://github.com/ProticM/vue-gridmultiselect/blob/master/CONTRIBUTING.md) before making a pull request.



## License



[MIT](https://github.com/ProticM/vue-gridmultiselect/blob/master/LICENSE)