v-api-datatable

Vuetify upgraded v-datatable for server endpoints

Usage no npm install needed!

<script type="module">
  import vApiDatatable from 'https://cdn.skypack.dev/v-api-datatable';
</script>

README

Vuetify plugin VApiDatatable

Vuetify complex v-data-table 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 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

  • Vuetify 2.x
  • 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

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, component: [object, string], props?: [object] }>
  • 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

Slots

v-api-datatable

  • 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

Emits

v-api-datatable

  • update(items)

v-crud-datatable

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

Roadmap

  1. Add i18n

Welcome to contribute!

License

MIT © Komarov Roman