asdecode-datatable

DataTable en vue js 3 fonctionnant avec une api laravel 10

• pagination (backend)
• filtre (backend)
• trie (backend)
• recherche (backend)
• vue carte / tableau
• selection multiple

Installation via npm

npm i asdecode-datatable

Importer le composant asdecode-datatable

import 'asdecode-datatable/theme/css/asdecode-datatable-bs4.css';
import AsdecodeTable from 'asdecode-datatable/src/components/AsdecodeTable.vue';

export default defineComponent({
  components: {
    AsdecodeTable
  },
})

Props disponible

table (obligatoire): Le titre du tableau;
columns (obligatoire): listes des colonnes à afficher dans le tableau;
selection: Permet d'afficher les checkbox de selection;
useSearch: Mettre la valeur à "false" pour masquer le champs de recherche;
theader: Mettre la valeur à "false" pour masquer la barre superieur du tableau comprenant les boutons et la recherche;
key-word: Mettre la valeur du mot clé à rechercher si vous utilisez votre propre formulaire de recherche;
view-mode: Possibilité d'utiliser votre propre design pour basculer de la vue "table" à la vue "card"

Evenements disponibles

set-total-records : Recuperer le nombre total des ligne;
row-click : Recuperer l'objet de la ligne sur laquelle vous avez cliqué;
set-selected-rows : Recuperer la liste des lignes selectionnés pour effectuer des actions groupés;

Formats des colonnes

"state" : Afficher dans un badge light;
"date" : Afficher au format date Fr dd/mm/yyyy;
"datetime" : Afficher au format datetime Fr dd/mm/yyyy hh:ss;
"money": Afficher au format money exp: 50.000;

Exemple d'utilisation pour afficher vos données

<template>
    <!-- Afficher le nombre de lignes du tableau -->
    <h1>{{ lines }} lignes</h1>

    <!-- Utilisation du composant -->
    <AsdecodeTable class="mb-4" :columns="columns"
      url="http://localhost:9003/api/vehicules" table="Vehicules" @set-total-records="updateLines" selection
      @row-click="rowclick" @set-selected-rows="getSelection">

      <!-- Modifier l'affichage par defaut d'une colonne -->
      <template #statut="slotProps">
        <span class="p-2 rounded-pill badge badge-primary">{{ slotProps.data.statut }}</span>
      </template>
    </AsdecodeTable>

    !-- Liste des ids des lignes selectionnes -->
    <p>
      lignes selectionnes <br>
      {{ selection }}
    </p>
</template>

<script>
import { defineComponent } from 'vue';
import AsdecodeTable from './components/AsdecodeTable.vue';

export default defineComponent({
  name: 'App',
  components: {
    AsdecodeTable
  },
  data() {
    return {
      lines: 0,
      selection: [],
      columns: [
        {
          key: 'plaque',
          label: 'Immatriculation',
          sortable: true,
          exportable: true,
        },
        {
          key: 'marque',
          label: 'Marque',
          sortable: true,
          exportable: true,
        },
        {
          key: 'type_vehicule',
          label: 'Type / Tonnage',
        },
        {
          key: 'proprietaire',
          label: 'Proprietaire',
        },
        {
          key: 'statut',
          label: 'Etat',
          sortable: true,
          exportable: true,
        }
      ]
    }
  },
  methods: {
    rowclick(line) {
      console.log('row', line)
    },
    updateLines(nb) {
      this.lines = nb
    },
    getSelection(selection) {
      this.selection = selection
    }
  },
});
</script>

Emplacements disponibles

header_action_btns : Ajouter des elements dans l'entete du tableau

<AsdecodeTable class="mb-4" :columns="columns" url="http://localhost:9003/api/vehicules" >
  <template #header_action_btns>
    <button class="mr-2"> Partager </button>
  </template>
</AsdecodeTable>

Personnalisations disponibles

Pour personnaliser il suffit d'ajouter ces class dans votre fichier style et les personnaliser
  card-perso : Agir sur le card de la vue carte
  card-body-perso : Agir sur le card-body de la vue carte

Utilisation de Axios

Si vous utilisez deja Axios dans votre projet, vous devez injecter l'instance de Axios que vous utilisé apres l'avoir importé dans le main.ts/main.js.

exp: 
const app = createApp(App);
app.provide('axios', axios);
app.mount('#app');