@alaarab/ogrid-angular-primeng 2.1.1 → 2.1.2

package/dist/esm/datagrid-table/datagrid-table.component.js

@@ -23,6 +23,7 @@ let DataGridTableComponent = class DataGridTableComponent extends BaseDataGridTa
         this.initialColumnWidths = undefined;
         this.layoutMode = 'fill';
         this.suppressHorizontalScroll = undefined;
+        this.stickyHeaderInput = undefined;
         this.columnReorder = undefined;
         this.isLoadingInput = false;
         this.loadingMessageInput = 'Loading\u2026';
@@ -232,6 +233,7 @@ let DataGridTableComponent = class DataGridTableComponent extends BaseDataGridTa
             getUserByEmail: this.getUserByEmail,
             emptyState: this.emptyStateInput,
             onCellError: this.onCellError,
+            stickyHeader: this.stickyHeaderInput,
             'aria-label': this.ariaLabelInput,
             'aria-labelledby': this.ariaLabelledByInput,
         };
@@ -288,6 +290,9 @@ __decorate([
 __decorate([
     Input()
 ], DataGridTableComponent.prototype, "suppressHorizontalScroll", void 0);
+__decorate([
+    Input()
+], DataGridTableComponent.prototype, "stickyHeaderInput", void 0);
 __decorate([
     Input()
 ], DataGridTableComponent.prototype, "columnReorder", void 0);
@@ -413,7 +418,7 @@ DataGridTableComponent = __decorate([
           <div [class.loading-dimmed]="isLoading() && items().length > 0" class="ogrid-table-wrapper">
             <div #tableContainer class="ogrid-table-wrapper">
               <table class="ogrid-table">
-                <thead class="ogrid-thead">
+                <thead [class]="stickyHeader() ? 'ogrid-thead ogrid-sticky-header' : 'ogrid-thead'">
                   @for (row of headerRows(); track $index; let rowIdx = $index) {
                     <tr>
                       @if (rowIdx === headerRows().length - 1 && hasCheckboxCol()) {
@@ -726,9 +731,10 @@ DataGridTableComponent = __decorate([
     .ogrid-thead {
       z-index: 3;
       background: var(--ogrid-header-bg, #f5f5f5);
-      position: sticky;
-      top: 0;
     }
+    .ogrid-sticky-header { position: sticky; top: 0; }
+    .ogrid-sticky-header .ogrid-checkbox-header,
+    .ogrid-sticky-header .ogrid-row-number-header { position: sticky; top: 0; }
     .ogrid-checkbox-header {
       width: 48px;
       min-width: 48px;
@@ -736,8 +742,6 @@ DataGridTableComponent = __decorate([
       text-align: center;
       background: var(--ogrid-header-bg, #f5f5f5);
       border-bottom: 2px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));
-      position: sticky;
-      top: 0;
       z-index: 3;
     }
     .ogrid-row-number-header {
@@ -748,8 +752,6 @@ DataGridTableComponent = __decorate([
       font-weight: 600;
       background: var(--ogrid-header-bg, #f5f5f5);
       border-bottom: 2px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));
-      position: sticky;
-      top: 0;
       z-index: 3;
     }
     .ogrid-row-number-spacer {
@@ -888,7 +890,8 @@ DataGridTableComponent = __decorate([
       left: 0;
       z-index: 10;
       background: var(--ogrid-header-bg, #f5f5f5);
-      border-left: 2px solid var(--ogrid-primary, #217346);
+      border-right: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));
+      box-shadow: 2px 0 4px -1px rgba(0, 0, 0, 0.1);
     }
     .ogrid-th-pinned-right {
       position: sticky;
@@ -896,21 +899,24 @@ DataGridTableComponent = __decorate([
       right: 0;
       z-index: 10;
       background: var(--ogrid-header-bg, #f5f5f5);
-      border-right: 2px solid var(--ogrid-primary, #217346);
+      border-left: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));
+      box-shadow: -2px 0 4px -1px rgba(0, 0, 0, 0.1);
     }
     .ogrid-td-pinned-left {
       position: sticky;
       left: 0;
       z-index: 5;
       background: var(--ogrid-bg, #fff);
-      border-left: 2px solid var(--ogrid-primary, #217346);
+      border-right: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));
+      box-shadow: 2px 0 4px -1px rgba(0, 0, 0, 0.1);
     }
     .ogrid-td-pinned-right {
       position: sticky;
       right: 0;
       z-index: 5;
       background: var(--ogrid-bg, #fff);
-      border-right: 2px solid var(--ogrid-primary, #217346);
+      border-left: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));
+      box-shadow: -2px 0 4px -1px rgba(0, 0, 0, 0.1);
     }
     ::ng-deep th:focus-visible,
     ::ng-deep td:focus-visible {

package/dist/esm/ogrid/ogrid.component.js

@@ -36,7 +36,7 @@ let OGridComponent = class OGridComponent {
         });
     }
     get showToolbar() {
-        return this.service.columnChooserPlacement() === 'toolbar' || this.service.toolbar() != null;
+        return this.service.columnChooserPlacement() === 'toolbar' || this.service.toolbar() != null || this.service.fullScreen();
     }
     get emptyStateObj() {
         return this.emptyStateComputed();
@@ -68,6 +68,7 @@ OGridComponent = __decorate([
       [hasToolbarBelow]="false"
       [hasPagination]="true"
       [sideBar]="service.sideBarProps()"
+      [fullScreen]="service.fullScreen()"
     >
       <ng-content select="[toolbar]" toolbar></ng-content>
 
@@ -113,6 +114,7 @@ OGridComponent = __decorate([
         [getUserByEmail]="service.dataSource()?.getUserByEmail?.bind(service.dataSource())"
         [layoutMode]="service.layoutMode()"
         [suppressHorizontalScroll]="service.suppressHorizontalScroll()"
+        [stickyHeaderInput]="service.stickyHeader()"
         [columnReorder]="service.columnReorder()"
         [aria-label]="service.ariaLabel()"
         [aria-labelledby]="service.ariaLabelledBy()"

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

@@ -19,6 +19,7 @@ export declare class DataGridTableComponent<T = unknown> extends BaseDataGridTab
     initialColumnWidths: Record<string, number> | undefined;
     layoutMode: 'content' | 'fill';
     suppressHorizontalScroll: boolean | undefined;
+    stickyHeaderInput: boolean | undefined;
     columnReorder: boolean | undefined;
     isLoadingInput: boolean;
     loadingMessageInput: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alaarab/ogrid-angular-primeng",
-  "version": "2.1.1",
+  "version": "2.1.2",
   "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.1.1"
+    "@alaarab/ogrid-angular": "2.1.2"
   },
   "peerDependencies": {
     "@angular/core": "^21.0.0",