<div class="container-fluid mt-5">
<div class="table-responsive shadow">
<table class="table table-bordereless mb-0">
<thead class="table-head">
<tr>
@for (head of thead; track head.displayName) {
<th [class]="head.thClass" [ngClass]="{ 'pointer': head?.sortable }" [style]="head.thStyle">
@switch (head.elementType)
{
<!-- #region Text -->
@case ('text') {
<span [id]="head?.id" (click)="head?.event == 'click'? eventTriggered($event, head.displayName): '' "
[class]="head?.class" [style]="head?.style">
@if (head?.sortable) {
<i class="fa-solid fa-sort"></i>
}
{{head.displayName}}
</span>
}
<!-- #endregion -->
<!-- #region innerHTML -->
@case ('innerHTML') {
<span (click)="head?.event === 'click' ? eventTriggered($event,head.displayName) : ''"
[innerHTML]="head.displayName" [id]="head?.id" [class]="head?.class" [style]="head?.style">
</span>
}
<!-- #endregion -->
<!-- #region input -->
@case ('input') {
<input [type]="head?.inputType" [id]="head?.id" [class]="head?.class" [style]="head?.style"
(click)="head?.event === 'click' ? eventTriggered($event,head.displayName,'click') : ''"
(change)="head?.event === 'change' ? eventTriggered($event,head.displayName,'change') : ''">
<label [for]="head?.id" [class]="head?.class" [innerHTML]="head?.inputLabel"></label>
}
<!-- #endregion -->
<!-- #region icon -->
@case ('icon') {
<button class="btn border-0" [id]="head?.id" [style]="head?.style"
(click)="head.event === 'click' ? eventTriggered($event,head.displayName):''">
<i [class]="head?.iconClass"></i>
</button>
}
@case ('iconWithText') {
<button class="btn border-0" [id]="head?.id" [style]="head?.style"
(click)="head.event === 'click' ? eventTriggered($event,head.displayName):''">
<i [class]="head?.iconClass"></i>
</button>
<span>{{head.iconText}}</span>
}
<!-- #endregion -->
}
</th>
}
</tr>
</thead>
<tbody>
@for (data of dataArr | paginate:{itemsPerPage: pagination.pageSize , currentPage: pagination.page , totalItems:
pagination.totalItems}; track data?.id;) {
<tr>
@for (body of tbody; track $index; ) {
<td [style]="body?.tdStyle" [class]="body.tdClass"
[ngClass]="{'pointer':body?.routerLink || body?.clickFunction}"
(click)="(body?.clickFunction && body.parameter) ? eventTriggered($event,data[body.parameter],'click') : ''"
[routerLink]="body?.routerLink">
@switch (body.elementType) {
<!-- #region Text -->
@case ('text') {
<span [class]="body?.class" [style]="body?.style" [id]="body?.id"
[pTooltip]="data[body.attrName]?.length >=40 ? data[body.attrName] : ''" tooltipPosition="top">
{{data[body.attrName]?.slice(0,40)}}
</span>
@if (data[body.attrName]?.length >= 40) {
<span>...</span>
}
}
<!-- #endregion -->
<!-- #region Serial No -->
@case ('serialNo') {
<span [class]="body?.class" [style]="body?.style" [id]="body?.id">
{{($index + 1 ) }}
</span>
}
<!-- #endregion -->
<!-- #region input -->
@case ('input') {
<input [type]="body?.inputType" [class]="body?.inputClass"
[id]="body.inputId ? 'id-'+data[body.inputId] : 'id'+body.attrName"
(click)="body?.event === 'click' ? eventTriggered($event,(body.parameter ? data[body.parameter]:data[body.attrName]),body.action ? body.action : 'click') : ''"
(change)="body?.event === 'change' ? eventTriggered($event,(body.parameter ? data[body.parameter] : data[body.attrName]),body.action ? body.action : 'change'):''">
@if (body.inputLabel) {
<label [for]="body.inputId ? body.inputId : 'id'+body.attrName">{{body.inputLabel}}</label>
}
}
<!-- #endregion -->
<!-- #region innerHTML -->
@case ('innerHTML') {
<span [innerHTML]="body.attrName ? data[body.attrName] : body?.innerHTML" [class]="body?.class"
[style]="body?.style" [id]="body?.id"
(click)="body?.event === 'click' ? eventTriggered($event,(body.parameter ? data[body.parameter] : data[body.attrName])) : ''">
</span>
}
<!-- #endregion -->
<!-- #region Dropdown -->
@case ('dropdown') {
<div class="dropdown">
<button class="btn p-0 px-3 border-0" data-bs-toggle="dropdown">
<i class="fa-solid fa-ellipsis-vertical"></i>
</button>
<ul class="dropdown-menu dropdown-overflow">
@for (dd of body?.dropdownData; track dd.content) {
<li>
<span class="dropdown-item pointer" [attr.data-bs-toggle]="dd.modelId ? 'modal' : ''"
[attr.data-bs-target]="dd.modelId ? '#'+dd.modelId : ''"
[innerHTML]="(dd.icon ? iconArr[dd['icon']] : '') +' '+dd?.content"
(click)="eventTriggered($event,data[dd.parameter],dd?.icon+(body?.attrName ? '-' +body.attrName : ''))"></span>
</li>
}
</ul>
</div>
}
<!-- #endregion -->
<!-- #region Icon -->
@case ('icon') {
<button class="btn border-0" [id]="body?.id" [style]="body?.style"
[attr.data-bs-toggle]="body.modelId ? 'modal' : ''"
[attr.data-bs-targrt]="body.modelId ? '#'+body.modelId : ''"
(click)="body?.event === 'click' ? eventTriggered($event,body.parameter && data[body.parameter],'click '+body.attrName) : ''"
(dblclick)="body?.event == 'dblclick' ? eventTriggered($event,body.parameter && data[body.parameter],'dblclick'+body.attrName) : ''">
<i [class]="body?.iconClass"></i>
</button>
}
@case ('iconWithText') {
<button class="btn border-0" [id]="body?.id" [style]="body?.style"
[attr.data-bs-toggle]="body.modelId ? 'modal' : ''"
[attr.data-bs-targrt]="body.modelId ? '#'+body.modelId : ''"
(click)="body?.event === 'click' ? eventTriggered($event,body.parameter && data[body.parameter],'click'+body.attrName) : ''"
(dblclick)="body?.event == 'dblclick' ? eventTriggered($event,body.parameter && data[body.parameter],'dblclick'+body.attrName) : ''">
<i [class]="body?.iconClass"></i>
</button>
<span>{{body?.iconText}}</span>
}
<!-- #endregion -->
<!-- #region Select -->
@case ('select') {
<select [class]="body?.class" [style]="body?.style"
[id]="body?.id+'_'+(body.parameter ? data[body.parameter] : '')"
(change)="eventTriggered($event,body.parameter ? data[body.parameter] : '','change')">
@for (option of body?.optionArr; track option) {
<option [value]="body.optionValue ? option[body.optionValue] : option"
[selected]="body.selecterOption && body.optionValue ? data[body.selecterOption] == option[body.optionValue] : false ">
{{body.optionLabel ? option[body.optionLabel] : option}}
</option>
}
</select>
}
<!-- #endregion -->
<!-- #region Conditional -->
@case ('conditional') {
<span [class]="body?.class" [style]="body?.style">
@if (data[body.attrName] == body.condition) {
<span [innerHTML]="body?.trueStatement"></span>
}@else {
<span [innerHTML]="body?.falseStatement"></span>
}
</span>
}
<!-- #endregion -->
}
</td>
}
</tr>
}
</tbody>
</table>
</div>
<div class="table-bottom">
<div class="row align-items-center mt-3 px-3">
<div class="col-lg-3">
<span>
Displaying
{{ ( ( pagination.page - 1 ) * ( pagination.pageSize ) ) + 1 }}
to
{{ ( ( pagination.page - 1 ) * ( pagination.pageSize ) + (pagination.pageSize) >
pagination.totalItems )
? pagination.totalItems
: ( pagination.page - 1 ) * ( pagination.pageSize ) + (pagination.pageSize) }}
of {{ pagination.totalItems }}
</span>
</div>
<div class="col-lg-9 text-end">
<pagination-controls (pageChange)="changePage($event)" previousLabel="" nextLabel="">
</pagination-controls>
</div>
</div>
</div>
</div>
<!-- #region typescript -->
type Thead = {
displayName: string;
sortable?: boolean;
sortItem?: string;
thClass: string | '';
thStyle?: string;
inputClass?: string;
inputId?: string;
iconClass?: string;
class?: string;
id?: string;
style?: string;
// for elements and events
elementType: Exclude<typeElement, 'serialNo' | 'conditional' | 'dropdown'>;
iconText?: string;
inputType?: string;
inputLabel?: string;
event?: typeEvent;
action?: string;
};
type Tbody = {
attrName: string;
tdClass: string | '';
tdStyle?: string;
inputClass?: string;
inputId?: string;
iconClass?: string;
class?: string;
id?: string;
style?: string;
innerHTML?: string;
//for elements and events
elementType: typeElement;
iconText?: string;
inputType?: string;
inputLabel?: string;
event?: typeEvent;
modelId?: string;
//for routers and parameters
routerLink?: string;
clickFunction?: string;
parameter?: string;
action?: string;
//for dropdown
dropdownData?: typeDropdown[];
//for conditional
condition?: unknown;
trueStatement?: unknown;
falseStatement?: unknown;
//for select
optionArr?: any[];
optionValue?: string;
optionLabel?: string;
selecterOption?: string;
};
type typeElement =
| 'input'
| 'icon'
| 'text'
| 'serialNo'
| 'iconWithText'
| 'innerHTML'
| 'dropdown'
| 'conditional'
| 'select';
type typeEvent = 'click' | 'change' | 'input' | 'dblclick';
type TriggeredEvent = { event: Event; action?: string; parameter: string };
type typeDropdown = {
icon?: string;
content: string;
parameter: string;
modelId?: string;
};
type Pagination = {
totalItems: number;
page: number;
pageSize: number;
optimization: boolean;
getPagination?: boolean;
};
type PaginationOutput = {
page: number;
pageSize: number;
};
export { Thead, Tbody, TriggeredEvent, Pagination, PaginationOutput };
this is a custom table i created how but the $index serial number is not working how do i fix it