Cilog Table

Options de la grille :

export interface IOptionsGrille {
	editable?: boolean;
	filterable?: boolean;
	sortable?: boolean;
	selectable?: boolean;
	rowsDeletable?: boolean;
	centerHeaders?: boolean;
}

|Option|Description| |--|--| |editable|Permet de rendre la grille éditable| |filterable|Affiche des filtres spécifiques pour chaque colonne| |sortable|Permet un tri spécifique pour chaque colonne| |selectable|Rend les lignes sélectionnables (Attention : Ne fonctionne pas si l'option "editable" est activée)| |rowsDeletable|Ajoute un bouton de suppression pour chaque ligne| |centerHeaders|Centre les headers de la grille|

Propriétés des lignes :

export interface IRow {
    id: any;
    obj?: any;
    deletable: boolean;
    readonly?: boolean;
    [key: string]: any;
}

|Propriété|Description| |--|--| |id|Identifiant de la ligne| |obj|Objet correspondant à la ligne| |deletable|Autorise la suppression pour la ligne| |readonly|Empêche l'édition de la ligne| |[key: string]|Permet d'ajouter une propriété correspondante à l'id d'une colonne|

Propriétés des colonnes:

export interface IColumn {
    id: any;
    type: ColType;
    libelle: string;
    champBase?: string;
    width?: string;
    options?: IOptions;
}

|Propriété|Description| |--|--| |id|Identifiant de la ligne| |type|Type de la colonne| |libelle|Libellé de la colonne| |champBase|Correspond au nom du champ de BDD en lien avec la colonne| |options|Permet d'ajouter des options en fonction du type de la colonne|

Propriétés des cellules:

export interface ICell {
    id: any;
    obj?: any;
    value: any;
    tooltip?: string;
    readonly?: boolean;
    options?: IOptions;
}

|Propriété|Description| |--|--| |id|Identifiant de la ligne| |obj|Objet correspondant à la ligne| |value|Valeur de la cellule (Attention : le type de la value doit correspondre au type de la colonne)| |tooltip|Tooltip de la cellule| |options|Permet d'ajouter des options sur une cellule spécifique|

Exemple de code :

Côté HTML :

<cilog-table [columns]="columnsTable"
             [values]="valuesTable"
             [options]="optionsTable"
             (onEdit)="onEditTable($event)"
             (onDelete)="onDeleteTable($event)"
             (onSelect)="onSelectRow($event)">
</cilog-table>

Côté TS :

// Déclaration des variables
columnsTable: IColumn[];
valuesTable: IRow[];
optionsTable: IOptions;

// Configuration des options
this.optionsTable = {
    editable: true,
    filterable: true,
    sortable: true,
    rowsDeletable: true,
    centerHeaders: true,
    selectable: true,
    deletable: true
}

 // Création des colonnes
 this.columnsTable = [];
 let column1: IColumn = { id: 'column1', type: ColType.Date, libelle: 'Date' };
 let column2: IColumn = { id: 'column2', type: ColType.Text, libelle: 'Text' };
 let column3: IColumn = { id: 'column3', type: ColType.State, libelle: 'State', options: { options: optionsState, optionLabel: 'label' } as IOptionsState };
 let column4: IColumn = { id: 'column4', type: ColType.File, libelle: 'File' };
 let column5: IColumn = { id: 'column5', type: ColType.Button, libelle: 'Button', options: { severity: Severity.Warning, label: 'Bouton Test 123', icon: 'pi pi-check' } as IOptionsButton };
 this.columnsTable.push(column1, column2, column3, column4, column5);

 // Création des lignes
 this.valuesTable = [];
 let cell1: ICell = { id: 'cell1', value: new Date(2020, 1, 2) };
 let cell2: ICell = { id: 'cell2', value: 'test1' };
 let cell3: ICell = { id: 'cell3', value: optionsState[0] };
 let cell4: ICell = { id: 'cell4', value: null };
 let cell5: ICell = { id: 'cell5', value: () => this.clickButton('test1') };
 let row: IRow = { id: 'row1', column1: cell1, column2: cell2, column3: cell3, column4: cell4, column5: cell5, deletable: true };
 this.valuesTable.push(row);
 
// Méthode édition
onEditTable(event: IEdition) {
    console.log(event);
}

// Méthode Suppression
onDeleteTable(event: ISuppression) {
    console.log(event);
}

// Méthode Selection
onSelectRow(event: ISelection) {
    console.log(event);
}