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)