File
Implements
Index
Properties
|
|
Methods
|
|
Inputs
|
|
Outputs
|
|
Constructor
constructor(dialog: MatDialog)
|
|
Parameters :
Name |
Type |
Optional |
dialog |
MatDialog
|
No
|
|
columns
|
Type : {}
|
Default value : []
|
|
deletable
|
Type : boolean
|
Default value : false
|
|
insertable
|
Type : boolean
|
Default value : false
|
|
rows
|
Type : {}
|
Default value : []
|
|
sorts
|
Type : {}
|
Default value : []
|
|
Outputs
create
|
Type : EventEmitter<any>
|
|
delete
|
Type : EventEmitter<any>
|
|
update
|
Type : EventEmitter<any>
|
|
Methods
getPropName
|
getPropName(column)
|
|
|
onEdited
|
onEdited(row, column, value)
|
|
Parameters :
Name |
Optional |
row |
No
|
column |
No
|
value |
No
|
|
rowHeight
|
Default value : Settings.tableRowHeight
|
|
import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { Settings } from '../../core/settings';
import { InputDialogComponent } from '../dialog/input-dialog/input-dialog.component';
import { ConfirmDialogComponent } from '../dialog/confirm-dialog/confirm-dialog.component';
@Component({
selector: 'hi-data-table',
templateUrl: './data-table.component.html',
styleUrls: ['./data-table.component.scss'],
})
export class DataTableComponent implements OnInit {
@Input() rows = [];
@Input() columns = [];
@Input() sorts = [];
@Input() deletable = false;
@Input() insertable = false;
@Output() update: EventEmitter<any> = new EventEmitter<any>();
@Output() create: EventEmitter<any> = new EventEmitter<any>();
@Output() delete: EventEmitter<any> = new EventEmitter<any>();
rowHeight = Settings.tableRowHeight;
constructor(protected dialog: MatDialog) {}
ngOnInit() {}
onEdited(row, column, value) {
const prop = this.getPropName(column);
// only emit when value changes
if (row[prop] !== value) {
this.update.emit({
row,
column,
value,
});
}
}
onCreate() {
const data = {
title: 'Create a new item',
message: 'Please enter the following information to continue:',
values: {},
};
for (const column of this.columns) {
const prop = this.getPropName(column);
data.values[prop] = {
label: column.name,
};
}
this.dialog
.open(InputDialogComponent, {
data,
})
.afterClosed()
.subscribe((result) => {
if (result) {
this.create.emit(result);
}
});
}
onDelete(row) {
this.dialog
.open(ConfirmDialogComponent, {
data: {
title: 'Confirmation',
message: 'Are you sure you want to delete this configuration?',
},
})
.afterClosed()
.subscribe((result) => {
if (result) {
this.delete.emit({
row,
});
}
});
}
getPropName(column): string {
return column.prop ? column.prop : column.name.toLowerCase();
}
}
<!--
~ Licensed to the Apache Software Foundation (ASF) under one
~ or more contributor license agreements. See the NOTICE file
~ distributed with this work for additional information
~ regarding copyright ownership. The ASF licenses this file
~ to you under the Apache License, Version 2.0 (the
~ "License"); you may not use this file except in compliance
~ with the License. You may obtain a copy of the License at
~
~ http://www.apache.org/licenses/LICENSE-2.0
~
~ Unless required by applicable law or agreed to in writing,
~ software distributed under the License is distributed on an
~ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
~ KIND, either express or implied. See the License for the
~ specific language governing permissions and limitations
~ under the License.
-->
<ngx-datatable
#dataTable
class="material"
[headerHeight]="rowHeight"
rowHeight="auto"
[footerHeight]="rowHeight"
columnMode="force"
[rows]="rows"
[sorts]="sorts"
[limit]="20"
>
<ngx-datatable-column
*ngIf="deletable"
[width]="40"
[resizeable]="false"
[draggable]="false"
[canAutoResize]="false"
>
<ng-template let-row="row" ngx-datatable-cell-template>
<button
mat-icon-button
matTooltip="Click to delete"
(click)="onDelete(row)"
>
<mat-icon>delete_forever</mat-icon>
</button>
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column
*ngFor="let column of columns"
[name]="column.name"
[prop]="getPropName(column)"
>
<ng-template ngx-datatable-cell-template let-value="value" let-row="row">
<span *ngIf="!column.editable" [title]="value">{{ value }}</span>
<hi-input-inline
*ngIf="column.editable"
[value]="value"
label="new value"
(update)="onEdited(row, column, $event)"
>
</hi-input-inline>
</ng-template>
</ngx-datatable-column>
<ngx-datatable-footer>
<ng-template
ngx-datatable-footer-template
let-rowCount="rowCount"
let-pageSize="pageSize"
let-curPage="curPage"
>
<section
class="footer"
fxLayout="row"
fxLayoutAlign="space-between center"
>
<button mat-button *ngIf="insertable" (click)="onCreate()">
<mat-icon>add</mat-icon>
Add new entry
</button>
<section>{{ rowCount }} total</section>
<section>
<datatable-pager
[pagerLeftArrowIcon]="'datatable-icon-left'"
[pagerRightArrowIcon]="'datatable-icon-right'"
[pagerPreviousIcon]="'datatable-icon-prev'"
[pagerNextIcon]="'datatable-icon-skip'"
[page]="curPage"
[size]="pageSize"
[count]="rowCount"
[hidden]="!(rowCount / pageSize > 1)"
(change)="dataTable.onFooterPage($event)"
>
</datatable-pager>
</section>
</section>
</ng-template>
</ngx-datatable-footer>
</ngx-datatable>
@use '@angular/material' as mat;
@import 'src/theme.scss';
.mat-icon {
@include md-icon-size(20px);
&:hover {
color: mat.get-color-from-palette($hi-warn);
}
}
.mat-icon-button {
width: 24px;
height: 24px;
line-height: 24px;
}
.footer {
width: 100%;
padding: 0 20px;
}
Legend
Html element with directive