Vuertify Easy Crud extends vuetify's v-data-table
component to provide easier handling of CRUD operations with less boilerplate code.
What component to use?
- just vuetify:
vec-table
- vuetify + vuex:
vex-table
- vuetify + vuex + firestore:
vef-table
For a complete working example with code, check out vuetify-easy-crud-example.
Vuetify is included as peer dependency. This means that you must install them yourself. NPM will warn you if they are not present in your project.
For instructions on how to install Vuetify please visit this quick start guide.
If you are using Vuetify's a la carte system you need to import the following components:
- VDataTable
- VCard, VCardTitle, VCardText, VCardActions
- VDialog, VTextField, VBtn, VIcon
- VSpacer
If you want to use vex-table
you need to install vuex
, visit this link for instructions.
If you want to use vef-table
you need to install vuex-easy-firestore
and firebase
, visit this link for instructions.
Install it with NPM
by running:
npm install --save @tmigone/vuetify-easy-crud
In your main.js
file include the following lines:
import VuetifyEasyCrud from '@tmigone/vuetify-easy-crud'
const options = {
globalMixins: false
}
Vue.use(VuetifyEasyCrud, options)
This will register all components globaly. If globalMixins
is set (the default is false) to true then mixins will also be globally registered (but you probably shouldnt do this).
You can also pick and import specific components locally doing:
import { VecTable, VecFragment, VecFormMixin } from '@tmigone/vuetify-easy-crud'
The vec-table
component is a regular tabular data table with easy CRUD capabilities.
<vec-table
:title="'Table title'"
:items="items"
:headers="['firstname', 'lastname']"
@add-item="addItem"
@update-item="updateItem"
@delete-item="deleteItem"
>
<template v-slot:list-view="props">
<list-view :item="props.item"></list-view>
</template>
<template v-slot:create-form="props">
<create-form></create-form>
</template>
<template v-slot:update-form="props">
<update-form :item="props.item"></update-form>
</template>
</vec-table>
vec-table
accepts the following properties:
Prop | Description |
---|---|
title |
(optional) Display name for the table. |
items |
(required) Array of objects representing the table items. |
headers |
(optional) Array of objects representing the table headers. See below for more options. |
disableSearch |
(optional) Disable search functionality. Default: false. |
disableCreateAction |
(optional) Disable create new item functionality. Default: false. |
disableEditAction |
(optional) Disable edit item functionality. Default: false. |
disableDeleteAction |
(optional) Disable delete item functionality. Default: false. |
Headers can be provided in two formats:
- As a string array:
[ 'header1', 'header2' ]
- As an array of objects with the following properties:
{
align: "left/center/right",
sortable: true/false, // Requires value to be set
text: "column name",
value: "value to sort by"
}
- If no headers are provided, the component will use the object keys from the first table item.
You can customize creation, read and update operations via slots. All of the slots are optional, though you should disable the corresponding action if you plan on not using one of them.
Slot | Description |
---|---|
list-view |
(optional) Slot to customize each table row. <td> tags must be enclosed in a <vec-fragment> , see component below. Receives props.item with the given item object. If not provided, item keys will be assigned to each column based on the header value property. |
update-form |
(required) Slot to customize the item update form. Receives props.item with the given item object. |
create-form |
(required) Slot to customize the item creation form. |
When building your custom create-form
or update-form
you will also need to extend your component with vec-form-mixin
. See the mixin section below to learn how to integrate with it.
Each CRUD operation performed on the data fires an event. This component does not alter the data it's given. It's up to the user to decide what to do with it:
Event | Description |
---|---|
add-item |
Emitted when a create-form is submitted. Payload: item object. |
update-item |
Emitted when an update-form is saved. Payload: item object. |
delete-item |
Emitted when an item is deleted. Payload: item object. |
The vec-fragment
is an auxiliary component used to customize the list-view
slot component. The list-view
component needs to return multiple <td>
elements at the root level. This functionality is currently planned to be implemented on Vue 3.0. Until then, this component uses vue-fragments to achieve the same result.
<template>
<vec-fragment>
<td>{{ item.firstname }}</td>
<td>{{ item.lastname }}</td>
</vec-fragment>
</template>
<script>
export default {
props: {
item: { type: Object, required: true, default: () => { } }
}
}
</script>
vex-table
component extends the functionality of vec-table
by adding integration with Vuex store.
The component uses a getter to obtain initial data and dispatches add/update/delete actions for CRUD operations.
Vuex setup and implementation need to be implemented separately.
<vex-table
module="moduleName"
title="Table title"
:headers="['firstname', 'lastname']"
>
<template v-slot:list-view="props">
<list-view :item="props.item"></list-view>
</template>
<template v-slot:create-form="props">
<create-form></create-form>
</template>
<template v-slot:update-form="props">
<update-form :item="props.item"></update-form>
</template>
</vex-table>
vex-table
accepts the following properties:
Prop | Description |
---|---|
module |
(required) Vuex module name. |
title |
(optional) Display name for the table. |
headers |
(optional) Array of objects representing the table headers. Shared options with vec-table . |
getter |
(optional) Name of the getter to obtain initial data. Default: <module>/get |
add |
(optional) Name of the action to add an item. Default: <module>/add |
update |
(optional) Name of the action to update an item. Default: <module>/update |
delete |
(optional) Name of the action to delete an item. Default: <module>/delete |
deleteByField |
(optional) Name of field by which items are identified on a delete action. Default: id |
See vec-table
slots.
As stated, this component dispatches events to the vuex store. Again, it's up to the user to provide the proper vuex store actions, mutations, etc.
Event type | Default event name | Description |
---|---|---|
get |
get |
(getter) Used to obtain initial data. Payload: none. |
add |
add |
Dispached when an item is added. Payload: item object. |
update |
update |
Dispached when an item is updated. Payload: item object. |
delete |
delete |
Dispached when an item is deleted. Payload: Unique identifier for the item: item[deleteByField] . |
vef-table
component extends the functionality of vec-table
by adding integration with Google Firestore.
The component uses getters and actions already established by vuex-easy-firestore
to automatically handle CRUD operations.
Both Vuex and Vuex Easy Firestore setup and implementation need to be implemented separately.
<vef-table module="moduleName" title="Table title" :headers="['firstname', 'lastname']">
<template v-slot:create-form="props">
<create-form></create-form>
</template>
<template v-slot:update-form="props">
<update-form :item="props.item"></update-form>
</template>
</vef-table>
vex-table
accepts the following properties:
Prop | Description |
---|---|
module |
(required) Firestore module name. |
title |
(optional) Display name for the table. |
headers |
(optional) Array of objects representing the table headers. Shared options with vec-table . |
See vec-table
slots.
All events are handled automatically for this component. No extra setup is required.
See vex-table
events. Additional events:
Event type | Default event name | Description |
---|---|---|
open |
openDBChannel |
Dispatched to open a two way sync with a collection. Automatically fired on created(). |
close |
closeDBChannel |
Dispatched to close a two way sync with a collection. Automatically fired on destroyed(). |
vec-form-mixin
is a mixin that simplifies the creation of vec-table
forms.
The mixin provides the following functionality:
item
property, to receive the given object. Read only.editableItem
component data. This is what your form should modify.exit
method. Closes the form without saving.createAndExit
method. Closes the form after saving a new item (based ofeditableItem
).updateAndExit
method. Closes the form after updating an existing item (based ofeditableItem
).