@koalarx/ui/shared/components/datatable/index.d.ts

Koala UI is a modern and accessible component library designed to speed up interface development in Angular projects. With simple integration and clear documentation, you can easily build robust and visually appealing applications.

import * as _angular_core from '@angular/core';
import { ElementRef, Type } from '@angular/core';
import { QueryPaginationDirection, SortFilterType } from '@koalarx/ui/core/models';
import { ButtonColor } from '@koalarx/ui/shared/directives';

declare class SortHeaderColumn {
    orderBy: _angular_core.InputSignal<string>;
    style: _angular_core.InputSignal<string>;
    defaultDirection: _angular_core.InputSignal<QueryPaginationDirection | undefined>;
    sortable: _angular_core.OutputEmitterRef<SortFilterType>;
    elOrderedColumn: _angular_core.Signal<ElementRef<HTMLTableCellElement> | undefined>;
    direction: _angular_core.WritableSignal<QueryPaginationDirection | null>;
    constructor();
    sort(): void;
    toogleColumnStateOrder(state: 'set' | 'unset'): Promise<void>;
    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SortHeaderColumn, never>;
    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SortHeaderColumn, "kl-sort-header-column", never, { "orderBy": { "alias": "orderBy"; "required": true; "isSignal": true; }; "style": { "alias": "style"; "required": false; "isSignal": true; }; "defaultDirection": { "alias": "defaultDirection"; "required": false; "isSignal": true; }; }, { "sortable": "sortable"; }, never, ["*"], true, never>;
}

declare class OrderedColumnState {
    static current?: SortHeaderColumn;
}

