Fix table header

This commit is contained in:
Çetin
2025-01-06 15:00:11 +03:00
parent ee5fcdeb1f
commit 1a58b06ce5

View File

@@ -15,6 +15,8 @@ import { RatingModule } from 'primeng/rating';
import { Customer, CustomerService, Representative } from '@/src/service/customer.service'; import { Customer, CustomerService, Representative } from '@/src/service/customer.service';
import { Product, ProductService } from '@/src/service/product.service'; import { Product, ProductService } from '@/src/service/product.service';
import { RippleModule } from 'primeng/ripple'; import { RippleModule } from 'primeng/ripple';
import { InputIconModule } from 'primeng/inputicon';
import { IconField } from 'primeng/iconfield';
interface expandedRows { interface expandedRows {
[key: string]: boolean; [key: string]: boolean;
@@ -22,7 +24,7 @@ interface expandedRows {
@Component({ @Component({
standalone: true, standalone: true,
imports:[TableModule, MultiSelectModule, SelectModule, InputTextModule, SliderModule,ProgressBarModule,ToggleButtonModule,ToastModule, CommonModule, FormsModule,ButtonModule,RatingModule, RippleModule], imports: [TableModule, MultiSelectModule, InputIconModule, SelectModule, InputTextModule, SliderModule, ProgressBarModule, ToggleButtonModule, ToastModule, CommonModule, FormsModule, ButtonModule, RatingModule, RippleModule, IconField],
template: ` template: `
<div class="card"> <div class="card">
<div class="font-semibold text-xl mb-4">Filtering</div> <div class="font-semibold text-xl mb-4">Filtering</div>
@@ -31,14 +33,14 @@ interface expandedRows {
[globalFilterFields]="['name','country.name','representative.name','status']" [globalFilterFields]="['name','country.name','representative.name','status']"
responsiveLayout="scroll"> 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-between items-center flex-column sm:flex-row">
<button pButton label="Clear" class="p-button-outlined mb-2" icon="pi pi-filter-slash" <button pButton label="Clear" class="p-button-outlined mb-2" icon="pi pi-filter-slash" (click)="clear(dt1)"></button>
(click)="clear(dt1)"></button> <p-iconfield iconPosition="left" class="ml-auto">
<span class="p-input-icon-left mb-2"> <p-inputicon>
<i class="pi pi-search"></i> <i class="pi pi-search"></i>
<input pInputText type="text" #filter (input)="onGlobalFilter(dt1, $event)" placeholder="Search Keyword" </p-inputicon>
class="w-full" /> <input pInputText type="text" (input)="onGlobalFilter(dt1, $event)" placeholder="Search keyword" />
</span> </p-iconfield>
</div> </div>
</ng-template> </ng-template>
<ng-template #header> <ng-template #header>
@@ -367,9 +369,9 @@ interface expandedRows {
<tr> <tr>
<td style="min-width: 200px;"> <td style="min-width: 200px;">
{{ customer.name }} {{ customer.name }}
</td> </td>ƒ
<td style="min-width: 200px;"> <td style="min-width: 200px;">
<img src="assets/demo/images/flag/flag_placeholder.png" <img src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png"
[class]="'flag flag-' + customer.country.code" width="30"> [class]="'flag flag-' + customer.country.code" width="30">
<span class="image-text" style="margin-left: .5em">{{ customer.country.name }}</span> <span class="image-text" style="margin-left: .5em">{{ customer.country.name }}</span>
</td> </td>