Vue-good-table est un composant de table de données pour Vue.js offrant des fonctionnalités avancées telles que le tri, le filtrage par colonne, la pagination et le regroupement. Il permet de développer rapidement des interfaces de gestion de données pour applications d'entreprise.

Installation et configuration initiale

Pour intégrer le composant dans votre projet Vue, exécutez la commande di'nstallation suivante :

npm install vue-good-table

Importez ensuite le composant dans votre fichier Vue :

import DataTable from 'vue-good-table';
import 'vue-good-table/dist/vue-good-table.css';

export default {
  components: {
    DataTable
  }
}

La configuration de base nécessite la définition des colonnes et des données :

<data-table :column-definitions="columnDefs" :data-entries="tableData" />

export default {
  data() {
    return {
      columnDefs: [
        {
          headerLabel: 'Nom',
          dataField: 'nom',
          sortable: true
        },
        {
          headerLabel: 'Âge',
          dataField: 'age',
          dataType: 'number',
          sortable: true
        },
        {
          headerLabel: 'Date inscription',
          dataField: 'dateInscription',
          dataType: 'date',
          inputFormat: 'yyyy-MM-dd',
          outputFormat: 'dd/MM/yyyy'
        }
      ],
      tableData: [
        { nom: 'Marie', age: 28, dateInscription: '2020-05-15' },
        { nom: 'Thomas', age: 35, dateInscription: '2019-11-22' }
      ]
    };
  }
}

Fonctionnalités avancées de regroupement

Pour organiser les données en groupes logiques, activez l'option de regroupement :

<data-table
  :column-definitions="columnDefs"
  :data-entries="groupedData"
  :grouping-options="{ enabled: true }"
/>

Structurez vos données avec des entrées parentes contenant des enfants :

groupedData: [
  {
    groupType: 'span',
    groupTitle: 'Développement Frontend',
    groupItems: [
      { technologie: 'Vue.js', popularité: 'Élevée', utilisateurs: 150000 },
      { technologie: 'React', popularité: 'Élevée', utilisateurs: 200000 }
    ]
  },
  {
    groupType: 'span',
    groupTitle: 'Développement Backend',
    groupItems: [
      { technologie: 'Node.js', popularité: 'Élevée', utilisateurs: 180000 },
      { technologie: 'Django', popularité: 'Moyenne', utilisateurs: 90000 }
    ]
  }
]

Sélection multiple et opérations par lot

Ajoutez une colonne de cases à cocher pour activer la sélection multiple :

columnDefs: [
  {
    headerLabel: '',
    dataField: 'select',
    dataType: 'checkbox',
    columnWidth: '60px'
  }
]

Gérez les changements de sélection via l'événement approprié :

<data-table
  :column-definitions="columnDefs"
  :data-entries="tableData"
  @selected-items-changed="handleSelection"
/>

methods: {
  handleSelection(selectedItems) {
    this.processSelectedRows(selectedItems);
  }
}

Personnalisation des colonnes

Vue-good-table offre plusieurs options de personnalisation pour les colonnes.

Formatage des données

columnDefs: [
  {
    headerLabel: 'Salaire',
    dataField: 'salaire',
    formatFunction: (montant) => `${montant.toLocaleString('fr-FR')} €`
  }
]

Tri personnalisé

columnDefs: [
  {
    headerLabel: 'Nom',
    dataField: 'nom',
    sortable: true,
    customSort: (a, b) => a.localeCompare(b, 'fr')
  }
]

Colonnes masquées

columnDefs: [
  {
    headerLabel: 'Identifiant',
    dataField: 'id',
    hidden: true
  }
]

Personnalisation du style

Le composant supporte différents thèmes intégrés que vous pouvez importer :

import 'vue-good-table/dist/themes/modern.css';

Pour une personnalisation avancée, modifiez les variables SCSS fournies dans les fichiers source.