vue-table-server

Componente para Vue 3 + Vuetify 3 que encapsula paginação, ordenação, seleção e carregamento remoto. O componente entende diretamente a paginação padrão do Laravel.

Instalação local

npm install
npm run build
npm pack

O comando npm pack gera um arquivo .tgz. No projeto consumidor:

npm install /caminho/vue-table-server-1.0.0.tgz

Registro global

import { createApp } from 'vue'
import TableserverPlugin from 'vue-table-server'

const app = createApp(App)
app.use(TableserverPlugin)

Também é possível importar somente o componente:

import { VueTableserver } from 'vue-table-server'

Uso

<VueTableserver ref="table" :cabecalho="cabecalho" :provider="buscarVendedores" item-value="vendedor_id" @novo="novo">
  <template #vendedor_id="{ item }">{{ maskTel(item.vendedor_id) }}</template>
  <template #acao="{ item }">
    <v-btn variant="text" @click="editar(item)"><v-icon>mdi-pencil</v-icon></v-btn>
  </template>
</VueTableserver>

methods: {
  async buscarVendedores(params) {
    return useVendedorStore().buscarVendedores(params)
  },
  atualizarTabela() {
    this.$refs.table.refresh()
  }
}

A função provider recebe:

{
  page: 1,
  perPage: 15,
  search: '',
  orderBy: 'nome',
  orderDirection: 'asc',
  sortBy: [{ key: 'nome', order: 'asc' }]
}

Ela pode retornar diretamente o JSON de paginação do Laravel:

{
  "data": [],
  "current_page": 1,
  "per_page": 15,
  "total": 100,
  "last_page": 7
}

Também aceita respostas Axios no formato { data: paginaLaravel }.