@reforgium/data-grid 1.0.1 → 1.0.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,29 +1,116 @@
1
1
  import * as _angular_core from '@angular/core';
2
2
  import { TemplateRef, ElementRef } from '@angular/core';
3
3
 
4
+ /**
5
+ * Directive for defining type-specific cell templates in a data grid.
6
+ *
7
+ * This directive allows developers to create custom cell renderers for specific data types
8
+ * within the data grid component. It binds a template to a type identifier, enabling
9
+ * the grid to dynamically select and render the appropriate template based on column type.
10
+ *
11
+ * Example usage:
12
+ * ```html
13
+ * <ng-template reDataGridTypeCell="date" let-data>
14
+ * {{ data.value | date }}
15
+ * </ng-template>
16
+ * ```
17
+ *
18
+ * The directive captures the template reference and makes it available to the parent
19
+ * data grid component for rendering cells of the specified type.
20
+ */
4
21
  declare class DataGridTypeCellTemplateDirective {
22
+ /**
23
+ * The type identifier for this cell template.
24
+ *
25
+ * Specifies which data type this template should be used for.
26
+ * When the data grid encounters a column with a matching type,
27
+ * it will use this template to render cells in that column.
28
+ *
29
+ * @default ''
30
+ */
5
31
  type: _angular_core.InputSignal<string>;
32
+ /**
33
+ * Reference to the template defined in the directive.
34
+ *
35
+ * This template will be rendered for each cell of the matching type,
36
+ * receiving `RenderTemplateData` as its context with cell-specific information.
37
+ */
6
38
  tpl: TemplateRef<any>;
7
39
  static ɵfac: _angular_core.ɵɵFactoryDeclaration<DataGridTypeCellTemplateDirective, never>;
8
- static ɵdir: _angular_core.ɵɵDirectiveDeclaration<DataGridTypeCellTemplateDirective, "ng-template[ssDataGridTypeCell]", never, { "type": { "alias": "ssDataGridTypeCell"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
40
+ static ɵdir: _angular_core.ɵɵDirectiveDeclaration<DataGridTypeCellTemplateDirective, "ng-template[reDataGridTypeCell]", never, { "type": { "alias": "reDataGridTypeCell"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
9
41
  }
10
42
 
43
+ /**
44
+ * Directive for defining custom header templates in data grid columns.
45
+ *
46
+ * This directive allows you to specify a custom template for rendering column headers
47
+ * in the data grid. The template is associated with a column key and receives
48
+ * header-specific context data.
49
+ *
50
+ * @example
51
+ * ```html
52
+ * <ng-template reDataGridHeader="username" let-header>
53
+ * <div class="custom-header">{{ header.label }}</div>
54
+ * </ng-template>
55
+ * ```
56
+ */
11
57
  declare class DataGridHeaderTemplateDirective {
58
+ /**
59
+ * The column key this header template is associated with.
60
+ * Uses the `reDataGridHeader` directive attribute as an alias.
61
+ * Defaults to an empty string if not provided.
62
+ */
12
63
  key: _angular_core.InputSignal<string>;
64
+ /**
65
+ * The injected template reference containing the custom header template.
66
+ * The template context is of the type `HeaderTemplateData`.
67
+ */
13
68
  tpl: TemplateRef<any>;
14
69
  static ɵfac: _angular_core.ɵɵFactoryDeclaration<DataGridHeaderTemplateDirective, never>;
15
- static ɵdir: _angular_core.ɵɵDirectiveDeclaration<DataGridHeaderTemplateDirective, "ng-template[ssDataGridHeader]", never, { "key": { "alias": "ssDataGridHeader"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
70
+ static ɵdir: _angular_core.ɵɵDirectiveDeclaration<DataGridHeaderTemplateDirective, "ng-template[reDataGridHeader]", never, { "key": { "alias": "reDataGridHeader"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
16
71
  }
17
72
 
73
+ /**
74
+ * Directive for providing a custom template to display when the data grid has no data.
75
+ *
76
+ * Used as a structural directive on `<ng-template>` elements within data grid components.
77
+ * The template receives a boolean context value indicating the empty state.
78
+ *
79
+ * Example:
80
+ * ```html
81
+ * <ng-template reDataGridEmpty let-isEmpty>
82
+ * <div *ngIf="isEmpty">No data available</div>
83
+ * </ng-template>
84
+ * ```
85
+ *
86
+ * Template context:
87
+ * - `$implicit: boolean` — indicates whether the grid is in an empty state
88
+ */
18
89
  declare class DataGridCellEmptyDirective {
19
90
  tpl: TemplateRef<any>;
20
91
  static ɵfac: _angular_core.ɵɵFactoryDeclaration<DataGridCellEmptyDirective, never>;
21
- static ɵdir: _angular_core.ɵɵDirectiveDeclaration<DataGridCellEmptyDirective, "ng-template[ssDataGridEmpty]", never, {}, {}, never, never, true, never>;
92
+ static ɵdir: _angular_core.ɵɵDirectiveDeclaration<DataGridCellEmptyDirective, "ng-template[reDataGridEmpty]", never, {}, {}, never, never, true, never>;
22
93
  }
94
+ /**
95
+ * Directive for providing a custom template to display when the data grid is loading data.
96
+ *
97
+ * Used as a structural directive on `<ng-template>` elements within data grid components.
98
+ * The template receives a boolean context value indicating the loading state.
99
+ *
100
+ * Example:
101
+ * ```html
102
+ * <ng-template reDataGridLoading let-isLoading>
103
+ * <div *ngIf="isLoading">Loading...</div>
104
+ * </ng-template>
105
+ * ```
106
+ *
107
+ * Template context:
108
+ * - `$implicit: boolean` — indicates whether the grid is in loading state
109
+ */
23
110
  declare class DataGridCellLoadingDirective {
24
111
  tpl: TemplateRef<any>;
25
112
  static ɵfac: _angular_core.ɵɵFactoryDeclaration<DataGridCellLoadingDirective, never>;
26
- static ɵdir: _angular_core.ɵɵDirectiveDeclaration<DataGridCellLoadingDirective, "ng-template[ssDataGridLoading]", never, {}, {}, never, never, true, never>;
113
+ static ɵdir: _angular_core.ɵɵDirectiveDeclaration<DataGridCellLoadingDirective, "ng-template[reDataGridLoading]", never, {}, {}, never, never, true, never>;
27
114
  }
28
115
 
29
116
  type DataKey<Data> = (keyof Data & string) | string;
@@ -32,23 +119,115 @@ type RowKeyFn<Data> = DataKey<Data> | KeyResolver<Data, string | number>;
32
119
  type AnyType = any;
33
120
  type AnyDict = Record<string, AnyType>;
34
121
 
122
+ /**
123
+ * Defines how pagination is displayed and handled in the data grid.
124
+ *
125
+ * - `'none'` - No pagination, all rows are displayed
126
+ * - `'pagination'` - Classic page-based pagination with page numbers
127
+ * - `'infinity'` - Infinite scroll pagination (load more on scroll)
128
+ */
35
129
  type GridPaginationMode = 'none' | 'pagination' | 'infinity';
130
+ /**
131
+ * Position where a row can be pinned in the data grid.
132
+ *
133
+ * - `'top'` - Pin row at the top of the grid
134
+ * - `'bottom'` - Pin row at the bottom of the grid
135
+ */
36
136
  type GridPinnedPosition = 'top' | 'bottom';
137
+ /**
138
+ * Row selection mode for the data grid.
139
+ *
140
+ * - `'single'` - Allow selecting only one row at a time
141
+ * - `'multi'` - Allow selecting multiple rows
142
+ * - `'none'` - Disable row selection
143
+ */
37
144
  type GridSelectMode = 'single' | 'multi' | 'none';
145
+ /**
146
+ * Sort direction for grid columns.
147
+ *
148
+ * - `'asc'` - Ascending order (A to Z, 0 to 9)
149
+ * - `'desc'` - Descending order (Z to A, 9 to 0)
150
+ */
38
151
  type GridSortOrder = 'asc' | 'desc';
152
+ /**
153
+ * Horizontal alignment options for grid cell content.
154
+ *
155
+ * - `'left'` - Align content to the left
156
+ * - `'center'` - Center align content
157
+ * - `'right'` - Align content to the right
158
+ */
39
159
  type GridCellAlign = 'left' | 'center' | 'right';
160
+ /**
161
+ * Built-in cell renderer types for common data display formats.
162
+ *
163
+ * - `'plain'` - Display raw text value (default)
164
+ * - `'date'` - Format and display date values
165
+ * - `'number'` - Format and display numeric values
166
+ * - `'index'` - Display row index number
167
+ * - `'checkbox'` - Display checkbox for selection
168
+ */
40
169
  type GridCellRendererType = 'plain' | 'date' | 'number' | 'index' | 'checkbox';
170
+ /**
171
+ * Array of column definitions for the data grid.
172
+ *
173
+ * @template Data - Type of data objects displayed in the grid rows
174
+ */
41
175
  type GridColumns<Data extends AnyDict = AnyDict> = GridColumn<Data>[];
176
+ /**
177
+ * Array of pinned row definitions for the data grid.
178
+ *
179
+ * Pinned rows remain fixed at the top or bottom of the grid regardless of scrolling.
180
+ *
181
+ * @template Data - Type of data objects displayed in the grid rows
182
+ */
42
183
  type GridPinnedRows<Data extends AnyDict = AnyDict> = GridPinnedRow<Data>[];
184
+ /**
185
+ * Union type representing grid selection configuration.
186
+ *
187
+ * Can be either a configuration with no selection enabled,
188
+ * or a configuration with single/multi selection enabled.
189
+ *
190
+ * @template Data - Type of data objects displayed in the grid rows
191
+ */
43
192
  type GridSelection<Data extends AnyDict = AnyDict> = _Selectless | _Selectfull<Data>;
193
+ /**
194
+ * Selection configuration when row selection is disabled.
195
+ *
196
+ * When the mode is set to `'none'`, no additional configuration is required.
197
+ */
44
198
  type _Selectless = {
45
199
  mode: 'none';
46
200
  };
201
+ /**
202
+ * Selection configuration when row selection is enabled (single or multi).
203
+ *
204
+ * Requires specifying which data property to use as the unique identifier
205
+ * for tracking selected rows. Optionally allows setting default selection.
206
+ *
207
+ * @template Data - Type of data objects displayed in the grid rows
208
+ *
209
+ * @property mode - Selection mode: `'single'` or `'multi'`
210
+ * @property key - Data property to use as unique identifier for selection
211
+ * @property defaultSelected - Optional array of initially selected row identifiers
212
+ */
47
213
  type _Selectfull<Data extends AnyDict> = {
48
214
  mode: Omit<GridSelectMode, 'none'>;
49
215
  key: DataKey<Data>;
50
216
  defaultSelected?: DataKey<Data>[];
51
217
  };
218
+ /**
219
+ * Configuration for a single pinned row in the data grid.
220
+ *
221
+ * Pinned rows remain fixed at the specified position (top or bottom)
222
+ * and can display static data or use a custom template for rendering.
223
+ *
224
+ * @template Data - Type of data objects displayed in the grid rows
225
+ *
226
+ * @property position - Where to pin the row (`'top'` or `'bottom'`)
227
+ * @property order - Optional display order when multiple rows are pinned
228
+ * @property data - Static data or function returning data for the row
229
+ * @property rowTemplate - Optional Angular template for custom row rendering
230
+ */
52
231
  type GridPinnedRow<Data extends AnyDict = AnyDict> = {
53
232
  position: GridPinnedPosition;
54
233
  order?: number;
@@ -57,7 +236,38 @@ type GridPinnedRow<Data extends AnyDict = AnyDict> = {
57
236
  $implicit: Partial<Data>;
58
237
  }>;
59
238
  };
239
+ /**
240
+ * Union type representing different column definition variants.
241
+ *
242
+ * A column can use built-in renderers, custom value functions, or Angular templates
243
+ * for rendering cell content.
244
+ *
245
+ * @template Data - Type of data objects displayed in the grid rows
246
+ */
60
247
  type GridColumn<Data extends AnyDict = AnyDict> = _DefaultGridColumn<Data> | _ValuedGridColumn<Data> | _TemplatedGridColumn<Data>;
248
+ /**
249
+ * Base properties shared by all column definition types.
250
+ *
251
+ * Contains configuration for column identification, header display,
252
+ * sizing, alignment, visibility, and behavior.
253
+ *
254
+ * @template Data - Type of data objects displayed in the grid rows
255
+ *
256
+ * @property key - Data property key this column displays
257
+ * @property sortKey - Optional alternative key for sorting (if different from display key)
258
+ * @property header - Column header text
259
+ * @property headerTemplate - Optional Angular template for custom header rendering
260
+ * @property align - Horizontal alignment of cell content
261
+ * @property cellClass - CSS class(es) to apply to cells (static string or resolver function)
262
+ * @property width - Fixed width in pixels
263
+ * @property minWidth - Minimum width in pixels
264
+ * @property maxWidth - Maximum width in pixels
265
+ * @property flex - Flex grow factor for flexible width columns
266
+ * @property disabled - Whether the column is disabled
267
+ * @property visible - Whether the column is visible
268
+ * @property sticky - Whether the column remains fixed during horizontal scroll
269
+ * @property expandBy - Data key to use for expanding/collapsing row details
270
+ */
61
271
  type _BaseGridColumn<Data extends AnyDict = AnyDict> = {
62
272
  key: DataKey<Data>;
63
273
  sortKey?: string;
@@ -74,21 +284,83 @@ type _BaseGridColumn<Data extends AnyDict = AnyDict> = {
74
284
  sticky?: boolean;
75
285
  expandBy?: DataKey<Data>;
76
286
  };
287
+ /**
288
+ * Column definition using built-in cell renderer types.
289
+ *
290
+ * Extends the base column with an optional renderer type specification.
291
+ * If no type is specified, defaults to `'plain'` renderer.
292
+ *
293
+ * @template Data - Type of data objects displayed in the grid rows
294
+ *
295
+ * @property type - Built-in renderer type for formatting cell values
296
+ */
77
297
  type _DefaultGridColumn<Data extends AnyDict = AnyDict> = _BaseGridColumn<Data> & {
78
298
  type?: GridCellRendererType;
79
299
  };
300
+ /**
301
+ * Column definition using a custom value renderer function.
302
+ *
303
+ * Allows custom logic for transforming row data into display values.
304
+ * Requires a tracking function for change detection optimization.
305
+ *
306
+ * @template Data - Type of data objects displayed in the grid rows
307
+ *
308
+ * @property track - Function returning unique identifier for the row (for change detection)
309
+ * @property value - Function that resolves cell display value from row data
310
+ */
80
311
  type _ValuedGridColumn<Data extends AnyDict = AnyDict> = _BaseGridColumn<Data> & {
81
312
  track: (row: Data) => string;
82
313
  value: GridCellRenderer<Data>;
83
314
  };
315
+ /**
316
+ * Column definition using an Angular template for cell rendering.
317
+ *
318
+ * Provides maximum flexibility by allowing custom HTML templates
319
+ * with full access to row data, column config, and cell context.
320
+ * Requires a tracking function for change detection optimization.
321
+ *
322
+ * @template Data - Type of data objects displayed in the grid rows
323
+ *
324
+ * @property track - Function returning unique identifier for the row (for change detection)
325
+ * @property renderTemplate - Angular TemplateRef for rendering cell content
326
+ */
84
327
  type _TemplatedGridColumn<Data extends AnyDict = AnyDict> = _BaseGridColumn<Data> & {
85
328
  track: (row: Data) => string;
86
329
  renderTemplate: TemplateRef<RenderTemplateData<Data>>;
87
330
  };
331
+ /**
332
+ * Type for custom cell value resolver functions.
333
+ *
334
+ * Function that takes row data and returns a string or number for display.
335
+ * Used in `_ValuedGridColumn` to customize how cell values are extracted and formatted.
336
+ *
337
+ * @template Data - Type of data objects displayed in the grid rows
338
+ */
88
339
  type GridCellRenderer<Data> = KeyResolver<Data, string | number>;
340
+ /**
341
+ * Context data provided to the header template.
342
+ *
343
+ * Implicit value is the header text string.
344
+ *
345
+ * @property $implicit - The column header text
346
+ */
89
347
  type HeaderTemplateData = {
90
348
  $implicit: string;
91
349
  };
350
+ /**
351
+ * Context data provided to cell render template.
352
+ *
353
+ * Provides comprehensive access to cell, row, and column information
354
+ * for use within custom Angular templates.
355
+ *
356
+ * @template Data - Type of data objects displayed in the grid rows
357
+ *
358
+ * @property $implicit - The cell's display value as string
359
+ * @property value - The cell's display value as string (same as $implicit)
360
+ * @property row - Complete data object for the current row
361
+ * @property col - Column definition configuration object
362
+ * @property index - Zero-based row index in the current data set
363
+ */
92
364
  type RenderTemplateData<Data extends AnyDict = AnyDict> = {
93
365
  $implicit: string;
94
366
  value: string;
@@ -97,103 +369,467 @@ type RenderTemplateData<Data extends AnyDict = AnyDict> = {
97
369
  index: number;
98
370
  };
99
371
 
372
+ /**
373
+ * Event emitted when pagination changes in the data grid.
374
+ *
375
+ * Contains information about the current page, page size, and optional sorting parameters.
376
+ * Property names are compatible with PrimeNG table component conventions.
377
+ */
100
378
  type GridPageChangeEvent = {
101
379
  page: number;
102
- /** `pageSize`, для совместимости с primeNg назван `rows` */
380
+ /** `pageSize`, named `rows` for compatibility with PrimeNG */
103
381
  rows: number;
104
- /** для совместимости с primeNg */
382
+ /** for compatibility with PrimeNG */
105
383
  sortField?: string;
106
- /** для совместимости с primeNg */
384
+ /** for compatibility with PrimeNG */
107
385
  sortOrder?: GridSortOrder;
108
386
  };
387
+ /**
388
+ * Event emitted when column sorting changes in the data grid.
389
+ *
390
+ * Contains information about the sorted column key and the sort direction.
391
+ * The `key` property is type-safe and corresponds to actual data object keys.
392
+ *
393
+ * @template Data - Type of data objects in the grid
394
+ */
109
395
  type GridSortEvent<Data = AnyDict> = {
110
396
  key: DataKey<Data>;
111
397
  order?: GridSortOrder;
112
398
  };
399
+ /**
400
+ * Event emitted when row selection changes in the data grid.
401
+ *
402
+ * Contains an array of selected values, which can be either string identifiers
403
+ * or actual data values from the specified key column.
404
+ *
405
+ * @template Data - Type of data objects in the grid
406
+ */
113
407
  type GridSelectEvent<Data extends AnyDict = AnyDict> = {
114
408
  selected: (string | Data[DataKey<Data>])[];
115
409
  };
410
+ /**
411
+ * Event emitted when a row is clicked in the data grid.
412
+ *
413
+ * Provides access to the clicked row's data object and its numeric index position
414
+ * within the current grid data set.
415
+ *
416
+ * @template Data - Type of data objects in the grid
417
+ */
116
418
  type GridRowClickEvent<Data extends AnyDict = AnyDict> = {
117
419
  row: Data;
118
420
  index: number;
119
421
  };
422
+ /**
423
+ * Event emitted when a specific cell is clicked in the data grid.
424
+ *
425
+ * Provides detailed information about the clicked cell, including the row data,
426
+ * column configuration, and the row's numeric index position.
427
+ *
428
+ * @template Data - Type of data objects in the grid
429
+ */
120
430
  type GridCellClickEvent<Data extends AnyDict = AnyDict> = {
121
431
  row: Data;
122
432
  col: GridColumn<Data>;
123
433
  index: number;
124
434
  };
125
435
 
436
+ /**
437
+ * View model for the data grid component.
438
+ *
439
+ * Manages grid state including column layout, sticky positioning, scrollbar calculations,
440
+ * and pinned rows. Automatically recomputes column widths based on container size and
441
+ * handles sticky column offsets for left and right pinned columns.
442
+ *
443
+ * @template Data - Type of data objects in the grid, must extend AnyDict
444
+ *
445
+ * @example
446
+ * ```typescript
447
+ * const gridVm = inject(DataGridVm<MyDataType>);
448
+ * gridVm.columns.set([{ key: 'name', title: 'Name' }]);
449
+ * gridVm.containerWidth.set(800);
450
+ * ```
451
+ */
126
452
  declare class DataGridVm<Data extends AnyDict> {
127
453
  #private;
454
+ /**
455
+ * Reference to the scrollable container element.
456
+ *
457
+ * Used for scrollbar calculations and scroll position management.
458
+ */
128
459
  scrollEl: _angular_core.WritableSignal<ElementRef<HTMLDivElement> | undefined>;
460
+ /**
461
+ * Array of column configurations for the grid.
462
+ *
463
+ * Defines all columns including their keys, titles, sticky positioning, and widths.
464
+ * Value is reactive and triggers column layout recalculation when changed.
465
+ */
129
466
  columns: _angular_core.WritableSignal<GridColumn<Data>[]>;
467
+ /**
468
+ * Array of pinned row configurations.
469
+ *
470
+ * Defines rows that remain fixed at the top or bottom of the grid during scrolling.
471
+ * Each row includes data, position ('top' or 'bottom'), and optional ordering.
472
+ */
130
473
  pinnedRows: _angular_core.WritableSignal<GridPinnedRow<Data>[]>;
474
+ /**
475
+ * Current width of the grid container in pixels.
476
+ *
477
+ * Used for column width calculations and layout adjustments.
478
+ * Value is reactive and triggers column layout recalculation when changed.
479
+ */
131
480
  containerWidth: _angular_core.WritableSignal<number>;
481
+ /**
482
+ * Flag indicating whether the custom scrollbar should be visible.
483
+ *
484
+ * Automatically computed based on content height vs. container height.
485
+ */
132
486
  scrollbarVisible: _angular_core.WritableSignal<boolean>;
487
+ /**
488
+ * Height of the scrollbar thumb in pixels.
489
+ *
490
+ * Proportional to the ratio of visible content to total content height.
491
+ */
133
492
  thumbHeightPx: _angular_core.WritableSignal<number>;
493
+ /**
494
+ * Top position of the scrollbar thumb in pixels.
495
+ *
496
+ * Corresponds to the current scroll position within the scrollable area.
497
+ */
134
498
  thumbTopPx: _angular_core.WritableSignal<number>;
499
+ /**
500
+ * Flag indicating whether the user is currently dragging the scrollbar thumb.
501
+ *
502
+ * Used to track active scroll drag interactions.
503
+ */
135
504
  dragging: boolean;
505
+ /**
506
+ * Map of global cell renderer templates by type.
507
+ *
508
+ * Stores reusable template references for different cell renderer types
509
+ * that can be shared across multiple columns.
510
+ */
136
511
  globalTypeCellTpls: Map<GridCellRendererType, TemplateRef<Data>>;
512
+ /**
513
+ * Computed an array of non-sticky columns to display in the scrollable area.
514
+ *
515
+ * Automatically splits columns into left-sticky, visible, and right-sticky groups,
516
+ * recomputes sticky offsets, and returns only the scrollable middle section.
517
+ * Recalculates whenever columns or container width changes.
518
+ */
137
519
  columnsToShow: _angular_core.Signal<GridColumn<Data>[]>;
520
+ /**
521
+ * Computed array of rows pinned to the top of the grid.
522
+ *
523
+ * Filters pinned rows by 'top' position and sorts them by order property.
524
+ * Rows with lower order values appear first.
525
+ */
138
526
  pinnedTop: _angular_core.Signal<GridPinnedRow<Data>[]>;
527
+ /**
528
+ * Computed array of rows pinned to the bottom of the grid.
529
+ *
530
+ * Filters pinned rows by 'bottom' position and sorts them by order property.
531
+ * Rows with lower order values appear first.
532
+ */
139
533
  pinnedBottom: _angular_core.Signal<GridPinnedRow<Data>[]>;
140
534
  constructor();
535
+ /**
536
+ * Returns the computed width for a column by its key.
537
+ *
538
+ * If the column width has not been calculated, returns the default column width.
539
+ *
540
+ * @param key - The unique identifier for the column
541
+ * @returns Width in pixels
542
+ */
141
543
  widthByKey: (key: string) => number;
544
+ /**
545
+ * Checks if a column is pinned to the left side of the grid.
546
+ *
547
+ * @param key - The unique identifier for the column
548
+ * @returns `true` if the column is sticky on the left, `false` otherwise
549
+ */
142
550
  isStickyLeft: (key: string) => boolean;
551
+ /**
552
+ * Checks if a column is pinned to the right side of the grid.
553
+ *
554
+ * @param key - The unique identifier for the column
555
+ * @returns `true` if the column is sticky on the right, `false` otherwise
556
+ */
143
557
  isStickyRight: (key: string) => boolean;
558
+ /**
559
+ * Returns the horizontal offset for a sticky column.
560
+ *
561
+ * Calculates the distance from the specified edge (left or right) where the column
562
+ * should be positioned. Returns `null` if the column is not sticky in the given direction.
563
+ *
564
+ * @param key - The unique identifier for the column
565
+ * @param dir - The direction to check ('left' or 'right')
566
+ * @returns Offset in pixels, or `null` if not sticky in the specified direction
567
+ */
144
568
  stickyOffset: (key: string, dir: "left" | "right") => number | null;
569
+ /**
570
+ * Calculates and updates scrollbar state based on the current scroll position.
571
+ *
572
+ * Computes whether the scrollbar should be visible, and if so, determines
573
+ * the thumb height and position based on scroll height, client height, and scroll position.
574
+ * Updates the corresponding signal properties with the calculated values.
575
+ */
145
576
  calcScrollbar(): void;
146
577
  private recomputeStickyOffsets;
147
578
  static ɵfac: _angular_core.ɵɵFactoryDeclaration<DataGridVm<any>, never>;
148
579
  static ɵprov: _angular_core.ɵɵInjectableDeclaration<DataGridVm<any>>;
149
580
  }
150
581
 
582
+ /**
583
+ * Service class for managing row selection in a data grid.
584
+ *
585
+ * Handles selection state and operations for grid rows, supporting multiple selection modes
586
+ * (none, single, multi). Provides reactive signals for tracking selected items and
587
+ * computed values for selection state.
588
+ *
589
+ * @template Data - The type of data objects in the grid, must extend `AnyDict`.
590
+ *
591
+ * @example
592
+ * ```typescript
593
+ * const selector = new Selector<User>();
594
+ * selector.data.set(users);
595
+ * selector.selection.set({ mode: 'multi', key: 'id' });
596
+ * selector.select(users[0]);
597
+ * console.log(selector.selectedKeys()); // ['user-id']
598
+ * ```
599
+ */
151
600
  declare class Selector<Data extends AnyDict> {
601
+ /**
602
+ * Signal containing the full dataset of grid rows.
603
+ *
604
+ * This signal holds all data items that can be selected.
605
+ * Defaults to an empty array.
606
+ */
152
607
  data: _angular_core.WritableSignal<Data[]>;
608
+ /**
609
+ * Signal containing the current selection configuration.
610
+ *
611
+ * Defines the selection mode and the key property used for identifying rows.
612
+ * Defaults to `{ mode: 'none' }` which disables selection.
613
+ */
153
614
  selection: _angular_core.WritableSignal<GridSelection>;
615
+ /**
616
+ * Signal containing the array of currently selected row keys.
617
+ *
618
+ * Stores the keys of all selected rows based on the key property
619
+ * defined in the selection configuration.
620
+ * Defaults to an empty array.
621
+ */
154
622
  selectedKeys: _angular_core.WritableSignal<DataKey<Data>[]>;
623
+ /**
624
+ * Computed signal indicating the overall selection state of all rows.
625
+ *
626
+ * Returns:
627
+ * - `true` if all rows are selected
628
+ * - `false` if no rows are selected
629
+ * - `'mixed'` if some but not all rows are selected
630
+ *
631
+ * Useful for implementing "select all" checkbox with indeterminate state.
632
+ */
155
633
  isAllSelected: _angular_core.Signal<boolean | "mixed">;
634
+ /**
635
+ * Checks whether a specific row is currently selected.
636
+ *
637
+ * Compares the row's key value against the list of selected keys.
638
+ * Returns `false` if selection mode is 'none' or key is not configured.
639
+ *
640
+ * @param row - The data row to check selection status for.
641
+ * @returns `true` if the row is selected, `false` otherwise.
642
+ */
156
643
  isSelected(row: Data): boolean;
644
+ /**
645
+ * Toggles selection of all rows.
646
+ *
647
+ * If all rows are selected, deselects all.
648
+ * If no rows or some rows are selected, selects all.
649
+ *
650
+ * This method only works in `'multi'` selection mode and throws an error
651
+ * if called in any other mode.
652
+ *
653
+ * @returns The updated array of selected keys.
654
+ * @throws {Error} If selection mode is not `'multi'`.
655
+ */
157
656
  selectAll(): DataKey<Data>[];
657
+ /**
658
+ * Selects or deselects a specific row.
659
+ *
660
+ * Behavior depends on the selection mode:
661
+ * - In `'single'` mode: replaces current selection with the specified row.
662
+ * - In `'multi'` mode: toggles the row's selection state (adds if not selected, removes if selected).
663
+ * - In `'none'` mode: throws an error.
664
+ *
665
+ * @param row - The data row to select or deselect.
666
+ * @returns The updated array of selected keys after the operation.
667
+ * @throws {Error} If selection mode is `'none'`.
668
+ */
158
669
  select(row: Data): (string | Data[DataKey<Data>])[];
159
670
  }
160
671
 
672
+ /**
673
+ * Data grid component with virtual scrolling, sorting, selection, and pagination support.
674
+ *
675
+ * Provides high-performance rendering of large datasets with features like:
676
+ * - Virtual scrolling for efficient DOM management
677
+ * - Column sorting and expandable columns
678
+ * - Row selection (single/multiple)
679
+ * - Pagination modes: none, pagination, or infinite scroll
680
+ * - Pinned rows
681
+ * - Custom cell and header templates
682
+ *
683
+ * @example
684
+ * ```html
685
+ * <re-data-grid
686
+ * [data]="users"
687
+ * [columns]="columns"
688
+ * [selection]="{ mode: 'multiple' }"
689
+ * (sortChange)="onSort($event)"
690
+ * />
691
+ * ```
692
+ */
161
693
  declare class DataGrid<Data extends AnyDict> {
162
- /** Массив данных для отображения в таблице */
694
+ /**
695
+ * Array of data to display in the table.
696
+ *
697
+ * Each item represents a single row. The component will efficiently render
698
+ * only visible rows using virtual scrolling.
699
+ */
163
700
  data: _angular_core.InputSignal<Data[]>;
164
- /** Конфигурация колонок таблицы */
701
+ /**
702
+ * Column configuration for the table.
703
+ *
704
+ * Defines how each column should be rendered, sorted, and styled.
705
+ * Supports custom templates, sorting keys, and expandable columns.
706
+ */
165
707
  columns: _angular_core.InputSignal<GridColumn<Data>[]>;
166
- /** Режим пагинации: 'none', 'pagination' или 'infinity' */
708
+ /**
709
+ * Pagination mode: 'none', 'pagination', or 'infinity'.
710
+ *
711
+ * - `none` - No pagination, all data is rendered
712
+ * - `pagination` - Classic page-based pagination with fixed page size
713
+ * - `infinity` - Infinite scroll mode, loads more data as user scrolls
714
+ */
167
715
  mode: _angular_core.InputSignal<GridPaginationMode>;
168
- /** Массив закрепленных строк */
716
+ /**
717
+ * Array of pinned rows that remain visible at the top or bottom.
718
+ *
719
+ * Pinned rows stay fixed while the rest of the content scrolls.
720
+ * Useful for totals, summaries, or always-visible items.
721
+ */
169
722
  pinnedRows: _angular_core.InputSignal<GridPinnedRow<Data>[]>;
170
- /** Добавить ли номерную колонку */
723
+ /**
724
+ * Whether to add an index column showing row numbers.
725
+ *
726
+ * When enabled, automatically adds a column displaying sequential row numbers.
727
+ */
171
728
  hasIndexColumn: _angular_core.InputSignalWithTransform<boolean, string | number | undefined>;
172
- /** Поддержка выбора строк */
729
+ /**
730
+ * Row selection configuration.
731
+ *
732
+ * Controls whether users can select rows and in what mode:
733
+ * - `{ mode: 'none' }` - No selection
734
+ * - `{ mode: 'single' }` - Single row selection
735
+ * - `{ mode: 'multiple' }` - Multiple row selection with checkboxes
736
+ */
173
737
  selection: _angular_core.InputSignal<GridSelection>;
174
- /** Количество элементов на странице */
738
+ /**
739
+ * Number of items per page.
740
+ *
741
+ * Used in pagination and infinity scroll modes to control
742
+ * how many rows are loaded at once. Default is 20.
743
+ */
175
744
  pageSize: _angular_core.InputSignalWithTransform<number, string | number | undefined>;
176
- /** Высота строки в пикселях */
745
+ /**
746
+ * Height of each row in pixels.
747
+ *
748
+ * Used for virtual scrolling calculations. Must be consistent
749
+ * across all rows for accurate scrolling. Default is 40.
750
+ */
177
751
  rowHeight: _angular_core.InputSignalWithTransform<number, string | number | undefined>;
178
- /** Заполнять ли доступную высоту */
752
+ /**
753
+ * Whether to fill available height.
754
+ *
755
+ * When true, the grid expands to fill its container height.
756
+ * When false, height is determined by content. Default is true.
757
+ */
179
758
  fillHeight: _angular_core.InputSignalWithTransform<boolean, string | boolean | undefined>;
180
- /** Размер буфера виртуального скролла */
759
+ /**
760
+ * Size of the virtual scroll buffer.
761
+ *
762
+ * Number of extra rows to render above and below the viewport
763
+ * to reduce flickering during fast scrolling. Default is 6.
764
+ */
181
765
  virtualBuffer: _angular_core.InputSignal<number>;
182
- /** Состояние загрузки данных */
766
+ /**
767
+ * Loading state indicator.
768
+ *
769
+ * When true, displays loading template instead of data.
770
+ * Useful during async data fetching operations.
771
+ */
183
772
  loading: _angular_core.InputSignalWithTransform<boolean, string | boolean | undefined>;
184
- /** Функция или имя свойства для получения уникального ключа строки */
773
+ /**
774
+ * Function or property name for obtaining unique row key.
775
+ *
776
+ * Used for efficient change detection and row tracking.
777
+ * Can be a property name (string) or a function that returns unique identifier.
778
+ */
185
779
  rowKey: _angular_core.InputSignal<RowKeyFn<Data> | undefined>;
186
- /** Начинать отсчёт пагинации с 1 (false) или 0 (true) */
780
+ /**
781
+ * Whether to start page count from 0 (true) or 1 (false).
782
+ *
783
+ * Controls the numbering scheme for pagination events.
784
+ * Default is true (0-based indexing).
785
+ */
187
786
  pageStartFromZero: _angular_core.InputSignalWithTransform<boolean, string | boolean | undefined>;
188
- /** Событие запроса данных */
787
+ /**
788
+ * Event emitted when requesting data for a new page.
789
+ *
790
+ * Fired in pagination and infinity scroll modes when user navigates
791
+ * to a different page or scrolls near the end of current data.
792
+ *
793
+ * @example
794
+ * ```typescript
795
+ * onPageChange(event: GridPageChangeEvent) {
796
+ * this.loadData(event.page, event.rows);
797
+ * }
798
+ * ```
799
+ */
189
800
  pageChange: _angular_core.OutputEmitterRef<GridPageChangeEvent>;
190
- /** Событие изменения сортировки */
801
+ /**
802
+ * Event emitted when sort order changes.
803
+ *
804
+ * Fired when user clicks on a sortable column header.
805
+ * Contains the sort key and direction (asc/desc).
806
+ *
807
+ * @example
808
+ * ```typescript
809
+ * onSortChange(event: GridSortEvent<User>) {
810
+ * this.data = sortBy(this.data, event.key, event.order);
811
+ * }
812
+ * ```
813
+ */
191
814
  sortChange: _angular_core.OutputEmitterRef<GridSortEvent<Data>>;
192
- /** Событие изменения выбранных строк */
815
+ /**
816
+ * Event emitted when selected rows change.
817
+ *
818
+ * Fired when user selects or deselects rows.
819
+ * Contains array of currently selected row keys.
820
+ */
193
821
  selectChange: _angular_core.OutputEmitterRef<GridSelectEvent<Data>>;
194
- /** Событие клика по строке */
822
+ /**
823
+ * Event emitted when a row is clicked.
824
+ *
825
+ * Contains the clicked row data and its index.
826
+ */
195
827
  rowClick: _angular_core.OutputEmitterRef<GridRowClickEvent<Data>>;
196
- /** Событие клика по ячейке */
828
+ /**
829
+ * Event emitted when a cell is clicked.
830
+ *
831
+ * Contains the clicked row, column configuration, and row index.
832
+ */
197
833
  cellClick: _angular_core.OutputEmitterRef<GridCellClickEvent<Data>>;
198
834
  vm: DataGridVm<Data>;
199
835
  selector: Selector<Data>;
@@ -217,14 +853,65 @@ declare class DataGrid<Data extends AnyDict> {
217
853
  private subscription;
218
854
  private observer;
219
855
  constructor();
856
+ /**
857
+ * Computed CSS height value based on fillHeight setting.
858
+ *
859
+ * Returns null when grid should fill container height,
860
+ * or 'auto' when height is content-based.
861
+ */
220
862
  protected get styleHeight(): string | null;
221
863
  protected resolvePinnedData(pr: GridPinnedRow): Partial<Data>;
864
+ /**
865
+ * Handles column header click for sorting.
866
+ *
867
+ * Toggles sort order between ascending and descending for the clicked column.
868
+ * If a different column is clicked, resets to ascending order.
869
+ * Emits sortChange event with current sort state.
870
+ *
871
+ * @param col - Column configuration that was clicked
872
+ */
222
873
  protected onSort(col: GridColumn<Data>): void;
874
+ /**
875
+ * Handles cell click events.
876
+ *
877
+ * Emits cellClick event and handles row selection if selection mode is enabled.
878
+ * Updates the selection state and emits selectChange event accordingly.
879
+ *
880
+ * @param row - Data row that was clicked
881
+ * @param col - Column configuration of the clicked cell
882
+ * @param index - Row index in the dataset
883
+ */
223
884
  protected onCellClick(row: Data, col: GridColumn<Data>, index: number): void;
224
885
  protected isExpandable(column: GridColumn<Data>): boolean;
886
+ /**
887
+ * Handles column expand/collapse toggle.
888
+ *
889
+ * Toggles the expanded state of a column and updates visibility
890
+ * of all dependent columns that reference this column via expandBy property.
891
+ *
892
+ * @param column - Column configuration to expand or collapse
893
+ */
225
894
  protected onExpand(column: GridColumn<Data>): void;
895
+ /**
896
+ * Handles vertical scroll events and updates visible rows.
897
+ *
898
+ * Implements virtual scrolling by calculating which rows should be rendered
899
+ * based on current scroll position. Also handles infinite scroll data loading
900
+ * when user scrolls near the end of available data.
901
+ *
902
+ * @param initial - Whether this is the initial scroll calculation
903
+ */
226
904
  protected onVerticalScroll(initial?: boolean): void;
227
905
  protected onHorizontalScroll(): void;
906
+ /**
907
+ * Handles mouse down event on scrollbar thumb for drag scrolling.
908
+ *
909
+ * Initiates dragging mode and sets up mouse move/up event listeners
910
+ * to track thumb position and update scroll position accordingly.
911
+ * Automatically cleans up listeners when dragging ends.
912
+ *
913
+ * @param e - Mouse down event from scrollbar thumb element
914
+ */
228
915
  protected onThumbDown(e: MouseEvent): void;
229
916
  protected showScrollbar(): void;
230
917
  protected hideScrollbarSoon(delay?: number): void;