@ng-prime-extensions/px-table
Version:
PrimeNG table extension
469 lines (462 loc) • 43.9 kB
JavaScript
import * as i0 from '@angular/core';
import { InjectionToken, Pipe, EventEmitter, signal, Injector, Output, Input, ViewChildren, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
import * as i2 from 'primeng/table';
import { TableModule } from 'primeng/table';
import { NgClass, NgTemplateOutlet, NgComponentOutlet } from '@angular/common';
import { FormGroup } from '@angular/forms';
import { Button } from 'primeng/button';
import { Menu } from 'primeng/menu';
import { ContextMenu } from 'primeng/contextmenu';
import { ProgressSpinner } from 'primeng/progressspinner';
import * as i1 from 'primeng/config';
import * as i3 from 'primeng/api';
const PX_TABLE_RENDER_COMPONENT_DATA = new InjectionToken('PX_TABLE_RENDER_COMPONENT_DATA');
class PxTableRenderPipePipe {
constructor(injector) {
this.injector = injector;
}
transform(value, pipeToken, args) {
let pipeArgs;
if (!Array.isArray(args)) {
pipeArgs = [args];
}
else {
pipeArgs = args;
}
return this.injector.get(pipeToken).transform(value, ...pipeArgs);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: PxTableRenderPipePipe, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Pipe }); }
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.1.4", ngImport: i0, type: PxTableRenderPipePipe, isStandalone: true, name: "pxTableRenderPipe" }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: PxTableRenderPipePipe, decorators: [{
type: Pipe,
args: [{
name: 'pxTableRenderPipe',
standalone: true
}]
}], ctorParameters: () => [{ type: i0.Injector }] });
class PxTableComponent {
constructor(primeNGConfig, injector, changeDetector) {
this.primeNGConfig = primeNGConfig;
this.injector = injector;
this.changeDetector = changeDetector;
/**
* Whether pagination is enabled.
*/
this.paginator = true;
/**
* Number of rows to display per page.
*/
this.rowsPerPage = 10;
/**
* Array of integer values to display inside rows per page dropdown of paginator.
*/
this.rowsPerPageOptions = [5, 10, 20, 30, 40, 50];
this.stripedRows = false;
/**
* Whether to display the "select all" header checkbox.
*/
this.selectAllCheckbox = false;
/**
* Callback to invoke on context menu selection change.
*/
this.contextMenuSelectionChange = new EventEmitter();
/**
* Defines the responsive mode.
*/
this.responsiveLayout = 'scroll';
/**
* The breakpoint to define the maximum width boundary when using stack responsive layout.
*/
this.breakpoint = '960px';
/**
* An array of FilterMetadata objects to provide external filters.
*/
this.filters = {};
/**
* Defines whether sorting works on single column or on multiple columns.
*/
this.sortMode = 'single';
/**
* Order to sort when default sorting is enabled.
* 0 - unsorted
* 1 - Ascending
* -1 - Descending
*/
this.sortDirection = 0;
/**
* When true, resets paginator to first page after sorting. Available only when sortMode is set to single.
*/
this.resetPageOnSort = true;
/**
* Defines whether the overall table width should change on column resize, valid values are "fit" and "expand".
*/
this.columnResizeMode = 'fit';
/**
* Defines where a stateful table keeps its state, valid values are "session" for sessionStorage and "local" for localStorage.
*/
this.stateStorage = 'session';
/**
* Message shown when dynamicContextMenuItems returns an array
*/
this.dynamicContextMenuNoItemsMessage = 'No actions available';
/**
* Name of the icon to be passed along to the p-button toggle.
*/
this.rowContextMenuToggleIcon = 'pi pi-bars';
/**
* Callback to invoke on selection changed.
*/
this.selectionChange = new EventEmitter();
/**
* Callback to invoke when a row is selected.
*/
this.onRowSelect = new EventEmitter();
/**
* Callback to invoke when a row is unselected.
*/
this.onRowUnselect = new EventEmitter();
this.displayedColumns = [];
this.records = [];
this.totalRecords = 0;
this.firstRowIndex = 0;
this.isDataSrcStatic = true;
this.isLoading = false;
this.handsetView = signal(false, ...(ngDevMode ? [{ debugName: "handsetView" }] : []));
this.lastLazyLoadEventData = {};
this.tableInitialized = false;
this.columnInjectorCache = {};
this.onResponsiveMediaQueryChange = (event) => this.handsetView.set(event.matches);
}
ngOnInit() {
this.checkResponsiveMode();
if (this.pxFilters) {
this.filters = {};
delete this.globalFilterFields;
}
if (this.dynamicContextMenuItems) {
this.rowContextMenuItems = [];
}
this.prepareDisplayedColumns();
this.checkDataSource();
this.tableInitialized = true;
}
ngOnChanges(changes) {
let detectChanges = false;
if (changes['responsiveLayout'] && !changes['responsiveLayout'].firstChange) {
this.checkResponsiveMode();
detectChanges = true;
}
if (changes['columns'] && !changes['columns'].firstChange) {
this.prepareDisplayedColumns();
detectChanges = true;
}
if (changes['selectAllCheckbox'] && !changes['selectAllCheckbox'].firstChange) {
detectChanges = true;
}
if (changes['dataSource'] && !changes['dataSource'].firstChange) {
this.checkDataSource();
}
detectChanges && this.changeDetector.detectChanges();
}
/**
* Re-fetch table data.
* @param resetPage
*/
refresh(resetPage = true) {
if (this.isLoading) {
return;
}
if (resetPage) {
this.firstRowIndex = 0;
}
this.onLazyLoad(this.lastLazyLoadEventData);
}
/**
* Hides/shows or toggles the specified table column's visibility.
* @param columnId
* @param visible If not specified, the visibility will be toggled
*/
changeColumnVisibility(columnId, visible) {
const column = this.getColumn(columnId);
if (!column) {
return;
}
column.visible = typeof visible === 'undefined' ? !column.visible : visible;
this.prepareDisplayedColumns();
this.changeDetector.detectChanges();
}
/**
* Changes the visibility of multiple columns at once.
* @param columns The columns and their visibility. Example: [{columnId: 'myColumn1', visible: true}, {columnId: 'myOtherColumn', visible: false}] -- sets myColumn1 to visible and hides myOtherColumn
*/
changeColumnsVisibility(columns) {
for (let i = columns.length; i--;) {
const colVisibilityConfig = columns[i];
const column = this.getColumn(colVisibilityConfig.columnId);
if (!column) {
continue;
}
column.visible = typeof colVisibilityConfig.visible !== "undefined" ? colVisibilityConfig.visible : !column.visible;
}
this.prepareDisplayedColumns();
this.changeDetector.detectChanges();
}
onLazyLoad($event) {
const dataSource = this.dataSource;
if (this.isDataSrcStatic) {
this.columnInjectorCache = {};
this.records = dataSource;
this.totalRecords = dataSource.length;
this.changeDetector.detectChanges();
}
else {
this.isLoading = true;
this.lastLazyLoadEventData = $event;
const sortedColumns = [];
if (this.sortMode === 'multiple') {
const multiSortColumns = $event.multiSortMeta;
if (multiSortColumns) {
const multiSortColumnsLen = multiSortColumns.length;
for (let i = 0; i < multiSortColumnsLen; ++i) {
const sortedCol = multiSortColumns[i];
sortedColumns.push({
columnId: sortedCol.field,
order: sortedCol.order
});
}
}
}
else {
sortedColumns.push({
columnId: $event.sortField || this.sortColumnId || '',
order: $event.sortOrder || this.sortDirection
});
}
this.dataSrcSub?.unsubscribe();
this.dataSrcSub = dataSource({
firstRowIndex: $event.first || 0,
pageLength: $event.rows || this.rowsPerPage,
sortedColumns,
filters: this.pxFilters ? (this.pxFilters instanceof FormGroup ? this.pxFilters.value || {} : this.filters || {}) : $event.filters
}).subscribe(response => {
this.columnInjectorCache = {};
this.records = response.records;
this.totalRecords = response.totalRecords;
this.isLoading = false;
this.changeDetector.detectChanges();
});
}
}
onContextMenuSelectionChange(rowData, closeOpenMenus = true) {
this.contextMenuSelection = rowData;
if (closeOpenMenus) {
const contextMenuPanels = this.toggledContextMenus.toArray();
const contextMenuPanelsLen = contextMenuPanels.length;
for (let i = 0; i < contextMenuPanelsLen; ++i) {
contextMenuPanels[i].hide();
}
}
this.contextMenuSelectionChange.emit(rowData);
}
onContextMenuShown() {
if (!(this.dynamicContextMenuItems && this.contextMenuSelection)) {
return;
}
this.rowContextMenuItems = this.dynamicContextMenuItems(this.contextMenuSelection);
if (!this.rowContextMenuItems.length) {
this.rowContextMenuItems.push({
label: this.dynamicContextMenuNoItemsMessage,
disabled: true
});
}
}
createRenderComponentInjector(column, row, rowIndex) {
const injectorCacheKey = column.id + '' + rowIndex;
const columnInjectorCache = this.columnInjectorCache;
if (!columnInjectorCache[injectorCacheKey]) {
columnInjectorCache[injectorCacheKey] = Injector.create({
providers: [{
provide: PX_TABLE_RENDER_COMPONENT_DATA,
useValue: {
columnId: column.id,
columnData: row[column.id],
row,
arguments: column.renderUsing?.arguments
}
}],
parent: this.injector
});
}
return columnInjectorCache[injectorCacheKey];
}
checkDataSource() {
if (Array.isArray(this.dataSource)) {
this.isDataSrcStatic = true;
this.refresh(this.tableInitialized);
}
else {
this.isDataSrcStatic = false;
this.tableInitialized && this.refresh();
}
}
prepareDisplayedColumns() {
const columns = this.columns;
const colLen = columns.length;
const displayedColumns = [];
for (let colIndex = 0; colIndex < colLen; ++colIndex) {
const column = columns[colIndex];
if (column.visible === undefined || column.visible) {
displayedColumns.push(column);
}
}
this.displayedColumns = displayedColumns;
}
checkResponsiveMode() {
if (this.responsiveLayout === 'stack') {
this.responsiveMediaQueryList = window.matchMedia(`(max-width: ${this.breakpoint})`);
this.handsetView.set(this.responsiveMediaQueryList.matches);
this.responsiveMediaQueryList.addEventListener('change', this.onResponsiveMediaQueryChange);
}
else {
delete this.responsiveMediaQueryList;
this.handsetView.set(false);
}
}
getColumn(columnId) {
const columns = this.columns;
let foundColumn;
for (let i = columns.length; i--;) {
const col = columns[i];
if (col.id === columnId) {
foundColumn = col;
break;
}
}
return foundColumn;
}
ngOnDestroy() {
this.dataSrcSub?.unsubscribe();
this.responsiveMediaQueryList?.removeEventListener('change', this.onResponsiveMediaQueryChange);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: PxTableComponent, deps: [{ token: i1.PrimeNG }, { token: i0.Injector }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", type: PxTableComponent, isStandalone: true, selector: "px-table", inputs: { columns: "columns", dataSource: "dataSource", frozenColumns: "frozenColumns", frozenValue: "frozenValue", paginator: "paginator", rowsPerPage: "rowsPerPage", rowsPerPageOptions: "rowsPerPageOptions", stripedRows: "stripedRows", selectionMode: "selectionMode", selectAllCheckbox: "selectAllCheckbox", selectionPageOnly: "selectionPageOnly", selection: "selection", contextMenuSelection: "contextMenuSelection", responsiveLayout: "responsiveLayout", breakpoint: "breakpoint", pxFilters: "pxFilters", filters: "filters", globalFilterFields: "globalFilterFields", sortMode: "sortMode", sortColumnId: "sortColumnId", sortDirection: "sortDirection", resetPageOnSort: "resetPageOnSort", styleClass: "styleClass", resizableColumns: "resizableColumns", columnResizeMode: "columnResizeMode", scrollable: "scrollable", scrollHeight: "scrollHeight", reorderableColumns: "reorderableColumns", dataKey: "dataKey", stateStorage: "stateStorage", stateKey: "stateKey", tableStyle: "tableStyle", tableStyleClass: "tableStyleClass", rowContextMenuItems: "rowContextMenuItems", dynamicContextMenuItems: "dynamicContextMenuItems", dynamicContextMenuNoItemsMessage: "dynamicContextMenuNoItemsMessage", rowContextMenuToggleIcon: "rowContextMenuToggleIcon", rowContextMenuToggleBy: "rowContextMenuToggleBy", loadingIconTemplateRef: "loadingIconTemplateRef", rowContextMenuIsActiveFn: "rowContextMenuIsActiveFn" }, outputs: { contextMenuSelectionChange: "contextMenuSelectionChange", selectionChange: "selectionChange", onRowSelect: "onRowSelect", onRowUnselect: "onRowUnselect" }, host: { properties: { "class.px-table": "true", "class.handset-view": "handsetView()" } }, viewQueries: [{ propertyName: "toggledContextMenus", predicate: ["toggledContextMenu"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<p-contextMenu #contextMenuRef [model]=\"rowContextMenuItems\" appendTo=\"body\" (onShow)=\"onContextMenuShown()\"></p-contextMenu>\n<p-table\n [class]=\"styleClass\"\n [columns]=\"columns\"\n [value]=\"records\"\n [totalRecords]=\"totalRecords\"\n [paginator]=\"paginator\"\n [rows]=\"rowsPerPage\"\n [rowsPerPageOptions]=\"rowsPerPageOptions\"\n [(first)]=\"firstRowIndex\"\n [stripedRows]=\"stripedRows\"\n [sortMode]=\"sortMode\"\n [sortField]=\"sortColumnId\"\n [sortOrder]=\"sortDirection\"\n [resetPageOnSort]=\"resetPageOnSort\"\n [frozenColumns]=\"frozenColumns\"\n [frozenValue]=\"frozenValue\"\n [breakpoint]=\"breakpoint\"\n [lazy]=\"!isDataSrcStatic\"\n [loading]=\"isLoading\"\n [resizableColumns]=\"resizableColumns\"\n [columnResizeMode]=\"columnResizeMode\"\n [scrollable]=\"scrollable\"\n [scrollHeight]=\"scrollHeight\"\n [reorderableColumns]=\"reorderableColumns\"\n [dataKey]=\"dataKey\"\n [stateStorage]=\"stateStorage\"\n [stateKey]=\"stateKey\"\n [tableStyle]=\"tableStyle\"\n [tableStyleClass]=\"tableStyleClass\"\n [selectionPageOnly]=\"selectionPageOnly\"\n [filters]=\"filters\"\n [globalFilterFields]=\"globalFilterFields\"\n [contextMenu]=\"contextMenuRef\"\n (contextMenuSelectionChange)=\"onContextMenuSelectionChange($event)\"\n (onLazyLoad)=\"onLazyLoad($event)\"\n [selection]=\"selection\"\n [selectionMode]=\"selectionMode\"\n (selectionChange)=\"selectionChange.emit($event)\"\n (onRowSelect)=\"onRowSelect.emit($event)\"\n (onRowUnselect)=\"onRowUnselect.emit($event)\"\n>\n <ng-template pTemplate=\"header\">\n <tr>\n @if(selectionMode)\n {\n <th>\n @if(selectAllCheckbox && selectionMode === 'multiple')\n {\n <p-tableHeaderCheckbox />\n }\n </th>\n }\n\n @if(!handsetView())\n {\n @for(column of displayedColumns; track column.id)\n {\n <th\n [pSortableColumn]=\"column.sortable ? column.id : undefined\"\n [pSortableColumnDisabled]=\"!column.sortable\"\n [ngClass]=\"column.classes\"\n >\n {{ column.name }}\n\n @if(column.sortable)\n {\n <p-sortIcon [field]=\"column.id\"></p-sortIcon>\n }\n </th>\n }\n\n @if(rowContextMenuItems && (!rowContextMenuToggleBy || rowContextMenuToggleBy === 'button'))\n {\n <th>\n \n </th>\n }\n }\n @else\n {\n\n }\n </tr>\n </ng-template>\n\n <ng-template pTemplate=\"body\" let-rowData let-rowIndex=\"rowIndex\">\n <tr [pContextMenuRow]=\"rowData\"\n [pContextMenuRowDisabled]=\"!rowContextMenuItems || (rowContextMenuToggleBy && rowContextMenuToggleBy !== 'rightClick') || (rowContextMenuIsActiveFn && !rowContextMenuIsActiveFn(rowData))\">\n\n @if(handsetView())\n {\n <td class=\"handset-view-header\">\n <div>\n @if(selectionMode)\n {\n @if(selectionMode === 'multiple')\n {\n <p-tableCheckbox [value]=\"rowData\" [disabled]=\"rowData.pxDisableSelection\" />\n }\n\n @if(selectionMode === 'single')\n {\n <p-tableRadioButton [value]=\"rowData\" [disabled]=\"rowData.pxDisableSelection\" />\n }\n }\n </div>\n\n <div>\n @if(rowContextMenuItems && (!rowContextMenuToggleBy || rowContextMenuToggleBy === 'button'))\n {\n <ng-container\n [ngTemplateOutlet]=\"contextMenuButtonToggle\"\n [ngTemplateOutletContext]=\"{rowData}\"\n ></ng-container>\n }\n </div>\n </td>\n }\n @else if(selectionMode)\n {\n <td>\n @if(selectionMode === 'multiple')\n {\n <p-tableCheckbox [value]=\"rowData\" [disabled]=\"rowData.pxDisableSelection\" />\n }\n\n @if(selectionMode === 'single')\n {\n <p-tableRadioButton [value]=\"rowData\" [disabled]=\"rowData.pxDisableSelection\" />\n }\n </td>\n }\n\n @for(column of displayedColumns; track column.id)\n {\n <td [attr.data-header-column-name]=\"column.name\" [ngClass]=\"column.classes\">\n <div\n class=\"handset-view-cell-header\"\n [pSortableColumn]=\"column.sortable ? column.id : undefined\"\n [pSortableColumnDisabled]=\"!column.sortable\"\n >\n @if(column.sortable)\n {\n <p-sortIcon [field]=\"column.id\"></p-sortIcon>\n }\n {{column.name}}\n </div>\n\n <div class=\"cell-render\">\n @if(column.renderUsing)\n {\n @if(column.renderUsing.component)\n {\n <ng-container\n [ngComponentOutlet]=\"column.renderUsing.component\"\n [ngComponentOutletInjector]=\"createRenderComponentInjector(column, rowData, rowIndex)\"></ng-container>\n }\n @else\n {\n {{ rowData[column.id] | pxTableRenderPipe: column.renderUsing.pipe! : column.renderUsing.arguments || [] }}\n }\n }\n @else\n {\n {{ rowData[column.id] }}\n }\n </div>\n </td>\n }\n\n @if(!handsetView() && rowContextMenuItems && (!rowContextMenuToggleBy || rowContextMenuToggleBy === 'button'))\n {\n <td class=\"px-table-context-menu-toggle-cell\">\n <ng-container\n [ngTemplateOutlet]=\"contextMenuButtonToggle\"\n [ngTemplateOutletContext]=\"{rowData}\"\n ></ng-container>\n </td>\n }\n </tr>\n </ng-template>\n\n <ng-template pTemplate=\"emptymessage\">\n <tr>\n <td colspan=\"100\" class=\"px-table-empty-message\">{{ primeNGConfig.translation.emptyMessage }}</td>\n </tr>\n </ng-template>\n\n <ng-template pTemplate=\"loadingicon\">\n @if(loadingIconTemplateRef)\n {\n <ng-container [ngTemplateOutlet]=\"loadingIconTemplateRef\"></ng-container>\n }\n @else\n {\n <p-progressSpinner class=\"px-default-loading-icon\" [style]=\"{'width': '65px'}\" strokeWidth=\"3\"></p-progressSpinner>\n }\n </ng-template>\n</p-table>\n\n<ng-template #contextMenuButtonToggle let-rowData=\"rowData\">\n @if(!rowContextMenuIsActiveFn || rowContextMenuIsActiveFn(rowData))\n {\n <span>\n <p-button [icon]=\"rowContextMenuToggleIcon\" (click)=\"toggledContextMenu.toggle($event)\"></p-button>\n <p-menu #toggledContextMenu [model]=\"rowContextMenuItems\" [popup]=\"true\" appendTo=\"body\"\n (onShow)=\"onContextMenuSelectionChange(rowData, false); onContextMenuShown()\"></p-menu>\n </span>\n }\n @else\n {\n \n }\n</ng-template>\n", styles: [".px-table .px-table-empty-message{text-align:center}.px-table .px-table-context-menu-toggle-cell{text-align:right}.px-table .p-datatable-column-title{display:none;font-weight:700}.px-table .p-datatable-loading-icon{display:flex;align-items:center;justify-content:center;height:unset;width:unset;font-size:unset}.px-table .handset-view-cell-header{display:none}.px-table.handset-view,.px-table.handset-view thead{display:block}.px-table.handset-view thead tr{display:flex;flex-direction:row}.px-table.handset-view thead tr th{border:none}.px-table.handset-view tbody{display:block}.px-table.handset-view tbody tr{display:flex;flex-direction:column;margin:0 0 1rem;border:1px solid var(--p-content-border-color);border-radius:var(--p-border-radius-md);padding:0}.px-table.handset-view tbody tr td{padding:1rem;display:flex;flex-grow:1;flex-basis:0}.px-table.handset-view tbody tr td.handset-view-header{padding:1rem;display:flex;justify-content:space-between;align-items:center}.px-table.handset-view tbody tr td .handset-view-cell-header{display:inline;font-weight:700;width:33.33%;height:100%;color:var(--p-primary-color);background:inherit}\n"], dependencies: [{ kind: "component", type: ContextMenu, selector: "p-contextMenu, p-contextmenu, p-context-menu", inputs: ["model", "triggerEvent", "target", "global", "style", "styleClass", "autoZIndex", "baseZIndex", "id", "breakpoint", "ariaLabel", "ariaLabelledBy", "pressDelay", "appendTo"], outputs: ["onShow", "onHide"] }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: i2.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i2.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "directive", type: i2.ContextMenuRow, selector: "[pContextMenuRow]", inputs: ["pContextMenuRow", "pContextMenuRowIndex", "pContextMenuRowDisabled"] }, { kind: "component", type: i2.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i2.TableRadioButton, selector: "p-tableRadioButton", inputs: ["value", "disabled", "index", "inputId", "name", "ariaLabel"] }, { kind: "component", type: i2.TableCheckbox, selector: "p-tableCheckbox", inputs: ["value", "disabled", "required", "index", "inputId", "name", "ariaLabel"] }, { kind: "component", type: i2.TableHeaderCheckbox, selector: "p-tableHeaderCheckbox", inputs: ["disabled", "inputId", "name", "ariaLabel"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: Menu, selector: "p-menu", inputs: ["model", "popup", "style", "styleClass", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "ariaLabel", "ariaLabelledBy", "id", "tabindex", "appendTo"], outputs: ["onShow", "onHide", "onBlur", "onFocus"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }, { kind: "component", type: ProgressSpinner, selector: "p-progressSpinner, p-progress-spinner, p-progressspinner", inputs: ["styleClass", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "pipe", type: PxTableRenderPipePipe, name: "pxTableRenderPipe" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: PxTableComponent, decorators: [{
type: Component,
args: [{ selector: 'px-table', imports: [
PxTableRenderPipePipe,
ContextMenu,
TableModule,
NgClass,
NgTemplateOutlet,
Button,
Menu,
NgComponentOutlet,
ProgressSpinner,
], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
'[class.px-table]': 'true',
'[class.handset-view]': 'handsetView()'
}, template: "<p-contextMenu #contextMenuRef [model]=\"rowContextMenuItems\" appendTo=\"body\" (onShow)=\"onContextMenuShown()\"></p-contextMenu>\n<p-table\n [class]=\"styleClass\"\n [columns]=\"columns\"\n [value]=\"records\"\n [totalRecords]=\"totalRecords\"\n [paginator]=\"paginator\"\n [rows]=\"rowsPerPage\"\n [rowsPerPageOptions]=\"rowsPerPageOptions\"\n [(first)]=\"firstRowIndex\"\n [stripedRows]=\"stripedRows\"\n [sortMode]=\"sortMode\"\n [sortField]=\"sortColumnId\"\n [sortOrder]=\"sortDirection\"\n [resetPageOnSort]=\"resetPageOnSort\"\n [frozenColumns]=\"frozenColumns\"\n [frozenValue]=\"frozenValue\"\n [breakpoint]=\"breakpoint\"\n [lazy]=\"!isDataSrcStatic\"\n [loading]=\"isLoading\"\n [resizableColumns]=\"resizableColumns\"\n [columnResizeMode]=\"columnResizeMode\"\n [scrollable]=\"scrollable\"\n [scrollHeight]=\"scrollHeight\"\n [reorderableColumns]=\"reorderableColumns\"\n [dataKey]=\"dataKey\"\n [stateStorage]=\"stateStorage\"\n [stateKey]=\"stateKey\"\n [tableStyle]=\"tableStyle\"\n [tableStyleClass]=\"tableStyleClass\"\n [selectionPageOnly]=\"selectionPageOnly\"\n [filters]=\"filters\"\n [globalFilterFields]=\"globalFilterFields\"\n [contextMenu]=\"contextMenuRef\"\n (contextMenuSelectionChange)=\"onContextMenuSelectionChange($event)\"\n (onLazyLoad)=\"onLazyLoad($event)\"\n [selection]=\"selection\"\n [selectionMode]=\"selectionMode\"\n (selectionChange)=\"selectionChange.emit($event)\"\n (onRowSelect)=\"onRowSelect.emit($event)\"\n (onRowUnselect)=\"onRowUnselect.emit($event)\"\n>\n <ng-template pTemplate=\"header\">\n <tr>\n @if(selectionMode)\n {\n <th>\n @if(selectAllCheckbox && selectionMode === 'multiple')\n {\n <p-tableHeaderCheckbox />\n }\n </th>\n }\n\n @if(!handsetView())\n {\n @for(column of displayedColumns; track column.id)\n {\n <th\n [pSortableColumn]=\"column.sortable ? column.id : undefined\"\n [pSortableColumnDisabled]=\"!column.sortable\"\n [ngClass]=\"column.classes\"\n >\n {{ column.name }}\n\n @if(column.sortable)\n {\n <p-sortIcon [field]=\"column.id\"></p-sortIcon>\n }\n </th>\n }\n\n @if(rowContextMenuItems && (!rowContextMenuToggleBy || rowContextMenuToggleBy === 'button'))\n {\n <th>\n \n </th>\n }\n }\n @else\n {\n\n }\n </tr>\n </ng-template>\n\n <ng-template pTemplate=\"body\" let-rowData let-rowIndex=\"rowIndex\">\n <tr [pContextMenuRow]=\"rowData\"\n [pContextMenuRowDisabled]=\"!rowContextMenuItems || (rowContextMenuToggleBy && rowContextMenuToggleBy !== 'rightClick') || (rowContextMenuIsActiveFn && !rowContextMenuIsActiveFn(rowData))\">\n\n @if(handsetView())\n {\n <td class=\"handset-view-header\">\n <div>\n @if(selectionMode)\n {\n @if(selectionMode === 'multiple')\n {\n <p-tableCheckbox [value]=\"rowData\" [disabled]=\"rowData.pxDisableSelection\" />\n }\n\n @if(selectionMode === 'single')\n {\n <p-tableRadioButton [value]=\"rowData\" [disabled]=\"rowData.pxDisableSelection\" />\n }\n }\n </div>\n\n <div>\n @if(rowContextMenuItems && (!rowContextMenuToggleBy || rowContextMenuToggleBy === 'button'))\n {\n <ng-container\n [ngTemplateOutlet]=\"contextMenuButtonToggle\"\n [ngTemplateOutletContext]=\"{rowData}\"\n ></ng-container>\n }\n </div>\n </td>\n }\n @else if(selectionMode)\n {\n <td>\n @if(selectionMode === 'multiple')\n {\n <p-tableCheckbox [value]=\"rowData\" [disabled]=\"rowData.pxDisableSelection\" />\n }\n\n @if(selectionMode === 'single')\n {\n <p-tableRadioButton [value]=\"rowData\" [disabled]=\"rowData.pxDisableSelection\" />\n }\n </td>\n }\n\n @for(column of displayedColumns; track column.id)\n {\n <td [attr.data-header-column-name]=\"column.name\" [ngClass]=\"column.classes\">\n <div\n class=\"handset-view-cell-header\"\n [pSortableColumn]=\"column.sortable ? column.id : undefined\"\n [pSortableColumnDisabled]=\"!column.sortable\"\n >\n @if(column.sortable)\n {\n <p-sortIcon [field]=\"column.id\"></p-sortIcon>\n }\n {{column.name}}\n </div>\n\n <div class=\"cell-render\">\n @if(column.renderUsing)\n {\n @if(column.renderUsing.component)\n {\n <ng-container\n [ngComponentOutlet]=\"column.renderUsing.component\"\n [ngComponentOutletInjector]=\"createRenderComponentInjector(column, rowData, rowIndex)\"></ng-container>\n }\n @else\n {\n {{ rowData[column.id] | pxTableRenderPipe: column.renderUsing.pipe! : column.renderUsing.arguments || [] }}\n }\n }\n @else\n {\n {{ rowData[column.id] }}\n }\n </div>\n </td>\n }\n\n @if(!handsetView() && rowContextMenuItems && (!rowContextMenuToggleBy || rowContextMenuToggleBy === 'button'))\n {\n <td class=\"px-table-context-menu-toggle-cell\">\n <ng-container\n [ngTemplateOutlet]=\"contextMenuButtonToggle\"\n [ngTemplateOutletContext]=\"{rowData}\"\n ></ng-container>\n </td>\n }\n </tr>\n </ng-template>\n\n <ng-template pTemplate=\"emptymessage\">\n <tr>\n <td colspan=\"100\" class=\"px-table-empty-message\">{{ primeNGConfig.translation.emptyMessage }}</td>\n </tr>\n </ng-template>\n\n <ng-template pTemplate=\"loadingicon\">\n @if(loadingIconTemplateRef)\n {\n <ng-container [ngTemplateOutlet]=\"loadingIconTemplateRef\"></ng-container>\n }\n @else\n {\n <p-progressSpinner class=\"px-default-loading-icon\" [style]=\"{'width': '65px'}\" strokeWidth=\"3\"></p-progressSpinner>\n }\n </ng-template>\n</p-table>\n\n<ng-template #contextMenuButtonToggle let-rowData=\"rowData\">\n @if(!rowContextMenuIsActiveFn || rowContextMenuIsActiveFn(rowData))\n {\n <span>\n <p-button [icon]=\"rowContextMenuToggleIcon\" (click)=\"toggledContextMenu.toggle($event)\"></p-button>\n <p-menu #toggledContextMenu [model]=\"rowContextMenuItems\" [popup]=\"true\" appendTo=\"body\"\n (onShow)=\"onContextMenuSelectionChange(rowData, false); onContextMenuShown()\"></p-menu>\n </span>\n }\n @else\n {\n \n }\n</ng-template>\n", styles: [".px-table .px-table-empty-message{text-align:center}.px-table .px-table-context-menu-toggle-cell{text-align:right}.px-table .p-datatable-column-title{display:none;font-weight:700}.px-table .p-datatable-loading-icon{display:flex;align-items:center;justify-content:center;height:unset;width:unset;font-size:unset}.px-table .handset-view-cell-header{display:none}.px-table.handset-view,.px-table.handset-view thead{display:block}.px-table.handset-view thead tr{display:flex;flex-direction:row}.px-table.handset-view thead tr th{border:none}.px-table.handset-view tbody{display:block}.px-table.handset-view tbody tr{display:flex;flex-direction:column;margin:0 0 1rem;border:1px solid var(--p-content-border-color);border-radius:var(--p-border-radius-md);padding:0}.px-table.handset-view tbody tr td{padding:1rem;display:flex;flex-grow:1;flex-basis:0}.px-table.handset-view tbody tr td.handset-view-header{padding:1rem;display:flex;justify-content:space-between;align-items:center}.px-table.handset-view tbody tr td .handset-view-cell-header{display:inline;font-weight:700;width:33.33%;height:100%;color:var(--p-primary-color);background:inherit}\n"] }]
}], ctorParameters: () => [{ type: i1.PrimeNG }, { type: i0.Injector }, { type: i0.ChangeDetectorRef }], propDecorators: { toggledContextMenus: [{
type: ViewChildren,
args: ['toggledContextMenu']
}], columns: [{
type: Input,
args: [{ required: true }]
}], dataSource: [{
type: Input,
args: [{ required: true }]
}], frozenColumns: [{
type: Input
}], frozenValue: [{
type: Input
}], paginator: [{
type: Input
}], rowsPerPage: [{
type: Input
}], rowsPerPageOptions: [{
type: Input
}], stripedRows: [{
type: Input
}], selectionMode: [{
type: Input
}], selectAllCheckbox: [{
type: Input
}], selectionPageOnly: [{
type: Input
}], selection: [{
type: Input
}], contextMenuSelection: [{
type: Input
}], contextMenuSelectionChange: [{
type: Output
}], responsiveLayout: [{
type: Input
}], breakpoint: [{
type: Input
}], pxFilters: [{
type: Input
}], filters: [{
type: Input
}], globalFilterFields: [{
type: Input
}], sortMode: [{
type: Input
}], sortColumnId: [{
type: Input
}], sortDirection: [{
type: Input
}], resetPageOnSort: [{
type: Input
}], styleClass: [{
type: Input
}], resizableColumns: [{
type: Input
}], columnResizeMode: [{
type: Input
}], scrollable: [{
type: Input
}], scrollHeight: [{
type: Input
}], reorderableColumns: [{
type: Input
}], dataKey: [{
type: Input
}], stateStorage: [{
type: Input
}], stateKey: [{
type: Input
}], tableStyle: [{
type: Input
}], tableStyleClass: [{
type: Input
}], rowContextMenuItems: [{
type: Input
}], dynamicContextMenuItems: [{
type: Input
}], dynamicContextMenuNoItemsMessage: [{
type: Input
}], rowContextMenuToggleIcon: [{
type: Input
}], rowContextMenuToggleBy: [{
type: Input
}], loadingIconTemplateRef: [{
type: Input
}], rowContextMenuIsActiveFn: [{
type: Input
}], selectionChange: [{
type: Output
}], onRowSelect: [{
type: Output
}], onRowUnselect: [{
type: Output
}] } });
/*
* Public API Surface of px-table
*/
/**
* Generated bundle index. Do not edit.
*/
export { PX_TABLE_RENDER_COMPONENT_DATA, PxTableComponent, PxTableRenderPipePipe };
//# sourceMappingURL=ng-prime-extensions-px-table.mjs.map