ng-table-pg
Version:
A powerful and flexible responsive table component for Angular applications with drag-drop, filtering, pagination, and advanced responsive features
153 lines (152 loc) • 6.21 kB
TypeScript
import { EventEmitter, OnChanges, OnInit, SimpleChanges } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';
import { CdkDragDrop } from '@angular/cdk/drag-drop';
import { ITableColumns, ITableActions, ITableButtons, ITableOrderChange } from './table.interfaces';
import * as i0 from "@angular/core";
export declare class TableComponent implements OnInit, OnChanges {
private translate;
data: any[] | null;
columns: ITableColumns[];
filterOptions: {
key: string;
label: string;
options: any[];
}[];
actions: ITableActions[];
buttons: ITableButtons[];
loading: boolean;
showSearch: boolean;
enableExport: boolean;
itemsPerPage: number;
showActionRow: (item: any) => boolean;
enableDragDrop: boolean;
responsive: boolean;
stickyHeader: boolean;
compactMode: boolean;
horizontalScroll: boolean;
minTableWidth: string;
maxTableHeight: string;
showScrollIndicators: boolean;
alwaysShowScrollbar: boolean;
scrollbarStyle: 'default' | 'prominent' | 'minimal';
hideColumnsOnResize: boolean;
orderChanged: EventEmitter<ITableOrderChange>;
filteredData: any[];
paginatedData: any[];
searchTerm: string;
activeFilters: {
[key: string]: any;
};
showFilters: boolean;
sortColumn: string;
sortDirection: 'asc' | 'desc';
currentPage: number;
activeDropdownIndex: number | null;
isDragging: boolean;
dragTimeout: any;
draggedItem: any;
dragOverPage: number | null;
pageDropLists: string[];
showLeftScrollIndicator: boolean;
showRightScrollIndicator: boolean;
private tableContainer?;
private resizeListener?;
constructor(translate: TranslateService);
ngOnInit(): void;
ngOnDestroy(): void;
/**
* Configurar listeners para scroll indicators
*/
private setupScrollListeners;
/**
* Remover listeners de scroll
*/
private removeScrollListeners;
/**
* Manejar evento de scroll para mostrar/ocultar indicadores
*/
private handleScroll;
/**
* Obtener clases CSS para el contenedor de la tabla
*/
getTableContainerClasses(): string;
/**
* Obtener clases CSS para la tabla
*/
getTableClasses(): string;
/**
* Obtener estilos para la tabla
*/
getTableStyles(): any;
/**
* Determinar si debemos usar min-width
*/
private shouldUseMinWidth;
/**
* Obtener clases CSS para el header
*/
getHeaderClasses(): string;
/**
* Obtener estilos inline para el contenedor de tabla
*/
getTableContainerStyles(): any;
/**
* Calcular ancho mínimo de tabla basado en columnas
*/
calculateMinTableWidth(): string;
/**
* Obtener prioridad de columna para responsividad
*/
getColumnPriority(column: any): string;
updatePageDropLists(): void;
dragScrollInterval: any;
readonly HOVER_DELAY = 800;
onDragStarted(): void;
onDragEnded(): void;
handleDragEnter(page: number): void;
handleDragLeave(page: number): void;
handlePageDrop(event: CdkDragDrop<any[]>, targetPage: number): void;
ngOnChanges(changes: SimpleChanges): void;
validActions: (item: any) => boolean;
toggleFilters(): void;
toggleDropdown(index: number): void;
closeAllDropdowns(): void;
applyFilters(): void;
sort(column: string): void;
updatePagination(): void;
onItemsPerPageChange(): void;
goToPage(page: number): void;
getTotalPages(): number;
getPageNumbers(): number[];
shouldShowPageButton(page: number): boolean;
shouldShowEllipsis(page: number): boolean;
exportData(type: 'csv' | 'excel'): Promise<void>;
private getTranslatedStatus;
private exportToCsv;
private exportToExcel;
onDragStart(event: DragEvent, item: any): void;
onDragOver(event: DragEvent): void;
handlePageChange(direction: 'prev' | 'next'): void;
onDrop(event: DragEvent, targetItem: any): void;
private scrollTimeout;
private readonly SCROLL_THRESHOLD;
private readonly SCROLL_INTERVAL;
onMouseMove(event: MouseEvent): void;
handleTableMouseMove(event: MouseEvent): void;
handleDrop(event: CdkDragDrop<any[]>): void;
isNumber(value: any): boolean;
/**
* Configurar listener para cambios de tamaño de ventana
*/
private setupResizeListener;
/**
* Remover listener de resize
*/
private removeResizeListener;
/**
* Log responsive status for debugging
*/
private logResponsiveStatus;
static ɵfac: i0.ɵɵFactoryDeclaration<TableComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<TableComponent, "ng-table-pg", never, { "data": { "alias": "data"; "required": false; }; "columns": { "alias": "columns"; "required": false; }; "filterOptions": { "alias": "filterOptions"; "required": false; }; "actions": { "alias": "actions"; "required": false; }; "buttons": { "alias": "buttons"; "required": false; }; "loading": { "alias": "loading"; "required": false; }; "showSearch": { "alias": "showSearch"; "required": false; }; "enableExport": { "alias": "enableExport"; "required": false; }; "itemsPerPage": { "alias": "itemsPerPage"; "required": false; }; "showActionRow": { "alias": "showActionRow"; "required": false; }; "enableDragDrop": { "alias": "enableDragDrop"; "required": false; }; "responsive": { "alias": "responsive"; "required": false; }; "stickyHeader": { "alias": "stickyHeader"; "required": false; }; "compactMode": { "alias": "compactMode"; "required": false; }; "horizontalScroll": { "alias": "horizontalScroll"; "required": false; }; "minTableWidth": { "alias": "minTableWidth"; "required": false; }; "maxTableHeight": { "alias": "maxTableHeight"; "required": false; }; "showScrollIndicators": { "alias": "showScrollIndicators"; "required": false; }; "alwaysShowScrollbar": { "alias": "alwaysShowScrollbar"; "required": false; }; "scrollbarStyle": { "alias": "scrollbarStyle"; "required": false; }; "hideColumnsOnResize": { "alias": "hideColumnsOnResize"; "required": false; }; }, { "orderChanged": "orderChanged"; }, never, never, true, never>;
}