UNPKG

ng-hub-ui-table

Version:

Highly customizable Angular table and list components with pagination, sorting and filtering support.

267 lines (266 loc) 14 kB
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>; }