ng-hub-ui-table
Version:
Highly customizable Angular table and list components with pagination, sorting and filtering support.
267 lines (266 loc) • 14 kB
TypeScript
import { TemplateRef } from '@angular/core';
import { FormGroup } from '@angular/forms';
import { BehaviorSubject, Observable } from 'rxjs';
import { TableBreakpoint } from '../../constants/breakpoints';
import { PaginableTableCellDirective } from '../../directives/paginable-table-cell.directive';
import { PaginableTableExpandingRowDirective } from '../../directives/paginable-table-expanding-row.directive';
import { PaginableTableFilterDirective } from '../../directives/paginable-table-filter.directive';
import { PaginableTableHeaderDirective } from '../../directives/paginable-table-header.directive';
import { ListButton, RowButton, TableRowEvent } from '../../interfaces';
import { PaginableTableDropdown } from '../../interfaces/paginable-table-dropdown';
import { PaginableTableHeader } from '../../interfaces/paginable-table-header';
import { PaginableTableOptions } from '../../interfaces/paginable-table-options';
import { PaginableTableOrdination } from '../../interfaces/paginable-table-ordination';
import { PaginationState } from '../../interfaces/pagination-state';
import { TableRow } from '../../interfaces/table-row';
import { DropdownComponent } from '../dropdown/dropdown.component';
import * as i0 from "@angular/core";
export declare class TableComponent<T = any> {
#private;
id: import("@angular/core").InputSignal<string>;
readonly options: import("@angular/core").InputSignal<PaginableTableOptions>;
/**
* Collection of selected rows
*
* @type {Array<T>}
* @memberof PaginableTableComponent
*/
value: Array<T>;
/**
* Set whether all page rows are selecteds
*
* @type {boolean}
* @memberof PaginableTableComponent
*/
allRowsSelected: boolean;
/**
* Time to ouput the filter form value
*
* @type {number}
* @memberof PaginableTableComponent
*/
readonly debounce: import("@angular/core").InputSignal<number>;
readonly headers: import("@angular/core").ModelSignal<(string | PaginableTableHeader)[]>;
readonly fixedHeaders: import("@angular/core").Signal<PaginableTableHeader[]>;
headersCount: import("@angular/core").Signal<number>;
headerFilters: import("@angular/core").Signal<PaginableTableHeader[]>;
readonly filters: import("@angular/core").ModelSignal<Record<string, {}> | null>;
/**
* Filter form
*
* @type {FormGroup}
* @memberof PaginableTableComponent
*/
filtersFG: FormGroup;
filterLoading: boolean;
filterEffect: import("@angular/core").EffectRef;
filtersChange: import("@angular/core").Signal<any>;
filtersFGChangeEffect: import("@angular/core").EffectRef;
hasColumnFilters: import("@angular/core").Signal<boolean>;
readonly rows: import("@angular/core").InputSignalWithTransform<TableRow<T>[], T[] | PaginationState<any> | null | undefined>;
rowsEffect: import("@angular/core").EffectRef;
setFilters: boolean;
transformIntoRow(data: T): TableRow<T>;
readonly perPageOptions: import("@angular/core").InputSignal<number[]>;
readonly page: import("@angular/core").ModelSignal<number | null>;
readonly perPage: import("@angular/core").ModelSignal<number | null>;
readonly totalItems: import("@angular/core").ModelSignal<number | null>;
readonly numberOfPages: import("@angular/core").Signal<number | null>;
readonly ordination: import("@angular/core").ModelSignal<PaginableTableOrdination | undefined>;
/**
* Set if the data must be paginated
*
* @type {boolean}
* @memberof PaginableTableComponent
*/
readonly paginate: import("@angular/core").InputSignal<boolean>;
/**
* If set, it will be the property returned in the selected event
*
* @type {string}
* @memberof PaginableTableComponent
*/
readonly bindValue: import("@angular/core").InputSignal<string | undefined>;
readonly loading: import("@angular/core").ModelSignal<boolean>;
readonly paginationPosition: import("@angular/core").InputSignal<"bottom" | "top" | "both">;
readonly paginationInfo: import("@angular/core").InputSignal<boolean>;
readonly stickyActions: import("@angular/core").InputSignal<boolean>;
readonly batchActions: import("@angular/core").InputSignalWithTransform<(PaginableTableDropdown | ListButton)[], (PaginableTableDropdown | ListButton)[]>;
readonly selectable: import("@angular/core").InputSignal<boolean>;
/**
* Set whether the selectable can be multiple
*
* @type {boolean}
* @memberof PaginableTableComponent
*/
readonly multiple: import("@angular/core").InputSignal<boolean>;
/**
* Set whether the rows are selectable
*
* @type {boolean}
* @memberof PaginableTableComponent
*/
readonly searchable: import("@angular/core").InputSignal<boolean>;
readonly searchTerm: import("@angular/core").ModelSignal<string>;
searchProxy$: BehaviorSubject<string>;
searchTermEffect: import("@angular/core").EffectRef;
readonly searchFn: import("@angular/core").InputSignal<((a: T, b: T) => boolean) | undefined>;
readonly compareFn: import("@angular/core").InputSignal<((a: T, b: T) => boolean) | undefined>;
/**
* On item click event emitter
*
* @memberof PaginableTableComponent
*/
readonly clickFn: import("@angular/core").InputSignal<((event: TableRowEvent<T>) => void | Promise<void>) | undefined>;
readonly responsive: import("@angular/core").InputSignal<TableBreakpoint | null>;
responsiveCSSClass: import("@angular/core").Signal<string | null>;
disabled: boolean;
readonly templateRow: import("@angular/core").Signal<TemplateRef<any> | undefined>;
readonly headerTpts: import("@angular/core").Signal<readonly PaginableTableHeaderDirective[]>;
readonly templateCells: import("@angular/core").Signal<readonly PaginableTableCellDirective[]>;
readonly noDataTpt: import("@angular/core").Signal<TemplateRef<any> | undefined>;
readonly loadingTpt: import("@angular/core").Signal<TemplateRef<any> | undefined>;
readonly errorTpt: import("@angular/core").Signal<TemplateRef<any> | undefined>;
readonly templateExpandingRows: import("@angular/core").Signal<readonly PaginableTableExpandingRowDirective[]>;
readonly filterTpts: import("@angular/core").Signal<readonly PaginableTableFilterDirective[]>;
readonly dropdownComponents: import("@angular/core").Signal<readonly DropdownComponent[]>;
writeValue(value: any): void;
onChange: (_: any) => void;
onTouch: () => void;
registerOnChange(fn: any): void;
registerOnTouched(fn: any): void;
setDisabledState(isDisabled: boolean): void;
/**
* Handles click events by extracting specific properties and passing them to a callback function.
*
* @param - The `onItemClick` function takes in the following parameters: collapsed, selected and item.
* @param {number} depth - The `depth` parameter in the `onItemClick` function represents the depth level of the item being
* clicked. It is a number that indicates how deep the item is nested within a hierarchical structure.
* @param {number} index - The `index` parameter in the `onItemClick` function represents the position of the item that was clicked
* within a list or array. It is a number that indicates the index of the clicked item.
*
* @returns If the `clickFn` property is not defined in the current context, the `onItemClick` function will return without
* executing any further code.
*/
onItemClick(event: MouseEvent, item: TableRow): void;
/**
* If paging is done on the server, a parameter change subscription is launched. Otherwise,
* get the data sorted according to the header passed by parameter.
*
* @param {PaginableTableHeader} header
* @returns {void}
* @memberof PaginableTableComponent
*/
sort(header: PaginableTableHeader): void;
/**
* Get the ordination class
*
* @param {PaginableTableHeader} header
* @returns
* @memberof PaginableTableComponent
*/
getOrdenationClass(header: PaginableTableHeader): 'fa-sort' | 'fa-sort-up' | 'fa-sort-down';
/**
* If it exists, returns the header cell template for the header passed by parameter
*
* @param {(PaginableTableHeader)} header
* @returns {TemplateRef<PaginableTableCellDirective>}
* @memberof PaginableTableComponent
*/
getHeaderTemplate(header: PaginableTableHeader): TemplateRef<any> | null;
/**
* If it exists, returns the cell template for the header passed by parameter
*
* @param {(PaginableTableHeader)} header
* @returns {TemplateRef<PaginableTableCellDirective>}
* @memberof PaginableTableComponent
*/
getCellTemplate(header: PaginableTableHeader): TemplateRef<any> | null;
/**
* If it exists, returns the filter template for the header passed by parameter
*
* @param {(PaginableTableHeader)} header
* @returns {TemplateRef<PaginableTableCellDirective>}
* @memberof PaginableTableComponent
*/
getFilterTemplate(header: PaginableTableHeader): TemplateRef<PaginableTableFilterDirective> | null;
/**
* Handles the action to execute
*
* @param {Function} handler
* @param {*} row
* @memberof PaginableTableComponent
*/
handleAction(event: Event, handler: (row: TableRow) => void, row: TableRow): void;
/**
* Handles the action to be executed in a batch
*
* @param {ListButton} button
* @memberof PaginableTableComponent
*/
handleBatchAction(button: ListButton): void;
isHidden(button: RowButton, row: TableRow): Observable<boolean>;
/**
* Expand or unexpand an expanding row
*
* @param {TableRow} item
* @memberof PaginableTableComponent
*/
toggleExpandedRow(item: TableRow): void;
/**
* Select or unselect all page items
*
* @memberof PaginableTableComponent
*/
toggleAll(): void;
/**
* Select or unselect a row
*
* @param {*} row
* @memberof PaginableTableComponent
*/
toggle(row: TableRow<T>): void;
/**
* Select or deselect a row if it exists in the collection of selected items
*
* @memberof PaginableTableComponent
*/
markSelected(): void;
/**
* Emite el valor de los items seleccionados
*
*/
emitValue(): void;
/**
* Check if a needle exists in a list
*
* @private
* @param {T[]} items
* @param {*} needle
* @return {*} {boolean}
* @memberof PaginableTableComponent
*/
private _contains;
/**
* Initializes the filters form group by creating form controls for each header filter.
* Maps header filters to form controls using either the filter key or property name as the control name.
* The initial value for each control is set to null.
*/
initializeFilterFG(): void;
/**
* Clean the advanced filter form
*
* @memberof PaginableTableComponent
*/
clearFilters(): void;
/**
* Closes all other dropdowns except the one with the specified id.
*
* @param {id} - The `onDropdownFilterOpened` function takes an object parameter `id`.
*/
onDropdownFilterOpened({ id }: {
id: string;
}): void;
static ɵfac: i0.ɵɵFactoryDeclaration<TableComponent<any>, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<TableComponent<any>, "hub-table, hub-ui-table", never, { "id": { "alias": "id"; "required": false; "isSignal": true; }; "options": { "alias": "options"; "required": false; "isSignal": true; }; "debounce": { "alias": "debounce"; "required": false; "isSignal": true; }; "headers": { "alias": "headers"; "required": false; "isSignal": true; }; "filters": { "alias": "filters"; "required": false; "isSignal": true; }; "rows": { "alias": "data"; "required": false; "isSignal": true; }; "perPageOptions": { "alias": "perPageOptions"; "required": false; "isSignal": true; }; "page": { "alias": "page"; "required": false; "isSignal": true; }; "perPage": { "alias": "perPage"; "required": false; "isSignal": true; }; "totalItems": { "alias": "totalItems"; "required": false; "isSignal": true; }; "ordination": { "alias": "ordination"; "required": false; "isSignal": true; }; "paginate": { "alias": "paginate"; "required": false; "isSignal": true; }; "bindValue": { "alias": "bindValue"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "paginationPosition": { "alias": "paginationPosition"; "required": false; "isSignal": true; }; "paginationInfo": { "alias": "paginationInfo"; "required": false; "isSignal": true; }; "stickyActions": { "alias": "stickyActions"; "required": false; "isSignal": true; }; "batchActions": { "alias": "batchActions"; "required": false; "isSignal": true; }; "selectable": { "alias": "selectable"; "required": false; "isSignal": true; }; "multiple": { "alias": "multiple"; "required": false; "isSignal": true; }; "searchable": { "alias": "searchable"; "required": false; "isSignal": true; }; "searchTerm": { "alias": "searchTerm"; "required": false; "isSignal": true; }; "searchFn": { "alias": "searchFn"; "required": false; "isSignal": true; }; "compareFn": { "alias": "compareFn"; "required": false; "isSignal": true; }; "clickFn": { "alias": "clickFn"; "required": false; "isSignal": true; }; "responsive": { "alias": "responsive"; "required": false; "isSignal": true; }; }, { "headers": "headersChange"; "filters": "filtersChange"; "page": "pageChange"; "perPage": "perPageChange"; "totalItems": "totalItemsChange"; "ordination": "ordinationChange"; "loading": "loadingChange"; "searchTerm": "searchTermChange"; }, ["templateRow", "headerTpts", "templateCells", "noDataTpt", "loadingTpt", "errorTpt", "templateExpandingRows", "filterTpts"], never, true, never>;
}