### File

`src/app/shared/data-table/data-table.component.ts`

### Implements

`OnInit`

### Metadata

selector | `hi-data-table`
styleUrls | `./data-table.component.scss`
templateUrl | `./data-table.component.html`

### Index

###### Properties
rowHeight
###### Methods
getPropName ngOnInit onCreate onDelete onEdited
###### Inputs
columns deletable insertable rows sorts
###### Outputs
create delete update

### Constructor

`constructor(dialog: MatDialog)`
Defined in src/app/shared/data-table/data-table.component.ts:24
Parameters :
Name | Type | Optional
dialog | `MatDialog` | No

### Inputs

columns
Type : `{}`
Default value : `[]`
Defined in src/app/shared/data-table/data-table.component.ts:15

deletable
Type : `boolean`
Default value : `false`
Defined in src/app/shared/data-table/data-table.component.ts:17

insertable
Type : `boolean`
Default value : `false`
Defined in src/app/shared/data-table/data-table.component.ts:18

rows
Type : `{}`
Default value : `[]`
Defined in src/app/shared/data-table/data-table.component.ts:14

sorts
Type : `{}`
Default value : `[]`
Defined in src/app/shared/data-table/data-table.component.ts:16

### Outputs

create
Type : `EventEmitter<any>`
Defined in src/app/shared/data-table/data-table.component.ts:21

delete
Type : `EventEmitter<any>`
Defined in src/app/shared/data-table/data-table.component.ts:22

update
Type : `EventEmitter<any>`
Defined in src/app/shared/data-table/data-table.component.ts:20

### Methods

getPropName
`getPropName(column)`
Defined in src/app/shared/data-table/data-table.component.ts:87
Parameters :
Name | Optional
column | No
Returns : `string`

ngOnInit
`ngOnInit()`
Defined in src/app/shared/data-table/data-table.component.ts:28
Returns : `void`

onCreate
`onCreate()`
Defined in src/app/shared/data-table/data-table.component.ts:43
Returns : `void`

onDelete
`onDelete(row)`
Defined in src/app/shared/data-table/data-table.component.ts:69
Parameters :
Name | Optional
row | No
Returns : `void`

onEdited
`onEdited(row, column, value)`
Defined in src/app/shared/data-table/data-table.component.ts:30
Parameters :
Name | Optional
row | No
column | No
value | No
Returns : `void`

### Properties

rowHeight
Default value : `Settings.tableRowHeight`
Defined in src/app/shared/data-table/data-table.component.ts:24

    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>

`./data-table.component.scss`

    @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
Component
Html element with directive

# results matching ""

# No results matching ""