TABLE-TOOLS

PRÉREQUIS

• primeicons
• primeng
• quill

Ajoutez les styles primeng et primeisons à votre angular.json :

"architect": {
  ...
  "build": {
    ...
    "options": {
      ...
      "styles": [
        ...
        "node_modules/primeicons/primeicons.css",
        "node_modules/primeng/resources/primeng.css",
        "node_modules/primeng/resources/themes/nova-light/theme.css"
      ]

Importation de la librarie

npm install table-tools --save

Dans votre module :

import {TableToolsModule} from 'table-tools';

Annexes Columns : Columns interface.

Exemple d'utilisation :

ANNEXES

Columns interface :

| Nom | Type | Infos | | ----------------- | :----------------------------------------------------------------------------: | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | | field | string | clé permettant de retrouver la valeur dans l'objet | | header | string | Titre du champs | | inputType | string | autocomplete, select, input, hidden, tooltip, spinner (si tooltip, ce n'est pas une vraie cellule) | | keyField | string | voir "optionLabel" primeng dropdown | | options | any[] | array objets pour remplir une select | | required | boolean | | | emptyMessage | string | Message si la requête pour l'autocomplete ne retourne aucun résultat | | width | string | largeur des cellules | | rowspan | string | Sert au groupement des colonnes. voir primeng colgroup | | colspan | string | Sert au groupement des colonnes. voir primeng colgroup | | contextMenuHeader | ContextMenuHeaderConfig | Sert à ajouter les filtres sur les header des colonnes. Valeurs accèptées : ASC, DESC, DATE, STRING, MULTISELECT | | validators | Validators[] | Liste de validateurs lors de la mise à jour, ajout de ligne, cellules. Validators.required, Validators.maxLength(10)... Angular Validators | | tooltip | Tooltip {text: string, callback: (col: Column, value: any) => Promise} | Sert à afficher une info bulle au hover sur la ligne | | tooltipPosition | string | position | | panelGroup | string | Sert à positionner le champs dans un panel dans la modal ajout d'une nouvelle ligne | | placeholder | string | Information concernant le champs à remplir |

DECLARATION DE LA LIBRAIRIE (objet BodyTable)

| Nom | Type | Infos | | ----------- | :----------------------------------------------------------: | --------------------------------------------------------------------------------------------------------------------: | | rows | any[] | Liste des objets du tableau | | columns | Array<Column[]> | Voir : pourquoi déclarer un array d'array de colonnes | | canEdit | boolean | Edition permise | | canAdd | boolean | Ajout permis | | canDelete | boolean | Suppression permise | | onReject | Object { rowData: any, error: string } | Cette évènement peut être appelé lors d'une erreur de mise à jour d'une ligne | | contextMenu | Objet {actions: {id: string; name: string; icon: string; } } | Permet d'ajouter des valeurs customisée au contextMenu. Evènement récupéré avec (customEvent)="onCustomEvent($event)" | | config | ConfigList {title: string } | Titre du tableau courant | | callbacks | Callbacks | Voir Ajout de callbacks lors de certains évènements | | paginator | Paginator | Voir Déclaration de valeurs pour la pagination |

LES METHODES

| Nom | Fonction | Infos | | ------------------- | :-------------------------------------------: | ---------------------------------------: | | (addEvent) | Méthode appelée à chaque ajout d'un élément | | | (deleteEvent) | Méthode de suppression d'une ligne | | | (updateEvent) | Appelée après le clic droit sur mettre à jour | | | (autoCompleteEvent) | Appelée après la saisie dans une autoComplete | | | (customEvent) | ContextMenuRow.actions[] | Liste d'action spécifique du contextMenu |

| [configList] | ConfigList | Plusieurs infos sont à renseigner avec cette object (title...) | | [callbacks] | Callbacks | Liste de callbacks pouvant être appelés en fonction des évènements générés par l'utilisateur (doit retourner des promises) | | [bodyTable] | Object BodyTable | Voir BodyTable interface rows: any[]; columns: Array<Column[]>; |

ANNEXES

Pourquoi déclarer un array d'array de colonne

C'est pour faciliter la déclaration de groupement de colonnes Exemple de définitions des colonnes avec des groupements de colonnes :

Ajout de callbacks lors de certains évènements

déclaration de valeurs pour la pagination

NOTES

• Un tri multiselect ne fonctionne sur une colonne avec des valeurs séparées par des virgules uniquement avec la valeur inputType: selectmultiple

P.S. :

Documentation peu fournie. Pour toutes questions : contact. Site internet : www.webmastertoulouse.com.