remove unnecessary css from table
This commit is contained in:
Çetin
parent
76efaa3027
commit
66f735959f
@ -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-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>
|
<p-splitButton label="Save" icon="pi pi-plus" [model]="items" styleClass="p-button-danger mr-2 mb-2"></p-splitButton>
|
||||||
</div>
|
</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>
|
||||||
<div class="col-12 md:col-6">
|
<div class="col-12 md:col-6">
|
||||||
<div class="card">
|
<div class="card">
|
||||||
|
|||||||
@ -1,8 +1,8 @@
|
|||||||
<div class="grid table-demo">
|
<div class="grid">
|
||||||
<div class="col-12">
|
<div class="col-12">
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<h5>Filter Menu</h5>
|
<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">
|
<ng-template pTemplate="caption">
|
||||||
<div class="flex justify-content-between flex-column sm:flex-row">
|
<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>
|
<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;">
|
<td style="min-width: 12rem;">
|
||||||
<span [class]="'customer-badge status-' + customer.status">{{customer.status}}</span>
|
<span [class]="'customer-badge status-' + customer.status">{{customer.status}}</span>
|
||||||
</td>
|
</td>
|
||||||
<td style="min-width: 12rem;">
|
<td style="min-width: 12rem; ">
|
||||||
<p-progressBar [value]="customer.activity" [showValue]="false"></p-progressBar>
|
<p-progressBar [value]="customer.activity" [showValue]="false"></p-progressBar>
|
||||||
</td>
|
</td>
|
||||||
<td class="text-center" style="min-width: 8rem;">
|
<td class="text-center" style="min-width: 8rem;">
|
||||||
|
|||||||
@ -18,6 +18,10 @@ import { MessageService, ConfirmationService } from 'primeng/api'
|
|||||||
:host ::ng-deep .p-datatable-frozen-tbody {
|
:host ::ng-deep .p-datatable-frozen-tbody {
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
:host ::ng-deep .p-progressbar {
|
||||||
|
height:.5rem;
|
||||||
|
}
|
||||||
`]
|
`]
|
||||||
})
|
})
|
||||||
export class TableDemoComponent implements OnInit {
|
export class TableDemoComponent implements OnInit {
|
||||||
|
|||||||
182
src/styles.scss
182
src/styles.scss
@ -101,116 +101,116 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.table-demo {
|
// .table-demo {
|
||||||
.p-progressbar {
|
// .p-progressbar {
|
||||||
height: .5rem;
|
// height: .5rem;
|
||||||
background-color: #D8DADC;
|
// background-color: #D8DADC;
|
||||||
|
|
||||||
.p-progressbar-value {
|
// .p-progressbar-value {
|
||||||
background-color: #607D8B;
|
// background-color: #607D8B;
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
|
|
||||||
.table-header {
|
// .table-header {
|
||||||
font-size: 1.25rem;
|
// font-size: 1.25rem;
|
||||||
display: flex;
|
// display: flex;
|
||||||
justify-content: space-between;
|
// justify-content: space-between;
|
||||||
}
|
// }
|
||||||
|
|
||||||
.p-datatable.p-datatable-customers {
|
// .p-datatable.p-datatable-customers {
|
||||||
.p-datatable-header {
|
// .p-datatable-header {
|
||||||
padding: 1rem;
|
// padding: 1rem;
|
||||||
text-align: left;
|
// text-align: left;
|
||||||
font-size: 1.5rem;
|
// font-size: 1.5rem;
|
||||||
}
|
// }
|
||||||
|
|
||||||
.p-paginator {
|
// .p-paginator {
|
||||||
padding: 1rem;
|
// padding: 1rem;
|
||||||
}
|
// }
|
||||||
|
|
||||||
.p-datatable-thead > tr > th {
|
// .p-datatable-thead > tr > th {
|
||||||
text-align: left;
|
// text-align: left;
|
||||||
}
|
// }
|
||||||
|
|
||||||
.p-datatable-tbody > tr > td {
|
// .p-datatable-tbody > tr > td {
|
||||||
cursor: auto;
|
// cursor: auto;
|
||||||
}
|
// }
|
||||||
|
|
||||||
.p-dropdown-label:not(.p-placeholder) {
|
// .p-dropdown-label:not(.p-placeholder) {
|
||||||
text-transform: uppercase;
|
// text-transform: uppercase;
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
|
|
||||||
/* Responsive */
|
// /* Responsive */
|
||||||
.p-datatable-customers .p-datatable-tbody > tr > td > .p-column-title {
|
// .p-datatable-customers .p-datatable-tbody > tr > td > .p-column-title {
|
||||||
display: none;
|
// display: none;
|
||||||
}
|
// }
|
||||||
|
|
||||||
.p-progressbar-value.ui-widget-header {
|
// .p-progressbar-value.ui-widget-header {
|
||||||
background: #607d8b;
|
// background: #607d8b;
|
||||||
}
|
// }
|
||||||
|
|
||||||
@media (max-width: 640px) {
|
// @media (max-width: 640px) {
|
||||||
.p-progressbar {
|
// .p-progressbar {
|
||||||
margin-top: .5rem;
|
// margin-top: .5rem;
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
|
|
||||||
.product-image {
|
// .product-image {
|
||||||
width: 100px;
|
// width: 100px;
|
||||||
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23)
|
// box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23)
|
||||||
}
|
// }
|
||||||
|
|
||||||
.orders-subtable {
|
// .orders-subtable {
|
||||||
padding: 1rem;
|
// padding: 1rem;
|
||||||
}
|
// }
|
||||||
|
|
||||||
|
|
||||||
@media screen and (max-width: 960px) {
|
// @media screen and (max-width: 960px) {
|
||||||
.p-datatable {
|
// .p-datatable {
|
||||||
&.p-datatable-customers {
|
// &.p-datatable-customers {
|
||||||
.p-datatable-thead > tr > th,
|
// .p-datatable-thead > tr > th,
|
||||||
.p-datatable-tfoot > tr > td {
|
// .p-datatable-tfoot > tr > td {
|
||||||
display: none !important;
|
// display: none !important;
|
||||||
}
|
// }
|
||||||
|
|
||||||
.p-datatable-tbody > tr {
|
// .p-datatable-tbody > tr {
|
||||||
> td {
|
// > td {
|
||||||
text-align: left;
|
// text-align: left;
|
||||||
display: block;
|
// display: block;
|
||||||
border: 0 none !important;
|
// border: 0 none !important;
|
||||||
width: 100% !important;
|
// width: 100% !important;
|
||||||
float: left;
|
// float: left;
|
||||||
clear: left;
|
// clear: left;
|
||||||
border: 0 none;
|
// border: 0 none;
|
||||||
|
|
||||||
.p-column-title {
|
// .p-column-title {
|
||||||
padding: .4rem;
|
// padding: .4rem;
|
||||||
min-width: 30%;
|
// min-width: 30%;
|
||||||
display: inline-block;
|
// display: inline-block;
|
||||||
margin: -.4rem 1rem -.4rem -.4rem;
|
// margin: -.4rem 1rem -.4rem -.4rem;
|
||||||
font-weight: bold;
|
// font-weight: bold;
|
||||||
}
|
// }
|
||||||
|
|
||||||
.p-progressbar {
|
// .p-progressbar {
|
||||||
margin-top: .5rem;
|
// margin-top: .5rem;
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
|
|
||||||
colgroup {
|
// colgroup {
|
||||||
display: none;
|
// display: none;
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
|
|
||||||
.p-datatable-header {
|
// .p-datatable-header {
|
||||||
.table-header {
|
// .table-header {
|
||||||
flex-direction: column !important;
|
// flex-direction: column !important;
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
|
|
||||||
.crud-demo {
|
.crud-demo {
|
||||||
.p-toolbar {
|
.p-toolbar {
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user