Я использую мой проект Angular для Таблица дизайна Ant (таблица ng-zorro) , любой знает, как исправить раздел нижнего колонтитула в стол,? как на следующем изображении
блиц стек здесь
код здесь
interface ProjectBooked {
key: string;
cName: string;
cTitle: any;
pLocation: string;
conName: any;
sortOrder?: NzTableSortOrder;
sortFn?: NzTableSortFn;
listOfFilter?: NzTableFilterList;
filterFn?: NzTableFilterFn;
filterMultiple?: boolean;
sortDirections?: NzTableSortOrder[];
}
@Component({
selector: 'nz-demo-table-multiple-sorter',
template: `
<nz-table
#basicTable
#sortTable
[nzData]="listOfDisplayData"
#borderedTable
nzBordered
#headerTable
[nzLoading]="loading"
[nzPageSize]="5" [nzScroll]="{ x: '1000px', y: '240px' }">
<thead>
<tr>
<th nzCustomFilter nzColumnKey="cName" [nzSortFn]="sortFn"
>
Company Name
<nz-filter-trigger [(nzVisible)]="visible" [nzActive]="searchValue.length > 0"
[nzDropdownMenu]="menu">
<i nz-icon nzType="search"></i>
</nz-filter-trigger>
</th>
<th>Position Title</th>
<th>Position Location</th>
<th>Consultant Name</th>
<th nzWidth="100px">Status</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let data of basicTable.data">
<td>{{ data.cName }}</td>
<td>{{ data.cTitle }}</td>
<td>{{ data.pLocation }}</td>
<td>{{ data.conName }}</td>
<td>
<a><nz-tag [nzColor]="'blue'">Booked</nz-tag></a>
</td>
</tr>
</tbody>
</nz-table>
<nz-dropdown-menu #menu="nzDropdownMenu">
<div class="ant-table-filter-dropdown">
<div class="search-box">
<input type="text" nz-input placeholder="Search name" [(ngModel)]="searchValue" />
<button nz-button nzSize="small" nzType="primary" (click)="search()" class="search-button">
Search
</button>
<button nz-button nzSize="small" (click)="reset()">Reset</button>
</div>
</div>
</nz-dropdown-menu>
`
})
export class NzDemoTableMultipleSorterComponent {
constructor(private i18n: NzI18nService) {}
loading = false;
searchValue = '';
visible = false;
// Project Booked
listOfData: ProjectBooked[] = [
{
key: '1',
cName: 'OBUSIT ',
cTitle: 'Chief Administrative Officer',
pLocation: 'Washington, DC',
conName: 'Admin',
},
{
key: '2',
cName: 'OBUSIT TEST ',
cTitle: 'Chief Administrative Officer',
pLocation: 'Washington, DC',
conName: 'Admin',
},
{
key: '3',
cName: 'OBUSIT University',
cTitle: 'Chief Administrative Officer',
pLocation: 'Washington, DC',
conName: 'Admin',
},
{
key: '4',
cName: 'OBUSIT Howard University',
cTitle: 'Chief Administrative Officer',
pLocation: 'Washington, DC',
conName: 'Admin',
},
];
listOfDisplayData = [...this.listOfData];
// Month Picker
date = null;
dateRange = [];
isEnglish = false;
reset(): void {
this.searchValue = '';
this.search();
}
search(): void {
this.visible = false;
this.listOfDisplayData = this.listOfData.filter((item: ProjectBooked) => item.cName.indexOf(this.searchValue) !== -1);
}
onChange(result: Date): void {
console.log('onChange: ', result);
}
getWeek(result: Date): void {
console.log('week: ', getISOWeek(result));
}
changeLanguage(): void {
this.i18n.setLocale(this.isEnglish ? zh_CN : en_US);
this.isEnglish = !this.isEnglish;
}
ngOnInit(): void {
}
sortFn = (a: ProjectBooked, b: ProjectBooked) => a.cName.localeCompare(b.cName);
}