cilog-lib v1.8.6

Cilog Table

Options de la grille :

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

Propriétés des lignes :

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

Propriétés des colonnes:

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

Propriétés des cellules:

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

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);
}