@notiz/ngx-tablo/index.d.ts

JSON powered material table for Angular

import * as _angular_core from '@angular/core';
import { TemplateRef, OnInit, AfterViewInit, OnDestroy, PipeTransform } from '@angular/core';
import { DataSource, CollectionViewer } from '@angular/cdk/collections';
import { PageEvent } from '@angular/material/paginator';
import { SortDirection, Sort } from '@angular/material/sort';
import { Observable, BehaviorSubject, Subject } from 'rxjs';
import { MatTableDataSource } from '@angular/material/table';

type TabloLifecycle<T> = (column?: TabloColumn<T>) => void;
interface TabloLifecycleConfig<T> {
    onInit?: TabloLifecycle<T>;
    afterViewInit?: TabloLifecycle<T>;
}
interface TabloColumn<T> {
    /**
     * Unique name for column (matColumnDef).
     *
     * Default for cell value (row[columnName]) and sort header.
     */
    columnName: string;
    /**
     * Column title;
     */
    header: string;
    /**
     * Specify your own class that will be applied to the header. This is not applied when using `headerTemplate`.
     */
    headerClassName?: string;
    /**
     * Header HTML content with access to the whole column object.
     */
    headerHTMLContent?: (column: TabloColumn<T>) => any;
    /**
     * Header template to add any template into the header.
     *
     * @example
     *
     * ```html
     *  <ng-template #headerStatus let-column="column">
     *    <span>{{column.header}}</span>
     *    <mat-icon aria-hidden="false" aria-label="Info" fontIcon="info" matTooltip="User status"></mat-icon>
     *  </ng-template>
     * ```
     */
    headerTemplate?: TemplateRef<any>;
    /**
     * Specify your own class that will be applied to the cell. This is not applied when using `cellTemplate`.
     */
    className?: string;
    /**
     * Cell value with access to the whole row object. Use any HTML element too.
     */
    cell?: (row: T) => any;
    /**
     * Specify your own class that will be applied to the cell td field.
     */
    cellClass?: string;
    /**
     * Cell template to add any template into the cell wit access to the row object.
     *
     * @example
     *
     * ```html
     *  <ng-template #status let-row="row">
     *   {{row.status}}
     *  </ng-template>
     * ```
     */
    cellTemplate?: TemplateRef<any>;
    /**
     * Sortable column.
     */
    sort?: boolean;
    /**
     * ID for the sort header.
     *
     * Default is {@link columnName}
     */
    sortHeader?: string;
    /**
     * Use lifecycle to add set the {@link cellTemplate} for this column.
     */
    lifecycle?: TabloLifecycleConfig<T>;
    /**
     * Allows to specify formatting settings for your content.
     * Only specify one format per config.
     *
     * Not applying when using `cellTemplate`.
     */
    format?: {
        /**
         * Specify currency format for currency pipe.
         */
        currency?: string;
        /**
         * Specify date format for date pipe.
         */
        date?: string;
        /**
         * Specify decimal format for decimal pipe.
         */
        decimal?: string;
        /**
         * Specify percent format for percent pipe.
         */
        percent?: string;
        /**
         * Enable title case to transform text to capitalizes first letter and rest to lower case. Uses {@link TitleCasePipe}.
         */
        titleCase?: boolean;
    };
}
type TabloColumns<T> = TabloColumn<T>[];

