@ng-dominus/dm-table/lib/dm-table.component.d.ts

Dominus angular material table extension

import { AfterViewInit, ChangeDetectorRef, Injector, OnChanges, OnDestroy, OnInit, SimpleChanges, TrackByFunction } from '@angular/core';
import { DmTableColumnDefinition, DmTableColumnVisibility, DmTableDataSource, DmTableDataSourceAdapter, DmTableFilters, DmTableIntl, DmTableRequestOptions } from "./dm-table";
import { Subject, Subscription } from "rxjs";
import { MatMenu } from "@angular/material/menu";
import { HttpClient } from "@angular/common/http";
import { SelectionModel } from "@angular/cdk/collections";
import { MatCheckboxChange } from "@angular/material/checkbox";
import * as i0 from "@angular/core";
export declare class DmTableComponent implements OnChanges, OnInit, AfterViewInit, OnDestroy {
    private changeDetector;
    private http;
    private injector;
    /**
     * Table column definitions.
     */
    columns: DmTableColumnDefinition[];
    /**
     * The data source from which rows are fetched.
     * Can be a static array of rows or an url to a server side source.
     * Note: When using server side data source, it is assumed that sorting and pagination is also handled on the server.
     */
    dataSource: DmTableDataSource;
    /**
     * Overrides the i18n default strings AND the string injected by the DM_TABLE_INTL token.
     * This is mostly useful when dynamic i18n strings are required, or when there are multiple tables on the same page.
     */
    intl: Record<DmTableIntl, string>;
    /**
     * The request method used when calling the server side data source(GET, POST, etc.).
     */
    dataSourceRequestMethod: string;
    /**
     * Filters that will be sent to the server side data source along with the default parameters (paging, sorting, etc.).
     */
    filters?: DmTableFilters;
    /**
     * A function that takes the current request options and returns a promise which resolves the final request options to be passed to the angular HttpClient.
     * This is useful if you need to pass additional headers (e.g. Authorization) or modify the data before sending the request to the backend.
     * The same effect can be achieved using an interceptor.
     */
    onBeforeServerRequestFn?: (requestOptions: DmTableRequestOptions) => Promise<DmTableRequestOptions>;
    /**
     * Adds a contextual menu on each row in a special column added at the end of the table.
     * Use the [rowContextMenuDisplayCondition] @Input to control when this menu is displayed.
     */
    rowContextMenu: MatMenu | null;
    /**
     * Function which determines when the contextual menu is displayed
     */
    rowContextMenuIsVisibleFn: (row: any) => boolean;
    /**
     * If set, a column with checkboxes for each row will be appended at the beginning of the table.
     * The SelectionModel will be populated with each of the selected row's data.
     * Note: The table respects whether the selection model supports multiple values or not
     */
    rowSelectionModel?: SelectionModel<any>;
    /**
     * A function that takes the rows as an argument and returns them back.
     * This is useful when you need to alter row data from a server side data source before being rendered.
     */
    mapRowsFn?: (rows: any[]) => any[];
    /**
     * Tracking function that will be used to check the differences in data changes.
     * Used similarly to ngFor trackBy function.
     * Optimize row operations by identifying a row based on its data relative to the function to know if a row should be added/removed/moved.
     * Accepts a function that takes two parameters, index and item.
     */
    trackBy: TrackByFunction<any>;
    /**
     * Weather a highlight effect will be rendered when the user hovers the cursor over a row.
     */
    rowHoverEffectEnabled: boolean;
    /**
     * Highlights even rows
     */
    stripedRows: boolean;
    /**
     * Adds a border to the table
     */
    outline: boolean;
    /**
     * Whether to display a loading animation when loading data from a server.
     * The animation can also manually be triggered.
     */
    loadingAnimationEnabled: boolean;
    /**
     * Whether pagination will be enabled.
     */
    paginate: boolean;
    /**
     * Shows paginator first/last buttons
     */
    showFirstLastButtons: boolean;
    /**
     * Hides paginator page size info
     */
    hidePageSize: boolean;
    /**
     * The default page size.
     */
    pageSize: number;
    /**
     * The page sizes available to the user.
     */
    pageSizeOptions: number[];
    /**
     * The position of the sorting arrow
     */
    sortingArrowPosition: 'before' | 'after';
    /**
     * Sets the header row as sticky.
     * This only works if you set a max height for the table using the [maxHeight] input.
     */
    freezeHeaderRow: boolean;
    /**
     * Set a max height for the table (excluding the paginator).
     * Should be a value compatible with the css property 'max-height'. Example: '70vh' or '600px'.
     */
    maxHeight?: string;
    /**
     * Event triggered when a row has been clicked.
     * The event contains the row data.
     */
    rowClicked$: Subject<any>;
    protected displayedColumns: string[];
    protected dataSourceAdapter: DmTableDataSourceAdapter;
    protected _isLoading: boolean;
    protected loadingDataSub?: Subscription;
    protected masterCheckboxChecked: boolean;
    protected masterCheckboxIndeterminate: boolean;
    protected readonly DominusTableIntl: typeof DmTableIntl;
    protected containerClasses: {
        [key: string]: boolean;
    };
    private paginator?;
    private sort;
    constructor(changeDetector: ChangeDetectorRef, http: HttpClient, injector: Injector, intl?: Record<DmTableIntl, string>);
    ngOnInit(): void;
    ngAfterViewInit(): void;
    ngOnChanges(changes: SimpleChanges): void;
    /**
     * Refreshes the table data
     * @param resetPage whether the page will be reset as well
     */
    refresh(resetPage?: boolean): void;
    /**
     * Hides/shows or toggles the specified table column's visibility
     * @param columnId
     * @param visible If not specified, the visibility will be toggled
     */
    changeColumnVisibility(columnId: string, visible?: boolean): void;
    /**
     * Changes the visibility of multiple columns
     * @param columns The columns and their visibility. Example: [{columnId: 'myColumn1', visible: true}, {columnId: 'myOtherColumn', visible: false}] -- sets myColumn1 to visible and hides myOtherColumn
     */
    changeColumnsVisibility(columns: DmTableColumnVisibility[]): void;
    /**
     * Returns the table current loading state
     */
    get isLoading(): boolean;
    /**
     * Activates or deactivates the table's loading state
     * @param state
     */
    set isLoading(state: boolean);
    protected identifyColumn(index: number, column: DmTableColumnDefinition): string;
    protected toggleAllRowsSelection($event: MatCheckboxChange): void;
    protected toggleRowSelection(row: any): void;
    protected createRenderComponentInjector(column: DmTableColumnDefinition, columnData: any): Injector;
    private updateContainerClasses;
    private getColumn;
    private prepareDisplayedColumns;
    private setDataSrcAdapter;
    ngOnDestroy(): void;
    static ɵfac: i0.ɵɵFactoryDeclaration<DmTableComponent, [null, null, null, { optional: true; }]>;
    static ɵcmp: i0.ɵɵComponentDeclaration<DmTableComponent, "dm-table", never, { "columns": { "alias": "columns"; "required": true; }; "dataSource": { "alias": "dataSource"; "required": true; }; "intl": { "alias": "intl"; "required": false; }; "dataSourceRequestMethod": { "alias": "dataSourceRequestMethod"; "required": false; }; "filters": { "alias": "filters"; "required": false; }; "onBeforeServerRequestFn": { "alias": "onBeforeServerRequestFn"; "required": false; }; "rowContextMenu": { "alias": "rowContextMenu"; "required": false; }; "rowContextMenuIsVisibleFn": { "alias": "rowContextMenuIsVisibleFn"; "required": false; }; "rowSelectionModel": { "alias": "rowSelectionModel"; "required": false; }; "mapRowsFn": { "alias": "mapRowsFn"; "required": false; }; "trackBy": { "alias": "trackBy"; "required": false; }; "rowHoverEffectEnabled": { "alias": "rowHoverEffectEnabled"; "required": false; }; "stripedRows": { "alias": "stripedRows"; "required": false; }; "outline": { "alias": "outline"; "required": false; }; "loadingAnimationEnabled": { "alias": "loadingAnimationEnabled"; "required": false; }; "paginate": { "alias": "paginate"; "required": false; }; "showFirstLastButtons": { "alias": "showFirstLastButtons"; "required": false; }; "hidePageSize": { "alias": "hidePageSize"; "required": false; }; "pageSize": { "alias": "pageSize"; "required": false; }; "pageSizeOptions": { "alias": "pageSizeOptions"; "required": false; }; "sortingArrowPosition": { "alias": "sortingArrowPosition"; "required": false; }; "freezeHeaderRow": { "alias": "freezeHeaderRow"; "required": false; }; "maxHeight": { "alias": "maxHeight"; "required": false; }; "isLoading": { "alias": "isLoading"; "required": false; }; }, { "rowClicked$": "rowClicked"; }, never, never, true, never>;
    static ngAcceptInputType_isLoading: unknown;
}