Fix table header
This commit is contained in:
@@ -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>
|
||||||
|
|||||||
Reference in New Issue
Block a user