Vuetify datatable mixin

Mixin generating requests to the server API in the format [DataTableNet] (https://datatables.net/) from Vuetify Datatable options

Installation

npm i @clickadilla/vuetify-datatable

yarn add @clickadilla/vuetify-datatable

Usage

<template>
  <v-container>
    <v-card>
      <v-card-title>
        Campaigns
        <div class="flex-grow-1" />
        <v-text-field
          v-model="campaignsTable.filtering.commonSearch"
          append-icon="search"
          label="Search"
          single-line
          hide-details
        />
      </v-card-title>
      <v-data-table
        v-model="campaignsTable.selected"
        :headers="campaignsTable.headers"
        :items="campaignsTable.items"
        :options.sync="campaignsTable.options"
        :server-items-length="campaignsTable.total"
        :loading="campaignsTable.loading"
      >
        <template v-slot:body.prepend>
          <tr>
            <td>
              <v-text-field v-model="campaignsTable.filtering.id" label="Search id" />
            </td>
            <td>
              <v-text-field v-model="campaignsTable.filtering.name" label="Search name" />
            </td>
            <td>
              <v-text-field v-model="campaignsTable.filtering.status" label="Search status" />
            </td>
          </tr>
        </template>
      </v-data-table>
    </v-card>
  </v-container>
</template>

<script>
  import datatableMixinFactory from '@clickadilla/vuetify-datatable'

  export default {
    mixins: [
      datatableMixinFactory('campaignsTable')
    ],
    data: () => ({
      campaignsTable: {
        url: '/campaigns',
        headers: [
          { value: 'id', text: 'ID' },
          { value: 'name', text: 'Name' },
          { value: 'status', text: 'Status' },
        ],
        filtering: {
          commonSearch: '',

          id: '',
          name: '',
          status: ''
        },
        selected: []
      }
    })
  }
</script>