0.0.2 • Published 4 years ago
table-tools v0.0.2
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 --saveDans 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.