Fixed #10489 - Support for scrolling and column groups

primefaces · Aug 10, 2021 · 1628f8c · 1628f8c
1 parent ff553a1
commit 1628f8c
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 7 deletions.
diff --git a/src/app/components/table/table.css b/src/app/components/table/table.css
@@ -122,6 +122,24 @@
     z-index: 1;
 }
 
+.p-datatable-scrollable.p-datatable-grouped-header .p-datatable-thead,
+.p-datatable-scrollable.p-datatable-grouped-footer .p-datatable-tfoot {
+    display: table;
+    border-collapse: collapse;
+    width: 100%;
+    table-layout: fixed;
+}
+
+.p-datatable-scrollable.p-datatable-grouped-header .p-datatable-thead > tr,
+.p-datatable-scrollable.p-datatable-grouped-footer .p-datatable-tfoot > tr {
+    display: table-row;
+}
+
+.p-datatable-scrollable.p-datatable-grouped-header .p-datatable-thead > tr > th,
+.p-datatable-scrollable.p-datatable-grouped-footer .p-datatable-tfoot > tr > td {
+    display: table-cell;
+}
+
 /* Frozen Columns */
 .p-datatable-frozen-view .p-datatable-scrollable-body {
     overflow: hidden;

diff --git a/src/app/components/table/table.ts b/src/app/components/table/table.ts
@@ -84,7 +84,9 @@ export class TableService {
                 'p-datatable-scrollable-horizontal': scrollable && scrollDirection === 'horizontal',
                 'p-datatable-scrollable-both': scrollable && scrollDirection === 'both',
                 'p-datatable-flex-scrollable': (scrollable && scrollHeight === 'flex'),
-                'p-datatable-responsive': responsive}" [attr.id]="id">
+                'p-datatable-responsive': responsive,
+                'p-datatable-grouped-header': headerGroupedTemplate != null,
+                'p-datatable-grouped-footer': footerGroupedTemplate != null}" [attr.id]="id">
             <div class="p-datatable-loading-overlay p-component-overlay" *ngIf="loading && showLoader">
                 <i [class]="'p-datatable-loading-icon pi-spin ' + loadingIcon"></i>
             </div>
@@ -100,24 +102,24 @@ export class TableService {
                 <table #table *ngIf="!virtualScroll" role="table" class="p-datatable-table" [ngClass]="tableStyleClass" [ngStyle]="tableStyle">
                     <ng-container *ngTemplateOutlet="colGroupTemplate; context {$implicit: columns}"></ng-container>
                     <thead class="p-datatable-thead">
-                        <ng-container *ngTemplateOutlet="headerTemplate; context: {$implicit: columns}"></ng-container>
+                        <ng-container *ngTemplateOutlet="headerGroupedTemplate||headerTemplate; context: {$implicit: columns}"></ng-container>
                     </thead>
                     <tbody class="p-datatable-tbody p-datatable-frozen-tbody" *ngIf="frozenValue||frozenBodyTemplate" [value]="frozenValue" [frozenRows]="true" [pTableBody]="columns" [pTableBodyTemplate]="frozenBodyTemplate" [frozen]="true" [ngStyle]="{width: frozenWidth}"></tbody>
                     <tbody class="p-datatable-tbody" [value]="dataToRender" [pTableBody]="columns" [pTableBodyTemplate]="bodyTemplate"></tbody>
-                    <tfoot *ngIf="footerTemplate" class="p-datatable-tfoot">
-                        <ng-container *ngTemplateOutlet="footerTemplate; context {$implicit: columns}"></ng-container>
+                    <tfoot *ngIf="footerGroupedTemplate||footerTemplate" class="p-datatable-tfoot">
+                        <ng-container *ngTemplateOutlet="footerGroupedTemplate||footerTemplate; context {$implicit: columns}"></ng-container>
                     </tfoot>
                 </table>
                 <cdk-virtual-scroll-viewport *ngIf="virtualScroll" [itemSize]="virtualRowHeight" tabindex="0" [style.height]="scrollHeight !== 'flex' ? scrollHeight : undefined" [minBufferPx]="minBufferPx" [maxBufferPx]="maxBufferPx" (scrolledIndexChange)="onScrollIndexChange($event)" class="p-datatable-virtual-scrollable-body">
                     <table #table role="table" class="p-datatable-table" [ngClass]="tableStyleClass" [ngStyle]="tableStyle">
                         <ng-container *ngTemplateOutlet="colGroupTemplate; context {$implicit: columns}"></ng-container>
                         <thead #tableHeader class="p-datatable-thead">
-                            <ng-container *ngTemplateOutlet="headerTemplate; context: {$implicit: columns}"></ng-container>
+                            <ng-container *ngTemplateOutlet="headerGroupedTemplate||headerTemplate; context: {$implicit: columns}"></ng-container>
                         </thead>
                         <tbody class="p-datatable-tbody p-datatable-frozen-tbody" *ngIf="frozenValue||frozenBodyTemplate" [value]="frozenValue" [frozenRows]="true" [pTableBody]="columns" [pTableBodyTemplate]="bodyTemplate" [frozen]="true" [ngStyle]="{width: frozenWidth}"></tbody>
                         <tbody class="p-datatable-tbody" [value]="dataToRender" [pTableBody]="columns" [pTableBodyTemplate]="bodyTemplate"></tbody>
-                        <tfoot *ngIf="footerTemplate" class="p-datatable-tfoot">
-                            <ng-container *ngTemplateOutlet="footerTemplate; context {$implicit: columns}"></ng-container>
+                        <tfoot *ngIf="footerGroupedTemplate||footerTemplate" class="p-datatable-tfoot">
+                            <ng-container *ngTemplateOutlet="footerGroupedTemplate||footerTemplate; context {$implicit: columns}"></ng-container>
                         </tfoot>
                     </table>
                 </cdk-virtual-scroll-viewport>
@@ -354,6 +356,8 @@ export class Table implements OnInit, AfterViewInit, AfterContentInit, Blockable
 
     headerTemplate: TemplateRef<any>;
 
+    headerGroupedTemplate: TemplateRef<any>;
+
     bodyTemplate: TemplateRef<any>;
 
     loadingBodyTemplate: TemplateRef<any>;
@@ -364,6 +368,8 @@ export class Table implements OnInit, AfterViewInit, AfterContentInit, Blockable
 
     footerTemplate: TemplateRef<any>;
 
+    footerGroupedTemplate: TemplateRef<any>;
+
     summaryTemplate: TemplateRef<any>;
 
     colGroupTemplate: TemplateRef<any>;
@@ -499,6 +505,10 @@ export class Table implements OnInit, AfterViewInit, AfterContentInit, Blockable
                     this.headerTemplate = item.template;
                 break;
 
+                case 'headergrouped':
+                    this.headerGroupedTemplate = item.template;
+                break;
+
                 case 'body':
                     this.bodyTemplate = item.template;
                 break;
@@ -511,6 +521,10 @@ export class Table implements OnInit, AfterViewInit, AfterContentInit, Blockable
                     this.footerTemplate = item.template;
                 break;
 
+                case 'footergrouped':
+                    this.footerGroupedTemplate = item.template;
+                break;
+
                 case 'summary':
                     this.summaryTemplate = item.template;
                 break;