@alaarab/ogrid-angular-primeng 2.5.8 → 2.6.0

package/dist/esm/index.js

@@ -226,7 +226,7 @@ import {INLINE_CELL_EDITOR_STYLES,INLINE_CELL_EDITOR_TEMPLATE,POPOVER_CELL_EDITO
       text-overflow: ellipsis; white-space: nowrap;
       outline: 2px solid var(--ogrid-selection, #217346); outline-offset: -2px;
     }
-  `]})],g);var t=class extends BaseDataGridTableComponent{constructor(){super();this.sortBy=void 0;this.sortDirection="asc";this.columnOrder=void 0;this.onColumnOrderChange=void 0;this.onColumnResized=void 0;this.onColumnPinned=void 0;this.pinnedColumnsInput=void 0;this.initialColumnWidths=void 0;this.layoutMode="fill";this.suppressHorizontalScroll=void 0;this.stickyHeaderInput=void 0;this.columnReorder=void 0;this.isLoadingInput=false;this.loadingMessageInput="Loading\u2026";this.editable=void 0;this.cellSelection=void 0;this.onCellValueChanged=void 0;this.onUndoInput=void 0;this.onRedoInput=void 0;this.canUndoInput=void 0;this.canRedoInput=void 0;this.rowSelectionMode="none";this.selectedRows=void 0;this.onSelectionChange=void 0;this.statusBar=void 0;this.filterOptions={};this.loadingFilterOptions={};this.peopleSearch=void 0;this.getUserByEmail=void 0;this.emptyStateInput=void 0;this.onCellError=void 0;this.ariaLabelInput=void 0;this.ariaLabelledByInput=void 0;this.showRowNumbers=false;this.showColumnLettersInput=false;this.showNameBoxInput=false;this.onActiveCellChange=void 0;this.formulaReferencesInput=void 0;this.currentPageInput=1;this.pageSizeInput=25;this.defaultMinWidth=DEFAULT_MIN_COLUMN_WIDTH;this.statusBarClasses={statusBar:"ogrid-status-bar",statusBarItem:"ogrid-status-bar-item",statusBarLabel:"ogrid-status-bar-label",statusBarValue:"ogrid-status-bar-value"};this.contextMenuClasses={contextMenu:"ogrid-context-menu",contextMenuItem:"ogrid-context-menu-item",contextMenuItemLabel:"ogrid-context-menu-item-label",contextMenuItemShortcut:"ogrid-context-menu-item-shortcut",contextMenuDivider:"ogrid-context-menu-divider"};this.primengColumnSizingOverrides=signal({});this.propsSignal=signal(void 0);this.resizeStartX=0;this.resizeColumnId="";this.resizeStartWidth=0;this.cancelEditHandler=()=>this.cancelEdit();this.showColumnLetters=computed(()=>!!this.getProps()?.showColumnLetters);this.formulaReferences=computed(()=>this.getProps()?.formulaReferences);this.resolvedAriaLabel=computed(()=>this.ariaLabelInput??(this.ariaLabelledByInput?void 0:"Data grid"));this.tableWidthStyle=computed(()=>this.showEmptyInGrid()?"100%":this.allowOverflowX()||this.layoutMode==="content"?"fit-content":"100%");this.tableMinWidthStyle=computed(()=>this.showEmptyInGrid()?"100%":this.allowOverflowX()||this.layoutMode==="content"?"max-content":"100%");this.initBase(),effect(()=>{let r=this.getProps()?.onActiveCellChange;if(!r)return;let n=this.activeCell();if(n){let a=n.columnIndex-this.colOffset(),s=n.rowIndex+1;r(formatCellReference(a,s));}else r(null);});}ngOnChanges(o){if(o.initialColumnWidths){let a=this.initialColumnWidths;a&&this.primengColumnSizingOverrides.set({...a});}let r=this.buildProps(),n=this.propsSignal();(!n||!this.shallowEqual(n,r))&&this.propsSignal.set(r);}shallowEqual(o,r){let n=o,a=r,s=Object.keys(n),f=Object.keys(a);if(s.length!==f.length)return  false;for(let b of s)if(n[b]!==a[b])return  false;return  true}getProps(){return this.propsSignal()}getWrapperRef(){return this.wrapperRef}getTableContainerRef(){return this.tableContainerRefEl}getColumnWidth(o){let r=this.primengColumnSizingOverrides()[o.columnId];return r||(o.idealWidth??o.defaultWidth??o.minWidth??DEFAULT_MIN_COLUMN_WIDTH)}trackByRowId(o,r){return this.getRowIdInput(r)}onSelectAllChangePrimeng(o){this.state().rowSelection.handleSelectAll(o);}onRowClickPrimeng(o,r){if(this.rowSelectionMode!=="single")return;let n=this.getRowIdInput(r),a=this.selectedRowIds();this.state().rowSelection.updateSelection(a.has(n)?new Set:new Set([n]));}onRowCheckboxChangePrimeng(o,r,n,a){let s=this.getRowIdInput(o);this.state().rowSelection.handleRowCheckboxChange(s,r,n,this.lastMouseShift);}onResizeStartPrimeng(o,r){o.preventDefault(),this.state().interaction.setActiveCell?.(null),this.state().interaction.setSelectionRange?.(null),this.getWrapperRef()?.nativeElement.focus({preventScroll:true}),this.resizeStartX=o.clientX,this.resizeColumnId=r.columnId,this.resizeStartWidth=r.columnId===ROW_NUMBER_COLUMN_ID?this.getRowNumberWidth():this.getColumnWidth(r);let n=s=>{let f=s.clientX-this.resizeStartX,b=r.columnId===ROW_NUMBER_COLUMN_ID?ROW_NUMBER_COLUMN_MIN_WIDTH:r.minWidth??DEFAULT_MIN_COLUMN_WIDTH,C=Math.max(b,this.resizeStartWidth+f);this.primengColumnSizingOverrides.update(w=>({...w,[this.resizeColumnId]:C})),this.columnSizingVersion.update(w=>w+1);},a=()=>{window.removeEventListener("pointermove",n,true),window.removeEventListener("pointerup",a,true);let s=this.primengColumnSizingOverrides()[this.resizeColumnId];if(s){this.onColumnResized?.(this.resizeColumnId,s);let f={};for(let[b,C]of Object.entries(this.primengColumnSizingOverrides()))f[b]={widthPx:C};this.state().layout.setColumnSizingOverrides(f);}};window.addEventListener("pointermove",n,true),window.addEventListener("pointerup",a,true);}onResizeRowNumber(o){o.stopPropagation(),this.onResizeStartPrimeng(o,{columnId:ROW_NUMBER_COLUMN_ID,name:"#"});}getRowNumberWidth(){let o=this.primengColumnSizingOverrides()[ROW_NUMBER_COLUMN_ID];return o||super.getRowNumberWidth()}buildProps(){return {items:this.itemsInput,columns:this.columns,getRowId:this.getRowIdInput,sortBy:this.sortBy,sortDirection:this.sortDirection,onColumnSort:this.onColumnSort,visibleColumns:this.visibleColumns,columnOrder:this.columnOrder,onColumnOrderChange:this.onColumnOrderChange,onColumnResized:this.onColumnResized,onColumnPinned:this.onColumnPinned,pinnedColumns:this.pinnedColumnsInput,initialColumnWidths:this.initialColumnWidths,layoutMode:this.layoutMode,suppressHorizontalScroll:this.suppressHorizontalScroll,columnReorder:this.columnReorder,isLoading:this.isLoadingInput,loadingMessage:this.loadingMessageInput,editable:this.editable,cellSelection:this.cellSelection,onCellValueChanged:this.onCellValueChanged,onUndo:this.onUndoInput,onRedo:this.onRedoInput,canUndo:this.canUndoInput,canRedo:this.canRedoInput,rowSelection:this.rowSelectionMode,selectedRows:this.selectedRows,onSelectionChange:this.onSelectionChange,showRowNumbers:this.showRowNumbers,showColumnLetters:this.showColumnLettersInput,showNameBox:this.showNameBoxInput,onActiveCellChange:this.onActiveCellChange,currentPage:this.currentPageInput,pageSize:this.pageSizeInput,statusBar:this.statusBar,filters:this.filters,onFilterChange:this.onFilterChange,filterOptions:this.filterOptions,loadingFilterOptions:this.loadingFilterOptions,peopleSearch:this.peopleSearch,getUserByEmail:this.getUserByEmail,emptyState:this.emptyStateInput,onCellError:this.onCellError,stickyHeader:this.stickyHeaderInput,"aria-label":this.ariaLabelInput,"aria-labelledby":this.ariaLabelledByInput,formulaReferences:this.formulaReferencesInput}}getColumnLetter(o){return indexToColumnLetter(o)}};e([ViewChild("wrapper")],t.prototype,"wrapperRef",2),e([ViewChild("tableContainer")],t.prototype,"tableContainerRefEl",2),e([Input({required:true,alias:"items"})],t.prototype,"itemsInput",2),e([Input({required:true})],t.prototype,"columns",2),e([Input({required:true,alias:"getRowId"})],t.prototype,"getRowIdInput",2),e([Input()],t.prototype,"sortBy",2),e([Input()],t.prototype,"sortDirection",2),e([Input({required:true})],t.prototype,"onColumnSort",2),e([Input({required:true})],t.prototype,"visibleColumns",2),e([Input()],t.prototype,"columnOrder",2),e([Input()],t.prototype,"onColumnOrderChange",2),e([Input()],t.prototype,"onColumnResized",2),e([Input()],t.prototype,"onColumnPinned",2),e([Input({alias:"pinnedColumns"})],t.prototype,"pinnedColumnsInput",2),e([Input()],t.prototype,"initialColumnWidths",2),e([Input()],t.prototype,"layoutMode",2),e([Input()],t.prototype,"suppressHorizontalScroll",2),e([Input()],t.prototype,"stickyHeaderInput",2),e([Input()],t.prototype,"columnReorder",2),e([Input({alias:"isLoading"})],t.prototype,"isLoadingInput",2),e([Input({alias:"loadingMessage"})],t.prototype,"loadingMessageInput",2),e([Input()],t.prototype,"editable",2),e([Input()],t.prototype,"cellSelection",2),e([Input()],t.prototype,"onCellValueChanged",2),e([Input({alias:"onUndo"})],t.prototype,"onUndoInput",2),e([Input({alias:"onRedo"})],t.prototype,"onRedoInput",2),e([Input({alias:"canUndo"})],t.prototype,"canUndoInput",2),e([Input({alias:"canRedo"})],t.prototype,"canRedoInput",2),e([Input({alias:"rowSelection"})],t.prototype,"rowSelectionMode",2),e([Input()],t.prototype,"selectedRows",2),e([Input()],t.prototype,"onSelectionChange",2),e([Input()],t.prototype,"statusBar",2),e([Input({required:true})],t.prototype,"filters",2),e([Input({required:true})],t.prototype,"onFilterChange",2),e([Input()],t.prototype,"filterOptions",2),e([Input()],t.prototype,"loadingFilterOptions",2),e([Input()],t.prototype,"peopleSearch",2),e([Input()],t.prototype,"getUserByEmail",2),e([Input({alias:"emptyState"})],t.prototype,"emptyStateInput",2),e([Input()],t.prototype,"onCellError",2),e([Input({alias:"aria-label"})],t.prototype,"ariaLabelInput",2),e([Input({alias:"aria-labelledby"})],t.prototype,"ariaLabelledByInput",2),e([Input()],t.prototype,"showRowNumbers",2),e([Input({alias:"showColumnLetters"})],t.prototype,"showColumnLettersInput",2),e([Input({alias:"showNameBox"})],t.prototype,"showNameBoxInput",2),e([Input()],t.prototype,"onActiveCellChange",2),e([Input({alias:"formulaReferences"})],t.prototype,"formulaReferencesInput",2),e([Input({alias:"currentPage"})],t.prototype,"currentPageInput",2),e([Input({alias:"pageSize"})],t.prototype,"pageSizeInput",2),t=e([Component({selector:"ogrid-primeng-datagrid-table",standalone:true,imports:[StatusBarComponent,GridContextMenuComponent,MarchingAntsOverlayComponent,EmptyStateComponent,FormulaRefOverlayComponent,p,c,u,g],changeDetection:ChangeDetectionStrategy.OnPush,encapsulation:ViewEncapsulation.None,providers:[DataGridStateService,ColumnReorderService,VirtualScrollService],template:`
+  `]})],g);var t=class extends BaseDataGridTableComponent{constructor(){super();this.sortBy=void 0;this.sortDirection="asc";this.columnOrder=void 0;this.onColumnOrderChange=void 0;this.onColumnResized=void 0;this.onColumnPinned=void 0;this.pinnedColumnsInput=void 0;this.initialColumnWidths=void 0;this.layoutMode="fill";this.suppressHorizontalScroll=void 0;this.stickyHeaderInput=void 0;this.columnReorder=void 0;this.isLoadingInput=false;this.loadingMessageInput="Loading\u2026";this.editable=void 0;this.cellSelection=void 0;this.onCellValueChanged=void 0;this.onUndoInput=void 0;this.onRedoInput=void 0;this.canUndoInput=void 0;this.canRedoInput=void 0;this.rowSelectionMode="none";this.selectedRows=void 0;this.onSelectionChange=void 0;this.statusBar=void 0;this.filterOptions={};this.loadingFilterOptions={};this.peopleSearch=void 0;this.getUserByEmail=void 0;this.emptyStateInput=void 0;this.onCellError=void 0;this.ariaLabelInput=void 0;this.ariaLabelledByInput=void 0;this.showRowNumbers=false;this.groupByInput=void 0;this.showColumnLettersInput=false;this.showNameBoxInput=false;this.onActiveCellChange=void 0;this.formulaReferencesInput=void 0;this.currentPageInput=1;this.pageSizeInput=25;this.defaultMinWidth=DEFAULT_MIN_COLUMN_WIDTH;this.statusBarClasses={statusBar:"ogrid-status-bar",statusBarItem:"ogrid-status-bar-item",statusBarLabel:"ogrid-status-bar-label",statusBarValue:"ogrid-status-bar-value"};this.contextMenuClasses={contextMenu:"ogrid-context-menu",contextMenuItem:"ogrid-context-menu-item",contextMenuItemLabel:"ogrid-context-menu-item-label",contextMenuItemShortcut:"ogrid-context-menu-item-shortcut",contextMenuDivider:"ogrid-context-menu-divider"};this.primengColumnSizingOverrides=signal({});this.propsSignal=signal(void 0);this.resizeStartX=0;this.resizeColumnId="";this.resizeStartWidth=0;this.cancelEditHandler=()=>this.cancelEdit();this.showColumnLetters=computed(()=>!!this.getProps()?.showColumnLetters);this.formulaReferences=computed(()=>this.getProps()?.formulaReferences);this.resolvedAriaLabel=computed(()=>this.ariaLabelInput??(this.ariaLabelledByInput?void 0:"Data grid"));this.tableWidthStyle=computed(()=>this.showEmptyInGrid()?"100%":this.allowOverflowX()||this.layoutMode==="content"?"fit-content":"100%");this.tableMinWidthStyle=computed(()=>this.showEmptyInGrid()?"100%":this.allowOverflowX()||this.layoutMode==="content"?"max-content":"100%");this.initBase(),effect(()=>{let r=this.getProps()?.onActiveCellChange;if(!r)return;let n=this.activeCell();if(n){let a=n.columnIndex-this.colOffset(),s=n.rowIndex+1;r(formatCellReference(a,s));}else r(null);});}ngOnChanges(o){if(o.initialColumnWidths){let a=this.initialColumnWidths;a&&this.primengColumnSizingOverrides.set({...a});}let r=this.buildProps(),n=this.propsSignal();(!n||!this.shallowEqual(n,r))&&this.propsSignal.set(r);}shallowEqual(o,r){let n=o,a=r,s=Object.keys(n),f=Object.keys(a);if(s.length!==f.length)return  false;for(let b of s)if(n[b]!==a[b])return  false;return  true}getProps(){return this.propsSignal()}getWrapperRef(){return this.wrapperRef}getTableContainerRef(){return this.tableContainerRefEl}getColumnWidth(o){let r=this.primengColumnSizingOverrides()[o.columnId];return r||(o.idealWidth??o.defaultWidth??o.minWidth??DEFAULT_MIN_COLUMN_WIDTH)}trackByRowId(o,r){return this.getRowIdInput(r)}onSelectAllChangePrimeng(o){this.state().rowSelection.handleSelectAll(o);}onRowClickPrimeng(o,r){if(this.rowSelectionMode!=="single")return;let n=this.getRowIdInput(r),a=this.selectedRowIds();this.state().rowSelection.updateSelection(a.has(n)?new Set:new Set([n]));}onRowCheckboxChangePrimeng(o,r,n,a){let s=this.getRowIdInput(o);this.state().rowSelection.handleRowCheckboxChange(s,r,n,this.lastMouseShift);}onResizeStartPrimeng(o,r){o.preventDefault(),this.state().interaction.setActiveCell?.(null),this.state().interaction.setSelectionRange?.(null),this.getWrapperRef()?.nativeElement.focus({preventScroll:true}),this.resizeStartX=o.clientX,this.resizeColumnId=r.columnId,this.resizeStartWidth=r.columnId===ROW_NUMBER_COLUMN_ID?this.getRowNumberWidth():this.getColumnWidth(r);let n=s=>{let f=s.clientX-this.resizeStartX,b=r.columnId===ROW_NUMBER_COLUMN_ID?ROW_NUMBER_COLUMN_MIN_WIDTH:r.minWidth??DEFAULT_MIN_COLUMN_WIDTH,C=Math.max(b,this.resizeStartWidth+f);this.primengColumnSizingOverrides.update(w=>({...w,[this.resizeColumnId]:C})),this.columnSizingVersion.update(w=>w+1);},a=()=>{window.removeEventListener("pointermove",n,true),window.removeEventListener("pointerup",a,true);let s=this.primengColumnSizingOverrides()[this.resizeColumnId];if(s){this.onColumnResized?.(this.resizeColumnId,s);let f={};for(let[b,C]of Object.entries(this.primengColumnSizingOverrides()))f[b]={widthPx:C};this.state().layout.setColumnSizingOverrides(f);}};window.addEventListener("pointermove",n,true),window.addEventListener("pointerup",a,true);}onResizeRowNumber(o){o.stopPropagation(),this.onResizeStartPrimeng(o,{columnId:ROW_NUMBER_COLUMN_ID,name:"#"});}getRowNumberWidth(){let o=this.primengColumnSizingOverrides()[ROW_NUMBER_COLUMN_ID];return o||super.getRowNumberWidth()}buildProps(){return {items:this.itemsInput,columns:this.columns,getRowId:this.getRowIdInput,sortBy:this.sortBy,sortDirection:this.sortDirection,onColumnSort:this.onColumnSort,visibleColumns:this.visibleColumns,columnOrder:this.columnOrder,onColumnOrderChange:this.onColumnOrderChange,onColumnResized:this.onColumnResized,onColumnPinned:this.onColumnPinned,pinnedColumns:this.pinnedColumnsInput,initialColumnWidths:this.initialColumnWidths,layoutMode:this.layoutMode,suppressHorizontalScroll:this.suppressHorizontalScroll,columnReorder:this.columnReorder,isLoading:this.isLoadingInput,loadingMessage:this.loadingMessageInput,editable:this.editable,cellSelection:this.cellSelection,onCellValueChanged:this.onCellValueChanged,onUndo:this.onUndoInput,onRedo:this.onRedoInput,canUndo:this.canUndoInput,canRedo:this.canRedoInput,rowSelection:this.rowSelectionMode,selectedRows:this.selectedRows,onSelectionChange:this.onSelectionChange,showRowNumbers:this.showRowNumbers,showColumnLetters:this.showColumnLettersInput,showNameBox:this.showNameBoxInput,onActiveCellChange:this.onActiveCellChange,currentPage:this.currentPageInput,pageSize:this.pageSizeInput,statusBar:this.statusBar,filters:this.filters,onFilterChange:this.onFilterChange,filterOptions:this.filterOptions,loadingFilterOptions:this.loadingFilterOptions,peopleSearch:this.peopleSearch,getUserByEmail:this.getUserByEmail,emptyState:this.emptyStateInput,onCellError:this.onCellError,stickyHeader:this.stickyHeaderInput,groupBy:this.groupByInput,"aria-label":this.ariaLabelInput,"aria-labelledby":this.ariaLabelledByInput,formulaReferences:this.formulaReferencesInput}}getColumnLetter(o){return indexToColumnLetter(o)}};e([ViewChild("wrapper")],t.prototype,"wrapperRef",2),e([ViewChild("tableContainer")],t.prototype,"tableContainerRefEl",2),e([Input({required:true,alias:"items"})],t.prototype,"itemsInput",2),e([Input({required:true})],t.prototype,"columns",2),e([Input({required:true,alias:"getRowId"})],t.prototype,"getRowIdInput",2),e([Input()],t.prototype,"sortBy",2),e([Input()],t.prototype,"sortDirection",2),e([Input({required:true})],t.prototype,"onColumnSort",2),e([Input({required:true})],t.prototype,"visibleColumns",2),e([Input()],t.prototype,"columnOrder",2),e([Input()],t.prototype,"onColumnOrderChange",2),e([Input()],t.prototype,"onColumnResized",2),e([Input()],t.prototype,"onColumnPinned",2),e([Input({alias:"pinnedColumns"})],t.prototype,"pinnedColumnsInput",2),e([Input()],t.prototype,"initialColumnWidths",2),e([Input()],t.prototype,"layoutMode",2),e([Input()],t.prototype,"suppressHorizontalScroll",2),e([Input()],t.prototype,"stickyHeaderInput",2),e([Input()],t.prototype,"columnReorder",2),e([Input({alias:"isLoading"})],t.prototype,"isLoadingInput",2),e([Input({alias:"loadingMessage"})],t.prototype,"loadingMessageInput",2),e([Input()],t.prototype,"editable",2),e([Input()],t.prototype,"cellSelection",2),e([Input()],t.prototype,"onCellValueChanged",2),e([Input({alias:"onUndo"})],t.prototype,"onUndoInput",2),e([Input({alias:"onRedo"})],t.prototype,"onRedoInput",2),e([Input({alias:"canUndo"})],t.prototype,"canUndoInput",2),e([Input({alias:"canRedo"})],t.prototype,"canRedoInput",2),e([Input({alias:"rowSelection"})],t.prototype,"rowSelectionMode",2),e([Input()],t.prototype,"selectedRows",2),e([Input()],t.prototype,"onSelectionChange",2),e([Input()],t.prototype,"statusBar",2),e([Input({required:true})],t.prototype,"filters",2),e([Input({required:true})],t.prototype,"onFilterChange",2),e([Input()],t.prototype,"filterOptions",2),e([Input()],t.prototype,"loadingFilterOptions",2),e([Input()],t.prototype,"peopleSearch",2),e([Input()],t.prototype,"getUserByEmail",2),e([Input({alias:"emptyState"})],t.prototype,"emptyStateInput",2),e([Input()],t.prototype,"onCellError",2),e([Input({alias:"aria-label"})],t.prototype,"ariaLabelInput",2),e([Input({alias:"aria-labelledby"})],t.prototype,"ariaLabelledByInput",2),e([Input()],t.prototype,"showRowNumbers",2),e([Input({alias:"groupBy"})],t.prototype,"groupByInput",2),e([Input({alias:"showColumnLetters"})],t.prototype,"showColumnLettersInput",2),e([Input({alias:"showNameBox"})],t.prototype,"showNameBoxInput",2),e([Input()],t.prototype,"onActiveCellChange",2),e([Input({alias:"formulaReferences"})],t.prototype,"formulaReferencesInput",2),e([Input({alias:"currentPage"})],t.prototype,"currentPageInput",2),e([Input({alias:"pageSize"})],t.prototype,"pageSizeInput",2),t=e([Component({selector:"ogrid-primeng-datagrid-table",standalone:true,imports:[StatusBarComponent,GridContextMenuComponent,MarchingAntsOverlayComponent,EmptyStateComponent,FormulaRefOverlayComponent,p,c,u,g],changeDetection:ChangeDetectionStrategy.OnPush,encapsulation:ViewEncapsulation.None,providers:[DataGridStateService,ColumnReorderService,VirtualScrollService],template:`
     <div class="ogrid-root">
       <div
         #wrapper
@@ -383,7 +383,27 @@ import {INLINE_CELL_EDITOR_STYLES,INLINE_CELL_EDITOR_TEMPLATE,POPOVER_CELL_EDITO
                     @if (vsEnabled() && vsTopSpacerHeight() > 0) {
                       <tr [style.height.px]="vsTopSpacerHeight()"></tr>
                     }
-                    @for (item of vsVisibleItems(); track trackByRowId($index, item); let localIdx = $index) {
+                    @for (item of vsVisibleItems(); track trackRow(localIdx, item); let localIdx = $index) {
+                      @if (isRowGroupHeader(item)) {
+                        <tr
+                          style="background: var(--ogrid-bg-row-group, var(--ogrid-bg-hover, #f5f5f5)); font-weight: 500"
+                        >
+                          <td [attr.colspan]="totalColCount()" [style.padding-left.px]="$any(item).group.depth * 16 + 8">
+                            <button
+                              (click)="toggleGroup($any(item).group.groupKey)"
+                              (keydown.enter)="$event.preventDefault(); toggleGroup($any(item).group.groupKey)"
+                              (keydown.space)="$event.preventDefault(); toggleGroup($any(item).group.groupKey)"
+                              tabindex="0"
+                              style="background: none; border: none; cursor: pointer; padding: 2px 6px; font: inherit; display: inline-flex; align-items: center; gap: 6px"
+                            >
+                              <span style="display: inline-block; transition: transform 0.15s; font-size: 12px"
+                                [style.transform]="rowGroupExpandedGroups().has($any(item).group.groupKey) ? 'rotate(90deg)' : 'rotate(0deg)'"
+                              >&#9654;</span>
+                              <span>{{ $any(item).group.displayText }} ({{ $any(item).group.itemCount }})</span>
+                            </button>
+                          </td>
+                        </tr>
+                      } @else {
                       @let rowIndex = vsStartIndex() + localIdx;
                       @let rowId = getRowIdInput(item);
                       @let isSelected = selectedRowIds().has(rowId);
@@ -495,6 +515,7 @@ import {INLINE_CELL_EDITOR_STYLES,INLINE_CELL_EDITOR_TEMPLATE,POPOVER_CELL_EDITO
                           <td [style.width.px]="vsRightSpacerWidth()" [style.minWidth.px]="vsRightSpacerWidth()" [style.maxWidth.px]="vsRightSpacerWidth()" [style.padding]="'0'"></td>
                         }
                       </tr>
+                      }
                     }
                     @if (vsEnabled() && vsBottomSpacerHeight() > 0) {
                       <tr [style.height.px]="vsBottomSpacerHeight()"></tr>
@@ -1130,6 +1151,7 @@ import {INLINE_CELL_EDITOR_STYLES,INLINE_CELL_EDITOR_TEMPLATE,POPOVER_CELL_EDITO
         [aria-label]="service.ariaLabel()"
         [aria-labelledby]="service.ariaLabelledBy()"
         [emptyState]="emptyStateObj"
+        [groupBy]="service.groupBy()"
         [showRowNumbers]="service.dataGridProps().showRowNumbers ?? false"
         [showColumnLetters]="service.dataGridProps().showColumnLetters ?? false"
         [showNameBox]="service.dataGridProps().showNameBox ?? false"

package/dist/types/datagrid-table/datagrid-table.component.d.ts

@@ -59,6 +59,7 @@ export declare class DataGridTableComponent<T = unknown> extends BaseDataGridTab
     ariaLabelInput: string | undefined;
     ariaLabelledByInput: string | undefined;
     showRowNumbers: boolean;
+    groupByInput: string[] | undefined;
     showColumnLettersInput: boolean;
     showNameBoxInput: boolean;
     onActiveCellChange: ((ref: string | null) => void) | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alaarab/ogrid-angular-primeng",
-  "version": "2.5.8",
+  "version": "2.6.0",
   "description": "OGrid PrimeNG – PrimeNG Table-based data grid with sorting, filtering, pagination, column chooser, and CSV export.",
   "main": "dist/esm/index.js",
   "module": "dist/esm/index.js",
@@ -37,7 +37,7 @@
     "node": ">=18"
   },
   "dependencies": {
-    "@alaarab/ogrid-angular": "2.5.7"
+    "@alaarab/ogrid-angular": "2.6.0"
   },
   "peerDependencies": {
     "@angular/core": "^21.0.0",