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; 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; }