f.spilla/nx-primeng-sakai-v17
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

remove unnecessary css from table

Browse Source
This commit is contained in:
Çetin 2021-12-22 20:03:56 +03:00
parent 76efaa3027
commit 66f735959f
4 changed files with 111 additions and 95 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/app/demo/view/buttondemo.component.html
View File

@ -58,7 +58,19 @@
<p-splitButton label="Save" icon="pi pi-plus" [model]="items" styleClass="p-button-help mr-2 mb-2"></p-splitButton>
<p-splitButton label="Save" icon="pi pi-plus" [model]="items" styleClass="p-button-danger mr-2 mb-2"></p-splitButton>
</div>
<div class="card">
<h5>Templating</h5>
<p-button styleClass="mr-2 mb-2 px-3">
<ng-template pTemplate="content">
<img alt="logo" src="https://primefaces.org/primeng/showcase/assets/showcase/images/primeng-icon.svg" style="width: 1.5rem"/>
</ng-template>
</p-button>
<p-button styleClass="p-button-outlined mr-2 mb-2">
<img alt="logo" src="https://primefaces.org/primeng/showcase/assets/showcase/images/primeng-icon.svg" style="width: 1.5rem"/>
<span class="ml-2 p-text-bold">PrimeNG</span>
</p-button>
</div>
</div>
<div class="col-12 md:col-6">
<div class="card">

6
src/app/demo/view/tabledemo.component.html
View File

@ -1,8 +1,8 @@
<div class="grid table-demo">
<div class="grid">
<div class="col-12">
<div class="card">
<h5>Filter Menu</h5>
<p-table #dt1 [value]="customers1" dataKey="id" [rows]="10" [loading]="loading" styleClass="p-datatable-gridlines" [paginator]="true" [globalFilterFields]="['name','country.name','representative.name','status']" responsiveLayout="scroll">
<p-table #dt1 [value]="customers1" dataKey="id" [rows]="10" [loading]="loading" [rowHover]="true" styleClass="p-datatable-gridlines" [paginator]="true" [globalFilterFields]="['name','country.name','representative.name','status']" responsiveLayout="scroll">
<ng-template pTemplate="caption">
<div class="flex justify-content-between flex-column sm:flex-row">
<button pButton label="Clear" class="p-button-outlined mb-2" icon="pi pi-filter-slash" (click)="clear(dt1)"></button>
@ -118,7 +118,7 @@
<td style="min-width: 12rem;">
<span [class]="'customer-badge status-' + customer.status">{{customer.status}}</span>
</td>
<td style="min-width: 12rem;">
<td style="min-width: 12rem; ">
<p-progressBar [value]="customer.activity" [showValue]="false"></p-progressBar>
</td>
<td class="text-center" style="min-width: 8rem;">

4
src/app/demo/view/tabledemo.component.ts
View File

@ -18,6 +18,10 @@ import { MessageService, ConfirmationService } from 'primeng/api'
:host ::ng-deep .p-datatable-frozen-tbody {
font-weight: bold;
}
:host ::ng-deep .p-progressbar {
height:.5rem;
}
`]
})
export class TableDemoComponent implements OnInit {

182
src/styles.scss
View File

@ -101,116 +101,116 @@
}
}
.table-demo {
.p-progressbar {
height: .5rem;
background-color: #D8DADC;
// .table-demo {
// .p-progressbar {
// height: .5rem;
// background-color: #D8DADC;
.p-progressbar-value {
background-color: #607D8B;
}
}
// .p-progressbar-value {
// background-color: #607D8B;
// }
// }
.table-header {
font-size: 1.25rem;
display: flex;
justify-content: space-between;
}
// .table-header {
// font-size: 1.25rem;
// display: flex;
// justify-content: space-between;
// }
.p-datatable.p-datatable-customers {
.p-datatable-header {
padding: 1rem;
text-align: left;
font-size: 1.5rem;
}
// .p-datatable.p-datatable-customers {
// .p-datatable-header {
// padding: 1rem;
// text-align: left;
// font-size: 1.5rem;
// }
.p-paginator {
padding: 1rem;
}
// .p-paginator {
// padding: 1rem;
// }
.p-datatable-thead > tr > th {
text-align: left;
}
// .p-datatable-thead > tr > th {
// text-align: left;
// }
.p-datatable-tbody > tr > td {
cursor: auto;
}
// .p-datatable-tbody > tr > td {
// cursor: auto;
// }
.p-dropdown-label:not(.p-placeholder) {
text-transform: uppercase;
}
}
// .p-dropdown-label:not(.p-placeholder) {
// text-transform: uppercase;
// }
// }
/* Responsive */
.p-datatable-customers .p-datatable-tbody > tr > td > .p-column-title {
display: none;
}
// /* Responsive */
// .p-datatable-customers .p-datatable-tbody > tr > td > .p-column-title {
// display: none;
// }
.p-progressbar-value.ui-widget-header {
background: #607d8b;
}
// .p-progressbar-value.ui-widget-header {
// background: #607d8b;
// }
@media (max-width: 640px) {
.p-progressbar {
margin-top: .5rem;
}
}
// @media (max-width: 640px) {
// .p-progressbar {
// margin-top: .5rem;
// }
// }
.product-image {
width: 100px;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23)
}
// .product-image {
// width: 100px;
// box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23)
// }
.orders-subtable {
padding: 1rem;
}
// .orders-subtable {
// padding: 1rem;
// }
@media screen and (max-width: 960px) {
.p-datatable {
&.p-datatable-customers {
.p-datatable-thead > tr > th,
.p-datatable-tfoot > tr > td {
display: none !important;
}
// @media screen and (max-width: 960px) {
// .p-datatable {
// &.p-datatable-customers {
// .p-datatable-thead > tr > th,
// .p-datatable-tfoot > tr > td {
// display: none !important;
// }
.p-datatable-tbody > tr {
> td {
text-align: left;
display: block;
border: 0 none !important;
width: 100% !important;
float: left;
clear: left;
border: 0 none;
// .p-datatable-tbody > tr {
// > td {
// text-align: left;
// display: block;
// border: 0 none !important;
// width: 100% !important;
// float: left;
// clear: left;
// border: 0 none;
.p-column-title {
padding: .4rem;
min-width: 30%;
display: inline-block;
margin: -.4rem 1rem -.4rem -.4rem;
font-weight: bold;
}
// .p-column-title {
// padding: .4rem;
// min-width: 30%;
// display: inline-block;
// margin: -.4rem 1rem -.4rem -.4rem;
// font-weight: bold;
// }
.p-progressbar {
margin-top: .5rem;
}
}
}
// .p-progressbar {
// margin-top: .5rem;
// }
// }
// }
colgroup {
display: none;
}
}
// colgroup {
// display: none;
// }
// }
.p-datatable-header {
.table-header {
flex-direction: column !important;
}
}
}
}
}
// .p-datatable-header {
// .table-header {
// flex-direction: column !important;
// }
// }
// }
// }
// }
.crud-demo {
.p-toolbar {