Skip to content

Hastes/v-api-datatable

Repository files navigation

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

About

No description, website, or topics provided.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published