tangrid 0.1.0

package/table/table.component.d.ts

@@ -0,0 +1,542 @@
+import { ChangeDetectorRef, EventEmitter, NgZone, OnChanges, OnInit, SimpleChanges, TemplateRef, AfterViewInit, ElementRef, OnDestroy } from '@angular/core';
+import { type Row, type RowSelectionState } from '@tanstack/angular-table';
+import type { Table, ColumnDef } from '@tanstack/table-core';
+import { TanGridColumn, TanGridSort, TanGridPagination, TanGridFilter, TanGridSelectionMode, TanGridCellEdit, TanGridExportFormat, TanGridExportOptions, TanGridTheme } from './table.types';
+import * as i0 from "@angular/core";
+/**
+ * Data table component with sorting, filtering, pagination, and selection.
+ * Wraps TanStack Table for Angular.
+ */
+export declare class TanGrid<T = any> implements OnInit, OnChanges, AfterViewInit, OnDestroy {
+    private ngZone;
+    private cdr;
+    /**
+     * Table data array
+     */
+    data: T[];
+    /**
+     * Column definitions
+     */
+    columns: TanGridColumn<T>[];
+    /**
+     * Whether table is in loading state
+     * @default false
+     */
+    loading: boolean;
+    /**
+     * Whether table is striped
+     * @default false
+     */
+    striped: boolean;
+    /**
+     * Whether table has borders
+     * @default true
+     */
+    bordered: boolean;
+    /**
+     * Whether table is hoverable
+     * @default true
+     */
+    hoverable: boolean;
+    /**
+     * Whether table is compact
+     * @default true
+     */
+    compact: boolean;
+    /**
+     * Table theme
+     * @default 'default'
+     */
+    theme: TanGridTheme;
+    /**
+     * Selection mode
+     * @default 'none'
+     */
+    selectionMode: TanGridSelectionMode;
+    /**
+     * Selected row IDs
+     */
+    selectedRowIds: string[];
+    /**
+     * Row ID accessor function
+     */
+    rowIdFn: (row: T, index: number) => string;
+    /**
+     * Pagination enabled
+     * @default true
+     */
+    pagination: boolean;
+    /**
+     * Initial page size
+     * @default 10
+     */
+    pageSize: number;
+    /**
+     * Page size options
+     * @default [10, 20, 50, 100]
+     */
+    pageSizeOptions: number[];
+    /**
+     * Pagination mode: 'client' | 'server'
+     * - 'client': Pagination is handled by TanStack Table (default)
+     * - 'server': Pagination is handled by the server, emits paginationChange event
+     * @default 'client'
+     */
+    paginationMode: 'client' | 'server';
+    /**
+     * Total items (required for server-side pagination)
+     * @default 0
+     */
+    totalItems: number;
+    /**
+     * Sorting enabled
+     * @default true
+     */
+    sorting: boolean;
+    /**
+     * Sorting mode: 'client' | 'server'
+     * - 'client': Sorting is handled by TanStack Table (default)
+     * - 'server': Sorting is handled by the server, emits sortChange event
+     * @default 'client'
+     */
+    sortingMode: 'client' | 'server';
+    /**
+     * Filtering enabled
+     * @default true
+     */
+    filtering: boolean;
+    /**
+     * Filtering mode: 'client' | 'server'
+     * - 'client': Filtering is handled by TanStack Table (default)
+     * - 'server': Filtering is handled by the server, emits filterChange event
+     * @default 'client'
+     */
+    filteringMode: 'client' | 'server';
+    /**
+     * Global search enabled
+     * @default false
+     */
+    globalSearch: boolean;
+    /**
+     * Show global search input
+     * @default true
+     */
+    showGlobalSearchInput: boolean;
+    /**
+     * Global filter value
+     */
+    globalFilter: string;
+    /**
+     * Empty state message
+     * @default 'No data available'
+     */
+    emptyMessage: string;
+    /**
+     * Loading message
+     * @default 'Loading...'
+     */
+    loadingMessage: string;
+    /**
+     * Loading type: 'spinner' | 'placeholder' | 'template'
+     * @default 'spinner'
+     */
+    loadingType: 'spinner' | 'placeholder' | 'template';
+    /**
+     * Number of placeholder rows to show when loadingType is 'placeholder'
+     * @default 5
+     */
+    placeholderRows: number;
+    /**
+     * Enable virtual scrolling for large datasets
+     * Requires @angular/cdk to be installed
+     * @default false
+     */
+    virtualScroll: boolean;
+    /**
+     * Height of each row in pixels when virtual scrolling is enabled
+     * @default 48
+     */
+    rowHeight: number;
+    /**
+     * Number of buffer rows to render outside the viewport
+     * Higher values provide smoother scrolling but use more memory
+     * @default 3
+     */
+    virtualScrollBufferSize: number;
+    /**
+     * Maximum height of the virtual scroll viewport
+     * If not set, viewport will use available space
+     */
+    virtualScrollViewportHeight?: number;
+    /**
+     * Column IDs to pin to the left side
+     * These columns will remain visible when scrolling horizontally
+     */
+    pinnedLeft: string[];
+    /**
+     * Column IDs to pin to the right side
+     * These columns will remain visible when scrolling horizontally
+     */
+    pinnedRight: string[];
+    /**
+     * Whether to show column pinning UI (icons in headers)
+     * @default false
+     */
+    enablePinning: boolean;
+    /**
+     * Enable column reordering via drag-and-drop on headers
+     * @default false
+     */
+    reorderable: boolean;
+    /**
+     * Custom empty state template
+     */
+    emptyTemplate?: TemplateRef<any>;
+    /**
+     * Custom loading template (used when loadingType is 'template')
+     */
+    loadingTemplate?: TemplateRef<any>;
+    /**
+     * Whether rows can be expanded
+     * @default false
+     */
+    expandable: boolean;
+    /**
+     * Template for expanded row content
+     * Receives the row data as context: { $implicit: T; row: T }
+     */
+    expandedRowTemplate?: TemplateRef<{
+        $implicit: T;
+        row: T;
+    }>;
+    /**
+     * Pre-expanded row IDs
+     */
+    expandedRowIds: string[];
+    /**
+     * Whether inline editing is enabled
+     * @default false
+     */
+    editable: boolean;
+    /**
+     * Whether export functionality is enabled
+     * @default false
+     */
+    exportable: boolean;
+    /**
+     * Available export formats
+     * @default ['csv']
+     */
+    exportFormats: TanGridExportFormat[];
+    /**
+     * Event emitted when row is clicked
+     */
+    rowClick: EventEmitter<{
+        row: T;
+        index: number;
+    }>;
+    rowDblClick: EventEmitter<{
+        row: T;
+        index: number;
+    }>;
+    /**
+     * Event emitted when selection changes
+     */
+    selectionChange: EventEmitter<T[]>;
+    /**
+     * Event emitted when sorting changes
+     */
+    sortChange: EventEmitter<TanGridSort>;
+    /**
+     * Event emitted when pagination changes
+     */
+    paginationChange: EventEmitter<TanGridPagination>;
+    /**
+     * Event emitted when filter changes
+     */
+    filterChange: EventEmitter<TanGridFilter[]>;
+    /**
+     * Event emitted when row expansion changes
+     */
+    expansionChange: EventEmitter<{
+        rowId: string;
+        expanded: boolean;
+    }>;
+    /**
+     * Event emitted when column pinning changes
+     */
+    pinChange: EventEmitter<{
+        columnId: string;
+        position: 'left' | 'right' | 'none';
+    }>;
+    /**
+     * Event emitted when a cell is edited
+     */
+    cellEditChange: EventEmitter<TanGridCellEdit<T>>;
+    /**
+     * Event emitted when column order changes
+     */
+    columnOrderChange: EventEmitter<string[]>;
+    protected dataSignal: import("@angular/core").WritableSignal<T[]>;
+    protected columnsSignal: import("@angular/core").WritableSignal<ColumnDef<T, any>[]>;
+    protected globalFilterSignal: import("@angular/core").WritableSignal<string>;
+    protected sortingSignal: import("@angular/core").WritableSignal<any[]>;
+    protected rowSelectionSignal: import("@angular/core").WritableSignal<RowSelectionState>;
+    protected columnSizingSignal: import("@angular/core").WritableSignal<Record<string, number>>;
+    protected rowExpansionSignal: import("@angular/core").WritableSignal<Record<string, boolean>>;
+    protected editingCellSignal: import("@angular/core").WritableSignal<{
+        rowId: string;
+        columnId: string;
+    } | null>;
+    protected editingValueSignal: import("@angular/core").WritableSignal<any>;
+    protected columnOrderSignal: import("@angular/core").WritableSignal<string[]>;
+    protected hasHorizontalScroll: import("@angular/core").WritableSignal<boolean>;
+    protected table: Table<T>;
+    protected pageIndex: import("@angular/core").WritableSignal<number>;
+    protected pageSizeSignal: import("@angular/core").WritableSignal<number>;
+    private resizeAnimationFrame;
+    private resizeObserver;
+    tableContainer: ElementRef<HTMLElement>;
+    protected scrollElementSignal: import("@angular/core").WritableSignal<HTMLElement | null>;
+    set virtualScrollViewport(el: ElementRef<HTMLElement>);
+    private _headerRowContainer;
+    private _sortable;
+    set headerRowContainer(el: ElementRef<HTMLElement>);
+    get headerRowContainer(): ElementRef<HTMLElement>;
+    /**
+     * Virtualizer for row rendering
+     */
+    readonly virtualizer: import("@tanstack/angular-virtual").AngularVirtualizer<HTMLElement, Element>;
+    constructor(ngZone: NgZone, cdr: ChangeDetectorRef);
+    ngOnInit(): void;
+    ngOnChanges(changes: SimpleChanges): void;
+    /**
+     * Get selected rows
+     */
+    getSelectedRows(): T[];
+    /**
+     * Clear selection
+     */
+    clearSelection(): void;
+    /**
+     * Select all rows
+     */
+    selectAll(): void;
+    /**
+     * Toggle row selection
+     */
+    toggleRowSelection(rowId: string): void;
+    /**
+     * Check if row is selected
+     */
+    isRowSelected(rowId: string): boolean;
+    /**
+     * Handle global search
+     */
+    onGlobalSearch(value: string): void;
+    /**
+     * Handle column filter change
+     */
+    onColumnFilterChange(column: any, value: any): void;
+    /**
+     * Get filter placeholder text
+     */
+    getFilterPlaceholder(column: any): string;
+    /**
+     * Handle resize start
+     */
+    onResizeStart(event: MouseEvent, header: any): void;
+    /**
+     * Track by function for virtual scrolling
+     */
+    trackByRowId(index: number, row: Row<T>): string;
+    /**
+     * Get row index for virtual scrolling
+     */
+    getRowIndex(row: Row<T>): number;
+    /**
+     * Check if a column is pinned to the left
+     */
+    isPinnedLeft(columnId: string): boolean;
+    /**
+     * Check if a column is pinned to the right
+     */
+    isPinnedRight(columnId: string): boolean;
+    /**
+     * Check if a column is in the left half of the visible columns
+     */
+    isColumnOnLeft(columnId: string): boolean;
+    /**
+     * Get the left offset for a pinned column
+     */
+    getPinnedLeftOffset(columnId: string): number;
+    /**
+     * Get the right offset for a pinned column
+     */
+    getPinnedRightOffset(columnId: string): number;
+    /**
+     * Check if a row is expanded
+     */
+    isRowExpanded(rowId: string): boolean;
+    /**
+     * Toggle row expansion
+     */
+    toggleRowExpansion(row: Row<T>): void;
+    /**
+     * Check if a cell is currently being edited
+     */
+    isEditing(rowId: string, columnId: string): boolean;
+    /**
+     * Start editing a cell
+     */
+    startEdit(row: Row<T>, columnId: string): void;
+    /**
+     * Save the edited cell value
+     */
+    saveEdit(row: Row<T>, columnId: string): void;
+    /**
+     * Cancel editing a cell
+     */
+    cancelEdit(): void;
+    /**
+     * Get cell value for editing
+     */
+    getEditingValue(): any;
+    /**
+     * Update editing value
+     */
+    updateEditingValue(value: any): void;
+    /**
+     * Get cell value from row data
+     */
+    private _getCellValue;
+    /**
+     * Set cell value in row data
+     */
+    private _setCellValue;
+    /**
+     * Check if a column is editable
+     */
+    getColumnEditable(columnId: string): boolean;
+    /**
+     * Get input type for editable column
+     */
+    getColumnEditType(columnId: string): string;
+    /**
+     * Export to CSV (Public API)
+     * Allows triggering CSV export programmatically or from custom UI
+     */
+    exportToCsv(options?: Partial<TanGridExportOptions>): void;
+    /**
+     * Export to Excel (Public API)
+     * Allows triggering Excel export programmatically or from custom UI
+     */
+    exportToExcel(options?: Partial<TanGridExportOptions>): void;
+    /**
+     * Export to PDF (Public API)
+     * Allows triggering PDF export programmatically or from custom UI
+     */
+    exportToPdf(options?: Partial<TanGridExportOptions>): void;
+    /**
+     * Export table data
+     */
+    exportData(options: TanGridExportOptions): void;
+    /**
+     * Toggle pin state for a column
+     */
+    togglePin(column: any): void;
+    /**
+     * Export to CSV
+     */
+    private _exportToCSV;
+    /**
+     * Export to Excel (XLSX)
+     * Note: Requires xlsx library to be installed
+     */
+    private _exportToExcel;
+    /**
+     * Export to PDF
+     * Note: Requires jspdf library to be installed
+     */
+    private _exportToPDF;
+    /**
+     * Escape CSV value
+     */
+    private _escapeCSV;
+    /**
+     * Download file
+     */
+    private _downloadFile;
+    /**
+     * Emit filter change event
+     */
+    private _emitFilterChange;
+    /**
+     * Check if value is a TemplateRef
+     */
+    isTemplateRef(value: any): boolean;
+    /**
+     * Handle page change
+     */
+    onPageChange(page: number): void;
+    /**
+     * Handle page size change
+     */
+    onPageSizeChange(size: number): void;
+    /**
+     * Handle row click
+     */
+    onRowClick(row: Row<T>, index: number): void;
+    /**
+     * Handle row double click
+     */
+    onRowDblClick(row: Row<T>, index: number): void;
+    onPinChange(columnId: string, position: 'left' | 'right' | 'none'): void;
+    ngAfterViewInit(): void;
+    ngOnDestroy(): void;
+    checkScroll(): void;
+    canPinLeft(columnId: string): boolean;
+    canPinRight(columnId: string): boolean;
+    /**
+     * Get total pages
+     */
+    getTotalPages(): number;
+    /**
+     * Get current page (1-indexed)
+     */
+    getCurrentPage(): number;
+    /**
+     * Get total items
+     */
+    getTotalItems(): number;
+    /**
+     * Get displayed items range
+     */
+    getDisplayedRange(): {
+        start: number;
+        end: number;
+    };
+    /**
+     * Get pagination page numbers to display
+     */
+    getPaginationPages(): (number | 'ellipsis')[];
+    /**
+     * Go to specific page
+     */
+    goToPage(page: number): void;
+    /**
+     * Get placeholder width for skeleton loader (Facebook-style)
+     */
+    getPlaceholderWidth(index: number): number;
+    private _convertColumns;
+    private _createTable;
+    private _emitSelectionChange;
+    private _emitPaginationChange;
+    private _initSortable;
+    /**
+     * Determine if there are any columns that can be filtered
+     */
+    hasFilterableColumns(): boolean;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TanGrid<any>, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TanGrid<any>, "tan-grid", never, { "data": { "alias": "data"; "required": false; }; "columns": { "alias": "columns"; "required": false; }; "loading": { "alias": "loading"; "required": false; }; "striped": { "alias": "striped"; "required": false; }; "bordered": { "alias": "bordered"; "required": false; }; "hoverable": { "alias": "hoverable"; "required": false; }; "compact": { "alias": "compact"; "required": false; }; "theme": { "alias": "theme"; "required": false; }; "selectionMode": { "alias": "selectionMode"; "required": false; }; "selectedRowIds": { "alias": "selectedRowIds"; "required": false; }; "rowIdFn": { "alias": "rowIdFn"; "required": false; }; "pagination": { "alias": "pagination"; "required": false; }; "pageSize": { "alias": "pageSize"; "required": false; }; "pageSizeOptions": { "alias": "pageSizeOptions"; "required": false; }; "paginationMode": { "alias": "paginationMode"; "required": false; }; "totalItems": { "alias": "totalItems"; "required": false; }; "sorting": { "alias": "sorting"; "required": false; }; "sortingMode": { "alias": "sortingMode"; "required": false; }; "filtering": { "alias": "filtering"; "required": false; }; "filteringMode": { "alias": "filteringMode"; "required": false; }; "globalSearch": { "alias": "globalSearch"; "required": false; }; "showGlobalSearchInput": { "alias": "showGlobalSearchInput"; "required": false; }; "globalFilter": { "alias": "globalFilter"; "required": false; }; "emptyMessage": { "alias": "emptyMessage"; "required": false; }; "loadingMessage": { "alias": "loadingMessage"; "required": false; }; "loadingType": { "alias": "loadingType"; "required": false; }; "placeholderRows": { "alias": "placeholderRows"; "required": false; }; "virtualScroll": { "alias": "virtualScroll"; "required": false; }; "rowHeight": { "alias": "rowHeight"; "required": false; }; "virtualScrollBufferSize": { "alias": "virtualScrollBufferSize"; "required": false; }; "virtualScrollViewportHeight": { "alias": "virtualScrollViewportHeight"; "required": false; }; "pinnedLeft": { "alias": "pinnedLeft"; "required": false; }; "pinnedRight": { "alias": "pinnedRight"; "required": false; }; "enablePinning": { "alias": "enablePinning"; "required": false; }; "reorderable": { "alias": "reorderable"; "required": false; }; "emptyTemplate": { "alias": "emptyTemplate"; "required": false; }; "loadingTemplate": { "alias": "loadingTemplate"; "required": false; }; "expandable": { "alias": "expandable"; "required": false; }; "expandedRowTemplate": { "alias": "expandedRowTemplate"; "required": false; }; "expandedRowIds": { "alias": "expandedRowIds"; "required": false; }; "editable": { "alias": "editable"; "required": false; }; "exportable": { "alias": "exportable"; "required": false; }; "exportFormats": { "alias": "exportFormats"; "required": false; }; }, { "rowClick": "rowClick"; "rowDblClick": "rowDblClick"; "selectionChange": "selectionChange"; "sortChange": "sortChange"; "paginationChange": "paginationChange"; "filterChange": "filterChange"; "expansionChange": "expansionChange"; "pinChange": "pinChange"; "cellEditChange": "cellEditChange"; "columnOrderChange": "columnOrderChange"; }, never, never, true, never>;
+}

package/table/table.module.d.ts

@@ -0,0 +1,10 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./table.component";
+/**
+ * Table module
+ */
+export declare class TanGridModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<TanGridModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<TanGridModule, never, [typeof i1.TanGrid], [typeof i1.TanGrid]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<TanGridModule>;
+}