From 6069219df46666c81a23fd6e50eb755a17b7e87f Mon Sep 17 00:00:00 2001 From: Steve Yin <670687+steve3d@users.noreply.github.com> Date: Tue, 29 Aug 2023 21:52:09 +0800 Subject: [PATCH] feat: Add custom style class to p-table p-dataview p-treeview (#13205) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * 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 Co-authored-by: Çetin <69278826+cetincakiroglu@users.noreply.github.com> Co-authored-by: gucal Co-authored-by: Olivier Barais --- src/app/components/dataview/dataview.ts | 7 +++++++ src/app/components/table/table.ts | 15 +++++++++++---- src/app/components/treetable/treetable.ts | 7 +++++++ 3 files changed, 25 insertions(+), 4 deletions(-) diff --git a/src/app/components/dataview/dataview.ts b/src/app/components/dataview/dataview.ts index b57a16d8fe2..2e09d1f4737 100755 --- 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" >
@@ -106,6 +107,7 @@ import { DataViewLayoutChangeEvent, DataViewLazyLoadEvent, DataViewPageEvent, Da [showCurrentPageReport]="showCurrentPageReport" [showJumpToPageDropdown]="showJumpToPageDropdown" [showPageLinks]="showPageLinks" + [styleClass]="paginatorStyleClass" >
@@ -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 index 2c10491564e..e054f52b261 100644 --- 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" > @@ -267,6 +268,7 @@ export class TableService { [showJumpToPageDropdown]="showJumpToPageDropdown" [showJumpToPageInput]="showJumpToPageInput" [showPageLinks]="showPageLinks" + [styleClass]="paginatorStyleClass" [locale]="paginatorLocale" > @@ -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 index 13b622f8364..7833022d0f8 100755 --- 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" > @@ -213,6 +214,7 @@ export class TreeTableService { [showCurrentPageReport]="showCurrentPageReport" [showJumpToPageDropdown]="showJumpToPageDropdown" [showPageLinks]="showPageLinks" + [styleClass]="paginatorStyleClass" [locale]="paginatorLocale" > @@ -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