@ng-prime-extensions/px-table/index.d.ts

PrimeNG table extension

import * as i0 from '@angular/core';
import { Type, ProviderToken, InjectionToken, PipeTransform, Injector, OnInit, OnChanges, OnDestroy, QueryList, EventEmitter, TemplateRef, ChangeDetectorRef, SimpleChanges } from '@angular/core';
import { FilterMetadata, MenuItem } from 'primeng/api';
import { TableRowSelectEvent, TableRowUnSelectEvent, TableLazyLoadEvent } from 'primeng/table';
import { Observable } from 'rxjs';
import { FormGroup } from '@angular/forms';
import { Menu } from 'primeng/menu';
import { PrimeNG } from 'primeng/config';

type ComponentPipeArguments = any[] | {
    [key: string]: any;
};
interface PxTableColumnDefinition {
    /**
     * This will be matched against the data source when providing value for this column.
     * For example the column id 'my_column' should be found in the data source, like so: [{'my_column': 'column_value'}, ...].
     */
    id: string;
    /**
     * The column display name.
     */
    name: string;
    /**
     * Classes to be placed on the whole column (th & td).
     * The values must be compatible with ngClass.
     */
    classes?: string[] | {
        [className: string]: boolean;
    };
    /**
     * Is this column sortable?
     */
    sortable?: boolean;
    /**
     * Whether this column is displayed or hidden.
     */
    visible?: boolean;
    /**
     * Render this column using a pipe or a component.
     * If both are set, the component property takes priority
     */
    renderUsing?: {
        component?: Type<any>;
        pipe?: ProviderToken<any>;
        /**
         * arguments to be passed to either the pipe or the component
         */
        arguments?: ComponentPipeArguments;
    };
}
interface PxTableRow {
    [columnId: string]: any;
    /**
     * Whether this row is selectable
     */
    pxDisableSelection?: boolean;
}
interface PxTableRenderComponentData {
    columnId: string;
    columnData: string;
    row: PxTableRow;
    arguments?: ComponentPipeArguments;
}
interface PxTableDataResponse {
    totalRecords: number;
    records: PxTableRow[];
}
interface PxTableColumnVisibility {
    columnId: string;
    /**
     * If not specified, the visibility will be toggled
     */
    visible?: boolean;
}
interface PxTableColumnVisibility {
    columnId: string;
    /**
     * If not specified, the visibility will be toggled
     */
    visible?: boolean;
}
interface PxTableSortedColumn {
    columnId: string;
    /**
     * Sort order. 1 - Ascending / -1 - Descending
     */
    order: number;
}
declare const PX_TABLE_RENDER_COMPONENT_DATA: InjectionToken<PxTableRenderComponentData>;
interface PxTableDataRequestInfo {
    firstRowIndex: number;
    pageLength: number;
    sortedColumns: PxTableSortedColumn[];
    filters: {
        [filter: string]: any;
    } | {
        [p: string]: FilterMetadata | FilterMetadata[] | undefined;
    };
}

declare class PxTableRenderPipePipe implements PipeTransform {
    private injector;
    constructor(injector: Injector);
    transform(value: unknown, pipeToken: ProviderToken<any>, args: ComponentPipeArguments): unknown;
    static ɵfac: i0.ɵɵFactoryDeclaration<PxTableRenderPipePipe, never>;
    static ɵpipe: i0.ɵɵPipeDeclaration<PxTableRenderPipePipe, "pxTableRenderPipe", true>;
}

