Vuetify plugin VApiDatatable

Vuetify complex v-data-table based component for server requests ✨

Package includes 2 components

VApiDatatable

Use for easy server requests. Just pass your api methods and headers to component and use!

VCrudDatatable

Use for CRUD server models

Features

VApiDatatable

• Server change pagination, sort, perpage - Just pass api methods
• Settings module - Reorder, pin and hide colums. And it will be cached to local storage.
• Add custom search field - Pass your own search fields via slots

VCrudDatatable

• Inludes all features VApiDatatable
• Create object - Pass your create(POST) method to method-create prop
• Delete object - Pass your delete(DELETE) method to method-delete prop
• Update object - Pass your update(PUT) method to method-update prop

Requirements

• Vee-validate 3.x
• Vuetify 2.x (only with vuetify-loader)
• Vue 2.x

Installation

Install package

npm install --save v-api-datatable

or

yarn add v-api-datatable

Local

component.vue

<script>
import { VApiDatatable } from 'v-api-datatable'

export default {
  components: { VApiDatatable },
}
</script>

Global

main.js

import Vue from 'vue'
import VApiDatatable from 'v-api-datatable'

Vue.use(VApiDatatable, {
  getData: async (resp) => {
    return await resp.json();
  },
  getTotalItems: (resp, data) => {
    return data.total;
  },
  getPerPage: (resp, data) => {
    return data.per_page;
  },
})

Plugin options

| Name | Type | Args | Required | Description | | -------------- | ---------- | -------------- | -------- | --------------------------------------- | | getData | function | response | -- | Unpacking data from response | | getTotalItems | function | response | -- | Unpacking total items from response | | getPerPage | function | response | -- | Unpacking per page items from response | | getItems | function | response, data | -- | Get array items from response | | preSave | function | method, args | -- | Pre save wrapper for v-crud-datatable |

Default values for options

const getData = (resp) => resp.data;
const getItems = (resp, data) => data.data;
const getTotalItems = (resp) => Number(resp.headers['x-pagination-total-count']);
const getPerPage = (resp) => Number(resp.headers['x-pagination-per-page']);
const preSave = (method, args) => method(args);

Props

v-api-datatable

• method - request data from server. Return Promise
• headers - [{ text, value }, {text, value }]
• prettifyField - { type: Function, default: (item, key) => item[key] }: wrap data every item for prettify output. Attributes: item, key(value of current header)
• external-pagination - pagination via v-pagination
• get-data
• get-total-items
• get-per-page
• get-items
• pre-save

v-crud-datatable

• includes all v-api-datatable props
• headers - Array<{ text: string, value: string, hiddenForTable?: boolean, hiddenForForm?: boolean, hiddenForEdit?: boolean, component: [object, string], listeners?: function, props?: [object] }>
• append-headers: { type: Array, default: () => [] } - headers after actions
• method-list: { type: Function, required: true }
• method-view: { type: Function, default: null }
• method-create: { type: Function, default: null }
• method-update: { type: Function, default: null }
• method-delete: { type: Function, default: null }
• serialize-data: { type: Function, default: (data: any) => data } - Before save data serialize
• serialize-instance-data: { type: Function, default: (data: any) => data } - After instance load data serialize
• dialog-edit-props: { type: Object, default: () => ({}) }
• dialog-delete-props: { type: Object, default: () => ({}) }
• deletion-text-value: { type: String, default: 'name' }

Slots

v-api-datatable

• includes all v-data-table slots
• search-fields: { searchKeys: any, runSearch: function }
• expand-search-fields: { searchKeys: any }
• search-actions: { searchKeys: any }
• item.(name): { item: any, index: number }
• header.(name): { header: any }
• row: { item: any }
• loading
• no-data
• no-results

v-curd-datatable

• includes all v-api-datatable props
• item.actions.extra: { item: any }

Emits

v-api-datatable

• update(items)

v-crud-datatable

• item:edit
• item:deleted
• item:updated
• item:created

Roadmap

1. Add i18n

Welcome to contribute!

License

MIT © Komarov Roman