@alaarab/ogrid-angular-primeng 2.0.3 → 2.0.4
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/dist/esm/column-header-menu/column-header-menu.component.js +136 -0
- package/dist/esm/datagrid-table/datagrid-table.component.js +114 -19
- package/dist/esm/datagrid-table/inline-cell-editor.component.js +11 -3
- package/dist/esm/index.js +1 -0
- package/dist/types/column-header-menu/column-header-menu.component.d.ts +26 -0
- package/dist/types/datagrid-table/datagrid-table.component.d.ts +14 -1
- package/dist/types/datagrid-table/inline-cell-editor.component.d.ts +1 -0
- package/dist/types/index.d.ts +1 -0
- package/package.json +2 -2
|
@@ -0,0 +1,136 @@
|
|
|
1
|
+
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
|
|
2
|
+
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
3
|
+
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
|
4
|
+
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
|
5
|
+
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
6
|
+
};
|
|
7
|
+
import { Component, Input, Output, EventEmitter, ViewChild } from '@angular/core';
|
|
8
|
+
import { ButtonModule } from 'primeng/button';
|
|
9
|
+
import { MenuModule } from 'primeng/menu';
|
|
10
|
+
import { COLUMN_HEADER_MENU_ITEMS } from '@alaarab/ogrid-core';
|
|
11
|
+
/**
|
|
12
|
+
* Column header dropdown menu for pin/unpin actions.
|
|
13
|
+
* Uses PrimeNG Menu component.
|
|
14
|
+
*/
|
|
15
|
+
let ColumnHeaderMenuComponent = class ColumnHeaderMenuComponent {
|
|
16
|
+
constructor() {
|
|
17
|
+
this.pinLeft = new EventEmitter();
|
|
18
|
+
this.pinRight = new EventEmitter();
|
|
19
|
+
this.unpin = new EventEmitter();
|
|
20
|
+
this._canPinLeft = true;
|
|
21
|
+
this._canPinRight = true;
|
|
22
|
+
this._canUnpin = false;
|
|
23
|
+
this.menuModel = [];
|
|
24
|
+
}
|
|
25
|
+
set canPinLeft(value) {
|
|
26
|
+
this._canPinLeft = value;
|
|
27
|
+
this.updateMenuModel();
|
|
28
|
+
}
|
|
29
|
+
set canPinRight(value) {
|
|
30
|
+
this._canPinRight = value;
|
|
31
|
+
this.updateMenuModel();
|
|
32
|
+
}
|
|
33
|
+
set canUnpin(value) {
|
|
34
|
+
this._canUnpin = value;
|
|
35
|
+
this.updateMenuModel();
|
|
36
|
+
}
|
|
37
|
+
ngOnInit() {
|
|
38
|
+
this.updateMenuModel();
|
|
39
|
+
}
|
|
40
|
+
updateMenuModel() {
|
|
41
|
+
this.menuModel = [
|
|
42
|
+
{
|
|
43
|
+
label: COLUMN_HEADER_MENU_ITEMS[0].label,
|
|
44
|
+
disabled: !this._canPinLeft,
|
|
45
|
+
command: () => this.handlePinLeft(),
|
|
46
|
+
},
|
|
47
|
+
{
|
|
48
|
+
label: COLUMN_HEADER_MENU_ITEMS[1].label,
|
|
49
|
+
disabled: !this._canPinRight,
|
|
50
|
+
command: () => this.handlePinRight(),
|
|
51
|
+
},
|
|
52
|
+
{
|
|
53
|
+
label: COLUMN_HEADER_MENU_ITEMS[2].label,
|
|
54
|
+
disabled: !this._canUnpin,
|
|
55
|
+
command: () => this.handleUnpin(),
|
|
56
|
+
},
|
|
57
|
+
];
|
|
58
|
+
}
|
|
59
|
+
handlePinLeft() {
|
|
60
|
+
if (this._canPinLeft) {
|
|
61
|
+
this.pinLeft.emit();
|
|
62
|
+
}
|
|
63
|
+
}
|
|
64
|
+
handlePinRight() {
|
|
65
|
+
if (this._canPinRight) {
|
|
66
|
+
this.pinRight.emit();
|
|
67
|
+
}
|
|
68
|
+
}
|
|
69
|
+
handleUnpin() {
|
|
70
|
+
if (this._canUnpin) {
|
|
71
|
+
this.unpin.emit();
|
|
72
|
+
}
|
|
73
|
+
}
|
|
74
|
+
};
|
|
75
|
+
__decorate([
|
|
76
|
+
Input()
|
|
77
|
+
], ColumnHeaderMenuComponent.prototype, "columnId", void 0);
|
|
78
|
+
__decorate([
|
|
79
|
+
Input()
|
|
80
|
+
], ColumnHeaderMenuComponent.prototype, "canPinLeft", null);
|
|
81
|
+
__decorate([
|
|
82
|
+
Input()
|
|
83
|
+
], ColumnHeaderMenuComponent.prototype, "canPinRight", null);
|
|
84
|
+
__decorate([
|
|
85
|
+
Input()
|
|
86
|
+
], ColumnHeaderMenuComponent.prototype, "canUnpin", null);
|
|
87
|
+
__decorate([
|
|
88
|
+
Output()
|
|
89
|
+
], ColumnHeaderMenuComponent.prototype, "pinLeft", void 0);
|
|
90
|
+
__decorate([
|
|
91
|
+
Output()
|
|
92
|
+
], ColumnHeaderMenuComponent.prototype, "pinRight", void 0);
|
|
93
|
+
__decorate([
|
|
94
|
+
Output()
|
|
95
|
+
], ColumnHeaderMenuComponent.prototype, "unpin", void 0);
|
|
96
|
+
__decorate([
|
|
97
|
+
ViewChild('menu')
|
|
98
|
+
], ColumnHeaderMenuComponent.prototype, "menu", void 0);
|
|
99
|
+
ColumnHeaderMenuComponent = __decorate([
|
|
100
|
+
Component({
|
|
101
|
+
selector: 'column-header-menu',
|
|
102
|
+
standalone: true,
|
|
103
|
+
imports: [ButtonModule, MenuModule],
|
|
104
|
+
template: `
|
|
105
|
+
<button
|
|
106
|
+
pButton
|
|
107
|
+
type="button"
|
|
108
|
+
icon="pi pi-ellipsis-v"
|
|
109
|
+
class="p-button-text p-button-sm column-header-menu-trigger"
|
|
110
|
+
(click)="menu.toggle($event)"
|
|
111
|
+
[attr.aria-label]="'Column options for ' + columnId"
|
|
112
|
+
></button>
|
|
113
|
+
|
|
114
|
+
<p-menu
|
|
115
|
+
#menu
|
|
116
|
+
[model]="menuModel"
|
|
117
|
+
[popup]="true"
|
|
118
|
+
appendTo="body"
|
|
119
|
+
></p-menu>
|
|
120
|
+
`,
|
|
121
|
+
styles: [`
|
|
122
|
+
.column-header-menu-trigger {
|
|
123
|
+
opacity: 0;
|
|
124
|
+
transition: opacity 0.15s;
|
|
125
|
+
padding: 0.25rem;
|
|
126
|
+
min-width: auto;
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
:host:hover .column-header-menu-trigger,
|
|
130
|
+
.column-header-menu-trigger:focus {
|
|
131
|
+
opacity: 1;
|
|
132
|
+
}
|
|
133
|
+
`],
|
|
134
|
+
})
|
|
135
|
+
], ColumnHeaderMenuComponent);
|
|
136
|
+
export { ColumnHeaderMenuComponent };
|
|
@@ -8,6 +8,7 @@ import { Component, input, inject, signal, computed, effect, viewChild, ChangeDe
|
|
|
8
8
|
import { CommonModule } from '@angular/common';
|
|
9
9
|
import { DataGridStateService, ColumnReorderService, VirtualScrollService, StatusBarComponent, GridContextMenuComponent, MarchingAntsOverlayComponent, EmptyStateComponent, DEFAULT_MIN_COLUMN_WIDTH, buildHeaderRows, getCellValue, getHeaderFilterConfig, resolveCellDisplayContent, resolveCellStyle, } from '@alaarab/ogrid-angular';
|
|
10
10
|
import { ColumnHeaderFilterComponent } from '../column-header-filter/column-header-filter.component';
|
|
11
|
+
import { ColumnHeaderMenuComponent } from '../column-header-menu/column-header-menu.component';
|
|
11
12
|
import { InlineCellEditorComponent } from './inline-cell-editor.component';
|
|
12
13
|
let DataGridTableComponent = class DataGridTableComponent {
|
|
13
14
|
constructor() {
|
|
@@ -57,6 +58,9 @@ let DataGridTableComponent = class DataGridTableComponent {
|
|
|
57
58
|
this.onCellError = input(undefined);
|
|
58
59
|
this.ariaLabel = input(undefined, { alias: 'aria-label' });
|
|
59
60
|
this.ariaLabelledBy = input(undefined, { alias: 'aria-labelledby' });
|
|
61
|
+
this.showRowNumbers = input(false);
|
|
62
|
+
this.currentPage = input(1);
|
|
63
|
+
this.pageSize = input(25);
|
|
60
64
|
this.defaultMinWidth = DEFAULT_MIN_COLUMN_WIDTH;
|
|
61
65
|
this.statusBarClasses = {
|
|
62
66
|
statusBar: 'ogrid-status-bar',
|
|
@@ -71,9 +75,11 @@ let DataGridTableComponent = class DataGridTableComponent {
|
|
|
71
75
|
this.resizeStartWidth = 0;
|
|
72
76
|
// Last shift state for row checkbox
|
|
73
77
|
this.lastMouseShift = false;
|
|
78
|
+
this.columnSizingVersion = signal(0);
|
|
74
79
|
this.state = computed(() => this.stateService.getState());
|
|
75
80
|
this.tableContainerEl = computed(() => this.tableContainerRef()?.nativeElement ?? null);
|
|
76
81
|
this.resolvedAriaLabel = computed(() => this.ariaLabel() ?? (this.ariaLabelledBy() ? undefined : 'Data grid'));
|
|
82
|
+
this.rowNumberOffset = computed(() => this.state().layout.hasRowNumbersCol ? (this.currentPage() - 1) * this.pageSize() : 0);
|
|
77
83
|
this.headerRows = computed(() => buildHeaderRows(this.columns(), this.visibleColumns()));
|
|
78
84
|
this.allowOverflowX = computed(() => {
|
|
79
85
|
const s = this.state();
|
|
@@ -263,6 +269,7 @@ let DataGridTableComponent = class DataGridTableComponent {
|
|
|
263
269
|
const minW = col.minWidth ?? DEFAULT_MIN_COLUMN_WIDTH;
|
|
264
270
|
const newWidth = Math.max(minW, this.resizeStartWidth + delta);
|
|
265
271
|
this.columnSizingOverrides.update((prev) => ({ ...prev, [this.resizeColumnId]: newWidth }));
|
|
272
|
+
this.columnSizingVersion.update(v => v + 1);
|
|
266
273
|
};
|
|
267
274
|
const onUp = () => {
|
|
268
275
|
window.removeEventListener('mousemove', onMove, true);
|
|
@@ -280,6 +287,24 @@ let DataGridTableComponent = class DataGridTableComponent {
|
|
|
280
287
|
window.addEventListener('mousemove', onMove, true);
|
|
281
288
|
window.addEventListener('mouseup', onUp, true);
|
|
282
289
|
}
|
|
290
|
+
// --- Column pinning methods ---
|
|
291
|
+
onPinColumn(columnId, side) {
|
|
292
|
+
this.onColumnPinned()?.(columnId, side);
|
|
293
|
+
}
|
|
294
|
+
onUnpinColumn(columnId) {
|
|
295
|
+
this.onColumnPinned()?.(columnId, null);
|
|
296
|
+
}
|
|
297
|
+
isPinned(columnId) {
|
|
298
|
+
return this.pinnedColumns()?.[columnId];
|
|
299
|
+
}
|
|
300
|
+
getPinState(columnId) {
|
|
301
|
+
const pinned = this.isPinned(columnId);
|
|
302
|
+
return {
|
|
303
|
+
canPinLeft: pinned !== 'left',
|
|
304
|
+
canPinRight: pinned !== 'right',
|
|
305
|
+
canUnpin: !!pinned,
|
|
306
|
+
};
|
|
307
|
+
}
|
|
283
308
|
buildProps() {
|
|
284
309
|
return {
|
|
285
310
|
items: this.items(),
|
|
@@ -311,6 +336,9 @@ let DataGridTableComponent = class DataGridTableComponent {
|
|
|
311
336
|
rowSelection: this.rowSelectionMode(),
|
|
312
337
|
selectedRows: this.selectedRows(),
|
|
313
338
|
onSelectionChange: this.onSelectionChange(),
|
|
339
|
+
showRowNumbers: this.showRowNumbers(),
|
|
340
|
+
currentPage: this.currentPage(),
|
|
341
|
+
pageSize: this.pageSize(),
|
|
314
342
|
statusBar: this.statusBar(),
|
|
315
343
|
filters: this.filters(),
|
|
316
344
|
onFilterChange: this.onFilterChange(),
|
|
@@ -336,6 +364,7 @@ DataGridTableComponent = __decorate([
|
|
|
336
364
|
MarchingAntsOverlayComponent,
|
|
337
365
|
EmptyStateComponent,
|
|
338
366
|
ColumnHeaderFilterComponent,
|
|
367
|
+
ColumnHeaderMenuComponent,
|
|
339
368
|
InlineCellEditorComponent,
|
|
340
369
|
],
|
|
341
370
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
@@ -389,6 +418,18 @@ DataGridTableComponent = __decorate([
|
|
|
389
418
|
@if (rowIdx === 0 && rowIdx < headerRows().length - 1 && state().layout.hasCheckboxCol) {
|
|
390
419
|
<th [attr.rowSpan]="headerRows().length - 1"></th>
|
|
391
420
|
}
|
|
421
|
+
@if (rowIdx === headerRows().length - 1 && state().layout.hasRowNumbersCol) {
|
|
422
|
+
<th
|
|
423
|
+
scope="col"
|
|
424
|
+
rowSpan="1"
|
|
425
|
+
style="width:50px;min-width:50px;max-width:50px;padding:6px;text-align:center;font-weight:600;background:var(--ogrid-bg-subtle,#fafafa);color:var(--ogrid-text-secondary,#666);border-bottom:1px solid var(--ogrid-border,#e0e0e0);position:sticky;left:0;z-index:4"
|
|
426
|
+
>
|
|
427
|
+
#
|
|
428
|
+
</th>
|
|
429
|
+
}
|
|
430
|
+
@if (rowIdx === 0 && rowIdx < headerRows().length - 1 && state().layout.hasRowNumbersCol) {
|
|
431
|
+
<th [attr.rowSpan]="headerRows().length - 1" style="width:50px;min-width:50px"></th>
|
|
432
|
+
}
|
|
392
433
|
@for (cell of row; track $index; let cellIdx = $index) {
|
|
393
434
|
@if (cell.isGroup) {
|
|
394
435
|
<th
|
|
@@ -399,10 +440,13 @@ DataGridTableComponent = __decorate([
|
|
|
399
440
|
{{ cell.label }}
|
|
400
441
|
</th>
|
|
401
442
|
} @else {
|
|
443
|
+
@let pinned = isPinned(cell.columnDef!.columnId);
|
|
402
444
|
<th
|
|
403
445
|
scope="col"
|
|
404
446
|
[attr.data-column-id]="cell.columnDef!.columnId"
|
|
405
447
|
[attr.rowSpan]="headerRows().length > 1 && rowIdx < headerRows().length - 1 ? headerRows().length - rowIdx : null"
|
|
448
|
+
[class.ogrid-th-pinned-left]="pinned === 'left'"
|
|
449
|
+
[class.ogrid-th-pinned-right]="pinned === 'right'"
|
|
406
450
|
style="padding:6px 8px;text-align:left;font-weight:600;border-bottom:1px solid var(--ogrid-border, #e0e0e0);position:relative"
|
|
407
451
|
[style.min-width.px]="cell.columnDef!.minWidth ?? defaultMinWidth"
|
|
408
452
|
[style.width.px]="getColumnWidth(cell.columnDef!)"
|
|
@@ -410,25 +454,37 @@ DataGridTableComponent = __decorate([
|
|
|
410
454
|
[style.cursor]="columnReorderService.isDragging() ? 'grabbing' : 'grab'"
|
|
411
455
|
(mousedown)="onHeaderMouseDown(cell.columnDef!.columnId, $event)"
|
|
412
456
|
>
|
|
413
|
-
<
|
|
414
|
-
|
|
415
|
-
|
|
416
|
-
|
|
417
|
-
|
|
418
|
-
|
|
419
|
-
|
|
420
|
-
|
|
421
|
-
|
|
422
|
-
|
|
423
|
-
|
|
424
|
-
|
|
425
|
-
|
|
426
|
-
|
|
427
|
-
|
|
428
|
-
|
|
429
|
-
|
|
430
|
-
|
|
431
|
-
|
|
457
|
+
<div style="display:flex;align-items:center;gap:4px;">
|
|
458
|
+
<ogrid-primeng-column-header-filter
|
|
459
|
+
[columnKey]="cell.columnDef!.columnId"
|
|
460
|
+
[columnName]="cell.columnDef!.name"
|
|
461
|
+
[filterType]="getFilterConfig(cell.columnDef!).filterType"
|
|
462
|
+
[isSorted]="getFilterConfig(cell.columnDef!).isSorted ?? false"
|
|
463
|
+
[isSortedDescending]="getFilterConfig(cell.columnDef!).isSortedDescending ?? false"
|
|
464
|
+
[onSort]="getFilterConfig(cell.columnDef!).onSort"
|
|
465
|
+
[selectedValues]="getFilterConfig(cell.columnDef!).selectedValues"
|
|
466
|
+
[onFilterChange]="getFilterConfig(cell.columnDef!).onFilterChange"
|
|
467
|
+
[options]="getFilterConfig(cell.columnDef!).options ?? []"
|
|
468
|
+
[isLoadingOptions]="getFilterConfig(cell.columnDef!).isLoadingOptions ?? false"
|
|
469
|
+
[textValue]="getFilterConfig(cell.columnDef!).textValue ?? ''"
|
|
470
|
+
[onTextChange]="getFilterConfig(cell.columnDef!).onTextChange"
|
|
471
|
+
[selectedUser]="getFilterConfig(cell.columnDef!).selectedUser"
|
|
472
|
+
[onUserChange]="getFilterConfig(cell.columnDef!).onUserChange"
|
|
473
|
+
[peopleSearch]="getFilterConfig(cell.columnDef!).peopleSearch"
|
|
474
|
+
[dateValue]="getFilterConfig(cell.columnDef!).dateValue"
|
|
475
|
+
[onDateChange]="getFilterConfig(cell.columnDef!).onDateChange"
|
|
476
|
+
></ogrid-primeng-column-header-filter>
|
|
477
|
+
@let pinState = getPinState(cell.columnDef!.columnId);
|
|
478
|
+
<column-header-menu
|
|
479
|
+
[columnId]="cell.columnDef!.columnId"
|
|
480
|
+
[onPinLeft]="() => onPinColumn(cell.columnDef!.columnId, 'left')"
|
|
481
|
+
[onPinRight]="() => onPinColumn(cell.columnDef!.columnId, 'right')"
|
|
482
|
+
[onUnpin]="() => onUnpinColumn(cell.columnDef!.columnId)"
|
|
483
|
+
[canPinLeft]="pinState.canPinLeft"
|
|
484
|
+
[canPinRight]="pinState.canPinRight"
|
|
485
|
+
[canUnpin]="pinState.canUnpin"
|
|
486
|
+
/>
|
|
487
|
+
</div>
|
|
432
488
|
<div
|
|
433
489
|
style="position:absolute;top:0;right:0;bottom:0;width:4px;cursor:col-resize"
|
|
434
490
|
(mousedown)="onResizeStart($event, cell.columnDef!)"
|
|
@@ -464,8 +520,18 @@ DataGridTableComponent = __decorate([
|
|
|
464
520
|
/>
|
|
465
521
|
</td>
|
|
466
522
|
}
|
|
523
|
+
@if (state().layout.hasRowNumbersCol) {
|
|
524
|
+
<td
|
|
525
|
+
style="width:50px;min-width:50px;max-width:50px;padding:6px;text-align:center;font-weight:600;font-variant-numeric:tabular-nums;color:var(--ogrid-text-secondary,#666);background:var(--ogrid-bg-subtle,#fafafa);border-bottom:1px solid var(--ogrid-border,#f0f0f0);position:sticky;left:0;z-index:3"
|
|
526
|
+
>
|
|
527
|
+
{{ rowNumberOffset() + rowIndex + 1 }}
|
|
528
|
+
</td>
|
|
529
|
+
}
|
|
467
530
|
@for (col of state().layout.visibleCols; track col.columnId; let colIdx = $index) {
|
|
531
|
+
@let pinned = isPinned(col.columnId);
|
|
468
532
|
<td
|
|
533
|
+
[class.ogrid-td-pinned-left]="pinned === 'left'"
|
|
534
|
+
[class.ogrid-td-pinned-right]="pinned === 'right'"
|
|
469
535
|
style="padding:0;border-bottom:1px solid var(--ogrid-border, #f0f0f0);position:relative"
|
|
470
536
|
[style.min-width.px]="col.minWidth ?? defaultMinWidth"
|
|
471
537
|
[style.width.px]="getColumnWidth(col)"
|
|
@@ -519,6 +585,7 @@ DataGridTableComponent = __decorate([
|
|
|
519
585
|
[copyRange]="state().interaction.copyRange"
|
|
520
586
|
[cutRange]="state().interaction.cutRange"
|
|
521
587
|
[colOffset]="state().layout.colOffset"
|
|
588
|
+
[columnSizingVersion]="columnSizingVersion()"
|
|
522
589
|
></ogrid-marching-ants-overlay>
|
|
523
590
|
|
|
524
591
|
@if (state().viewModels.showEmptyInGrid && emptyState()) {
|
|
@@ -599,6 +666,34 @@ DataGridTableComponent = __decorate([
|
|
|
599
666
|
z-index: 100;
|
|
600
667
|
transition: left 0.05s;
|
|
601
668
|
}
|
|
669
|
+
.ogrid-th-pinned-left {
|
|
670
|
+
position: sticky;
|
|
671
|
+
left: 0;
|
|
672
|
+
z-index: 10;
|
|
673
|
+
background: var(--ogrid-header-bg, #f5f5f5);
|
|
674
|
+
border-left: 2px solid var(--ogrid-primary, #217346);
|
|
675
|
+
}
|
|
676
|
+
.ogrid-th-pinned-right {
|
|
677
|
+
position: sticky;
|
|
678
|
+
right: 0;
|
|
679
|
+
z-index: 10;
|
|
680
|
+
background: var(--ogrid-header-bg, #f5f5f5);
|
|
681
|
+
border-right: 2px solid var(--ogrid-primary, #217346);
|
|
682
|
+
}
|
|
683
|
+
.ogrid-td-pinned-left {
|
|
684
|
+
position: sticky;
|
|
685
|
+
left: 0;
|
|
686
|
+
z-index: 5;
|
|
687
|
+
background: var(--ogrid-bg, #fff);
|
|
688
|
+
border-left: 2px solid var(--ogrid-primary, #217346);
|
|
689
|
+
}
|
|
690
|
+
.ogrid-td-pinned-right {
|
|
691
|
+
position: sticky;
|
|
692
|
+
right: 0;
|
|
693
|
+
z-index: 5;
|
|
694
|
+
background: var(--ogrid-bg, #fff);
|
|
695
|
+
border-right: 2px solid var(--ogrid-primary, #217346);
|
|
696
|
+
}
|
|
602
697
|
`],
|
|
603
698
|
})
|
|
604
699
|
], DataGridTableComponent);
|
|
@@ -70,6 +70,14 @@ let InlineCellEditorComponent = class InlineCellEditorComponent {
|
|
|
70
70
|
onTextBlur() {
|
|
71
71
|
this.commitValue(this.localValue());
|
|
72
72
|
}
|
|
73
|
+
getInputStyle() {
|
|
74
|
+
const baseStyle = 'width:100%;box-sizing:border-box;padding:6px 10px;border:2px solid var(--ogrid-selection, #217346);border-radius:2px;outline:none;font:inherit;background:var(--ogrid-bg, #fff);color:var(--ogrid-fg, #242424);';
|
|
75
|
+
const col = this.column();
|
|
76
|
+
if (col.type === 'numeric') {
|
|
77
|
+
return baseStyle + 'text-align:right;';
|
|
78
|
+
}
|
|
79
|
+
return baseStyle;
|
|
80
|
+
}
|
|
73
81
|
};
|
|
74
82
|
InlineCellEditorComponent = __decorate([
|
|
75
83
|
Component({
|
|
@@ -86,7 +94,7 @@ InlineCellEditorComponent = __decorate([
|
|
|
86
94
|
(input)="localValue.set($any($event.target).value)"
|
|
87
95
|
(keydown)="onTextKeyDown($event)"
|
|
88
96
|
(blur)="onTextBlur()"
|
|
89
|
-
style="
|
|
97
|
+
[style]="getInputStyle()"
|
|
90
98
|
/>
|
|
91
99
|
}
|
|
92
100
|
@case ('select') {
|
|
@@ -122,7 +130,7 @@ InlineCellEditorComponent = __decorate([
|
|
|
122
130
|
(change)="commitValue($any($event.target).value)"
|
|
123
131
|
(keydown)="onTextKeyDown($event)"
|
|
124
132
|
(blur)="onTextBlur()"
|
|
125
|
-
style="
|
|
133
|
+
[style]="getInputStyle()"
|
|
126
134
|
/>
|
|
127
135
|
}
|
|
128
136
|
@default {
|
|
@@ -133,7 +141,7 @@ InlineCellEditorComponent = __decorate([
|
|
|
133
141
|
(input)="localValue.set($any($event.target).value)"
|
|
134
142
|
(keydown)="onTextKeyDown($event)"
|
|
135
143
|
(blur)="onTextBlur()"
|
|
136
|
-
style="
|
|
144
|
+
[style]="getInputStyle()"
|
|
137
145
|
/>
|
|
138
146
|
}
|
|
139
147
|
}
|
package/dist/esm/index.js
CHANGED
|
@@ -7,3 +7,4 @@ export { InlineCellEditorComponent } from './datagrid-table/inline-cell-editor.c
|
|
|
7
7
|
export { ColumnHeaderFilterComponent } from './column-header-filter/column-header-filter.component';
|
|
8
8
|
export { ColumnChooserComponent } from './column-chooser/column-chooser.component';
|
|
9
9
|
export { PaginationControlsComponent } from './pagination-controls/pagination-controls.component';
|
|
10
|
+
export { ColumnHeaderMenuComponent } from './column-header-menu/column-header-menu.component';
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import { EventEmitter } from '@angular/core';
|
|
2
|
+
import type { Menu } from 'primeng/menu';
|
|
3
|
+
import type { MenuItem } from 'primeng/api';
|
|
4
|
+
/**
|
|
5
|
+
* Column header dropdown menu for pin/unpin actions.
|
|
6
|
+
* Uses PrimeNG Menu component.
|
|
7
|
+
*/
|
|
8
|
+
export declare class ColumnHeaderMenuComponent {
|
|
9
|
+
columnId: string;
|
|
10
|
+
set canPinLeft(value: boolean);
|
|
11
|
+
set canPinRight(value: boolean);
|
|
12
|
+
set canUnpin(value: boolean);
|
|
13
|
+
pinLeft: EventEmitter<void>;
|
|
14
|
+
pinRight: EventEmitter<void>;
|
|
15
|
+
unpin: EventEmitter<void>;
|
|
16
|
+
menu: Menu;
|
|
17
|
+
private _canPinLeft;
|
|
18
|
+
private _canPinRight;
|
|
19
|
+
private _canUnpin;
|
|
20
|
+
menuModel: MenuItem[];
|
|
21
|
+
ngOnInit(): void;
|
|
22
|
+
private updateMenuModel;
|
|
23
|
+
handlePinLeft(): void;
|
|
24
|
+
handlePinRight(): void;
|
|
25
|
+
handleUnpin(): void;
|
|
26
|
+
}
|
|
@@ -61,6 +61,9 @@ export declare class DataGridTableComponent<T = unknown> {
|
|
|
61
61
|
readonly onCellError: import("@angular/core").InputSignal<((error: Error) => void) | undefined>;
|
|
62
62
|
readonly ariaLabel: import("@angular/core").InputSignal<string | undefined>;
|
|
63
63
|
readonly ariaLabelledBy: import("@angular/core").InputSignal<string | undefined>;
|
|
64
|
+
readonly showRowNumbers: import("@angular/core").InputSignal<boolean>;
|
|
65
|
+
readonly currentPage: import("@angular/core").InputSignal<number>;
|
|
66
|
+
readonly pageSize: import("@angular/core").InputSignal<number>;
|
|
64
67
|
readonly defaultMinWidth = 80;
|
|
65
68
|
readonly statusBarClasses: {
|
|
66
69
|
statusBar: string;
|
|
@@ -73,11 +76,13 @@ export declare class DataGridTableComponent<T = unknown> {
|
|
|
73
76
|
private resizeColumnId;
|
|
74
77
|
private resizeStartWidth;
|
|
75
78
|
private lastMouseShift;
|
|
79
|
+
private columnSizingVersion;
|
|
76
80
|
constructor();
|
|
77
81
|
readonly state: import("@angular/core").Signal<import("@alaarab/ogrid-angular").DataGridStateResult<T>>;
|
|
78
82
|
readonly tableContainerEl: import("@angular/core").Signal<HTMLDivElement | null>;
|
|
79
83
|
readonly resolvedAriaLabel: import("@angular/core").Signal<string | undefined>;
|
|
80
|
-
readonly
|
|
84
|
+
readonly rowNumberOffset: import("@angular/core").Signal<number>;
|
|
85
|
+
readonly headerRows: import("@angular/core").Signal<import("@alaarab/ogrid-core").HeaderRow<T>[]>;
|
|
81
86
|
readonly allowOverflowX: import("@angular/core").Signal<boolean>;
|
|
82
87
|
readonly tableWidthStyle: import("@angular/core").Signal<"100%" | "fit-content">;
|
|
83
88
|
readonly tableMinWidthStyle: import("@angular/core").Signal<"100%" | "max-content">;
|
|
@@ -108,5 +113,13 @@ export declare class DataGridTableComponent<T = unknown> {
|
|
|
108
113
|
handlePaste(): void;
|
|
109
114
|
onHeaderMouseDown(columnId: string, event: MouseEvent): void;
|
|
110
115
|
onResizeStart(e: MouseEvent, col: IColumnDef<T>): void;
|
|
116
|
+
onPinColumn(columnId: string, side: 'left' | 'right'): void;
|
|
117
|
+
onUnpinColumn(columnId: string): void;
|
|
118
|
+
isPinned(columnId: string): 'left' | 'right' | undefined;
|
|
119
|
+
getPinState(columnId: string): {
|
|
120
|
+
canPinLeft: boolean;
|
|
121
|
+
canPinRight: boolean;
|
|
122
|
+
canUnpin: boolean;
|
|
123
|
+
};
|
|
111
124
|
private buildProps;
|
|
112
125
|
}
|
package/dist/types/index.d.ts
CHANGED
|
@@ -5,3 +5,4 @@ export { InlineCellEditorComponent } from './datagrid-table/inline-cell-editor.c
|
|
|
5
5
|
export { ColumnHeaderFilterComponent } from './column-header-filter/column-header-filter.component';
|
|
6
6
|
export { ColumnChooserComponent } from './column-chooser/column-chooser.component';
|
|
7
7
|
export { PaginationControlsComponent } from './pagination-controls/pagination-controls.component';
|
|
8
|
+
export { ColumnHeaderMenuComponent } from './column-header-menu/column-header-menu.component';
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@alaarab/ogrid-angular-primeng",
|
|
3
|
-
"version": "2.0.
|
|
3
|
+
"version": "2.0.4",
|
|
4
4
|
"description": "OGrid PrimeNG – PrimeNG Table-based data grid with sorting, filtering, pagination, column chooser, and CSV export.",
|
|
5
5
|
"main": "dist/esm/index.js",
|
|
6
6
|
"module": "dist/esm/index.js",
|
|
@@ -22,7 +22,7 @@
|
|
|
22
22
|
"files": ["dist", "README.md", "LICENSE"],
|
|
23
23
|
"engines": { "node": ">=18" },
|
|
24
24
|
"dependencies": {
|
|
25
|
-
"@alaarab/ogrid-angular": "2.0.
|
|
25
|
+
"@alaarab/ogrid-angular": "2.0.4"
|
|
26
26
|
},
|
|
27
27
|
"peerDependencies": {
|
|
28
28
|
"@angular/core": "^21.0.0",
|