Skip to content

Commit

Permalink
feat: Add custom style class to p-table p-dataview p-treeview (#13205)
Browse files Browse the repository at this point in the history
* 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 <axe.onegaimy@gmail.com>
Co-authored-by: Çetin <69278826+cetincakiroglu@users.noreply.github.com>
Co-authored-by: gucal <gucalaliriza@outlook.com>
Co-authored-by: Olivier Barais <olivieR.barais@gmail.com>
  • Loading branch information
5 people committed Aug 29, 2023
1 parent af79321 commit 6069219
Show file tree
Hide file tree
Showing 3 changed files with 25 additions and 4 deletions.
7 changes: 7 additions & 0 deletions src/app/components/dataview/dataview.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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
Expand Down
15 changes: 11 additions & 4 deletions src/app/components/table/table.ts
Original file line number Diff line number Diff line change
Expand Up @@ -160,6 +160,7 @@ export class TableService {
[showJumpToPageDropdown]="showJumpToPageDropdown"
[showJumpToPageInput]="showJumpToPageInput"
[showPageLinks]="showPageLinks"
[styleClass]="paginatorStyleClass"
[locale]="paginatorLocale"
>
<ng-template pTemplate="firstpagelinkicon" *ngIf="paginatorFirstPageLinkIconTemplate">
Expand Down Expand Up @@ -267,6 +268,7 @@ export class TableService {
[showJumpToPageDropdown]="showJumpToPageDropdown"
[showJumpToPageInput]="showJumpToPageInput"
[showPageLinks]="showPageLinks"
[styleClass]="paginatorStyleClass"
[locale]="paginatorLocale"
>
<ng-template pTemplate="firstpagelinkicon" *ngIf="paginatorFirstPageLinkIconTemplate">
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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;
}
Expand Down
7 changes: 7 additions & 0 deletions src/app/components/treetable/treetable.ts
Original file line number Diff line number Diff line change
Expand Up @@ -149,6 +149,7 @@ export class TreeTableService {
[showCurrentPageReport]="showCurrentPageReport"
[showJumpToPageDropdown]="showJumpToPageDropdown"
[showPageLinks]="showPageLinks"
[styleClass]="paginatorStyleClass"
[locale]="paginatorLocale"
>
<ng-template pTemplate="firstpagelinkicon" *ngIf="paginatorFirstPageLinkIconTemplate">
Expand Down Expand Up @@ -213,6 +214,7 @@ export class TreeTableService {
[showCurrentPageReport]="showCurrentPageReport"
[showJumpToPageDropdown]="showJumpToPageDropdown"
[showPageLinks]="showPageLinks"
[styleClass]="paginatorStyleClass"
[locale]="paginatorLocale"
>
<ng-template pTemplate="firstpagelinkicon" *ngIf="paginatorFirstPageLinkIconTemplate">
Expand Down Expand Up @@ -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
Expand Down

1 comment on commit 6069219

@vercel
Copy link

@vercel vercel bot commented on 6069219 Aug 29, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please sign in to comment.