ngx-ui-builder/table/table.types.d.ts

Angular - Render component ui with configurations

import { Observable } from 'rxjs';
import { LooseObject } from 'ngx-ui-builder/utils';
export interface NubTableRow {
    id: number | string;
    class?: string;
    data?: any;
    columns?: NubTableCell[];
    metadata?: {
        order?: number;
        [key: string]: any;
    };
}
/**
 * @description
 * Define properties for a table's cell.
 */
export interface NubTableCell {
    cell: LooseObject;
    metadata: LooseObject;
}
/**
 * @description
 * Config for table's columns.
 */
export interface NubTableColumnConfig {
    _id?: string;
    /** Title name of column */
    title?: string;
    /** Property from your data model */
    property: string;
    /** Use for config custom header component */
    headerComponent?: any;
    /** Use for config custom component. Ex: checkbox, text, ... */
    component?: any;
    /** CSS class for column */
    class?: string;
    /** CSS class for header column */
    headerClass?: string;
    /** Using Angular's pipe in this column */
    pipe?: string;
    /** Sort's settings */
    sort?: {
        type?: 'asc' | 'desc' | '';
    };
    /** Enable filter settings, default filter is autocomplete combine with multiple  */
    filter?: {
        /** Debounce time in milliseconds. Default is 300ms */
        debounceTime?: number;
        /** Automatic set to free text if data is not defined. */
        component?: any;
        value?: any;
        metadata?: any;
    };
    search?: {
        value?: string;
    };
    /** Drag feature on column */
    drag?: {
        disabled?: boolean;
    };
    /** Resize feature on column */
    show?: boolean;
    /** Config tooltips messages for column */
    tooltips?: string;
}
/**
 * @description
 * Define properties for a table.
 */
export interface NubTableConfig {
    id?: string | number;
    /** Table's caption */
    caption?: string;
    /** Caption position
     * https://developer.mozilla.org/en-US/docs/Web/CSS/caption-side
     */
    captionPosition?: string;
    /** table load's status */
    loaded?: {
        promise: Promise<any>;
        resolve: LooseObject;
        reject: LooseObject;
    };
    /** CSS class for table */
    class?: string;
    /** CSS class for table's cover */
    coverClass?: string;
    /** List column definitions */
    columnOptions: NubTableColumnConfig[];
    /** Display table's footer (include pagination) */
    footer?: {
        /** Customs footer component */
        component?: any;
        /** Customs footer component configs */
        configs?: {
            /** Label settings items per pages */
            labelSettingsItemsPerPage?: string;
            pageSizes?: number[];
            pageSize?: number;
            page?: number;
            totalItems?: number;
            [key: string]: any;
        };
    };
    /** Search options for input search. Default it will search in all data of table */
    search?: {
        /** List of fields that you want to search */
        fields?: string[];
        placeholder?: string;
        /** Label of the input */
        title?: string;
        value?: string;
        /** Debounce time in milliseconds. Default is 300ms */
        debounceTime?: number;
        /** CSS class for table's search */
        class?: string;
    };
    /** Config customs information for what you want, and you can access from cell of table */
    metadata?: any;
    rowOptions?: {
        class?: string;
        onClick?: (row: any) => void;
        [key: string]: any;
    };
    trackBy?: any;
    /**
     * @description
     * The class used for your sort icon; all properties are required
     * Ex: sortClass: {
     *    asc: 'your class'
     *    desc: 'your class'
     *    default: 'your class'
     *  }
     */
    sortClass?: {
        asc?: string;
        desc?: string;
        default?: string;
    };
    /**
     * Display column name and the type of sort
     * Ex: sortOrder {Column: 'asc'}
     */
    sortOrder?: any;
    /** Use this options for implement calling service to get data. */
    dataSource?: (params?: any, table?: any) => {
        data: any;
        totalItems: number;
    } | Observable<{
        data: any;
        totalItems: number;
    }> | Promise<{
        data: any;
        totalItems: number;
    }>;
    /**
     * It will call before refresh function
     * Return object search model using for fetch data
     * @param queryParams this params include search, filter, sort and other information
     */
    mapQueryParams?: (queryParams?: any) => Record<never, never>;
}