declare class PxTableComponent implements OnInit, OnChanges, OnDestroy {
    protected primeNGConfig: PrimeNG;
    private injector;
    private changeDetector;
    toggledContextMenus: QueryList<Menu>;
    /**
     * Table column definitions.
     */
    columns: PxTableColumnDefinition[];
    /**
     * The data source from which rows are fetched.
     * Can be a static array of rows or a function that takes in info about the data request (like the current page index, the sorted columns, etc.) and returns an observable which will emit the information required by the table.
     */
    dataSource: PxTableRow[] | ((requestInfo: PxTableDataRequestInfo) => Observable<PxTableDataResponse>);
    /**
     * An array of objects to represent dynamic columns that are frozen.
     */
    frozenColumns?: any[];
    /**
     * An array of objects to display as frozen.
     */
    frozenValue?: any[];
    /**
     * Whether pagination is enabled.
     */
    paginator: boolean;
    /**
     * Number of rows to display per page.
     */
    rowsPerPage: number;
    /**
     * Array of integer values to display inside rows per page dropdown of paginator.
     */
    rowsPerPageOptions: number[];
    stripedRows: boolean;
    /**
     * Specifies the selection mode, valid values are "single" and "multiple". Passing null/undefined will disable row selection.
     */
    selectionMode?: null | 'single' | 'multiple';
    /**
     * Whether to display the "select all" header checkbox.
     */
    selectAllCheckbox?: boolean;
    /**
     * When enabled with paginator and checkbox selection mode, the select all checkbox in the header will select all rows on the current page.
     */
    selectionPageOnly?: boolean;
    /**
     * Selected row in single mode or an array of values in multiple mode.
     */
    selection?: any[];
    /**
     * Selected row with a context menu.
     */
    contextMenuSelection?: PxTableRow;
    /**
     * Callback to invoke on context menu selection change.
     */
    contextMenuSelectionChange: EventEmitter<PxTableRow>;
    /**
     * Defines the responsive mode.
     */
    responsiveLayout: 'stack' | 'scroll';
    /**
     * The breakpoint to define the maximum width boundary when using stack responsive layout.
     */
    breakpoint: string;
    /**
     * Own implementation of table filters to pass along to the [dataSource].
     * [filters] and [globalFilterFields] inputs will be ignored if this is set.
     */
    pxFilters?: {
        [filter: string]: any;
    } | FormGroup;
    /**
     * An array of FilterMetadata objects to provide external filters.
     */
    filters: {
        [p: string]: FilterMetadata | FilterMetadata[];
    };
    /**
     * An array of fields as string to use in global filtering.
     */
    globalFilterFields?: string[];
    /**
     * Defines whether sorting works on single column or on multiple columns.
     */
    sortMode: 'single' | 'multiple';
    /**
     * Name of the field to sort data by default.
     */
    sortColumnId?: string;
    /**
     * Order to sort when default sorting is enabled.
     * 0 - unsorted
     * 1 - Ascending
     * -1 - Descending
     */
    sortDirection: 0 | -1 | 1;
    /**
     * When true, resets paginator to first page after sorting. Available only when sortMode is set to single.
     */
    resetPageOnSort: boolean;
    /**
     * Passed to p-table.
     */
    styleClass?: string;
    /**
     * When enabled, columns can be resized using drag and drop.
     */
    resizableColumns?: boolean;
    /**
     * Defines whether the overall table width should change on column resize, valid values are "fit" and "expand".
     */
    columnResizeMode: 'fit' | 'expand';
    /**
     * Enables scrollable tables.
     */
    scrollable?: boolean;
    /**
     * Height of the scroll viewport in fixed pixels or the "flex" keyword for a dynamic size.
     */
    scrollHeight?: string;
    /**
     * When enabled, columns can be reordered using drag and drop.
     */
    reorderableColumns?: boolean;
    /**
     * A property to uniquely identify a record in data.
     */
    dataKey?: string;
    /**
     * Defines where a stateful table keeps its state, valid values are "session" for sessionStorage and "local" for localStorage.
     */
    stateStorage: 'session' | 'local';
    /**
     * Unique identifier of a stateful table to use in state storage.
     */
    stateKey?: string;
    /**
     * Inline style of the table.
     */
    tableStyle?: {
        [p: string]: any;
    } | null;
    /**
     * Style class of the table.
     */
    tableStyleClass?: string;
    /**
     * An array of menu items.
     * This enables the context menu and context menu toggle button (added automatically on a separate column at the end of the table).
     */
    rowContextMenuItems?: MenuItem[];
    /**
     * A function that takes the row of the active context menu and returns the array of items.
     * If set then the [rowContextMenuItems] input is ignored.
     */
    dynamicContextMenuItems?: (rowData: PxTableRow) => MenuItem[];
    /**
     * Message shown when dynamicContextMenuItems returns an array
     */
    dynamicContextMenuNoItemsMessage: string;
    /**
     * Name of the icon to be passed along to the p-button toggle.
     */
    rowContextMenuToggleIcon: string;
    /**
     * Limits how the context menu is toggled. By default, the menu is triggered by both a right click action and by the button inside the special "actions" column.
     */
    rowContextMenuToggleBy?: 'rightClick' | 'button';
    /**
     * Custom loading icon template.
     */
    loadingIconTemplateRef?: TemplateRef<any>;
    /**
     * Function that determines when the contextual menu is active for a particular row.
     */
    rowContextMenuIsActiveFn?: (row: PxTableRow) => boolean;
    /**
     * Callback to invoke on selection changed.
     */
    selectionChange: EventEmitter<any>;
    /**
     * Callback to invoke when a row is selected.
     */
    onRowSelect: EventEmitter<TableRowSelectEvent<any>>;
    /**
     * Callback to invoke when a row is unselected.
     */
    onRowUnselect: EventEmitter<TableRowUnSelectEvent<any>>;
    protected displayedColumns: PxTableColumnDefinition[];
    protected records: PxTableRow[];
    protected totalRecords: number;
    protected firstRowIndex: number;
    protected isDataSrcStatic: boolean;
    protected isLoading: boolean;
    private lastLazyLoadEventData;
    private tableInitialized;
    private columnInjectorCache;
    private dataSrcSub?;
    constructor(primeNGConfig: PrimeNG, injector: Injector, changeDetector: ChangeDetectorRef);
    ngOnInit(): void;
    ngOnChanges(changes: SimpleChanges): void;
    /**
     * Re-fetch table data.
     * @param resetPage
     */
    refresh(resetPage?: boolean): void;
    /**
     * Hides/shows or toggles the specified table column's visibility.
     * @param columnId
     * @param visible If not specified, the visibility will be toggled
     */
    changeColumnVisibility(columnId: string, visible?: boolean): void;
    /**
     * 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: PxTableColumnVisibility[]): void;
    protected onLazyLoad($event: TableLazyLoadEvent): void;
    protected onContextMenuSelectionChange(rowData: PxTableRow, closeOpenMenus?: boolean): void;
    protected onContextMenuShown(): void;
    protected createRenderComponentInjector(column: PxTableColumnDefinition, row: PxTableRow, rowIndex: number): Injector;
    private checkDataSource;
    private prepareDisplayedColumns;
    private getColumn;
    ngOnDestroy(): void;
    static ɵfac: i0.ɵɵFactoryDeclaration<PxTableComponent, never>;
    static ɵcmp: i0.ɵɵComponentDeclaration<PxTableComponent, "px-table", never, { "columns": { "alias": "columns"; "required": true; }; "dataSource": { "alias": "dataSource"; "required": true; }; "frozenColumns": { "alias": "frozenColumns"; "required": false; }; "frozenValue": { "alias": "frozenValue"; "required": false; }; "paginator": { "alias": "paginator"; "required": false; }; "rowsPerPage": { "alias": "rowsPerPage"; "required": false; }; "rowsPerPageOptions": { "alias": "rowsPerPageOptions"; "required": false; }; "stripedRows": { "alias": "stripedRows"; "required": false; }; "selectionMode": { "alias": "selectionMode"; "required": false; }; "selectAllCheckbox": { "alias": "selectAllCheckbox"; "required": false; }; "selectionPageOnly": { "alias": "selectionPageOnly"; "required": false; }; "selection": { "alias": "selection"; "required": false; }; "contextMenuSelection": { "alias": "contextMenuSelection"; "required": false; }; "responsiveLayout": { "alias": "responsiveLayout"; "required": false; }; "breakpoint": { "alias": "breakpoint"; "required": false; }; "pxFilters": { "alias": "pxFilters"; "required": false; }; "filters": { "alias": "filters"; "required": false; }; "globalFilterFields": { "alias": "globalFilterFields"; "required": false; }; "sortMode": { "alias": "sortMode"; "required": false; }; "sortColumnId": { "alias": "sortColumnId"; "required": false; }; "sortDirection": { "alias": "sortDirection"; "required": false; }; "resetPageOnSort": { "alias": "resetPageOnSort"; "required": false; }; "styleClass": { "alias": "styleClass"; "required": false; }; "resizableColumns": { "alias": "resizableColumns"; "required": false; }; "columnResizeMode": { "alias": "columnResizeMode"; "required": false; }; "scrollable": { "alias": "scrollable"; "required": false; }; "scrollHeight": { "alias": "scrollHeight"; "required": false; }; "reorderableColumns": { "alias": "reorderableColumns"; "required": false; }; "dataKey": { "alias": "dataKey"; "required": false; }; "stateStorage": { "alias": "stateStorage"; "required": false; }; "stateKey": { "alias": "stateKey"; "required": false; }; "tableStyle": { "alias": "tableStyle"; "required": false; }; "tableStyleClass": { "alias": "tableStyleClass"; "required": false; }; "rowContextMenuItems": { "alias": "rowContextMenuItems"; "required": false; }; "dynamicContextMenuItems": { "alias": "dynamicContextMenuItems"; "required": false; }; "dynamicContextMenuNoItemsMessage": { "alias": "dynamicContextMenuNoItemsMessage"; "required": false; }; "rowContextMenuToggleIcon": { "alias": "rowContextMenuToggleIcon"; "required": false; }; "rowContextMenuToggleBy": { "alias": "rowContextMenuToggleBy"; "required": false; }; "loadingIconTemplateRef": { "alias": "loadingIconTemplateRef"; "required": false; }; "rowContextMenuIsActiveFn": { "alias": "rowContextMenuIsActiveFn"; "required": false; }; }, { "contextMenuSelectionChange": "contextMenuSelectionChange"; "selectionChange": "selectionChange"; "onRowSelect": "onRowSelect"; "onRowUnselect": "onRowUnselect"; }, never, never, true, never>;
}

export { PX_TABLE_RENDER_COMPONENT_DATA, PxTableComponent, PxTableRenderPipePipe };
export type { ComponentPipeArguments, PxTableColumnDefinition, PxTableColumnVisibility, PxTableDataRequestInfo, PxTableDataResponse, PxTableRenderComponentData, PxTableRow, PxTableSortedColumn };