juvo-rafa-library/lib/juvo-table/juvo-table.component.d.ts

A comprehensive Angular component library featuring real-world components and validators extracted from the Juvo Rafa backoffice application. Now with improved select components and bug fixes.

import { EventEmitter } from '@angular/core';
import { Observable } from 'rxjs';
import * as i0 from "@angular/core";
/**
 * Table column configuration interface
 * @interface TableColumn
 * @since 2.1.0
 */
export interface TableColumn {
    key: string;
    label: string;
    sortable?: boolean;
    width?: string;
    type?: 'text' | 'number' | 'date' | 'boolean' | 'actions';
    align?: 'left' | 'center' | 'right';
}
/**
 * Table Component
 *
 * @description
 * A comprehensive table component for displaying and managing tabular data.
 * Originally designed for backoffice applications with data management needs.
 * Supports pagination, sorting, selection, and custom actions.
 *
 * @example
 * ```html
 * <!-- Basic table -->
 * <juvo-table
 *   [data$]="tableData$"
 *   [columns]="[
 *     { key: 'id', label: 'ID', width: '80px' },
 *     { key: 'name', label: 'Name', sortable: true },
 *     { key: 'email', label: 'Email', sortable: true },
 *     { key: 'actions', label: 'Actions', type: 'actions' }
 *   ]"
 *   [paginator]="true"
 *   [rows]="10"
 *   (rowSelected)="onRowSelected($event)"
 *   (actionTriggered)="onActionTriggered($event)">
 * </juvo-table>
 *
 * <!-- Table with selection -->
 * <juvo-table
 *   [data$]="userData$"
 *   [columns]="userColumns"
 *   [loading$]="userLoading$"
 *   [selectionMode]="'multiple'"
 *   [paginator]="true"
 *   [sortMode]="'single'"
 *   (selectionChange)="onSelectionChange($event)">
 * </juvo-table>
 * ```
 *
 * @selector juvo-table
 * @since 2.1.0
 * @author Juvo Rafa Team
 */
export declare class JuvoTableComponent {
    /** Observable data source */
    data$: Observable<any[]>;
    /** Column configuration */
    columns: TableColumn[];
    /** Loading state observable */
    loading$: Observable<boolean>;
    /** Selection mode @default "none" */
    selectionMode: 'none' | 'single' | 'multiple';
    /** Whether to show paginator @default false */
    paginator: boolean;
    /** Number of rows per page @default 10 */
    rows: number;
    /** Sort mode @default "single" */
    sortMode: 'none' | 'single' | 'multiple';
    /** Whether to show grid lines @default true */
    showGridlines: boolean;
    /** Whether to show striped rows @default true */
    striped: boolean;
    /** Whether to show hover effect @default true */
    hoverable: boolean;
    /** Table size variant @default "medium" */
    size: 'small' | 'medium' | 'large';
    /** Empty state message */
    emptyMessage: string;
    /** Loading message */
    loadingMessage: string;
    /** Emitted when a row is selected */
    rowSelected: EventEmitter<any>;
    /** Emitted when selection changes */
    selectionChange: EventEmitter<any[]>;
    /** Emitted when a row is clicked */
    rowClicked: EventEmitter<any>;
    /** Emitted when column is sorted */
    sortChange: EventEmitter<{
        field: string;
        order: 'asc' | 'desc';
    }>;
    /** Emitted when page changes */
    pageChange: EventEmitter<{
        first: number;
        rows: number;
    }>;
    /** Emitted when an action is triggered */
    actionTriggered: EventEmitter<{
        action: string;
        item: any;
    }>;
    selectedRows: any[];
    currentPage: number;
    sortField?: string;
    sortOrder: 'asc' | 'desc';
    paginatedData: any[];
    totalRecords: number;
    Math: Math;
    /**
     * Gets CSS classes for the table container
     * @returns Combined CSS classes
     */
    get containerClasses(): string;
    /**
     * Handles row selection
     */
    onRowSelect(row: any, event?: Event): void;
    /**
     * Handles row click
     */
    onRowClick(row: any): void;
    /**
     * Handles column sort
     */
    onSort(column: TableColumn): void;
    /**
     * Handles select all checkbox
     */
    selectAll(event: Event): void;
    /**
     * Handles previous page navigation
     */
    previousPage(): void;
    /**
     * Handles next page navigation
     */
    nextPage(): void;
    /**
     * Checks if a row is selected
     */
    isSelected(row: any): boolean;
    /**
     * Gets the display value for a cell
     */
    getCellValue(item: any, column: TableColumn): string;
    /**
     * Gets CSS classes for column header
     */
    getHeaderClasses(column: TableColumn): string;
    /**
     * Gets CSS classes for table cell
     */
    getCellClasses(column: TableColumn): string;
    /**
     * Handles action button click
     */
    onAction(action: string, item: any): void;
    /**
     * Track by function for ngFor
     */
    trackByFn(index: number, item: any): any;
    static ɵfac: i0.ɵɵFactoryDeclaration<JuvoTableComponent, never>;
    static ɵcmp: i0.ɵɵComponentDeclaration<JuvoTableComponent, "juvo-table", never, { "data$": { "alias": "data$"; "required": false; }; "columns": { "alias": "columns"; "required": false; }; "loading$": { "alias": "loading$"; "required": false; }; "selectionMode": { "alias": "selectionMode"; "required": false; }; "paginator": { "alias": "paginator"; "required": false; }; "rows": { "alias": "rows"; "required": false; }; "sortMode": { "alias": "sortMode"; "required": false; }; "showGridlines": { "alias": "showGridlines"; "required": false; }; "striped": { "alias": "striped"; "required": false; }; "hoverable": { "alias": "hoverable"; "required": false; }; "size": { "alias": "size"; "required": false; }; "emptyMessage": { "alias": "emptyMessage"; "required": false; }; "loadingMessage": { "alias": "loadingMessage"; "required": false; }; }, { "rowSelected": "rowSelected"; "selectionChange": "selectionChange"; "rowClicked": "rowClicked"; "sortChange": "sortChange"; "pageChange": "pageChange"; "actionTriggered": "actionTriggered"; }, never, never, true, never>;
}