ngx-easy-table
Version:
Angular easy table
487 lines • 146 kB
JavaScript
import { moveItemInArray } from '@angular/cdk/drag-drop';
import { ChangeDetectionStrategy, Component, ContentChild, EventEmitter, HostListener, Input, Output, TemplateRef, ViewChild, } from '@angular/core';
import { API, Event } from '../..';
import { DefaultConfigService } from '../../services/config-service';
import { GroupRowsService } from '../../services/group-rows.service';
import { StyleService } from '../../services/style.service';
import { Subject } from 'rxjs';
import { CdkVirtualScrollViewport } from '@angular/cdk/scrolling';
import { filter, takeUntil, throttleTime } from 'rxjs/operators';
import * as i0 from "@angular/core";
import * as i1 from "@angular/cdk/scrolling";
import * as i2 from "../../services/style.service";
import * as i3 from "@angular/common";
import * as i4 from "@angular/cdk/drag-drop";
import * as i5 from "../pagination/pagination.component";
import * as i6 from "../thead/thead.component";
import * as i7 from "ngx-pagination";
import * as i8 from "../../pipes/search-pipe";
import * as i9 from "../../pipes/render-pipe";
import * as i10 from "../../pipes/global-search-pipe";
import * as i11 from "../../pipes/sort.pipe";
export class BaseComponent {
onContextMenuClick(targetElement) {
if (this.contextMenu && !this.contextMenu.nativeElement.contains(targetElement)) {
this.rowContextMenuPosition = {
top: null,
left: null,
value: null,
};
}
}
constructor(cdr, scrollDispatcher, styleService) {
this.cdr = cdr;
this.scrollDispatcher = scrollDispatcher;
this.styleService = styleService;
this.unsubscribe = new Subject();
this.filterCount = -1;
this.filteredCountSubject = new Subject();
this.tableClass = null;
this.grouped = [];
this.isSelected = false;
this.page = 1;
this.count = 0;
this.sortState = new Map();
this.sortKey = null;
this.rowContextMenuPosition = {
top: null,
left: null,
value: null,
};
this.sortBy = {
key: '',
order: 'asc',
};
this.selectedDetailsTemplateRowId = new Set();
this.selectedCheckboxes = new Set();
this.id = 'table';
this.event = new EventEmitter();
this.filteredCountSubject.pipe(takeUntil(this.unsubscribe)).subscribe((count) => {
setTimeout(() => {
this.filterCount = count;
this.cdr.detectChanges();
});
});
}
ngOnInit() {
if (!this.columns) {
console.error('[columns] property required!');
}
if (this.configuration) {
this.config = this.configuration;
}
else {
this.config = DefaultConfigService.config;
}
this.limit = this.config.rows;
if (this.groupRowsBy) {
this.grouped = GroupRowsService.doGroupRows(this.data, this.groupRowsBy);
}
this.doDecodePersistedState();
}
ngOnDestroy() {
this.unsubscribe.next();
this.unsubscribe.complete();
}
ngAfterViewInit() {
const throttleValue = this.config.infiniteScrollThrottleTime
? this.config.infiniteScrollThrottleTime
: 200;
this.scrollDispatcher
.scrolled()
.pipe(throttleTime(throttleValue), filter((event) => {
return (!!event &&
this.viewPort &&
this.viewPort.getRenderedRange().end === this.viewPort.getDataLength());
}), takeUntil(this.unsubscribe))
.subscribe(() => {
this.emitEvent(Event.onInfiniteScrollEnd, null);
});
}
ngOnChanges(changes) {
const { configuration, data, pagination, groupRowsBy } = changes;
this.toggleRowIndex = changes.toggleRowIndex;
if (configuration && configuration.currentValue) {
this.config = configuration.currentValue;
}
if (data && data.currentValue) {
this.doApplyData(data);
}
if (pagination && pagination.currentValue) {
const { count, limit, offset } = pagination.currentValue;
this.count = count;
this.limit = limit;
this.page = offset;
}
if (groupRowsBy && groupRowsBy.currentValue) {
this.grouped = GroupRowsService.doGroupRows(this.data, this.groupRowsBy);
}
if (this.toggleRowIndex && this.toggleRowIndex.currentValue) {
const row = this.toggleRowIndex.currentValue;
this.collapseRow(row.index);
}
}
orderBy(column) {
if (typeof column.orderEnabled !== 'undefined' && !column.orderEnabled) {
return;
}
this.sortKey = column.key;
if (!this.config.orderEnabled || this.sortKey === '') {
return;
}
this.setColumnOrder(column);
if (!this.config.orderEventOnly && !column.orderEventOnly) {
this.sortBy.key = this.sortKey;
this.sortBy.order = this.sortState.get(this.sortKey);
}
else {
this.sortBy.key = '';
this.sortBy.order = '';
}
if (!this.config.serverPagination) {
this.data = [...this.data];
this.sortBy = { ...this.sortBy };
}
const value = {
key: this.sortKey,
order: this.sortState.get(this.sortKey),
};
this.emitEvent(Event.onOrder, value);
}
onClick($event, row, key, colIndex, rowIndex) {
if (this.config.selectRow) {
this.selectedRow = rowIndex;
}
if (this.config.selectCol && `${colIndex}`) {
this.selectedCol = colIndex;
}
if (this.config.selectCell && `${colIndex}`) {
this.selectedRow = rowIndex;
this.selectedCol = colIndex;
}
if (this.config.clickEvent) {
const value = {
event: $event,
row,
key,
rowId: rowIndex,
colId: colIndex,
};
this.emitEvent(Event.onClick, value);
}
}
onDoubleClick($event, row, key, colIndex, rowIndex) {
const value = {
event: $event,
row,
key,
rowId: rowIndex,
colId: colIndex,
};
this.emitEvent(Event.onDoubleClick, value);
}
onCheckboxSelect($event, row, rowIndex) {
const value = {
event: $event,
row,
rowId: rowIndex,
};
this.emitEvent(Event.onCheckboxSelect, value);
}
onRadioSelect($event, row, rowIndex) {
const value = {
event: $event,
row,
rowId: rowIndex,
};
this.emitEvent(Event.onRadioSelect, value);
}
onSelectAll() {
this.isSelected = !this.isSelected;
this.emitEvent(Event.onSelectAll, this.isSelected);
}
onSearch($event) {
if (!this.config.serverPagination) {
this.term = $event;
}
this.emitEvent(Event.onSearch, $event);
}
onGlobalSearch(value) {
if (!this.config.serverPagination) {
this.globalSearchTerm = value;
}
this.emitEvent(Event.onGlobalSearch, value);
}
onPagination(pagination) {
this.page = pagination.page;
this.limit = pagination.limit;
this.config.rows = pagination.limit;
this.emitEvent(Event.onPagination, pagination);
}
toggleCheckbox(rowIndex) {
this.selectedCheckboxes.has(rowIndex)
? this.selectedCheckboxes.delete(rowIndex)
: this.selectedCheckboxes.add(rowIndex);
}
collapseRow(rowIndex) {
if (this.selectedDetailsTemplateRowId.has(rowIndex)) {
this.selectedDetailsTemplateRowId.delete(rowIndex);
this.emitEvent(Event.onRowCollapsedHide, rowIndex);
}
else {
this.selectedDetailsTemplateRowId.add(rowIndex);
this.emitEvent(Event.onRowCollapsedShow, rowIndex);
}
}
doDecodePersistedState() {
if (!this.config.persistState) {
return;
}
const pagination = localStorage.getItem(Event.onPagination);
const sort = localStorage.getItem(Event.onOrder);
const search = localStorage.getItem(Event.onSearch);
if (pagination) {
this.onPagination(JSON.parse(pagination));
}
if (sort) {
const { key, order } = JSON.parse(sort);
this.bindApi({
type: API.sortBy,
value: { column: key, order },
});
}
if (search) {
this.bindApi({
type: API.setInputValue,
value: JSON.parse(search),
});
}
}
isRowCollapsed(rowIndex) {
if (this.config.collapseAllRows) {
return true;
}
return this.selectedDetailsTemplateRowId.has(rowIndex);
}
get loadingHeight() {
const table = document.getElementById(this.id);
if (table && table.rows && table.rows.length > 3) {
const searchEnabled = this.config.searchEnabled ? 1 : 0;
const headerEnabled = this.config.headerEnabled ? 1 : 0;
const borderTrHeight = 1;
const borderDivHeight = 2;
return ((table.rows.length - searchEnabled - headerEnabled) *
(table.rows[3].offsetHeight - borderTrHeight) -
borderDivHeight);
}
return 30;
}
get arrowDefinition() {
return this.config.showDetailsArrow || typeof this.config.showDetailsArrow === 'undefined';
}
onRowContextMenu($event, row, key, colIndex, rowIndex) {
if (!this.config.showContextMenu) {
return;
}
$event.preventDefault();
const value = {
event: $event,
row,
key,
rowId: rowIndex,
colId: colIndex,
};
this.rowContextMenuPosition = {
top: `${$event.pageY - 10}px`,
left: `${$event.pageX - 10}px`,
value,
};
this.emitEvent(Event.onRowContextMenu, value);
}
doApplyData(data) {
const order = this.columns.find((c) => !!c.orderBy);
if (order) {
this.sortState.set(this.sortKey, order.orderBy === 'asc' ? 'desc' : 'asc');
this.orderBy(order);
}
else {
this.data = [...data.currentValue];
}
}
onDragStart(event) {
this.emitEvent(Event.onReorderStart, event);
}
onDrop(event) {
this.emitEvent(Event.onRowDrop, event);
moveItemInArray(this.data, event.previousIndex, event.currentIndex);
}
// DO NOT REMOVE. It is called from parent component. See src/app/demo/api-doc/api-doc.component.ts
apiEvent(event) {
return this.bindApi(event);
}
/* eslint-disable */
bindApi(event) {
switch (event.type) {
case API.rowContextMenuClicked:
this.rowContextMenuPosition = {
top: null,
left: null,
value: null,
};
break;
case API.toggleRowIndex:
this.collapseRow(event.value);
break;
case API.toggleCheckbox:
this.toggleCheckbox(event.value);
break;
case API.setInputValue:
if (this.config.searchEnabled) {
event.value.forEach((input) => {
const element = document.getElementById(`search_${input.key}`);
if (!element) {
console.error(`Column '${input.key}' not available in the DOM. Have you misspelled a name?`);
}
else {
element.value = input.value;
}
});
}
this.onSearch(event.value);
this.cdr.markForCheck();
break;
case API.onGlobalSearch:
this.onGlobalSearch(event.value);
this.cdr.markForCheck();
break;
case API.setRowClass:
if (Array.isArray(event.value)) {
event.value.forEach((val) => this.styleService.setRowClass(val));
break;
}
this.styleService.setRowClass(event.value);
this.cdr.markForCheck();
break;
case API.setCellClass:
if (Array.isArray(event.value)) {
event.value.forEach((val) => this.styleService.setCellClass(val));
break;
}
this.styleService.setCellClass(event.value);
break;
case API.setRowStyle:
if (Array.isArray(event.value)) {
event.value.forEach((val) => this.styleService.setRowStyle(val));
break;
}
this.styleService.setRowStyle(event.value);
break;
case API.setCellStyle:
if (Array.isArray(event.value)) {
event.value.forEach((val) => this.styleService.setCellStyle(val));
break;
}
this.styleService.setCellStyle(event.value);
break;
case API.setTableClass:
this.tableClass = event.value;
this.cdr.markForCheck();
break;
case API.getPaginationTotalItems:
return this.paginationComponent.paginationDirective.getTotalItems();
case API.getPaginationCurrentPage:
return this.paginationComponent.paginationDirective.getCurrent();
case API.getPaginationLastPage:
return this.paginationComponent.paginationDirective.getLastPage();
case API.getNumberOfRowsPerPage:
return this.paginationComponent.paginationDirective.isLastPage()
? this.paginationComponent.paginationDirective.getTotalItems() % this.limit
: this.limit;
case API.setPaginationCurrentPage:
this.paginationComponent.paginationDirective.setCurrent(event.value);
break;
case API.setPaginationRange:
this.paginationComponent.ranges = event.value;
break;
case API.setPaginationPreviousLabel:
this.paginationComponent.previousLabel = event.value;
break;
case API.setPaginationNextLabel:
this.paginationComponent.nextLabel = event.value;
break;
case API.setPaginationDisplayLimit:
this.paginationComponent.changeLimit(event.value, true);
break;
case API.sortBy:
const column = { title: '', key: event.value.column, orderBy: event.value.order };
this.orderBy(column);
this.cdr.detectChanges();
break;
default:
break;
}
}
setColumnOrder(column) {
const key = column.key;
switch (this.sortState.get(key)) {
case '':
case undefined:
this.sortState.set(key, column.orderBy || 'desc');
break;
case 'asc':
this.config.threeWaySort ? this.sortState.set(key, '') : this.sortState.set(key, 'desc');
break;
case 'desc':
this.sortState.set(key, 'asc');
break;
}
if (this.sortState.size > 1) {
const temp = this.sortState.get(key);
this.sortState.clear();
this.sortState.set(key, temp);
}
}
emitEvent(event, value) {
this.event.emit({ event, value });
if (this.config.persistState) {
localStorage.setItem(event, JSON.stringify(value));
}
if (this.config.logger) {
// eslint-disable-next-line no-console
console.log({ event, value });
}
}
dragEnter($event) {
$event.preventDefault();
$event.stopPropagation();
}
dragOver($event) {
$event.preventDefault();
$event.stopPropagation();
}
dragLeave($event) {
$event.preventDefault();
$event.stopPropagation();
}
drop($event) {
$event.preventDefault();
$event.stopPropagation();
const file = $event.dataTransfer?.files?.[0];
if (file?.type !== 'application/json') {
// eslint-disable-next-line no-console
console.log('File not allowed');
return;
}
const fileReader = new FileReader();
fileReader.onload = (event) => {
this.data = JSON.parse(event?.target?.result);
this.cdr.markForCheck();
};
fileReader.readAsText(file);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: BaseComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.ScrollDispatcher }, { token: i2.StyleService }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: BaseComponent, selector: "ngx-table", inputs: { configuration: "configuration", data: "data", pagination: "pagination", groupRowsBy: "groupRowsBy", id: "id", toggleRowIndex: "toggleRowIndex", detailsTemplate: "detailsTemplate", summaryTemplate: "summaryTemplate", groupRowsHeaderTemplate: "groupRowsHeaderTemplate", filtersTemplate: "filtersTemplate", selectAllTemplate: "selectAllTemplate", noResultsTemplate: "noResultsTemplate", loadingTemplate: "loadingTemplate", additionalActionsTemplate: "additionalActionsTemplate", rowContextMenu: "rowContextMenu", columns: "columns" }, outputs: { event: "event" }, host: { listeners: { "document:click": "onContextMenuClick($event.target)" } }, providers: [DefaultConfigService, GroupRowsService, StyleService], queries: [{ propertyName: "rowTemplate", first: true, predicate: TemplateRef, descendants: true }], viewQueries: [{ propertyName: "paginationComponent", first: true, predicate: ["paginationComponent"], descendants: true }, { propertyName: "contextMenu", first: true, predicate: ["contextMenu"], descendants: true }, { propertyName: "table", first: true, predicate: ["table"], descendants: true }, { propertyName: "viewPort", first: true, predicate: CdkVirtualScrollViewport, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n class=\"ngx-container\"\n [class.ngx-container--dark]=\"config.tableLayout.theme === 'dark'\"\n (dragenter)=\"dragEnter($event)\"\n (dragover)=\"dragOver($event)\"\n (dragleave)=\"dragLeave($event)\"\n (drop)=\"drop($event)\"\n>\n <table\n [id]=\"id\"\n #table\n [ngClass]=\"tableClass === null || tableClass === '' ? 'ngx-table' : tableClass\"\n [class.ngx-table__table--tiny]=\"config.tableLayout.style === 'tiny'\"\n [class.ngx-table__table--normal]=\"config.tableLayout.style === 'normal'\"\n [class.ngx-table__table--big]=\"config.tableLayout.style === 'big'\"\n [class.ngx-table__table--borderless]=\"config.tableLayout.borderless\"\n [class.ngx-table__table--dark]=\"config.tableLayout.theme === 'dark'\"\n [class.ngx-table__table--hoverable]=\"config.tableLayout.hover\"\n [class.ngx-table__table--striped]=\"config.tableLayout.striped\"\n [class.ngx-table__horizontal-scroll]=\"config.horizontalScroll && !config.isLoading\"\n >\n <thead\n [class.ngx-infinite-scroll-viewport-thead]=\"config.infiniteScroll\"\n table-thead\n [config]=\"config\"\n [sortKey]=\"sortKey\"\n [sortState]=\"sortState\"\n [selectAllTemplate]=\"selectAllTemplate\"\n [filtersTemplate]=\"filtersTemplate\"\n [additionalActionsTemplate]=\"additionalActionsTemplate\"\n [columns]=\"columns\"\n (selectAll)=\"onSelectAll()\"\n (filter)=\"onSearch($event)\"\n (order)=\"orderBy($event)\"\n (event)=\"emitEvent($event.event, $event.value)\"\n ></thead>\n <tbody *ngIf=\"data && !config.isLoading && !config.rowReorder\">\n <ng-container *ngIf=\"rowTemplate\">\n <ul\n class=\"ngx-table__table-row-context-menu\"\n [ngStyle]=\"{\n position: 'absolute',\n top: rowContextMenuPosition.top,\n left: rowContextMenuPosition.left\n }\"\n *ngIf=\"rowContextMenuPosition.top\"\n >\n <ng-container\n [ngTemplateOutlet]=\"rowContextMenu\"\n [ngTemplateOutletContext]=\"{ $implicit: rowContextMenuPosition.value }\"\n >\n </ng-container>\n </ul>\n <ng-container *ngIf=\"!config.infiniteScroll\">\n <ng-container\n *ngFor=\"\n let row of data\n | sort: sortBy\n | search: term:filteredCountSubject\n | global: globalSearchTerm:filteredCountSubject\n | paginate: { itemsPerPage: limit, currentPage: page, totalItems: count, id: id }\n \"\n >\n <tr\n (click)=\"onClick($event, row, '', null, data.indexOf(row))\"\n #contextMenu\n (contextmenu)=\"onRowContextMenu($event, row, '', null, data.indexOf(row))\"\n (dblclick)=\"onDoubleClick($event, row, '', null, data.indexOf(row))\"\n [class.ngx-table__table-row--selected]=\"\n data.indexOf(row) === selectedRow && !config.selectCell\n \"\n >\n <ng-container\n [ngTemplateOutlet]=\"rowTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: row, index: data.indexOf(row) }\"\n >\n </ng-container>\n <td *ngIf=\"config.detailsTemplate\">\n <span\n class=\"ngx-icon\"\n *ngIf=\"arrowDefinition\"\n [ngClass]=\"\n isRowCollapsed(data.indexOf(row))\n ? 'ngx-icon-arrow-down'\n : 'ngx-icon-arrow-right'\n \"\n (click)=\"collapseRow(data.indexOf(row))\"\n >\n </span>\n </td>\n </tr>\n <tr\n *ngIf=\"\n (config.detailsTemplate && selectedDetailsTemplateRowId.has(data.indexOf(row))) ||\n config.collapseAllRows\n \"\n >\n <td [attr.colspan]=\"columns.length + 1\">\n <ng-container\n [ngTemplateOutlet]=\"detailsTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: row, index: data.indexOf(row) }\"\n >\n </ng-container>\n </td>\n </tr>\n </ng-container>\n </ng-container>\n <cdk-virtual-scroll-viewport\n itemSize=\"50\"\n *ngIf=\"config.infiniteScroll\"\n class=\"ngx-infinite-scroll-viewport\"\n >\n <ng-container\n *cdkVirtualFor=\"\n let row of data\n | sort: sortBy\n | search: term:filteredCountSubject\n | global: globalSearchTerm:filteredCountSubject;\n let rowIndex = index\n \"\n >\n <tr\n (click)=\"onClick($event, row, '', null, rowIndex)\"\n #contextMenu\n (contextmenu)=\"onRowContextMenu($event, row, '', null, rowIndex)\"\n (dblclick)=\"onDoubleClick($event, row, '', null, rowIndex)\"\n [class.ngx-table__table-row--selected]=\"\n rowIndex === selectedRow && !config.selectCell\n \"\n >\n <ng-container\n [ngTemplateOutlet]=\"rowTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: row, index: rowIndex }\"\n >\n </ng-container>\n <td *ngIf=\"config.detailsTemplate\">\n <span\n class=\"ngx-icon\"\n *ngIf=\"arrowDefinition\"\n [ngClass]=\"\n isRowCollapsed(rowIndex) ? 'ngx-icon-arrow-down' : 'ngx-icon-arrow-right'\n \"\n (click)=\"collapseRow(rowIndex)\"\n >\n </span>\n </td>\n </tr>\n <tr\n *ngIf=\"\n (config.detailsTemplate && selectedDetailsTemplateRowId.has(rowIndex)) ||\n config.collapseAllRows\n \"\n >\n <td [attr.colspan]=\"columns.length + 1\">\n <ng-container\n [ngTemplateOutlet]=\"detailsTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: row, index: rowIndex }\"\n >\n </ng-container>\n </td>\n </tr>\n </ng-container>\n </cdk-virtual-scroll-viewport>\n </ng-container>\n <ng-container *ngIf=\"!rowTemplate && !config.groupRows\">\n <ul\n class=\"ngx-table__table-row-context-menu\"\n [ngStyle]=\"{\n position: 'absolute',\n top: rowContextMenuPosition.top,\n left: rowContextMenuPosition.left\n }\"\n *ngIf=\"rowContextMenuPosition.top\"\n >\n <ng-container\n [ngTemplateOutlet]=\"rowContextMenu\"\n [ngTemplateOutletContext]=\"{ $implicit: rowContextMenuPosition.value }\"\n >\n </ng-container>\n </ul>\n <ng-container *ngIf=\"!config.infiniteScroll\">\n <ng-container\n *ngFor=\"\n let row of data\n | sort: sortBy\n | search: term:filteredCountSubject\n | global: globalSearchTerm:filteredCountSubject\n | paginate: { itemsPerPage: limit, currentPage: page, totalItems: count, id: id }\n \"\n >\n <tr\n [class.ngx-table__table-row--selected]=\"\n data.indexOf(row) === selectedRow && !config.selectCell\n \"\n >\n <td *ngIf=\"config.checkboxes\">\n <label class=\"ngx-form-checkbox\">\n <input\n type=\"checkbox\"\n id=\"checkbox-{{ data.indexOf(row) }}\"\n [checked]=\"isSelected || selectedCheckboxes.has(data.indexOf(row))\"\n (change)=\"onCheckboxSelect($event, row, data.indexOf(row))\"\n />\n <em class=\"ngx-form-icon\"></em>\n </label>\n </td>\n <td *ngIf=\"config.radio\">\n <label>\n <input\n type=\"radio\"\n id=\"radio-{{ data.indexOf(row) }}\"\n name=\"radio\"\n (change)=\"onRadioSelect($event, row, data.indexOf(row))\"\n />\n </label>\n </td>\n <ng-container *ngFor=\"let column of columns; let colIndex = index\">\n <td\n (click)=\"onClick($event, row, column.key, colIndex, data.indexOf(row))\"\n #contextMenu\n (contextmenu)=\"\n onRowContextMenu($event, row, column.key, colIndex, data.indexOf(row))\n \"\n (dblclick)=\"onDoubleClick($event, row, column.key, colIndex, data.indexOf(row))\"\n [class.pinned-left]=\"column.pinned\"\n [ngClass]=\"column.cssClass ? column.cssClass.name : ''\"\n [style.left]=\"styleService.pinnedWidth(column.pinned, colIndex)\"\n [class.ngx-table__table-col--selected]=\"\n colIndex === selectedCol && !config.selectCell\n \"\n [class.ngx-table__table-cell--selected]=\"\n colIndex === selectedCol &&\n data.indexOf(row) === selectedRow &&\n !config.selectCol &&\n !config.selectRow\n \"\n >\n <div *ngIf=\"!column.cellTemplate\">{{ row | render: column.key }}</div>\n <ng-container\n *ngIf=\"column.cellTemplate\"\n [ngTemplateOutlet]=\"column.cellTemplate\"\n [ngTemplateOutletContext]=\"{\n $implicit: row,\n rowIndex: data.indexOf(row),\n column: column\n }\"\n >\n </ng-container>\n </td>\n </ng-container>\n <td *ngIf=\"config.additionalActions || config.detailsTemplate\">\n <span\n class=\"ngx-icon\"\n *ngIf=\"arrowDefinition\"\n [ngClass]=\"\n isRowCollapsed(data.indexOf(row))\n ? 'ngx-icon-arrow-down'\n : 'ngx-icon-arrow-right'\n \"\n (click)=\"collapseRow(data.indexOf(row))\"\n >\n </span>\n </td>\n </tr>\n <tr\n *ngIf=\"\n (config.detailsTemplate && selectedDetailsTemplateRowId.has(data.indexOf(row))) ||\n config.collapseAllRows\n \"\n >\n <td *ngIf=\"config.checkboxes || config.radio\"></td>\n <td [attr.colspan]=\"columns.length + 1\">\n <ng-container\n [ngTemplateOutlet]=\"detailsTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: row, index: data.indexOf(row) }\"\n >\n </ng-container>\n </td>\n </tr>\n </ng-container>\n </ng-container>\n <!-- infinite scroll -->\n <cdk-virtual-scroll-viewport\n itemSize=\"50\"\n *ngIf=\"config.infiniteScroll\"\n class=\"ngx-infinite-scroll-viewport\"\n >\n <ng-container\n *cdkVirtualFor=\"\n let row of data\n | sort: sortBy\n | search: term:filteredCountSubject\n | global: globalSearchTerm:filteredCountSubject;\n let rowIndex = index\n \"\n >\n <tr\n [class.ngx-table__table-row--selected]=\"\n rowIndex === selectedRow && !config.selectCell\n \"\n >\n <td *ngIf=\"config.checkboxes\" width=\"3%\">\n <label class=\"ngx-form-checkbox\">\n <input\n type=\"checkbox\"\n id=\"checkbox-infinite-scroll-{{ rowIndex }}\"\n [checked]=\"isSelected || selectedCheckboxes.has(rowIndex)\"\n (change)=\"onCheckboxSelect($event, row, rowIndex)\"\n />\n <em class=\"ngx-form-icon\"></em>\n </label>\n </td>\n <td *ngIf=\"config.radio\" width=\"3%\">\n <label>\n <input\n type=\"radio\"\n id=\"radio-infinite-scroll-{{ rowIndex }}\"\n name=\"radio\"\n (change)=\"onRadioSelect($event, row, rowIndex)\"\n />\n </label>\n </td>\n <ng-container *ngFor=\"let column of columns; let colIndex = index\">\n <td\n (click)=\"onClick($event, row, column.key, colIndex, rowIndex)\"\n #contextMenu\n (contextmenu)=\"onRowContextMenu($event, row, column.key, colIndex, rowIndex)\"\n (dblclick)=\"onDoubleClick($event, row, column.key, colIndex, rowIndex)\"\n [class.pinned-left]=\"column.pinned\"\n [ngClass]=\"column.cssClass ? column.cssClass.name : ''\"\n [style.left]=\"styleService.pinnedWidth(column.pinned, colIndex)\"\n [class.ngx-table__table-col--selected]=\"\n colIndex === selectedCol && !config.selectCell\n \"\n [class.ngx-table__table-cell--selected]=\"\n colIndex === selectedCol &&\n rowIndex === selectedRow &&\n !config.selectCol &&\n !config.selectRow\n \"\n >\n <div *ngIf=\"!column.cellTemplate\">{{ row | render: column.key }}</div>\n <ng-container\n *ngIf=\"column.cellTemplate\"\n [ngTemplateOutlet]=\"column.cellTemplate\"\n [ngTemplateOutletContext]=\"{\n $implicit: row,\n rowIndex: rowIndex,\n column: column\n }\"\n >\n </ng-container>\n </td>\n </ng-container>\n <td *ngIf=\"config.additionalActions || config.detailsTemplate\">\n <span\n class=\"ngx-icon\"\n *ngIf=\"arrowDefinition\"\n [ngClass]=\"\n isRowCollapsed(rowIndex) ? 'ngx-icon-arrow-down' : 'ngx-icon-arrow-right'\n \"\n (click)=\"collapseRow(rowIndex)\"\n >\n </span>\n </td>\n </tr>\n <tr\n *ngIf=\"\n (config.detailsTemplate && selectedDetailsTemplateRowId.has(rowIndex)) ||\n config.collapseAllRows\n \"\n >\n <td *ngIf=\"config.checkboxes || config.radio\"></td>\n <td [attr.colspan]=\"columns.length + 1\">\n <ng-container\n [ngTemplateOutlet]=\"detailsTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: row, index: rowIndex }\"\n >\n </ng-container>\n </td>\n </tr>\n </ng-container>\n </cdk-virtual-scroll-viewport>\n </ng-container>\n <ng-container *ngIf=\"!rowTemplate && config.groupRows\">\n <ng-container\n *ngFor=\"\n let group of grouped\n | sort: sortBy:config\n | search: term:filteredCountSubject:config\n | global: globalSearchTerm:filteredCountSubject\n | paginate: { itemsPerPage: limit, currentPage: page, totalItems: count, id: id };\n let rowIndex = index\n \"\n >\n <tr>\n <ng-container *ngIf=\"!groupRowsHeaderTemplate\">\n <td [attr.colspan]=\"columns.length\">\n <div>{{ group[0][groupRowsBy] }} ({{ group.length }})</div>\n </td>\n </ng-container>\n <ng-container\n *ngIf=\"groupRowsHeaderTemplate\"\n [ngTemplateOutlet]=\"groupRowsHeaderTemplate\"\n [ngTemplateOutletContext]=\"{\n total: group.length,\n key: groupRowsBy,\n value: group[0] ? group[0][groupRowsBy] : '',\n group: group,\n index: rowIndex\n }\"\n >\n </ng-container>\n <td>\n <span\n class=\"ngx-icon\"\n *ngIf=\"arrowDefinition\"\n [ngClass]=\"\n isRowCollapsed(rowIndex) ? 'ngx-icon-arrow-down' : 'ngx-icon-arrow-right'\n \"\n (click)=\"collapseRow(rowIndex)\"\n >\n </span>\n </td>\n </tr>\n <ng-container *ngIf=\"selectedDetailsTemplateRowId.has(rowIndex)\">\n <tr *ngFor=\"let row of group\">\n <td *ngFor=\"let column of columns\">\n {{ row | render: column.key }}\n <!-- TODO allow users to add groupRowsTemplateRef -->\n </td>\n <td></td>\n </tr>\n </ng-container>\n </ng-container>\n </ng-container>\n </tbody>\n <tbody\n *ngIf=\"data && !config.isLoading && config.rowReorder\"\n class=\"ngx-draggable-row-area\"\n cdkDropList\n (cdkDropListDropped)=\"onDrop($event)\"\n >\n <ng-container *ngIf=\"!rowTemplate && !config.groupRows\">\n <ng-container\n *ngFor=\"\n let row of data\n | sort: sortBy\n | search: term:filteredCountSubject\n | global: globalSearchTerm:filteredCountSubject\n | paginate: { itemsPerPage: limit, currentPage: page, totalItems: count, id: id }\n \"\n >\n <tr\n class=\"ngx-draggable-row\"\n cdkDrag\n (cdkDragStarted)=\"onDragStart($event)\"\n [cdkDragStartDelay]=\"config.reorderDelay || 0\"\n cdkDragLockAxis=\"y\"\n >\n <td *ngIf=\"config.checkboxes\">\n <label class=\"ngx-form-checkbox\">\n <input\n type=\"checkbox\"\n id=\"checkbox-draggable-{{ data.indexOf(row) }}\"\n [checked]=\"isSelected || selectedCheckboxes.has(data.indexOf(row))\"\n (change)=\"onCheckboxSelect($event, row, data.indexOf(row))\"\n />\n <em class=\"ngx-form-icon\"></em>\n </label>\n </td>\n <td *ngIf=\"config.radio\">\n <label>\n <input\n type=\"radio\"\n id=\"radio-draggable-{{ data.indexOf(row) }}\"\n name=\"radio\"\n (change)=\"onRadioSelect($event, row, data.indexOf(row))\"\n />\n </label>\n </td>\n <ng-container *ngFor=\"let column of columns; let colIndex = index\">\n <td\n (click)=\"onClick($event, row, column.key, colIndex, data.indexOf(row))\"\n (dblclick)=\"onDoubleClick($event, row, column.key, colIndex, data.indexOf(row))\"\n [class.ngx-table__table-col--selected]=\"\n colIndex === selectedCol && !config.selectCell\n \"\n [class.ngx-table__table-cell--selected]=\"\n colIndex === selectedCol &&\n data.indexOf(row) === selectedRow &&\n !config.selectCol &&\n !config.selectRow\n \"\n >\n <div *ngIf=\"!column.cellTemplate\">{{ row | render: column.key }}</div>\n <ng-container\n *ngIf=\"column.cellTemplate\"\n [ngTemplateOutlet]=\"column.cellTemplate\"\n [ngTemplateOutletContext]=\"{\n $implicit: row,\n rowIndex: data.indexOf(row),\n column: column\n }\"\n >\n </ng-container>\n </td>\n </ng-container>\n </tr>\n </ng-container>\n </ng-container>\n </tbody>\n <tbody *ngIf=\"filterCount === 0\">\n <tr class=\"ngx-table__body-empty\">\n <ng-container *ngIf=\"noResultsTemplate\" [ngTemplateOutlet]=\"noResultsTemplate\">\n </ng-container>\n <td [attr.colspan]=\"columns && columns.length + 1\" *ngIf=\"!noResultsTemplate\">\n <div class=\"ngx-table__table-no-results\">No results</div>\n </td>\n </tr>\n </tbody>\n <tbody *ngIf=\"config.isLoading\">\n <tr class=\"ngx-table__body-loading\">\n <ng-container *ngIf=\"loadingTemplate\" [ngTemplateOutlet]=\"loadingTemplate\"> </ng-container>\n <td [attr.colspan]=\"columns && columns.length + 1\" *ngIf=\"!loadingTemplate\">\n <div [style.height.px]=\"loadingHeight\" class=\"ngx-table__table-loader-wrapper\">\n <div class=\"ngx-table__table-loader\"></div>\n </div>\n </td>\n </tr>\n </tbody>\n <tfoot *ngIf=\"summaryTemplate\">\n <tr>\n <ng-container\n [ngTemplateOutlet]=\"summaryTemplate\"\n [ngTemplateOutletContext]=\"{ total: data.length, limit: limit, page: page }\"\n >\n </ng-container>\n </tr>\n </tfoot>\n </table>\n <pagination\n [attr.id]=\"'pagination' + id\"\n [id]=\"id\"\n #paginationComponent\n [config]=\"config\"\n [pagination]=\"pagination\"\n (updateRange)=\"onPagination($event)\"\n >\n </pagination>\n</div>\n", dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i4.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i4.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i1.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i1.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i1.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "component", type: i5.PaginationComponent, selector: "pagination", inputs: ["pagination", "config", "id"], outputs: ["updateRange"] }, { kind: "component", type: i6.TableTHeadComponent, selector: "[table-thead]", inputs: ["config", "columns", "sortKey", "sortState", "selectAllTemplate", "filtersTemplate", "additionalActionsTemplate"], outputs: ["filter", "order", "selectAll", "event"] }, { kind: "pipe", type: i7.PaginatePipe, name: "paginate" }, { kind: "pipe", type: i8.SearchPipe, name: "search" }, { kind: "pipe", type: i9.RenderPipe, name: "render" }, { kind: "pipe", type: i10.GlobalSearchPipe, name: "global" }, { kind: "pipe", type: i11.SortPipe, name: "sort" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: BaseComponent, decorators: [{
type: Component,
args: [{ selector: 'ngx-table', providers: [DefaultConfigService, GroupRowsService, StyleService], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n class=\"ngx-container\"\n [class.ngx-container--dark]=\"config.tableLayout.theme === 'dark'\"\n (dragenter)=\"dragEnter($event)\"\n (dragover)=\"dragOver($event)\"\n (dragleave)=\"dragLeave($event)\"\n (drop)=\"drop($event)\"\n>\n <table\n [id]=\"id\"\n #table\n [ngClass]=\"tableClass === null || tableClass === '' ? 'ngx-table' : tableClass\"\n [class.ngx-table__table--tiny]=\"config.tableLayout.style === 'tiny'\"\n [class.ngx-table__table--normal]=\"config.tableLayout.style === 'normal'\"\n [class.ngx-table__table--big]=\"config.tableLayout.style === 'big'\"\n [class.ngx-table__table--borderless]=\"config.tableLayout.borderless\"\n [class.ngx-table__table--dark]=\"config.tableLayout.theme === 'dark'\"\n [class.ngx-table__table--hoverable]=\"config.tableLayout.hover\"\n [class.ngx-table__table--striped]=\"config.tableLayout.striped\"\n [class.ngx-table__horizontal-scroll]=\"config.horizontalScroll && !config.isLoading\"\n >\n <thead\n [class.ngx-infinite-scroll-viewport-thead]=\"config.infiniteScroll\"\n table-thead\n [config]=\"config\"\n [sortKey]=\"sortKey\"\n [sortState]=\"sortState\"\n [selectAllTemplate]=\"selectAllTemplate\"\n [filtersTemplate]=\"filtersTemplate\"\n [additionalActionsTemplate]=\"additionalActionsTemplate\"\n [columns]=\"columns\"\n (selectAll)=\"onSelectAll()\"\n (filter)=\"onSearch($event)\"\n (order)=\"orderBy($event)\"\n (event)=\"emitEvent($event.event, $event.value)\"\n ></thead>\n <tbody *ngIf=\"data && !config.isLoading && !config.rowReorder\">\n <ng-container *ngIf=\"rowTemplate\">\n <ul\n class=\"ngx-table__table-row-context-menu\"\n [ngStyle]=\"{\n position: 'absolute',\n top: rowContextMenuPosition.top,\n left: rowContextMenuPosition.left\n }\"\n *ngIf=\"rowContextMenuPosition.top\"\n >\n <ng-container\n [ngTemplateOutlet]=\"rowContextMenu\"\n [ngTemplateOutletContext]=\"{ $implicit: rowContextMenuPosition.value }\"\n >\n </ng-container>\n </ul>\n <ng-container *ngIf=\"!config.infiniteScroll\">\n <ng-container\n *ngFor=\"\n let row of data\n | sort: sortBy\n | search: term:filteredCountSubject\n | global: globalSearchTerm:filteredCountSubject\n | paginate: { itemsPerPage: limit, currentPage: page, totalItems: count, id: id }\n \"\n >\n <tr\n (click)=\"onClick($event, row, '', null, data.indexOf(row))\"\n #contextMenu\n (contextmenu)=\"onRowContextMenu($event, row, '', null, data.indexOf(row))\"\n (dblclick)=\"onDoubleClick($event, row, '', null, data.indexOf(row))\"\n [class.ngx-table__table-row--selected]=\"\n data.indexOf(row) === selectedRow && !config.selectCell\n \"\n >\n <ng-container\n [ngTemplateOutlet]=\"rowTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: row, index: data.indexOf(row) }\"\n >\n </ng-container>\n <td *ngIf=\"config.detailsTemplate\">\n <span\n class=\"ngx-icon\"\n *ngIf=\"arrowDefinition\"\n [ngClass]=\"\n isRowCollapsed(data.indexOf(row))\n ? 'ngx-icon-arrow-down'\n : 'ngx-icon-arrow-right'\n \"\n (click)=\"collapseRow(data.indexOf(row))\"\n >\n </span>\n </td>\n </tr>\n <tr\n *ngIf=\"\n (config.detailsTemplate && selectedDetailsTemplateRowId.has(data.indexOf(row))) ||\n config.collapseAllRows\n \"\n >\n <td [attr.colspan]=\"columns.length + 1\">\n <ng-container\n [ngTemplateOutlet]=\"detailsTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: row, index: data.indexOf(row) }\"\n >\n </ng-container>\n </td>\n </tr>\n </ng-container>\n </ng-container>\n <cdk-virtual-scroll-viewport\n itemSize=\"50\"\n *ngIf=\"config.infiniteScroll\"\n class=\"ngx-infinite-scroll-viewport\"\n >\n <ng-container\n *cdkVirtualFor=\"\n let row of data\n | sort: sortBy\n | search: term:filteredCountSubject\n | global: globalSearchTerm:filteredCountSubject;\n let rowIndex = index\n \"\n >\n <tr\n (click)=\"onClick($event, row, '', null, rowIndex)\"\n #contextMenu\n (contextmenu)=\"onRowContextMenu($event, row, '', null, rowIndex)\"\n (dblclick)=\"onDoubleClick($event, row, '', null, rowIndex)\"\n [class.ngx-table__table-row--selected]=\"\n rowIndex === selectedRow && !config.selectCell\n \"\n >\n <ng-container\n [ngTemplateOutlet]=\"rowTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: row, index: rowIndex }\"\n >\n