@reforgium/data-grid 2.0.2 → 2.1.0
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.
- package/README.md +683 -643
- package/fesm2022/reforgium-data-grid-column-manager.mjs +58 -50
- package/fesm2022/reforgium-data-grid.mjs +142 -49
- package/package.json +1 -1
- package/types/reforgium-data-grid.d.ts +33 -5
package/README.md
CHANGED
|
@@ -1,643 +1,683 @@
|
|
|
1
|
-
# @reforgium/data-grid
|
|
2
|
-
|
|
3
|
-
[](https://www.npmjs.com/package/@reforgium/data-grid)
|
|
4
|
-
[](https://opensource.org/licenses/MIT)
|
|
5
|
-
|
|
6
|
-
**High-performance data grid for Angular (18+).**
|
|
7
|
-
|
|
8
|
-
`@reforgium/data-grid` provides a flexible and performant component for displaying large tabular datasets.
|
|
9
|
-
It focuses on smooth scrolling, predictable layout, and full control over rendering via templates and signals.
|
|
10
|
-
|
|
11
|
-
Designed for **real-world datasets**, not demo tables.
|
|
12
|
-
|
|
13
|
-
---
|
|
14
|
-
|
|
15
|
-
## Features
|
|
16
|
-
|
|
17
|
-
- Horizontal and vertical scrolling
|
|
18
|
-
- Virtual row rendering (smooth, no jumps)
|
|
19
|
-
- Infinity scroll (loads data when reaching the bottom)
|
|
20
|
-
- Jitter-free fixed (sticky) columns
|
|
21
|
-
- Two-line headers max, with ellipsis and tooltip
|
|
22
|
-
- Declarative column DSL (`<re-dg-column>`) *[NEW in 2.0.0]*
|
|
23
|
-
- Column expanders (hidden columns via toggler)
|
|
24
|
-
- Scrollable overlay scrollbar
|
|
25
|
-
- Pinned rows (top and bottom)
|
|
26
|
-
- Custom templates for headers, cells, pinned rows, icons
|
|
27
|
-
- Skeleton loading rows for pagination/infinity *[NEW in 2.0.0]*
|
|
28
|
-
- Row selection (single / multi)
|
|
29
|
-
- Signals-based API (`signal()` first)
|
|
30
|
-
- Paginator component *[NEW in 1.1.0]*
|
|
31
|
-
- Column manager dropdown *[NEW in 2.0.0]*
|
|
32
|
-
|
|
33
|
-
---
|
|
34
|
-
|
|
35
|
-
## Installation
|
|
36
|
-
|
|
37
|
-
```bash
|
|
38
|
-
npm install @reforgium/data-grid
|
|
39
|
-
```
|
|
40
|
-
|
|
41
|
-
```ts
|
|
42
|
-
import { DataGrid } from '@reforgium/data-grid';
|
|
43
|
-
import { DataGridPaginator } from '@reforgium/data-grid/paginator';
|
|
44
|
-
import { DataGridColumnManager } from '@reforgium/data-grid/column-manager';
|
|
45
|
-
|
|
46
|
-
@Component({ imports: [DataGrid, DataGridPaginator] })
|
|
47
|
-
export class SomeComponent {
|
|
48
|
-
}
|
|
49
|
-
```
|
|
50
|
-
|
|
51
|
-
```html
|
|
52
|
-
|
|
53
|
-
<re-data-grid
|
|
54
|
-
mode="infinity"
|
|
55
|
-
[data]="users"
|
|
56
|
-
[columns]="columns"
|
|
57
|
-
[pageSize]="50"
|
|
58
|
-
[loading]="loading"
|
|
59
|
-
(pageChange)="loadMore($event)"
|
|
60
|
-
/>
|
|
61
|
-
```
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
-
|
|
101
|
-
- `
|
|
102
|
-
- `
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
- `
|
|
107
|
-
- `
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
-
|
|
152
|
-
-
|
|
153
|
-
-
|
|
154
|
-
-
|
|
155
|
-
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
- `
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
|
175
|
-
|
|
176
|
-
|
|
|
177
|
-
|
|
|
178
|
-
|
|
|
179
|
-
|
|
|
180
|
-
|
|
|
181
|
-
|
|
|
182
|
-
|
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
-
|
|
195
|
-
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
Template
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
-
|
|
324
|
-
- `
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
-
|
|
346
|
-
-
|
|
347
|
-
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
- `--re-data-grid-
|
|
368
|
-
- `--re-data-grid-
|
|
369
|
-
- `--re-data-grid-
|
|
370
|
-
- `--re-data-grid-
|
|
371
|
-
- `--re-data-grid-separator` -
|
|
372
|
-
- `--re-data-grid-
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
- `--re-data-grid-
|
|
378
|
-
- `--re-data-grid-
|
|
379
|
-
- `--re-data-grid-
|
|
380
|
-
- `--re-data-grid-
|
|
381
|
-
- `--re-data-grid-
|
|
382
|
-
- `--re-data-grid-
|
|
383
|
-
- `--re-data-grid-
|
|
384
|
-
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
- `--re-data-grid-
|
|
388
|
-
- `--re-data-grid-
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
- `--re-data-grid-
|
|
395
|
-
- `--re-data-grid-
|
|
396
|
-
- `--re-data-grid-
|
|
397
|
-
- `--re-data-grid-
|
|
398
|
-
|
|
399
|
-
|
|
400
|
-
|
|
401
|
-
- `--re-data-grid-
|
|
402
|
-
|
|
403
|
-
|
|
404
|
-
|
|
405
|
-
|
|
406
|
-
|
|
407
|
-
- `--re-data-grid-
|
|
408
|
-
- `--re-data-grid-
|
|
409
|
-
- `--re-data-grid-
|
|
410
|
-
- `--re-data-grid-
|
|
411
|
-
- `--re-data-grid-
|
|
412
|
-
|
|
413
|
-
|
|
414
|
-
|
|
415
|
-
- `--re-data-grid-
|
|
416
|
-
- `--re-data-grid-
|
|
417
|
-
- `--re-data-grid-
|
|
418
|
-
- `--re-data-grid-
|
|
419
|
-
- `--re-data-grid-
|
|
420
|
-
- `--re-data-grid-
|
|
421
|
-
|
|
422
|
-
|
|
423
|
-
|
|
424
|
-
|
|
425
|
-
|
|
426
|
-
- `--re-data-grid-
|
|
427
|
-
- `--re-data-grid-
|
|
428
|
-
- `--re-data-grid-
|
|
429
|
-
|
|
430
|
-
|
|
431
|
-
|
|
432
|
-
- `--re-data-grid-
|
|
433
|
-
- `--re-data-grid-
|
|
434
|
-
- `--re-data-grid-
|
|
435
|
-
|
|
436
|
-
|
|
437
|
-
|
|
438
|
-
- `--re-data-grid-
|
|
439
|
-
- `--re-data-grid-
|
|
440
|
-
- `--re-data-grid-
|
|
441
|
-
|
|
442
|
-
|
|
443
|
-
|
|
444
|
-
|
|
445
|
-
|
|
446
|
-
|
|
447
|
-
|
|
448
|
-
|
|
449
|
-
|
|
450
|
-
|
|
451
|
-
|
|
452
|
-
|
|
453
|
-
|
|
454
|
-
|
|
455
|
-
|
|
456
|
-
|
|
457
|
-
|
|
458
|
-
|
|
459
|
-
|
|
460
|
-
|
|
461
|
-
|
|
462
|
-
|
|
463
|
-
|
|
464
|
-
|
|
465
|
-
|
|
466
|
-
|
|
467
|
-
|
|
468
|
-
|
|
469
|
-
|
|
470
|
-
|
|
471
|
-
|
|
472
|
-
|
|
473
|
-
|
|
474
|
-
|
|
475
|
-
|
|
476
|
-
|
|
477
|
-
|
|
478
|
-
|
|
479
|
-
|
|
480
|
-
|
|
481
|
-
|
|
482
|
-
|
|
483
|
-
|
|
484
|
-
|
|
485
|
-
|
|
486
|
-
|
|
487
|
-
|
|
488
|
-
|
|
489
|
-
|
|
490
|
-
|
|
491
|
-
|
|
492
|
-
|
|
493
|
-
|
|
494
|
-
|
|
495
|
-
|
|
496
|
-
|
|
497
|
-
|
|
498
|
-
|
|
499
|
-
|
|
500
|
-
|
|
501
|
-
|
|
502
|
-
|
|
503
|
-
|
|
504
|
-
|
|
505
|
-
|
|
506
|
-
|
|
507
|
-
|
|
508
|
-
|
|
509
|
-
|
|
510
|
-
|
|
511
|
-
|
|
512
|
-
|
|
513
|
-
|
|
514
|
-
|
|
515
|
-
|
|
516
|
-
|
|
517
|
-
|
|
518
|
-
|
|
519
|
-
|
|
520
|
-
|
|
521
|
-
|
|
522
|
-
|
|
523
|
-
|
|
524
|
-
|
|
525
|
-
|
|
526
|
-
|
|
527
|
-
|
|
528
|
-
|
|
529
|
-
- `
|
|
530
|
-
- `
|
|
531
|
-
|
|
532
|
-
|
|
533
|
-
|
|
534
|
-
|
|
535
|
-
|
|
536
|
-
|
|
537
|
-
- `--re-data-grid-paginator-
|
|
538
|
-
- `--re-data-grid-paginator-
|
|
539
|
-
|
|
540
|
-
|
|
541
|
-
|
|
542
|
-
- `--re-data-grid-paginator-
|
|
543
|
-
- `--re-data-grid-paginator-
|
|
544
|
-
|
|
545
|
-
|
|
546
|
-
|
|
547
|
-
|
|
548
|
-
|
|
549
|
-
|
|
550
|
-
|
|
551
|
-
|
|
552
|
-
|
|
553
|
-
|
|
554
|
-
|
|
555
|
-
|
|
556
|
-
|
|
557
|
-
|
|
558
|
-
|
|
559
|
-
|
|
560
|
-
|
|
561
|
-
|
|
562
|
-
|
|
563
|
-
|
|
564
|
-
|
|
565
|
-
|
|
566
|
-
|
|
567
|
-
|
|
568
|
-
|
|
569
|
-
-
|
|
570
|
-
|
|
571
|
-
|
|
572
|
-
|
|
573
|
-
|
|
574
|
-
|
|
575
|
-
|
|
576
|
-
|
|
577
|
-
|
|
578
|
-
|
|
579
|
-
|
|
580
|
-
|
|
581
|
-
|
|
582
|
-
|
|
583
|
-
|
|
584
|
-
|
|
585
|
-
|
|
586
|
-
|
|
587
|
-
|
|
588
|
-
|
|
589
|
-
|
|
590
|
-
|
|
591
|
-
|
|
592
|
-
|
|
593
|
-
|
|
594
|
-
|
|
595
|
-
|
|
596
|
-
|
|
597
|
-
|
|
598
|
-
|
|
599
|
-
|
|
600
|
-
|
|
601
|
-
|
|
602
|
-
###
|
|
603
|
-
|
|
604
|
-
|
|
605
|
-
|
|
606
|
-
|
|
607
|
-
|
|
608
|
-
|
|
609
|
-
|
|
610
|
-
|
|
611
|
-
|
|
612
|
-
|
|
613
|
-
|
|
614
|
-
|
|
615
|
-
|
|
616
|
-
|
|
617
|
-
|
|
618
|
-
|
|
619
|
-
|
|
620
|
-
|
|
621
|
-
|
|
622
|
-
|
|
623
|
-
|
|
624
|
-
|
|
625
|
-
|
|
626
|
-
|
|
627
|
-
|
|
628
|
-
|
|
629
|
-
|
|
630
|
-
|
|
631
|
-
|
|
632
|
-
|
|
633
|
-
|
|
634
|
-
|
|
635
|
-
|
|
636
|
-
-
|
|
637
|
-
-
|
|
638
|
-
-
|
|
639
|
-
|
|
640
|
-
|
|
641
|
-
|
|
642
|
-
|
|
643
|
-
|
|
1
|
+
# @reforgium/data-grid
|
|
2
|
+
|
|
3
|
+
[](https://www.npmjs.com/package/@reforgium/data-grid)
|
|
4
|
+
[](https://opensource.org/licenses/MIT)
|
|
5
|
+
|
|
6
|
+
**High-performance data grid for Angular (18+).**
|
|
7
|
+
|
|
8
|
+
`@reforgium/data-grid` provides a flexible and performant component for displaying large tabular datasets.
|
|
9
|
+
It focuses on smooth scrolling, predictable layout, and full control over rendering via templates and signals.
|
|
10
|
+
|
|
11
|
+
Designed for **real-world datasets**, not demo tables.
|
|
12
|
+
|
|
13
|
+
---
|
|
14
|
+
|
|
15
|
+
## Features
|
|
16
|
+
|
|
17
|
+
- Horizontal and vertical scrolling
|
|
18
|
+
- Virtual row rendering (smooth, no jumps)
|
|
19
|
+
- Infinity scroll (loads data when reaching the bottom)
|
|
20
|
+
- Jitter-free fixed (sticky) columns
|
|
21
|
+
- Two-line headers max, with ellipsis and tooltip
|
|
22
|
+
- Declarative column DSL (`<re-dg-column>`) *[NEW in 2.0.0]*
|
|
23
|
+
- Column expanders (hidden columns via toggler)
|
|
24
|
+
- Scrollable overlay scrollbar
|
|
25
|
+
- Pinned rows (top and bottom)
|
|
26
|
+
- Custom templates for headers, cells, pinned rows, icons
|
|
27
|
+
- Skeleton loading rows for pagination/infinity *[NEW in 2.0.0]*
|
|
28
|
+
- Row selection (single / multi)
|
|
29
|
+
- Signals-based API (`signal()` first)
|
|
30
|
+
- Paginator component *[NEW in 1.1.0]*
|
|
31
|
+
- Column manager dropdown *[NEW in 2.0.0]*
|
|
32
|
+
|
|
33
|
+
---
|
|
34
|
+
|
|
35
|
+
## Installation
|
|
36
|
+
|
|
37
|
+
```bash
|
|
38
|
+
npm install @reforgium/data-grid
|
|
39
|
+
```
|
|
40
|
+
|
|
41
|
+
```ts
|
|
42
|
+
import { DataGrid } from '@reforgium/data-grid';
|
|
43
|
+
import { DataGridPaginator } from '@reforgium/data-grid/paginator';
|
|
44
|
+
import { DataGridColumnManager } from '@reforgium/data-grid/column-manager';
|
|
45
|
+
|
|
46
|
+
@Component({ imports: [DataGrid, DataGridPaginator] })
|
|
47
|
+
export class SomeComponent {
|
|
48
|
+
}
|
|
49
|
+
```
|
|
50
|
+
|
|
51
|
+
```html
|
|
52
|
+
|
|
53
|
+
<re-data-grid
|
|
54
|
+
mode="infinity"
|
|
55
|
+
[data]="users"
|
|
56
|
+
[columns]="columns"
|
|
57
|
+
[pageSize]="50"
|
|
58
|
+
[loading]="loading"
|
|
59
|
+
(pageChange)="loadMore($event)"
|
|
60
|
+
/>
|
|
61
|
+
```
|
|
62
|
+
---
|
|
63
|
+
|
|
64
|
+
## Migration notes (1.1.0 -> 2.0.0)
|
|
65
|
+
|
|
66
|
+
- **Column tooltips are now explicit.** Use `tooltip` on a column (string / function / `TemplateRef`) to show a popover on hover.
|
|
67
|
+
- **New column manager entrypoint.** Import it from `@reforgium/data-grid/column-manager` and wire `columns` + `columnsChange`.
|
|
68
|
+
- **Sticky columns use sides.** Prefer `sticky="left"` / `sticky="right"`; legacy `true` still maps to left.
|
|
69
|
+
|
|
70
|
+
## Configuration
|
|
71
|
+
|
|
72
|
+
### Global defaults provider
|
|
73
|
+
|
|
74
|
+
You can override default input values for all grid instances via DI:
|
|
75
|
+
|
|
76
|
+
```ts
|
|
77
|
+
import { provideDataGridDefaults } from '@reforgium/data-grid';
|
|
78
|
+
|
|
79
|
+
export const appConfig: ApplicationConfig = {
|
|
80
|
+
providers: [
|
|
81
|
+
provideDataGridDefaults({
|
|
82
|
+
mode: 'pagination',
|
|
83
|
+
hasIndexColumn: true,
|
|
84
|
+
pageSize: 50,
|
|
85
|
+
}),
|
|
86
|
+
],
|
|
87
|
+
};
|
|
88
|
+
```
|
|
89
|
+
|
|
90
|
+
Supported default fields:
|
|
91
|
+
|
|
92
|
+
- `mode`
|
|
93
|
+
- `hasIndexColumn`
|
|
94
|
+
- `selection`
|
|
95
|
+
- `pageSize`
|
|
96
|
+
- `rowHeight`
|
|
97
|
+
- `headerHeight`
|
|
98
|
+
- `height`
|
|
99
|
+
- `virtualBuffer`
|
|
100
|
+
- `loadingMode`
|
|
101
|
+
- `deferContent`
|
|
102
|
+
- `deferHeader`
|
|
103
|
+
- `deferPinned`
|
|
104
|
+
- `deferCells`
|
|
105
|
+
- `pageStartFromZero`
|
|
106
|
+
- `translations`
|
|
107
|
+
- `debounce`
|
|
108
|
+
|
|
109
|
+
### Inputs
|
|
110
|
+
|
|
111
|
+
| Parameter | Type | Default | Description | |
|
|
112
|
+
|--------------------|--------------------------------------------------|--------------------|-------------------------------------------------------------------------------------------------|------------------|
|
|
113
|
+
| data | `T[]` | `[]` | Data array to render | |
|
|
114
|
+
| columns | `GridColumn<T>[]` | `[]` | Programmatic column configuration (used when no declarative columns are provided) | |
|
|
115
|
+
| headerGroups | `GridHeaderGroup<T>[]` | `[]` | Optional top header row groups (`from`..`to`) for 2-level headers | *[NEW in 2.0.0]* |
|
|
116
|
+
| pinnedRows | `GridPinnedRow<T>[]` | `[]` | Top / bottom pinned rows | |
|
|
117
|
+
| isRowSticky | `(row: T, index: number) => boolean` | `undefined` | Predicate that marks rows as sticky at the top | |
|
|
118
|
+
| getRowTemplate | `(row: T, index: number) => TemplateRef \| null` | `undefined` | Optional resolver for custom row template | |
|
|
119
|
+
| mode | `'none' \| 'pagination' \| 'infinity'` | `'pagination'` | Grid operation mode | |
|
|
120
|
+
| pageSize | `number` | `20` | Number of items per page (pagination/infinity modes) | |
|
|
121
|
+
| pageStartFromZero | `boolean` | `true` | If true, page indexing starts from 0, otherwise from 1 | |
|
|
122
|
+
| hasIndexColumn | `boolean` | `false` | If true, an index column will be shown | |
|
|
123
|
+
| selection | `GridSelection<T>` | `{ mode: 'none' }` | Row selection configuration | |
|
|
124
|
+
| rowHeight | `number` | `40` | Fixed height of each row in pixels | *[FIX in 1.1.0]* |
|
|
125
|
+
| virtualBuffer | `number` | `8` | Extra rows to render above/below viewport to reduce flickering during scrolling | |
|
|
126
|
+
| lockVerticalScroll | `boolean` | `false` | Locks vertical scrolling while keeping horizontal scroll enabled | |
|
|
127
|
+
| height | `number \| 'full' \| 'default'` | `'default'` | Grid height configuration (`number` for px, `'full'` for 100%, `'default'` for CSS variable) | |
|
|
128
|
+
| loading | `boolean` | `false` | Displays loading state template when true | |
|
|
129
|
+
| loadingMode | `'spinner' \| 'skeleton'` | `'spinner'` | Loading rendering mode (`spinner` shows centered spinner, `skeleton` enables row skeleton mode) | *[NEW in 2.0.0]* |
|
|
130
|
+
| deferContent | `boolean` | `true` | Defers rendering of main content (code-splitting) | |
|
|
131
|
+
| deferHeader | `boolean` | `false` | Defers rendering of header (groups + columns) | |
|
|
132
|
+
| deferPinned | `boolean` | `false` | Defers rendering of pinned rows (top + bottom) | |
|
|
133
|
+
| deferCells | `boolean` | `false` | Defers rendering of cell content | |
|
|
134
|
+
| rowKey | `DataKey<T> \| ((item: T) => string \| number)` | `undefined` | Property name or function to resolve unique row key | |
|
|
135
|
+
|
|
136
|
+
When selection mode is `'single'` or `'multi'`, provide a `key` (data property) and optionally `defaultSelected`.
|
|
137
|
+
|
|
138
|
+
Loading behavior:
|
|
139
|
+
|
|
140
|
+
- `loadingMode="spinner"`: shows centered spinner over grid content.
|
|
141
|
+
- `loadingMode="skeleton"` + `mode="infinity"` + `loading=true`: appends 4 skeleton rows at the end of the current data.
|
|
142
|
+
- `loadingMode="skeleton"` + `mode="pagination"` + `loading=true` + empty data: renders 4 skeleton rows in the table body.
|
|
143
|
+
|
|
144
|
+
Sticky rows:
|
|
145
|
+
|
|
146
|
+
- Provide `isRowSticky` to mark rows that should stick to the top during scroll.
|
|
147
|
+
- You can customize the sticky row rendering with `reDataGridStickyRow` template.
|
|
148
|
+
|
|
149
|
+
```html
|
|
150
|
+
|
|
151
|
+
<re-data-grid [data]="items" [columns]="columns" [isRowSticky]="isSticky">
|
|
152
|
+
<ng-template reDataGridStickyRow let-row let-index="index">
|
|
153
|
+
<div class="my-sticky-row">{{ index + 1 }}. {{ row.name }}</div>
|
|
154
|
+
</ng-template>
|
|
155
|
+
</re-data-grid>
|
|
156
|
+
```
|
|
157
|
+
|
|
158
|
+
Row templates:
|
|
159
|
+
|
|
160
|
+
- Provide `getRowTemplate` to select a custom row template per row.
|
|
161
|
+
- Use `reDataGridRow` as a default row template.
|
|
162
|
+
|
|
163
|
+
```html
|
|
164
|
+
|
|
165
|
+
<re-data-grid [data]="items" [columns]="columns" [getRowTemplate]="rowTpl">
|
|
166
|
+
<ng-template reDataGridRow let-index="index">
|
|
167
|
+
<div class="my-row">{{ index + 1 }}. {{ row.name }}</div>
|
|
168
|
+
</ng-template>
|
|
169
|
+
</re-data-grid>
|
|
170
|
+
```
|
|
171
|
+
|
|
172
|
+
### Outputs
|
|
173
|
+
|
|
174
|
+
| Event | Type | Description | |
|
|
175
|
+
|-----------------|-------------------------------|--------------------------------------------------------|------------------|
|
|
176
|
+
| cellClick | `GridCellClickEvent<T>` | Emitted when a cell is clicked (includes native event) | *[UPD in 2.0.0]* |
|
|
177
|
+
| cellContext | `GridCellContextEvent<T>` | Emitted on cell context menu | *[NEW in 2.0.0]* |
|
|
178
|
+
| cellDoubleClick | `GridCellDoubleClickEvent<T>` | Emitted when a cell is double-clicked | *[NEW in 2.0.0]* |
|
|
179
|
+
| rowClick | `GridRowClickEvent<T>` | Emitted when a row is clicked (includes native event) | *[UPD in 2.0.0]* |
|
|
180
|
+
| rowContext | `GridRowContextEvent<T>` | Emitted on row context menu | *[NEW in 2.0.0]* |
|
|
181
|
+
| rowDoubleClick | `GridRowDoubleClickEvent<T>` | Emitted when a row is double-clicked | *[NEW in 2.0.0]* |
|
|
182
|
+
| sortChange | `GridSortEvent<T>` | Emitted when sort order changes | |
|
|
183
|
+
| pageChange | `GridPageChangeEvent` | Emitted when requesting data for a new page | |
|
|
184
|
+
| selectChange | `GridSelectEvent<T>` | Emitted when selected rows change | |
|
|
185
|
+
|
|
186
|
+
Notes:
|
|
187
|
+
|
|
188
|
+
- A cell click also triggers the row click event (bubbling), so listen to one or stop propagation if needed.
|
|
189
|
+
|
|
190
|
+
### GridColumn<T> reference
|
|
191
|
+
|
|
192
|
+
`columns` accepts `GridColumn<T>[]`, where `GridColumn<T>` is a union of three column variants:
|
|
193
|
+
|
|
194
|
+
- default column (`type` + optional `typeParams`)
|
|
195
|
+
- value column (`value` + required `track`)
|
|
196
|
+
- template column (`renderTemplate` + required `track`)
|
|
197
|
+
|
|
198
|
+
Common (base) fields:
|
|
199
|
+
|
|
200
|
+
| Field | Type | Description |
|
|
201
|
+
|-------------------------|---------------------------------------------------------------------|---------------------------------------------------------------------------------|
|
|
202
|
+
| `sortKey` | `string` | Alternative key used for sorting when display `key` differs from sortable data. |
|
|
203
|
+
| `sticky` | `'left' \| 'right' \| true` | Keeps the column fixed while horizontally scrolling. `true` pins to the left. |
|
|
204
|
+
| `expandBy` | `DataKey<T>` | Data key that controls expand/collapse behavior for the column. |
|
|
205
|
+
| `flex` | `number` | Flex grow factor for width distribution in flexible layouts. |
|
|
206
|
+
| `minWidth` / `maxWidth` | `number` | Column width limits in pixels. |
|
|
207
|
+
| `cellClass` | `string \| ((row: T) => string)` | Static CSS class or resolver per row. |
|
|
208
|
+
| `tooltip` | `string \| ((row: T) => string) \| TemplateRef<GridTooltipContext>` | Popover tooltip content shown on cell hover. |
|
|
209
|
+
|
|
210
|
+
Renderer-specific fields:
|
|
211
|
+
|
|
212
|
+
| Variant | Fields | Notes |
|
|
213
|
+
|-------------------|-----------------------------------------------------------------------------------------------------------|-------------------------------------------------------------------------------------------------------|
|
|
214
|
+
| Built-in renderer | `type?: 'plain' \| 'date' \| 'number' \| 'index' \| 'checkbox'`, `typeParams?: any`, `defaultValue?: any` | `defaultValue` is used when source value is `null`/`undefined`; `typeParams` passes formatter config. |
|
|
215
|
+
| Value renderer | `value: (row: T) => string \| number`, `track: (row: T) => string` | `track` is required for stable row identity and efficient updates. |
|
|
216
|
+
| Template renderer | `renderTemplate: TemplateRef<...>`, `track: (row: T) => string` | `track` is required when rendering through Angular templates. |
|
|
217
|
+
|
|
218
|
+
### Declarative columns *[NEW in 2.0.0]*
|
|
219
|
+
|
|
220
|
+
You can define columns directly in markup via `<re-dg-column>`, then the grid will normalize them to `GridColumn<T>` internally.
|
|
221
|
+
|
|
222
|
+
```html
|
|
223
|
+
|
|
224
|
+
<re-data-grid [data]="items" [rowKey]="'id'">
|
|
225
|
+
<re-dg-column key="name">
|
|
226
|
+
<ng-template reHeader>Name</ng-template>
|
|
227
|
+
<ng-template reCell let-row="row">{{ row.name }}</ng-template>
|
|
228
|
+
</re-dg-column>
|
|
229
|
+
|
|
230
|
+
<re-dg-column key="age" sortKey="age">
|
|
231
|
+
<ng-template reHeader>Age</ng-template>
|
|
232
|
+
<ng-template reCell let-row="row">{{ row.age }}</ng-template>
|
|
233
|
+
</re-dg-column>
|
|
234
|
+
|
|
235
|
+
<re-dg-column key="extra" sticky="left" expandBy="age" disabled>
|
|
236
|
+
<ng-template reHeader>Extra</ng-template>
|
|
237
|
+
<ng-template reCell let-row="row">{{ row.extra }}</ng-template>
|
|
238
|
+
</re-dg-column>
|
|
239
|
+
</re-data-grid>
|
|
240
|
+
```
|
|
241
|
+
|
|
242
|
+
Notes:
|
|
243
|
+
|
|
244
|
+
- If at least one `<re-dg-column>` is present, declarative columns are used as the base configuration.
|
|
245
|
+
- When used with column manager state, `visible`, `disabled`, and `sticky` are taken from state when defined.
|
|
246
|
+
- `reHeader` maps to `headerTemplate`.
|
|
247
|
+
- `reCell` receives value as `$implicit`, and the row is available as `let-row="row"` via `RenderTemplateData`.
|
|
248
|
+
- Most `GridColumn<T>` fields are available as `<re-dg-column>` inputs (`sortKey`, `sticky`, `expandBy`, `disabled`, `width`, `minWidth`, `maxWidth`, `flex`, `align`, `cellClass`, `type`, `typeParams`, `defaultValue`, `value`, `track`, `tooltip`).
|
|
249
|
+
- `sticky` accepts `'left' | 'right'`; legacy `true` maps to `'left'` for backward compatibility.
|
|
250
|
+
|
|
251
|
+
### Tooltip
|
|
252
|
+
|
|
253
|
+
`tooltip` is opt-in per column and shows a popover on cell hover.
|
|
254
|
+
|
|
255
|
+
```ts
|
|
256
|
+
columns = [
|
|
257
|
+
{ key: 'email', header: 'Email', tooltip: (row) => row.email },
|
|
258
|
+
{ key: 'status', header: 'Status', tooltip: 'User status' },
|
|
259
|
+
];
|
|
260
|
+
```
|
|
261
|
+
|
|
262
|
+
Template tooltip:
|
|
263
|
+
|
|
264
|
+
```html
|
|
265
|
+
|
|
266
|
+
<ng-template #tip let-row let-col="col" let-index="index" let-value="value">
|
|
267
|
+
<div><b>{{ col.header }}</b> #{{ index + 1 }}</div>
|
|
268
|
+
<div>{{ value }}</div>
|
|
269
|
+
</ng-template>
|
|
270
|
+
|
|
271
|
+
<re-dg-column key="email" [tooltip]="tip"></re-dg-column>
|
|
272
|
+
```
|
|
273
|
+
|
|
274
|
+
Tooltip template context (`GridTooltipContext`):
|
|
275
|
+
|
|
276
|
+
- `$implicit` / `row`
|
|
277
|
+
- `col`
|
|
278
|
+
- `index`
|
|
279
|
+
- `value`
|
|
280
|
+
|
|
281
|
+
### Header groups *[NEW in 2.0.0]*
|
|
282
|
+
|
|
283
|
+
Use `headerGroups` to render an optional top header row (2-level header layout) above regular column headers.
|
|
284
|
+
|
|
285
|
+
| Field | Type | Description |
|
|
286
|
+
|-----------------|-----------------------------------|------------------------------------------------------------------|
|
|
287
|
+
| `key` | `string` | Unique id of the header group. |
|
|
288
|
+
| `from` | `DataKey<T>` | Start column key (inclusive). |
|
|
289
|
+
| `to` | `DataKey<T>` | End column key (inclusive). If omitted, group covers one column. |
|
|
290
|
+
| `title` | `string` | Plain text title for the group. |
|
|
291
|
+
| `titleTemplate` | `TemplateRef<HeaderTemplateData>` | Template-based title for the group. |
|
|
292
|
+
| `align` | `'left' \| 'center' \| 'right'` | Optional group title alignment (plain title variant). |
|
|
293
|
+
|
|
294
|
+
Notes:
|
|
295
|
+
|
|
296
|
+
- Groups are normalized against visible columns only.
|
|
297
|
+
- Overlapping or invalid ranges are ignored during normalization.
|
|
298
|
+
- Columns not covered by groups are automatically placed into technical spacer groups to keep width alignment.
|
|
299
|
+
|
|
300
|
+
### Templates
|
|
301
|
+
|
|
302
|
+
| Directive | Parameters | Description | |
|
|
303
|
+
|------------------------|-----------------------------------|---------------------------------------------------|------------------|
|
|
304
|
+
| reHeader | - | Declarative header template inside `re-dg-column` | *[NEW in 2.0.0]* |
|
|
305
|
+
| reCell | let-row | Declarative cell template inside `re-dg-column` | *[NEW in 2.0.0]* |
|
|
306
|
+
| reDataGridHeader | key: string | Template for specific column header by key | |
|
|
307
|
+
| reDataGridCell | key: string | Template for specific column cell by key | *[NEW in 1.1.0]* |
|
|
308
|
+
| reDataGridTypeCell | type: string | Template for cells of a specific column type | |
|
|
309
|
+
| reDataGridEmpty | - | Template for the empty state (no data) | |
|
|
310
|
+
| reDataGridLoading | - | Template for the loading state | |
|
|
311
|
+
| reDataGridSortIcon | order: GridSortOrder \| undefined | Template for custom sorting icon | *[NEW in 1.1.0]* |
|
|
312
|
+
| reDataGridExpanderIcon | expanded: boolean | Template for custom expander icon | *[NEW in 1.1.0]* |
|
|
313
|
+
|
|
314
|
+
### CSS Variables
|
|
315
|
+
|
|
316
|
+
Layout / Appearance:
|
|
317
|
+
|
|
318
|
+
- `--re-data-grid-min-height` - component min height (`200px`)
|
|
319
|
+
- `--re-data-grid-height` - component height (`400px`)
|
|
320
|
+
- `--re-data-grid-rounded` - border radius (`var(--radius-md, 6px)`)
|
|
321
|
+
- `--re-data-grid-separator-color` - outer border color (`var(--border-color)`)
|
|
322
|
+
- `--re-data-grid-separator` - outer border (`1px solid var(--re-data-grid-separator-color)`)
|
|
323
|
+
- `--re-data-grid-surface` - table background (`#fff`)
|
|
324
|
+
- `--re-data-grid-active` - active color (`#2a90f4`)
|
|
325
|
+
|
|
326
|
+
Empty / Loading States:
|
|
327
|
+
|
|
328
|
+
- `--re-data-grid-empty-color` - empty text color (`#777`)
|
|
329
|
+
- `--re-data-grid-empty-surface` - empty text background (`transparent`)
|
|
330
|
+
- `--re-data-grid-loading-color` - loading indicator color (`#444`)
|
|
331
|
+
- `--re-data-grid-loading-surface` - loading spinner (`rgba(255,255,255,0.5)`)
|
|
332
|
+
- `--re-data-grid-spinner-size` - spinner size (`2rem`)
|
|
333
|
+
- `--re-data-grid-spinner-width` - spinner ring thickness (`0.25rem`)
|
|
334
|
+
- `--re-data-grid-spinner-track-color` - spinner track color (`rgba(0, 0, 0, 0.12)`)
|
|
335
|
+
- `--re-data-grid-skeleton-width` - skeleton line width (`100%`)
|
|
336
|
+
- `--re-data-grid-skeleton-height` - skeleton line height (`100%`)
|
|
337
|
+
- `--re-data-grid-skeleton-rounded` - skeleton border radius (`var(--re-data-grid-rounded, 0.75rem)`)
|
|
338
|
+
- `--re-data-grid-skeleton-line` - skeleton base color (`#e7ebf0`)
|
|
339
|
+
- `--re-data-grid-skeleton-shine` - skeleton highlight color (`rgba(255, 255, 255, 0.8)`)
|
|
340
|
+
|
|
341
|
+
Tooltip:
|
|
342
|
+
|
|
343
|
+
- `--re-data-grid-tooltip-surface` - tooltip background (`#0f172a`)
|
|
344
|
+
- `--re-data-grid-tooltip-color` - tooltip text color (`#f8fafc`)
|
|
345
|
+
- `--re-data-grid-tooltip-radius` - tooltip radius (`0.5rem`)
|
|
346
|
+
- `--re-data-grid-tooltip-padding` - tooltip padding (`0.4rem 0.6rem`)
|
|
347
|
+
- `--re-data-grid-tooltip-shadow` - tooltip shadow (`0 8px 24px rgba(15, 23, 42, 0.25)`)
|
|
348
|
+
- `--re-data-grid-tooltip-z` - tooltip z-index (`60`)
|
|
349
|
+
|
|
350
|
+
Note: for `--re-data-grid-skeleton-height` it's usually better to use percentages (for example `60%` / `70%`) so the line scales naturally with row height.
|
|
351
|
+
|
|
352
|
+
Scrollbar:
|
|
353
|
+
|
|
354
|
+
- `--re-data-grid-scrollbar-size` - track size (`4px`)
|
|
355
|
+
- `--re-data-grid-scrollbar-offset` - inner offset (`2px`)
|
|
356
|
+
- `--re-data-grid-scrollbar-track-rounded` - track radius (`0.25rem`)
|
|
357
|
+
- `--re-data-grid-scrollbar-track-surface` - track surface (`transparent`)
|
|
358
|
+
- `--re-data-grid-scrollbar-thumb-size` - thumb size (`8px`)
|
|
359
|
+
- `--re-data-grid-scrollbar-thumb-color` - thumb color (`rgba(0,0,0,0.25)`)
|
|
360
|
+
- `--re-data-grid-scrollbar-thumb-active-color` - thumb active color (`rgba(0,0,0,0.45)`)
|
|
361
|
+
- `--re-data-grid-scrollbar-thumb-rounded` - thumb radius (`var(--re-data-grid-scrollbar-track-rounded)`)
|
|
362
|
+
|
|
363
|
+
Header:
|
|
364
|
+
|
|
365
|
+
- `--re-data-grid-header-rounded` - header corner radius (`var(--re-data-grid-rounded)`)
|
|
366
|
+
- `--re-data-grid-header-surface` - header area background (`#fff`)
|
|
367
|
+
- `--re-data-grid-header-row-height` - main header row height (`40px`)
|
|
368
|
+
- `--re-data-grid-header-row-separator-color` - main header separator color (`#ccc`)
|
|
369
|
+
- `--re-data-grid-header-row-separator` - main header separator (`1px solid var(--re-data-grid-header-row-separator-color)`)
|
|
370
|
+
- `--re-data-grid-header-group-row-height` - group header row height (`var(--re-data-grid-header-row-height)`)
|
|
371
|
+
- `--re-data-grid-header-group-row-separator-color` - group header separator color (`var(--re-data-grid-header-row-separator-color)`)
|
|
372
|
+
- `--re-data-grid-header-group-row-separator` - group header separator (`1px solid var(--re-data-grid-header-group-row-separator-color)`)
|
|
373
|
+
|
|
374
|
+
Header Cells:
|
|
375
|
+
|
|
376
|
+
- `--re-data-grid-header-cell-font-weight` - font weight (`600`)
|
|
377
|
+
- `--re-data-grid-header-cell-font-size` - font size (`0.8rem`)
|
|
378
|
+
- `--re-data-grid-header-cell-color` - text color (`#000`)
|
|
379
|
+
- `--re-data-grid-header-cell-surface` - cell background (`#fafafa`)
|
|
380
|
+
- `--re-data-grid-header-group-cell-font-weight` - group font weight (`var(--re-data-grid-header-cell-font-weight)`)
|
|
381
|
+
- `--re-data-grid-header-group-cell-font-size` - group font size (`var(--re-data-grid-header-cell-font-size)`)
|
|
382
|
+
- `--re-data-grid-header-group-cell-color` - group text color (`var(--re-data-grid-header-cell-color)`)
|
|
383
|
+
- `--re-data-grid-header-group-cell-surface` - group cell background (`var(--re-data-grid-header-cell-surface)`)
|
|
384
|
+
|
|
385
|
+
Footer:
|
|
386
|
+
|
|
387
|
+
- `--re-data-grid-footer-separator-color` - separator color (`#ccc`)
|
|
388
|
+
- `--re-data-grid-footer-separator` - separator line (`1px solid var(--re-data-grid-footer-separator-color)`)
|
|
389
|
+
- `--re-data-grid-footer-surface` - footer background (`#fff`)
|
|
390
|
+
|
|
391
|
+
Rows:
|
|
392
|
+
|
|
393
|
+
- `--re-data-grid-row-separator-color` - row separator color (`#bbb`)
|
|
394
|
+
- `--re-data-grid-row-separator` - separator line (`1px solid var(--re-data-grid-row-separator-color)`)
|
|
395
|
+
- `--re-data-grid-row-odd-surface` - odd rows background (`var(--re-data-grid-cell-surface)`)
|
|
396
|
+
- `--re-data-grid-row-hover-surface` - hover rows background (`var(--re-data-grid-cell-surface)`)
|
|
397
|
+
- `--re-data-grid-row-hover-color` - hover rows text color (`var(--re-data-grid-cell-color)`)
|
|
398
|
+
|
|
399
|
+
Columns:
|
|
400
|
+
|
|
401
|
+
- `--re-data-grid-column-separator-color` - column divider color (`transparent`)
|
|
402
|
+
- `--re-data-grid-column-separator` - column divider (`1px solid var(--re-data-grid-column-separator-color)`)
|
|
403
|
+
- `--re-data-grid-column-odd-surface` - odd column background (`var(--re-data-grid-cell-surface)`)
|
|
404
|
+
|
|
405
|
+
Cells:
|
|
406
|
+
|
|
407
|
+
- `--re-data-grid-cell-paddings` - inner paddings (`0.4rem 0.625rem`)
|
|
408
|
+
- `--re-data-grid-cell-font-weight` - font weight (`400`)
|
|
409
|
+
- `--re-data-grid-cell-font-size` - font size (`0.75rem`)
|
|
410
|
+
- `--re-data-grid-cell-color` - text color (`#000`)
|
|
411
|
+
- `--re-data-grid-cell-surface` - cell background (`#fff`)
|
|
412
|
+
|
|
413
|
+
Checkbox:
|
|
414
|
+
|
|
415
|
+
- `--re-data-grid-checkbox-size` - checkbox size (`20px`)
|
|
416
|
+
- `--re-data-grid-checkbox-stroke` - checkbox border width (`2px`)
|
|
417
|
+
- `--re-data-grid-checkbox-border` - checkbox border color (`var(--border-color, #9aa3af)`)
|
|
418
|
+
- `--re-data-grid-checkbox-tick` - checkbox tick color (`var(--surface-neutral, #fff)`)
|
|
419
|
+
- `--re-data-grid-checkbox-surface` - checkbox background (`var(--surface-neutral, #fff)`)
|
|
420
|
+
- `--re-data-grid-checkbox-active-color` - checkbox active color (`var(--primary-color, #2563eb)`)
|
|
421
|
+
|
|
422
|
+
Sticky Cells:
|
|
423
|
+
|
|
424
|
+
- `--re-data-grid-sticky-header-cell-surface` - sticky header cell background (`#fff`)
|
|
425
|
+
- `--re-data-grid-sticky-cell-surface` - sticky body cell background (`#fdfdfd`)
|
|
426
|
+
- `--re-data-grid-sticky-cell-row-odd-surface` - sticky odd rows background (`#fdfdfd`)
|
|
427
|
+
- `--re-data-grid-sticky-cell-left-shadow` - left shadow (`2px 0 2px rgba(0,0,0,0.03)`)
|
|
428
|
+
- `--re-data-grid-sticky-cell-right-shadow` - right shadow (`-2px 0 2px rgba(0,0,0,0.03)`)
|
|
429
|
+
|
|
430
|
+
Pinned Sections:
|
|
431
|
+
|
|
432
|
+
- `--re-data-grid-pinned-surface` - pinned sections background (`#fcfcfc`)
|
|
433
|
+
- `--re-data-grid-pinned-separator-color` - separator color (`#eee`)
|
|
434
|
+
- `--re-data-grid-pinned-separator` - separator line (`1px solid var(--re-data-grid-pinned-separator-color)`)
|
|
435
|
+
|
|
436
|
+
Misc:
|
|
437
|
+
|
|
438
|
+
- `--re-data-grid-expander-color` - expander indicator color (`var(--primary-color, currentColor)`)
|
|
439
|
+
- `--re-data-grid-expanded-color` - expanded column color (`var(--re-data-grid-cell-color, #000)`)
|
|
440
|
+
- `--re-data-grid-expanded-surface` - expanded column background (`var(--re-data-grid-cell-surface, #fff)`)
|
|
441
|
+
|
|
442
|
+
---
|
|
443
|
+
|
|
444
|
+
## Paginator *[NEW in 1.1.0]*
|
|
445
|
+
|
|
446
|
+
The paginator component is used to display a page selector and total count.
|
|
447
|
+
|
|
448
|
+
### Inputs
|
|
449
|
+
|
|
450
|
+
| Parameter | Type | Default | Description |
|
|
451
|
+
|-----------------|------------|-------------------|----------------------------------------|
|
|
452
|
+
| current | `number` | 0 | Current page |
|
|
453
|
+
| pageSize | `number` | 0 | Number of items per page |
|
|
454
|
+
| totalElements | `number` | 0 | Total number of elements |
|
|
455
|
+
| maxShowPages | `number` | 7 | Maximum number of page buttons to show |
|
|
456
|
+
| showFirstLast | `boolean` | `false` | Show "First" and "Last" buttons |
|
|
457
|
+
| showPerPage | `boolean` | `false` | Show page-size dropdown |
|
|
458
|
+
| pageSizeOptions | `number[]` | `[10,20,50,100]` | Options for per-page dropdown |
|
|
459
|
+
| perPageLabel | `string` | `Items per page:` | Label near dropdown |
|
|
460
|
+
| firstLabel | `string` | `First` | Fallback label for first-page button |
|
|
461
|
+
| lastLabel | `string` | `Last` | Fallback label for last-page button |
|
|
462
|
+
|
|
463
|
+
### Outputs
|
|
464
|
+
|
|
465
|
+
| Event | Type | Description |
|
|
466
|
+
|----------------|----------|----------------------------------------------------------------------|
|
|
467
|
+
| pageChange | `number` | Emitted when the page changes. Returns the new page index (0-based). |
|
|
468
|
+
| pageSizeChange | `number` | Emitted when per-page value changes. |
|
|
469
|
+
|
|
470
|
+
### Paginator templates
|
|
471
|
+
|
|
472
|
+
You can customize first/last controls with `ng-template`:
|
|
473
|
+
|
|
474
|
+
```html
|
|
475
|
+
|
|
476
|
+
<re-data-grid-paginator
|
|
477
|
+
showFirstLast
|
|
478
|
+
showPerPage
|
|
479
|
+
[current]="page"
|
|
480
|
+
[pageSize]="20"
|
|
481
|
+
[pageSizeOptions]="[10, 20, 50]"
|
|
482
|
+
[totalElements]="total"
|
|
483
|
+
(pageChange)="page = $event"
|
|
484
|
+
(pageSizeChange)="pageSize = $event"
|
|
485
|
+
>
|
|
486
|
+
<ng-template reDataGridPaginatorFirst let-targetPage let-disabled="disabled">
|
|
487
|
+
<span [style.opacity]="disabled ? 0.5 : 1"><< First</span>
|
|
488
|
+
</ng-template>
|
|
489
|
+
|
|
490
|
+
<ng-template reDataGridPaginatorPage let-label="label" let-active="active">
|
|
491
|
+
<span [style.fontWeight]="active ? 700 : 400">{{ label }}</span>
|
|
492
|
+
</ng-template>
|
|
493
|
+
|
|
494
|
+
<ng-template reDataGridPaginatorLast let-targetPage let-disabled="disabled">
|
|
495
|
+
<span [style.opacity]="disabled ? 0.5 : 1">Last >></span>
|
|
496
|
+
</ng-template>
|
|
497
|
+
</re-data-grid-paginator>
|
|
498
|
+
```
|
|
499
|
+
|
|
500
|
+
Template contexts:
|
|
501
|
+
|
|
502
|
+
- `reDataGridPaginatorFirst` / `reDataGridPaginatorLast`: `$implicit` (target page), `current`, `total`, `disabled`
|
|
503
|
+
- `reDataGridPaginatorPage`: `$implicit` / `page` (0-based index), `label` (1-based display), `current`, `total`, `active`
|
|
504
|
+
|
|
505
|
+
### CSS Variables
|
|
506
|
+
|
|
507
|
+
First / Last controls:
|
|
508
|
+
|
|
509
|
+
- `--re-data-grid-paginator-edge-min-width` - min width (`2.5rem`)
|
|
510
|
+
- `--re-data-grid-paginator-edge-height` - control height (`var(--re-data-grid-paginator-page-size)`)
|
|
511
|
+
- `--re-data-grid-paginator-edge-paddings` - control paddings (`0 0.625rem`)
|
|
512
|
+
- `--re-data-grid-paginator-edge-border` - control border (`var(--re-data-grid-paginator-page-border)`)
|
|
513
|
+
- `--re-data-grid-paginator-edge-rounded` - control border radius (`var(--re-data-grid-paginator-page-rounded)`)
|
|
514
|
+
- `--re-data-grid-paginator-edge-surface` - control background (`var(--re-data-grid-paginator-page-surface)`)
|
|
515
|
+
- `--re-data-grid-paginator-edge-color` - control text color (`var(--re-data-grid-paginator-page-color)`)
|
|
516
|
+
- `--re-data-grid-paginator-edge-font-size` - control font size (`var(--re-data-grid-paginator-page-font-size)`)
|
|
517
|
+
- `--re-data-grid-paginator-edge-hover-surface` - hover background (`var(--re-data-grid-paginator-page-hover-surface)`)
|
|
518
|
+
- `--re-data-grid-paginator-edge-hover-color` - hover text color (`var(--re-data-grid-paginator-page-hover-color)`)
|
|
519
|
+
- `--re-data-grid-paginator-edge-disabled-opacity` - disabled opacity (`0.5`)
|
|
520
|
+
|
|
521
|
+
Layout:
|
|
522
|
+
|
|
523
|
+
- `--re-data-grid-paginator-gap` - gap between paginator elements (`0.5rem`)
|
|
524
|
+
|
|
525
|
+
Page:
|
|
526
|
+
|
|
527
|
+
- `--re-data-grid-paginator-page-size` - page button size (`1.75rem`)
|
|
528
|
+
- `--re-data-grid-paginator-page-border` - page button border (`1px solid var(--re-data-grid-paginator-separator-color, #e2e8f0)`)
|
|
529
|
+
- `--re-data-grid-paginator-page-separator-color` - page button border color (`var(--re-data-grid-separator-color, --border-color)`)
|
|
530
|
+
- `--re-data-grid-paginator-page-rounded` - page button border radius (`var(--re-data-grid-rounded, --radius-md)`)
|
|
531
|
+
- `--re-data-grid-paginator-page-surface` - page button background (`var(--re-data-grid-surface, white)`)
|
|
532
|
+
- `--re-data-grid-paginator-page-color` - page button text color (`var(--text-primary, #1e293b)`)
|
|
533
|
+
- `--re-data-grid-paginator-page-font-size` - page button font size (`0.875rem`)
|
|
534
|
+
|
|
535
|
+
Active Page:
|
|
536
|
+
|
|
537
|
+
- `--re-data-grid-paginator-page-active-surface` - active page button background (`var(--re-data-grid-active, #3b82f6)`)
|
|
538
|
+
- `--re-data-grid-paginator-page-active-color` - active page button text color (`white`)
|
|
539
|
+
|
|
540
|
+
Hover Page:
|
|
541
|
+
|
|
542
|
+
- `--re-data-grid-paginator-page-hover-surface` - page button hover background (`var(--re-data-grid-active, #3b82f6)`)
|
|
543
|
+
- `--re-data-grid-paginator-page-hover-color` - page button hover text color (`white`)
|
|
544
|
+
|
|
545
|
+
|
|
546
|
+
### Column manager *[NEW in 2.0.0]*
|
|
547
|
+
|
|
548
|
+
Column manager is a secondary entrypoint that provides a dropdown UI for reordering, show/hide, and pinning columns.
|
|
549
|
+
|
|
550
|
+
```ts
|
|
551
|
+
import { DataGridColumnManager } from '@reforgium/data-grid/column-manager';
|
|
552
|
+
```
|
|
553
|
+
|
|
554
|
+
```html
|
|
555
|
+
|
|
556
|
+
<re-data-grid-column-manager
|
|
557
|
+
triggerLabel="Columns"
|
|
558
|
+
[columns]="managedColumns()"
|
|
559
|
+
(columnsChange)="managedColumns.set($event)"
|
|
560
|
+
/>
|
|
561
|
+
|
|
562
|
+
<re-data-grid [columns]="managedColumns()" ... />
|
|
563
|
+
```
|
|
564
|
+
|
|
565
|
+
Custom trigger template:
|
|
566
|
+
|
|
567
|
+
```html
|
|
568
|
+
|
|
569
|
+
<ng-template #cmTrigger let-label let-visible="visible" let-total="total">
|
|
570
|
+
<span>{{ label }}</span>
|
|
571
|
+
<strong>{{ visible }}/{{ total }}</strong>
|
|
572
|
+
</ng-template>
|
|
573
|
+
|
|
574
|
+
<re-data-grid-column-manager
|
|
575
|
+
[columns]="managedColumns()"
|
|
576
|
+
[triggerTemplate]="cmTrigger"
|
|
577
|
+
(columnsChange)="managedColumns.set($event)"
|
|
578
|
+
/>
|
|
579
|
+
```
|
|
580
|
+
|
|
581
|
+
Trigger template context:
|
|
582
|
+
|
|
583
|
+
- `$implicit` - trigger label
|
|
584
|
+
- `visible` - visible columns count
|
|
585
|
+
- `total` - total columns count
|
|
586
|
+
|
|
587
|
+
Inputs:
|
|
588
|
+
|
|
589
|
+
- `columns: GridColumn<T>[]`
|
|
590
|
+
- `triggerLabel?: string`
|
|
591
|
+
- `triggerTemplate?: TemplateRef<{ $implicit: string; visible: number; total: number }>`
|
|
592
|
+
- `controlsVisible?: boolean` - hides search and "show all / hide optional" panel
|
|
593
|
+
- `searchable?: boolean`
|
|
594
|
+
- `allowReorder?: boolean`
|
|
595
|
+
- `allowPin?: boolean`
|
|
596
|
+
- `allowVisibility?: boolean`
|
|
597
|
+
|
|
598
|
+
Outputs:
|
|
599
|
+
|
|
600
|
+
- `columnsChange: GridColumn<T>[]`
|
|
601
|
+
|
|
602
|
+
### Column manager CSS Variables
|
|
603
|
+
|
|
604
|
+
- `--re-data-grid-cm-gap` - layout gap (`0.5rem`)
|
|
605
|
+
- `--re-data-grid-cm-rounded` - panel/trigger radius (`0.625rem`)
|
|
606
|
+
- `--re-data-grid-cm-border` - border (`1px solid var(--surface-border, #dfe1e6)`)
|
|
607
|
+
- `--re-data-grid-cm-surface` - surface color (`var(--surface-neutral, #fff)`)
|
|
608
|
+
- `--re-data-grid-cm-muted` - muted text color (`var(--text-muted, #64748b)`)
|
|
609
|
+
- `--re-data-grid-cm-active` - active color (`var(--primary-color, #2a90f4)`)
|
|
610
|
+
- `--re-data-grid-cm-shadow` - panel shadow (`0 12px 30px rgba(15, 23, 42, 0.18)`)
|
|
611
|
+
|
|
612
|
+
---
|
|
613
|
+
|
|
614
|
+
### Theming via CSS Variables
|
|
615
|
+
|
|
616
|
+
Variables can be overridden globally (`:root`) or per grid container.
|
|
617
|
+
|
|
618
|
+
### Quick Theming Examples
|
|
619
|
+
|
|
620
|
+
Dark Theme Example:
|
|
621
|
+
|
|
622
|
+
```css
|
|
623
|
+
.dark .data-grid {
|
|
624
|
+
--re-data-grid-surface: #121416;
|
|
625
|
+
--re-data-grid-header-cell-surface: #161a1d;
|
|
626
|
+
--re-data-grid-cell-color: #eef2f6;
|
|
627
|
+
--re-data-grid-row-separator-color: #262a2e;
|
|
628
|
+
--re-data-grid-column-separator-color: #1e2226;
|
|
629
|
+
}
|
|
630
|
+
```
|
|
631
|
+
|
|
632
|
+
Compact Mode Example:
|
|
633
|
+
|
|
634
|
+
```css
|
|
635
|
+
.compact-grid {
|
|
636
|
+
--re-data-grid-header-row-height: 32px;
|
|
637
|
+
--re-data-grid-cell-font-size: 12px;
|
|
638
|
+
--re-data-grid-cell-paddings: 2px 8px;
|
|
639
|
+
}
|
|
640
|
+
```
|
|
641
|
+
|
|
642
|
+
### Custom Template Examples
|
|
643
|
+
|
|
644
|
+
Cell Template by Type
|
|
645
|
+
|
|
646
|
+
```html
|
|
647
|
+
|
|
648
|
+
<ng-template reDataGridTypeCell="link" let-row="row">
|
|
649
|
+
<a [href]="value" target="_blank">{{ value }}</a>
|
|
650
|
+
</ng-template>
|
|
651
|
+
```
|
|
652
|
+
|
|
653
|
+
Cell Template *[NEW in 1.1.0]*
|
|
654
|
+
|
|
655
|
+
```html
|
|
656
|
+
|
|
657
|
+
<ng-template reDataGridCell="fullName" let-row="row">
|
|
658
|
+
<span><b>{{ row.firstName }}</b> {{ row.lastName }}</span>
|
|
659
|
+
</ng-template>
|
|
660
|
+
```
|
|
661
|
+
|
|
662
|
+
Custom Header Template:
|
|
663
|
+
|
|
664
|
+
```html
|
|
665
|
+
|
|
666
|
+
<ng-template reDataGridHeader="name" let-value="value">
|
|
667
|
+
<span class="header-with-icon">
|
|
668
|
+
<icon name="user" size="20" />
|
|
669
|
+
{{ value }}
|
|
670
|
+
</span>
|
|
671
|
+
</ng-template>
|
|
672
|
+
```
|
|
673
|
+
|
|
674
|
+
## Compatibility
|
|
675
|
+
|
|
676
|
+
- Angular: 18+
|
|
677
|
+
- Rendering: ESM
|
|
678
|
+
- Signals: required
|
|
679
|
+
- Zone.js: optional
|
|
680
|
+
|
|
681
|
+
## License
|
|
682
|
+
|
|
683
|
+
MIT
|