```typescript export interface IOptionsGrille { editable?: boolean; filterable?: boolean; sortable?: boolean; selectable?: boolean; rowsDeletable?: boolean; centerHeaders?: boolean; } ```
npm install cilog-libtypescript
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 :
`typescript
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:
`typescript
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:
`typescript
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 :
`html
[options]="optionsTable"
(onEdit)="onEditTable($event)"
(onDelete)="onDeleteTable($event)"
(onSelect)="onSelectRow($event)">
`
Côté TS :
`typescript
// 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);
}
``