declare class Tablo<T> implements OnInit, AfterViewInit, OnDestroy {
    tableClasses: _angular_core.InputSignal<string>;
    /**
     * Add custom dataSource.
     *
     * Default: MatTableDataSource
     */
    dataSource: _angular_core.InputSignal<DataSource<T>>;
    data: _angular_core.ModelSignal<T[] | Observable<T[]> | undefined>;
    columns: _angular_core.InputSignal<TabloColumns<T>>;
    protected displayedColumns: _angular_core.Signal<string[]>;
    mode: _angular_core.InputSignal<"client" | "server">;
    /**
     * Sorting
     */
    sortActive: _angular_core.ModelSignal<string>;
    sortDirection: _angular_core.ModelSignal<SortDirection>;
    /**
     * Custom sorting function for `MatTableDataSource`.
     *
     * Use this if data properties don't match column names or for complex data objects.
     *
     * Default expects column `xyz` to represent `data['xyz']`.
     *
     */
    sortingDataAccessor: _angular_core.InputSignal<((data: T, sortHeaderId: string) => string | number) | undefined>;
    /**
     * Filter value for `MatTableDataSource`.
     */
    filter: _angular_core.InputSignal<string | undefined>;
    /**
     * Custom filter function for `MatTableDataSource`.
     */
    filterPredicate: _angular_core.InputSignal<((data: T, filter: string) => boolean) | undefined>;
    /**
     * Paging
     */
    showPaging: _angular_core.ModelSignal<boolean>;
    pagingDisabled: _angular_core.ModelSignal<boolean>;
    hidePageSize: _angular_core.ModelSignal<boolean>;
    showFirstLastButtons: _angular_core.ModelSignal<boolean>;
    pageSize: _angular_core.ModelSignal<number>;
    pageIndex: _angular_core.ModelSignal<number>;
    length: _angular_core.ModelSignal<number>;
    pageSizeOptions: _angular_core.ModelSignal<number[]>;
    pageAriaLabel: _angular_core.ModelSignal<string>;
    /**
     * default to false
     */
    resetPageOnSort: _angular_core.ModelSignal<boolean>;
    /**
     * Outputs
     */
    rowClick: _angular_core.OutputEmitterRef<T>;
    pageChange: _angular_core.OutputEmitterRef<PageEvent>;
    sortChange: _angular_core.OutputEmitterRef<Sort>;
    private paginator;
    private sort;
    private destroy$;
    constructor();
    ngOnInit(): void;
    ngAfterViewInit(): void;
    ngOnDestroy(): void;
    firstPage(): void;
    lastPage(): void;
    clearFilter(): void;
    private fillData;
    private getMatTableDataSource;
    static ɵfac: _angular_core.ɵɵFactoryDeclaration<Tablo<any>, never>;
    static ɵcmp: _angular_core.ɵɵComponentDeclaration<Tablo<any>, "ngx-tablo", never, { "tableClasses": { "alias": "tableClasses"; "required": false; "isSignal": true; }; "dataSource": { "alias": "dataSource"; "required": false; "isSignal": true; }; "data": { "alias": "data"; "required": false; "isSignal": true; }; "columns": { "alias": "columns"; "required": false; "isSignal": true; }; "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "sortActive": { "alias": "sortActive"; "required": false; "isSignal": true; }; "sortDirection": { "alias": "sortDirection"; "required": false; "isSignal": true; }; "sortingDataAccessor": { "alias": "sortingDataAccessor"; "required": false; "isSignal": true; }; "filter": { "alias": "filter"; "required": false; "isSignal": true; }; "filterPredicate": { "alias": "filterPredicate"; "required": false; "isSignal": true; }; "showPaging": { "alias": "showPaging"; "required": false; "isSignal": true; }; "pagingDisabled": { "alias": "pagingDisabled"; "required": false; "isSignal": true; }; "hidePageSize": { "alias": "hidePageSize"; "required": false; "isSignal": true; }; "showFirstLastButtons": { "alias": "showFirstLastButtons"; "required": false; "isSignal": true; }; "pageSize": { "alias": "pageSize"; "required": false; "isSignal": true; }; "pageIndex": { "alias": "pageIndex"; "required": false; "isSignal": true; }; "length": { "alias": "length"; "required": false; "isSignal": true; }; "pageSizeOptions": { "alias": "pageSizeOptions"; "required": false; "isSignal": true; }; "pageAriaLabel": { "alias": "pageAriaLabel"; "required": false; "isSignal": true; }; "resetPageOnSort": { "alias": "resetPageOnSort"; "required": false; "isSignal": true; }; }, { "data": "dataChange"; "sortActive": "sortActiveChange"; "sortDirection": "sortDirectionChange"; "showPaging": "showPagingChange"; "pagingDisabled": "pagingDisabledChange"; "hidePageSize": "hidePageSizeChange"; "showFirstLastButtons": "showFirstLastButtonsChange"; "pageSize": "pageSizeChange"; "pageIndex": "pageIndexChange"; "length": "lengthChange"; "pageSizeOptions": "pageSizeOptionsChange"; "pageAriaLabel": "pageAriaLabelChange"; "resetPageOnSort": "resetPageOnSortChange"; "rowClick": "rowClick"; "pageChange": "pageChange"; "sortChange": "sortChange"; }, never, never, true, never>;
}

declare class NestedColumnNamePipe implements PipeTransform {
    transform(value: any, columnName: string): any;
    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NestedColumnNamePipe, never>;
    static ɵpipe: _angular_core.ɵɵPipeDeclaration<NestedColumnNamePipe, "nestedColumnName", true>;
}

declare const resolveNestedValue: (row: any, path: string) => any;
declare const resolveNestedColumnValue: (row: any, columnName: string) => any;

declare abstract class LoadingDataSource<T> implements DataSource<T> {
    protected dataSubject: BehaviorSubject<T[]>;
    protected loadingSubject: BehaviorSubject<boolean>;
    protected disconnect$: Subject<void>;
    loading$: Observable<boolean>;
    connect(collectionViewer: CollectionViewer): Observable<readonly T[]>;
    disconnect(collectionViewer: CollectionViewer): void;
}

/**
 * MatTableDataSource that supports sorting for nested objects.
 */
declare class NestedObjectDataSource<T> extends MatTableDataSource<T> {
    constructor(initialData?: T[]);
    sortingDataAccessor: (data: T, sortHeaderId: string) => string | number;
}
declare const nestedObjectDataSource: <T>(initialData?: T[]) => NestedObjectDataSource<T>;

export { LoadingDataSource, NestedColumnNamePipe, NestedObjectDataSource, Tablo, nestedObjectDataSource, resolveNestedColumnValue, resolveNestedValue };
export type { TabloColumn, TabloColumns, TabloLifecycle, TabloLifecycleConfig };