Tablas asíncronas

/components/dna/tables/Async.vue

Este componente permite tener una tabla que pagina en el servidor configurada para las necesidades típicas de un proyecto.

• Filtrar

• Ordenar

• Paginar en servidor

El componente usa un objeto que define la estructura de la tabla que se quiere renderizar

Forma de uso

<template>
  <div>
    <async-table
      :scheme="scheme"
      :actions="actions"
      store-list="users/table"
      @edit-row="editButtonAction"
      selectable
      @selection-change="selectionChange"
      :base-filter="{ userId: user.id }"
      row-clases="rowClassesFunction"
    />
  </div>
</template>

<script>
import AsyncTable from '~/components/dna/tables/Async'
import { Utils } from '~/mixins/utils'
export default {
  components: {
    AsyncTable,
  },
  mixins: [Utils()],
  data() {
    return {
      scheme: [
        { key: 'id', label: 'ID', variant: 'dark' },
        { key: 'name', label: 'Nombre', sortable: true, filtrable: true },
        { key: 'description', label: 'Descripción' },
        {
          key: 'comics',
          label: 'Comics',
          transform: (val) => val.comics.items.map((i) => i.name).join(', '),
        },
      ],
      actions: [
        { title: 'Editar', actionName: 'edit-row', icon: 'pencil-square' },
      ],
    }
  },
  methods: {
    editButtonAction(val) {
      alert('Editme')
      console.log(val)
    },
  },
}
</script>

Scheme

El esquema define la estructura de la tabla que el componente va a renderizar. El atributo scheme recibe un Array de objetos, cada objeto define una columna de la tabla, la estructura de cada objeto de este Array tiene los siguientes atributos:

Nombre	Tipo	Requerido	Descripción
key	string	si	Nombre de variable de la data retornada por el servidor
label	string	si	Texto que se muestra al usuario en el encabezado de la tabla
variant	string	no	Variante de color de columna, basado en el parámetro de boostrap vue (primary, secondary, dark, light, success, danger, warning, info)
transform	function	no	Una función que permite modificar el valor que se despliega en la celda. Recibe como parámetro la fila entera y el retorno debe ser un string que finalmente se mostrará en la celda
sortable	boolean	no	permite (o no) ordenar la tabla por esa columna
filtrable	boolean	no	permite (o no) filtrar la tabla por esa columna

Dentro del componente de tabla se usa el componente <b-table> de boostrap vue, al que se le pasa todo el objeto scheme al atributo fields de este componente interno. Por esto puedes agregar a los objetos del Array scheme cualquier propiedad de la documentación del atributo fields y será inyectado directamente. Así puedes tener mas versatilidad con este componente de tabla asíncrona.

Documentación Boostrap vue - tables - fields

Actions

Normalmente en las tablas se requieren botoneras por filas para las típicas acciones de editar, activar, destacar, etc...

Mediante el Array actions podemos definir estos botones y definir el evento que estaremos escuchando cuando se haga click. Este evento puede ser asociado a una función que recibe como parámetro la fila completa para definir la lógica.

Nombre	Tipo	Requerido	Descripción
title	string	si	Es el texto que será puesto en un tooltip sobre el botón
actionName	string	si	es el nombre del evento que se emitirá cuando se realice la acción
icon	string	si	nombre del ícono, la integración por defecto es font awesome 5. ver galería de íconos

Store list

Para que las tablas asíncronas funcionen correctamente, es necesario que se construya una función que, por un lado, reciba correctamente los parámetros de: pagina, tamaño, filtros y orden y por otro lado devuelva un objeto con los atributos data (Array de objetos) y count (número total de resultados).

/*
    /store/users.js
*/

export const actions = {
  async table({ commit }, options) {
    try {
      const limit = options.size
      const offset = (options.page - 1) * limit
      
      ...
      
      const response = await this.$axios.get(...)
      return {
        data: response.data.results,
        count: response.data.total,
      }
    } catch (e) {
      console.error(e)
    }
  },
}

En el caso del ejemplo pasaremos como atributo store-list de nuestro componente async-table "users/table" que corresponde al {nombre del modulo}/{nombre de la acción}

De esta manera nuestra tabla consumirá los datos correctamente y desplegará la data con toda su funcionalidad. Los parámetros de options son:

Nombre	Tipo	Ejemplo
page	number	1
size	number	25
orderBy	string	"firstName DESC"
filter	Object	{ or: [ { firstName : { regexp: /.*texto.*/i } }, { lastName : { regexp: /.*texto.*/i } } ] }
searchString	string	"texto"

Tabla seleccionable

Es posible activar el modo de tabla seleccionable mediante la propiedad selectable, con esto se activa el evento @selection-change que devuelve la lista de elementos seleccionado como un Array de objetos.

Clases por fila

Es posible pasar clases a las filas mediante la propiedad row-clases, esta propiedad recibe una función que implementa la lógica de clase según los valores de la fila, por ejemplo

methods: {
  rowClassesFunction(item, type) {
    if (!item || type !== 'row') return
    if (item.status === 'awesome') return 'row-success'
  }
}