feat: Add custom style class to p-table p-dataview p-treeview (#13205)

* feat: Add custom style class to p-table/p-dataview/p-treeview * fix(primeng/p-button): spinner style not working propely Fixes #13148. * Fixed #13183 - Make TreeNode generic * Fix: Icon list visibility * fix(primeng/p-menu): render html via `DomSanitizer` Fixes #13128. * fix(primeng/p-button): not working `loadingIcon` property, update loadingdoc example Fixes #13098. * fix: update angular version restriction * fix(primeng/p-confirmDialog): not updated style in runtime Fixes #13155. * Fix #13129 - FileUpload | File limit does not fire error * Fix #13201 - OverlayPanel: Incorrect position when inside of dialog in 16.0.0 (did not happen in rc2) * Fix - Surface color list * fix #13124 --------- Co-authored-by: Egor Volvachev <[email protected]> Co-authored-by: Çetin <[email protected]> Co-authored-by: gucal <[email protected]> Co-authored-by: Olivier Barais <[email protected]>
primefaces · Aug 29, 2023 · 6069219 · 6069219 · vercel · Aug 29, 2023
1 parent af79321
commit 6069219
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 4 deletions.
diff --git a/src/app/components/dataview/dataview.ts b/src/app/components/dataview/dataview.ts
@@ -70,6 +70,7 @@ import { DataViewLayoutChangeEvent, DataViewLazyLoadEvent, DataViewPageEvent, Da
                 [showCurrentPageReport]="showCurrentPageReport"
                 [showJumpToPageDropdown]="showJumpToPageDropdown"
                 [showPageLinks]="showPageLinks"
+                [styleClass]="paginatorStyleClass"
             ></p-paginator>
             <div class="p-dataview-content">
                 <div class="p-grid p-nogutter grid grid-nogutter" [ngClass]="gridStyleClass">
@@ -106,6 +107,7 @@ import { DataViewLayoutChangeEvent, DataViewLazyLoadEvent, DataViewPageEvent, Da
                 [showCurrentPageReport]="showCurrentPageReport"
                 [showJumpToPageDropdown]="showJumpToPageDropdown"
                 [showPageLinks]="showPageLinks"
+                [styleClass]="paginatorStyleClass"
             ></p-paginator>
             <div class="p-dataview-footer" *ngIf="footer || footerTemplate">
                 <ng-content select="p-footer"></ng-content>
@@ -151,6 +153,11 @@ export class DataView implements OnInit, AfterContentInit, OnDestroy, BlockableU
      * @group Props
      */
     @Input() paginatorPosition: 'top' | 'bottom' | 'both' = 'bottom';
+    /**
+     * Custom style class for paginator
+     * @group Props
+     */
+    @Input() paginatorStyleClass: string | undefined;
     /**
      * Whether to show it even there is only one page.
      * @group Props

diff --git a/src/app/components/table/table.ts b/src/app/components/table/table.ts
@@ -160,6 +160,7 @@ export class TableService {
                 [showJumpToPageDropdown]="showJumpToPageDropdown"
                 [showJumpToPageInput]="showJumpToPageInput"
                 [showPageLinks]="showPageLinks"
+                [styleClass]="paginatorStyleClass"
                 [locale]="paginatorLocale"
             >
                 <ng-template pTemplate="firstpagelinkicon" *ngIf="paginatorFirstPageLinkIconTemplate">
@@ -267,6 +268,7 @@ export class TableService {
                 [showJumpToPageDropdown]="showJumpToPageDropdown"
                 [showJumpToPageInput]="showJumpToPageInput"
                 [showPageLinks]="showPageLinks"
+                [styleClass]="paginatorStyleClass"
                 [locale]="paginatorLocale"
             >
                 <ng-template pTemplate="firstpagelinkicon" *ngIf="paginatorFirstPageLinkIconTemplate">
@@ -365,6 +367,11 @@ export class Table implements OnInit, AfterViewInit, AfterContentInit, Blockable
      * @group Props
      */
     @Input() paginatorPosition: 'top' | 'bottom' | 'both' = 'bottom';
+    /**
+     * Custom style class for paginator
+     * @group Props
+     */
+    @Input() paginatorStyleClass: string | undefined;
     /**
      * Target element to attach the paginator dropdown overlay, valid values are "body" or a local ng-template variable of another element (note: use binding with brackets for template variables, e.g. [appendTo]="mydiv" for a div element having #mydiv as variable name).
      * @group Props
@@ -2942,24 +2949,24 @@ export class Table implements OnInit, AfterViewInit, AfterContentInit, Blockable
         #${this.id}-table > .p-datatable-tfoot > tr > td {
             display: none !important;
         }
-    
+
         #${this.id}-table > .p-datatable-tbody > tr > td {
             display: flex;
             width: 100% !important;
             align-items: center;
             justify-content: space-between;
         }
-    
+
         #${this.id}-table > .p-datatable-tbody > tr > td:not(:last-child) {
             border: 0 none;
         }
-    
+
         #${this.id}.p-datatable-gridlines > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tbody > tr > td:last-child {
             border-top: 0;
             border-right: 0;
             border-left: 0;
         }
-    
+
         #${this.id}-table > .p-datatable-tbody > tr > td > .p-column-title {
             display: block;
         }

diff --git a/src/app/components/treetable/treetable.ts b/src/app/components/treetable/treetable.ts
@@ -149,6 +149,7 @@ export class TreeTableService {
                 [showCurrentPageReport]="showCurrentPageReport"
                 [showJumpToPageDropdown]="showJumpToPageDropdown"
                 [showPageLinks]="showPageLinks"
+                [styleClass]="paginatorStyleClass"
                 [locale]="paginatorLocale"
             >
                 <ng-template pTemplate="firstpagelinkicon" *ngIf="paginatorFirstPageLinkIconTemplate">
@@ -213,6 +214,7 @@ export class TreeTableService {
                 [showCurrentPageReport]="showCurrentPageReport"
                 [showJumpToPageDropdown]="showJumpToPageDropdown"
                 [showPageLinks]="showPageLinks"
+                [styleClass]="paginatorStyleClass"
                 [locale]="paginatorLocale"
             >
                 <ng-template pTemplate="firstpagelinkicon" *ngIf="paginatorFirstPageLinkIconTemplate">
@@ -329,6 +331,11 @@ export class TreeTable implements AfterContentInit, OnInit, OnDestroy, Blockable
      * @group Props
      */
     @Input() paginatorPosition: 'top' | 'bottom' | 'both' = 'bottom';
+    /**
+     * Custom style class for paginator
+     * @group Props
+     */
+    @Input() paginatorStyleClass: string | undefined;
     /**
      * Target element to attach the paginator dropdown overlay, valid values are "body" or a local ng-template variable of another element (note: use binding with brackets for template variables, e.g. [appendTo]="mydiv" for a div element having #mydiv as variable name).
      * @group Props