datatable.component.d.ts 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515
  1. import { ElementRef, EventEmitter, OnInit, QueryList, AfterViewInit, DoCheck, KeyValueDiffers, KeyValueDiffer, ChangeDetectorRef } from '@angular/core';
  2. import { DatatableGroupHeaderDirective } from './body/body-group-header.directive';
  3. import { BehaviorSubject, Subscription } from 'rxjs';
  4. import { INgxDatatableConfig } from '../ngx-datatable.module';
  5. import { TableColumn } from '../types/table-column.type';
  6. import { ColumnMode } from '../types/column-mode.type';
  7. import { SelectionType } from '../types/selection.type';
  8. import { SortType } from '../types/sort.type';
  9. import { ContextmenuType } from '../types/contextmenu.type';
  10. import { DataTableColumnDirective } from './columns/column.directive';
  11. import { DatatableRowDetailDirective } from './row-detail/row-detail.directive';
  12. import { DatatableFooterDirective } from './footer/footer.directive';
  13. import { DataTableBodyComponent } from './body/body.component';
  14. import { DataTableHeaderComponent } from './header/header.component';
  15. import { ScrollbarHelper } from '../services/scrollbar-helper.service';
  16. import { ColumnChangesService } from '../services/column-changes.service';
  17. import { DimensionsHelper } from '../services/dimensions-helper.service';
  18. export declare class DatatableComponent implements OnInit, DoCheck, AfterViewInit {
  19. private scrollbarHelper;
  20. private dimensionsHelper;
  21. private cd;
  22. private columnChangesService;
  23. private configuration;
  24. /**
  25. * Template for the target marker of drag target columns.
  26. */
  27. targetMarkerTemplate: any;
  28. /**
  29. * Rows that are displayed in the table.
  30. */
  31. /**
  32. * Gets the rows.
  33. */
  34. rows: any;
  35. /**
  36. * This attribute allows the user to set the name of the column to group the data with
  37. */
  38. groupRowsBy: string;
  39. /**
  40. * This attribute allows the user to set a grouped array in the following format:
  41. * [
  42. * {groupid=1} [
  43. * {id=1 name="test1"},
  44. * {id=2 name="test2"},
  45. * {id=3 name="test3"}
  46. * ]},
  47. * {groupid=2>[
  48. * {id=4 name="test4"},
  49. * {id=5 name="test5"},
  50. * {id=6 name="test6"}
  51. * ]}
  52. * ]
  53. */
  54. groupedRows: any[];
  55. /**
  56. * Columns to be displayed.
  57. */
  58. /**
  59. * Get the columns.
  60. */
  61. columns: TableColumn[];
  62. /**
  63. * List of row objects that should be
  64. * represented as selected in the grid.
  65. * Default value: `[]`
  66. */
  67. selected: any[];
  68. /**
  69. * Enable vertical scrollbars
  70. */
  71. scrollbarV: boolean;
  72. /**
  73. * Enable horz scrollbars
  74. */
  75. scrollbarH: boolean;
  76. /**
  77. * The row height; which is necessary
  78. * to calculate the height for the lazy rendering.
  79. */
  80. rowHeight: number | 'auto' | ((row?: any) => number);
  81. /**
  82. * Type of column width distribution formula.
  83. * Example: flex, force, standard
  84. */
  85. columnMode: ColumnMode;
  86. /**
  87. * The minimum header height in pixels.
  88. * Pass a falsey for no header
  89. */
  90. headerHeight: any;
  91. /**
  92. * The minimum footer height in pixels.
  93. * Pass falsey for no footer
  94. */
  95. footerHeight: number;
  96. /**
  97. * If the table should use external paging
  98. * otherwise its assumed that all data is preloaded.
  99. */
  100. externalPaging: boolean;
  101. /**
  102. * If the table should use external sorting or
  103. * the built-in basic sorting.
  104. */
  105. externalSorting: boolean;
  106. /**
  107. * The page size to be shown.
  108. * Default value: `undefined`
  109. */
  110. /**
  111. * Gets the limit.
  112. */
  113. limit: number | undefined;
  114. /**
  115. * The total count of all rows.
  116. * Default value: `0`
  117. */
  118. /**
  119. * Gets the count.
  120. */
  121. count: number;
  122. /**
  123. * The current offset ( page - 1 ) shown.
  124. * Default value: `0`
  125. */
  126. offset: number;
  127. /**
  128. * Show the linear loading bar.
  129. * Default value: `false`
  130. */
  131. loadingIndicator: boolean;
  132. /**
  133. * Type of row selection. Options are:
  134. *
  135. * - `single`
  136. * - `multi`
  137. * - `checkbox`
  138. * - `multiClick`
  139. * - `cell`
  140. *
  141. * For no selection pass a `falsey`.
  142. * Default value: `undefined`
  143. */
  144. selectionType: SelectionType;
  145. /**
  146. * Enable/Disable ability to re-order columns
  147. * by dragging them.
  148. */
  149. reorderable: boolean;
  150. /**
  151. * Swap columns on re-order columns or
  152. * move them.
  153. */
  154. swapColumns: boolean;
  155. /**
  156. * The type of sorting
  157. */
  158. sortType: SortType;
  159. /**
  160. * Array of sorted columns by property and type.
  161. * Default value: `[]`
  162. */
  163. sorts: any[];
  164. /**
  165. * Css class overrides
  166. */
  167. cssClasses: any;
  168. /**
  169. * Message overrides for localization
  170. *
  171. * emptyMessage [default] = 'No data to display'
  172. * totalMessage [default] = 'total'
  173. * selectedMessage [default] = 'selected'
  174. */
  175. messages: any;
  176. /**
  177. * Row specific classes.
  178. * Similar implementation to ngClass.
  179. *
  180. * [rowClass]="'first second'"
  181. * [rowClass]="{ 'first': true, 'second': true, 'third': false }"
  182. */
  183. rowClass: any;
  184. /**
  185. * A boolean/function you can use to check whether you want
  186. * to select a particular row based on a criteria. Example:
  187. *
  188. * (selection) => {
  189. * return selection !== 'Ethel Price';
  190. * }
  191. */
  192. selectCheck: any;
  193. /**
  194. * A function you can use to check whether you want
  195. * to show the checkbox for a particular row based on a criteria. Example:
  196. *
  197. * (row, column, value) => {
  198. * return row.name !== 'Ethel Price';
  199. * }
  200. */
  201. displayCheck: (row: any, column?: any, value?: any) => boolean;
  202. /**
  203. * A boolean you can use to set the detault behaviour of rows and groups
  204. * whether they will start expanded or not. If ommited the default is NOT expanded.
  205. *
  206. */
  207. groupExpansionDefault: boolean;
  208. /**
  209. * Property to which you can use for custom tracking of rows.
  210. * Example: 'name'
  211. */
  212. trackByProp: string;
  213. /**
  214. * Property to which you can use for determining select all
  215. * rows on current page or not.
  216. *
  217. * @memberOf DatatableComponent
  218. */
  219. selectAllRowsOnPage: boolean;
  220. /**
  221. * A flag for row virtualization on / off
  222. */
  223. virtualization: boolean;
  224. /**
  225. * Tree from relation
  226. */
  227. treeFromRelation: string;
  228. /**
  229. * Tree to relation
  230. */
  231. treeToRelation: string;
  232. /**
  233. * A flag for switching summary row on / off
  234. */
  235. summaryRow: boolean;
  236. /**
  237. * A height of summary row
  238. */
  239. summaryHeight: number;
  240. /**
  241. * A property holds a summary row position: top/bottom
  242. */
  243. summaryPosition: string;
  244. /**
  245. * Body was scrolled typically in a `scrollbarV:true` scenario.
  246. */
  247. scroll: EventEmitter<any>;
  248. /**
  249. * A cell or row was focused via keyboard or mouse click.
  250. */
  251. activate: EventEmitter<any>;
  252. /**
  253. * A cell or row was selected.
  254. */
  255. select: EventEmitter<any>;
  256. /**
  257. * Column sort was invoked.
  258. */
  259. sort: EventEmitter<any>;
  260. /**
  261. * The table was paged either triggered by the pager or the body scroll.
  262. */
  263. page: EventEmitter<any>;
  264. /**
  265. * Columns were re-ordered.
  266. */
  267. reorder: EventEmitter<any>;
  268. /**
  269. * Column was resized.
  270. */
  271. resize: EventEmitter<any>;
  272. /**
  273. * The context menu was invoked on the table.
  274. * type indicates whether the header or the body was clicked.
  275. * content contains either the column or the row that was clicked.
  276. */
  277. tableContextmenu: EventEmitter<{
  278. event: MouseEvent;
  279. type: ContextmenuType;
  280. content: any;
  281. }>;
  282. /**
  283. * A row was expanded ot collapsed for tree
  284. */
  285. treeAction: EventEmitter<any>;
  286. /**
  287. * CSS class applied if the header height if fixed height.
  288. */
  289. readonly isFixedHeader: boolean;
  290. /**
  291. * CSS class applied to the root element if
  292. * the row heights are fixed heights.
  293. */
  294. readonly isFixedRow: boolean;
  295. /**
  296. * CSS class applied to root element if
  297. * vertical scrolling is enabled.
  298. */
  299. readonly isVertScroll: boolean;
  300. /**
  301. * CSS class applied to root element if
  302. * virtualization is enabled.
  303. */
  304. readonly isVirtualized: boolean;
  305. /**
  306. * CSS class applied to the root element
  307. * if the horziontal scrolling is enabled.
  308. */
  309. readonly isHorScroll: boolean;
  310. /**
  311. * CSS class applied to root element is selectable.
  312. */
  313. readonly isSelectable: boolean;
  314. /**
  315. * CSS class applied to root is checkbox selection.
  316. */
  317. readonly isCheckboxSelection: boolean;
  318. /**
  319. * CSS class applied to root if cell selection.
  320. */
  321. readonly isCellSelection: boolean;
  322. /**
  323. * CSS class applied to root if single select.
  324. */
  325. readonly isSingleSelection: boolean;
  326. /**
  327. * CSS class added to root element if mulit select
  328. */
  329. readonly isMultiSelection: boolean;
  330. /**
  331. * CSS class added to root element if mulit click select
  332. */
  333. readonly isMultiClickSelection: boolean;
  334. /**
  335. * Column templates gathered from `ContentChildren`
  336. * if described in your markup.
  337. */
  338. /**
  339. * Returns the column templates.
  340. */
  341. columnTemplates: QueryList<DataTableColumnDirective>;
  342. /**
  343. * Row Detail templates gathered from the ContentChild
  344. */
  345. rowDetail: DatatableRowDetailDirective;
  346. /**
  347. * Group Header templates gathered from the ContentChild
  348. */
  349. groupHeader: DatatableGroupHeaderDirective;
  350. /**
  351. * Footer template gathered from the ContentChild
  352. */
  353. footer: DatatableFooterDirective;
  354. /**
  355. * Reference to the body component for manually
  356. * invoking functions on the body.
  357. */
  358. bodyComponent: DataTableBodyComponent;
  359. /**
  360. * Reference to the header component for manually
  361. * invoking functions on the header.
  362. *
  363. * @memberOf DatatableComponent
  364. */
  365. headerComponent: DataTableHeaderComponent;
  366. /**
  367. * Returns if all rows are selected.
  368. */
  369. readonly allRowsSelected: boolean;
  370. element: HTMLElement;
  371. _innerWidth: number;
  372. pageSize: number;
  373. bodyHeight: number;
  374. rowCount: number;
  375. rowDiffer: KeyValueDiffer<{}, {}>;
  376. _offsetX: BehaviorSubject<number>;
  377. _limit: number | undefined;
  378. _count: number;
  379. _offset: number;
  380. _rows: any[];
  381. _groupRowsBy: string;
  382. _internalRows: any[];
  383. _internalColumns: TableColumn[];
  384. _columns: TableColumn[];
  385. _columnTemplates: QueryList<DataTableColumnDirective>;
  386. _subscriptions: Subscription[];
  387. constructor(scrollbarHelper: ScrollbarHelper, dimensionsHelper: DimensionsHelper, cd: ChangeDetectorRef, element: ElementRef, differs: KeyValueDiffers, columnChangesService: ColumnChangesService, configuration: INgxDatatableConfig);
  388. /**
  389. * Lifecycle hook that is called after data-bound
  390. * properties of a directive are initialized.
  391. */
  392. ngOnInit(): void;
  393. /**
  394. * Lifecycle hook that is called after a component's
  395. * view has been fully initialized.
  396. */
  397. ngAfterViewInit(): void;
  398. /**
  399. * Lifecycle hook that is called after a component's
  400. * content has been fully initialized.
  401. */
  402. ngAfterContentInit(): void;
  403. /**
  404. * This will be used when displaying or selecting rows.
  405. * when tracking/comparing them, we'll use the value of this fn,
  406. *
  407. * (`fn(x) === fn(y)` instead of `x === y`)
  408. */
  409. rowIdentity: (x: any) => any;
  410. /**
  411. * Translates the templates to the column objects
  412. */
  413. translateColumns(val: any): void;
  414. /**
  415. * Creates a map with the data grouped by the user choice of grouping index
  416. *
  417. * @param originalArray the original array passed via parameter
  418. * @param groupByIndex the index of the column to group the data by
  419. */
  420. groupArrayBy(originalArray: any, groupBy: any): {
  421. key: any;
  422. value: any;
  423. }[];
  424. ngDoCheck(): void;
  425. /**
  426. * Recalc's the sizes of the grid.
  427. *
  428. * Updated automatically on changes to:
  429. *
  430. * - Columns
  431. * - Rows
  432. * - Paging related
  433. *
  434. * Also can be manually invoked or upon window resize.
  435. */
  436. recalculate(): void;
  437. /**
  438. * Window resize handler to update sizes.
  439. */
  440. onWindowResize(): void;
  441. /**
  442. * Recalulcates the column widths based on column width
  443. * distribution mode and scrollbar offsets.
  444. */
  445. recalculateColumns(columns?: any[], forceIdx?: number, allowBleed?: boolean): any[] | undefined;
  446. /**
  447. * Recalculates the dimensions of the table size.
  448. * Internally calls the page size and row count calcs too.
  449. *
  450. */
  451. recalculateDims(): void;
  452. /**
  453. * Recalculates the pages after a update.
  454. */
  455. recalculatePages(): void;
  456. /**
  457. * Body triggered a page event.
  458. */
  459. onBodyPage({ offset }: any): void;
  460. /**
  461. * The body triggered a scroll event.
  462. */
  463. onBodyScroll(event: MouseEvent): void;
  464. /**
  465. * The footer triggered a page event.
  466. */
  467. onFooterPage(event: any): void;
  468. /**
  469. * Recalculates the sizes of the page
  470. */
  471. calcPageSize(val?: any[]): number;
  472. /**
  473. * Calculates the row count.
  474. */
  475. calcRowCount(val?: any[]): number;
  476. /**
  477. * The header triggered a contextmenu event.
  478. */
  479. onColumnContextmenu({ event, column }: any): void;
  480. /**
  481. * The body triggered a contextmenu event.
  482. */
  483. onRowContextmenu({ event, row }: any): void;
  484. /**
  485. * The header triggered a column resize event.
  486. */
  487. onColumnResize({ column, newValue }: any): void;
  488. /**
  489. * The header triggered a column re-order event.
  490. */
  491. onColumnReorder({ column, newValue, prevValue }: any): void;
  492. /**
  493. * The header triggered a column sort event.
  494. */
  495. onColumnSort(event: any): void;
  496. /**
  497. * Toggle all row selection
  498. */
  499. onHeaderSelect(event: any): void;
  500. /**
  501. * A row was selected from body
  502. */
  503. onBodySelect(event: any): void;
  504. /**
  505. * A row was expanded or collapsed for tree
  506. */
  507. onTreeAction(event: any): void;
  508. ngOnDestroy(): void;
  509. /**
  510. * listen for changes to input bindings of all DataTableColumnDirective and
  511. * trigger the columnTemplates.changes observable to emit
  512. */
  513. private listenForColumnInputChanges;
  514. private sortInternalRows;
  515. }