| 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; |
ANNEXES
$3
_C'est pour faciliter la déclaration de groupement de colonnes_
Exemple de définitions des colonnes avec des groupements de colonnes :
import { Column, SortType } from 'table-tools';
import { Validators } from '@angular/forms';
export const columns: Array = [
[
{ rowspan: 3, field: "id", header: "ID (rowspan: 3)" },
{ colspan: 3, header: "Col 2 (colspan 4)" }
], [
{ rowspan: 2, field: "name", header: "Name (rowspan: 2)", inputType: "input", validators: [Validators.required, Validators.maxLength(10)], contextMenuHeader: {
STRING: {
active: true,
callback: (sortType: SortType) => {
return new Promise((resolve, reject) => {
// Traitement sur colonne avec requête si vous le souhaitez
...
return resolve(newResult);
});
}
}
} },
{ colspan: 2, header: "Col 4 (colspan: 2)" }
], [
{ field: "date", header: "Date", inputType: "date", contextMenuHeader: { DATE: { active: true }}, tooltip: { text: "Test info bulle" },
validators: [Validators.required, Validators.pattern('[0-9]{2}\/{1}[0-9]{2}\/{1}[0-9]{4}')] },
{ field: "description", header: "Description", inputType: "input", contextMenuHeader: { MULTISELECT: { active: true } },
tooltip: { callback: (col: Column, value) => {
return new Promise((resolve, reject) => setTimeout(() => resolve("Nouveau info bulle (" + value[col.field] + ")"), 2000));
}} }
]
]
$3
export interface Callbacks {
onSort?: {
title: (newTitle: any) => Promise;
};
contextMenu?: {
show: (value: any) => boolean;
}
}
$3
export interface Paginator {
rows: number;
callback?: (first: number, rows: number) => Promise;
rowsPerPageOptions?: number[];
pageLinkSize?: number;
}
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.