declare class SortedItem {
    private readonly elementRef;
    klSortedItem: _angular_core.InputSignal<SortFilterType | null>;
    sortedPropName: _angular_core.InputSignal<string>;
    constructor();
    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SortedItem, never>;
    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<SortedItem, "td[klSortedItem]", never, { "klSortedItem": { "alias": "klSortedItem"; "required": true; "isSignal": true; }; "sortedPropName": { "alias": "sortedPropName"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
}

interface FilterData {
    templateValue: string;
    propName: string;
    value: any;
}
declare class DatatableFilter {
    private readonly _payload;
    private readonly _filters;
    private readonly _clearFilter;
    constructor();
    get payload(): _angular_core.Signal<Record<string, any>>;
    get filters(): _angular_core.Signal<FilterData[]>;
    get clearFilter(): _angular_core.Signal<boolean>;
    setFilters(filters: FilterData[]): void;
    removeFilter(propName: string): void;
    clearFilters(): void;
    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DatatableFilter, never>;
    static ɵprov: _angular_core.ɵɵInjectableDeclaration<DatatableFilter>;
}

declare class FilterFactory {
    private readonly _filter;
    get filter(): FilterData[];
    setFilters<T>(filter: T, templateNameFn: (propName: keyof typeof filter, value: any) => string): FilterData[];
    addFilter(filter: FilterData): void;
    toPayload(data: FilterData[]): Record<string, any>;
    static ɵfac: _angular_core.ɵɵFactoryDeclaration<FilterFactory, never>;
    static ɵprov: _angular_core.ɵɵInjectableDeclaration<FilterFactory>;
}

declare class Filter {
    readonly translations: {
        btnFilterLabel: string;
        clearFilterTooltip: string;
        addFilterTooltip: string;
        reloadListTooltip: string;
        labelItemsPerPage: string;
        loadMoreBtnLabel: string;
        errorLoadDataLabel: string;
        paginatorPagesFeedback: (currentPage: number, lastPage: number) => string;
    };
    datatableFilter: DatatableFilter;
    filter: _angular_core.InputSignal<FilterData[]>;
    payload: _angular_core.OutputEmitterRef<Record<string, any>>;
    addFilter: _angular_core.OutputEmitterRef<FilterData[]>;
    clearFilter: _angular_core.OutputEmitterRef<void>;
    constructor();
    add(): void;
    static ɵfac: _angular_core.ɵɵFactoryDeclaration<Filter, never>;
    static ɵcmp: _angular_core.ɵɵComponentDeclaration<Filter, "kl-filter", never, { "filter": { "alias": "filter"; "required": false; "isSignal": true; }; }, { "payload": "payload"; "addFilter": "addFilter"; "clearFilter": "clearFilter"; }, never, never, true, never>;
}

interface DatatableConfig {
    currentPage: number;
    totalItems: number;
    totalItemsOnPage: number;
    currentPageSize: number;
    isLoading: boolean;
    hasError: boolean;
}

declare class Datatable {
    private readonly sideWindow;
    readonly translations: {
        btnFilterLabel: string;
        clearFilterTooltip: string;
        addFilterTooltip: string;
        reloadListTooltip: string;
        labelItemsPerPage: string;
        loadMoreBtnLabel: string;
        errorLoadDataLabel: string;
        paginatorPagesFeedback: (currentPage: number, lastPage: number) => string;
    };
    config: _angular_core.InputSignal<DatatableConfig>;
    colspan: _angular_core.InputSignal<number>;
    loadMoreBtnColor: _angular_core.InputSignal<ButtonColor>;
    filterBtnColor: _angular_core.InputSignal<ButtonColor>;
    componentFilter: _angular_core.InputSignal<Type<any> | undefined>;
    withPaginator: _angular_core.InputSignalWithTransform<boolean, unknown>;
    currentPage: _angular_core.Signal<number>;
    totalItems: _angular_core.Signal<number>;
    totalItemsOnPage: _angular_core.Signal<number>;
    currentPageSize: _angular_core.Signal<number>;
    isLoading: _angular_core.Signal<boolean>;
    hasError: _angular_core.Signal<boolean>;
    filter: _angular_core.WritableSignal<FilterData[]>;
    hasFilter: _angular_core.Signal<boolean>;
    pageSize: _angular_core.ModelSignal<number>;
    pageSizes: number[];
    skeletonRows: _angular_core.Signal<number[]>;
    skeletonCols: _angular_core.Signal<number[]>;
    lastPage: _angular_core.Signal<number>;
    pageChange: _angular_core.OutputEmitterRef<number>;
    pageSizeChange: _angular_core.OutputEmitterRef<number>;
    filterChange: _angular_core.OutputEmitterRef<Record<string, any>>;
    reloadList: _angular_core.OutputEmitterRef<void>;
    loadMore: _angular_core.OutputEmitterRef<void>;
    constructor();
    openFilter(data?: FilterData[]): void;
    static ɵfac: _angular_core.ɵɵFactoryDeclaration<Datatable, never>;
    static ɵcmp: _angular_core.ɵɵComponentDeclaration<Datatable, "kl-datatable", never, { "config": { "alias": "config"; "required": true; "isSignal": true; }; "colspan": { "alias": "colspan"; "required": true; "isSignal": true; }; "loadMoreBtnColor": { "alias": "loadMoreBtnColor"; "required": false; "isSignal": true; }; "filterBtnColor": { "alias": "filterBtnColor"; "required": false; "isSignal": true; }; "componentFilter": { "alias": "componentFilter"; "required": false; "isSignal": true; }; "withPaginator": { "alias": "withPaginator"; "required": false; "isSignal": true; }; "pageSize": { "alias": "pageSize"; "required": false; "isSignal": true; }; }, { "pageSize": "pageSizeChange"; "pageChange": "pageChange"; "pageSizeChange": "pageSizeChange"; "filterChange": "filterChange"; "reloadList": "reloadList"; "loadMore": "loadMore"; }, never, ["[menu]", "[head]", "[body]"], true, never>;
}

export { Datatable, DatatableFilter, Filter, FilterFactory, OrderedColumnState, SortHeaderColumn, SortedItem };
export type { DatatableConfig, FilterData };