diff --git a/projects/ngx-datatable/src/lib/components/body/body-cell.component.ts b/projects/ngx-datatable/src/lib/components/body/body-cell.component.ts index 993935ebe..9f2209d01 100644 --- a/projects/ngx-datatable/src/lib/components/body/body-cell.component.ts +++ b/projects/ngx-datatable/src/lib/components/body/body-cell.component.ts @@ -31,61 +31,63 @@ import { selector: 'datatable-body-cell', changeDetection: ChangeDetectionStrategy.OnPush, template: ` - + @if (row) {
- - - + @if (column.checkboxable && (!displayCheck || displayCheck(row, column, value))) { + + } + @if (column.isTreeColumn) { + @if (!column.treeToggleTemplate) { + + } @else { + + + } + } + + @if (!column.cellTemplate) { + + } @else { - - - - - + }
- - - - + } @else { + @if (ghostLoadingIndicator) { + + } + } ` }) export class DataTableBodyCellComponent diff --git a/projects/ngx-datatable/src/lib/components/body/body-row-def.component.ts b/projects/ngx-datatable/src/lib/components/body/body-row-def.component.ts index c87529f22..22f5f2d75 100644 --- a/projects/ngx-datatable/src/lib/components/body/body-row-def.component.ts +++ b/projects/ngx-datatable/src/lib/components/body/body-row-def.component.ts @@ -17,11 +17,12 @@ import { */ @Component({ selector: 'datatable-row-def', - template: `` + template: `@if (rowDef.rowDefInternal.rowTemplate) { + + }` }) export class DatatableRowDefComponent { rowDef = inject(RowDefToken); diff --git a/projects/ngx-datatable/src/lib/components/body/body-row-wrapper.component.ts b/projects/ngx-datatable/src/lib/components/body/body-row-wrapper.component.ts index 80d4e8da4..cc6ddb7d4 100644 --- a/projects/ngx-datatable/src/lib/components/body/body-row-wrapper.component.ts +++ b/projects/ngx-datatable/src/lib/components/body/body-row-wrapper.component.ts @@ -1,4 +1,5 @@ import { + booleanAttribute, ChangeDetectionStrategy, ChangeDetectorRef, Component, @@ -12,8 +13,10 @@ import { IterableDiffers, KeyValueDiffer, KeyValueDiffers, + OnChanges, OnInit, Output, + SimpleChanges, ViewChild } from '@angular/core'; import { BehaviorSubject } from 'rxjs'; @@ -27,55 +30,48 @@ import { DatatableRowDetailDirective } from '../row-detail/row-detail.directive' selector: 'datatable-row-wrapper', changeDetection: ChangeDetectionStrategy.OnPush, template: ` -
-
-
- + @if (groupHeader?.template) { +
+
+ @if (groupHeader.checkboxable) { +
+ +
+ } + +
- +
+ } + @if ((groupHeader?.template && expanded) || !groupHeader || !groupHeader.template) { + + } + @if (rowDetail?.template && expanded) { +
+
-
- - -
- - -
+ } `, host: { class: 'datatable-row-wrapper' } }) -export class DataTableRowWrapperComponent implements DoCheck, OnInit { +export class DataTableRowWrapperComponent implements DoCheck, OnInit, OnChanges { @ViewChild('select') checkBoxInput!: ElementRef; @Input() innerWidth: number; @Input() rowDetail: DatatableRowDetailDirective; @@ -92,28 +88,11 @@ export class DataTableRowWrapperComponent implements DoCheck, OnInit row: RowOrGroup; }>(false); - @Input() set rowIndex(val: number) { - this._rowIndex = val; - (this.rowContext ?? this.groupContext).rowIndex = val; - this.cd.markForCheck(); - } - - get rowIndex(): number { - return this._rowIndex; - } + @Input() rowIndex?: number; selectedGroupRows: TRow[] = []; - @Input() set expanded(val: boolean) { - this._expanded = val; - (this.groupContext ?? this.rowContext)!.expanded = val; - this.rowContext.expanded = val; - this.cd.markForCheck(); - } - - get expanded(): boolean { - return this._expanded; - } + @Input({ transform: booleanAttribute }) expanded = false; groupContext?: GroupContext; rowContext?: RowDetailContext; @@ -121,8 +100,6 @@ export class DataTableRowWrapperComponent implements DoCheck, OnInit private rowDiffer: KeyValueDiffer, any>; private selectedRowsDiffer: IterableDiffer; - private _expanded = false; - private _rowIndex: number; private tableComponent = inject(DatatableComponentToken); constructor( @@ -130,24 +107,7 @@ export class DataTableRowWrapperComponent implements DoCheck, OnInit differs: KeyValueDiffers, private iterableDiffers: IterableDiffers ) { - // this component renders either a group header or a row. Never both. - if (this.isGroup(this.row)) { - this.groupContext = { - group: this.row, - expanded: this.expanded, - rowIndex: this.rowIndex - }; - } else { - this.rowContext = { - row: this.row, - expanded: this.expanded, - rowIndex: this.rowIndex, - disableRow$: this.disable$ - }; - } - this.rowDiffer = differs.find({}).create(); - this.selectedRowsDiffer = this.iterableDiffers.find(this.selected ?? []).create(); } get group(): Group { @@ -164,6 +124,36 @@ export class DataTableRowWrapperComponent implements DoCheck, OnInit this.disable$ = new BehaviorSubject(isRowDisabled); this.rowContext.disableRow$ = this.disable$; } + this.selectedRowsDiffer = this.iterableDiffers.find(this.selected ?? []).create(); + } + + ngOnChanges(changes: SimpleChanges): void { + if (changes['row']) { + // this component renders either a group header or a row. Never both. + if (this.isGroup(this.row)) { + this.groupContext = { + group: this.row, + expanded: this.expanded, + rowIndex: this.rowIndex + }; + } else { + this.rowContext = { + row: this.row, + expanded: this.expanded, + rowIndex: this.rowIndex, + disableRow$: this.disable$ + }; + } + } + if (changes['rowIndex']) { + (this.rowContext ?? this.groupContext).rowIndex = this.rowIndex; + } + if (changes['expanded']) { + (this.groupContext ?? this.rowContext)!.expanded = this.expanded; + if (this.rowContext) { + this.rowContext.expanded = this.expanded; + } + } } ngDoCheck(): void { diff --git a/projects/ngx-datatable/src/lib/components/body/body-row.component.ts b/projects/ngx-datatable/src/lib/components/body/body-row.component.ts index 885f79a34..f2db2cc46 100644 --- a/projects/ngx-datatable/src/lib/components/body/body-row.component.ts +++ b/projects/ngx-datatable/src/lib/components/body/body-row.component.ts @@ -30,32 +30,34 @@ import { ColumnGroupWidth, PinnedColumns } from '../../types/internal.types'; selector: 'datatable-body-row', changeDetection: ChangeDetectionStrategy.OnPush, template: ` -
- - -
+ @for (column of colGroup.columns; track column.$$id; let ii = $index) { + + + } +
+ } ` }) export class DataTableBodyRowComponent implements DoCheck, OnChanges { @@ -186,14 +188,6 @@ export class DataTableBodyRowComponent implements DoCheck, OnChanges } } - trackByGroups(index: number, colGroup: PinnedColumns): string { - return colGroup.type; - } - - columnTrackingFn(index: number, column: TableColumn): string { - return column.$$id; - } - buildStylesByGroup() { this._groupStyles.left = this.calcStylesByGroup('left'); this._groupStyles.center = this.calcStylesByGroup('center'); diff --git a/projects/ngx-datatable/src/lib/components/body/body.component.ts b/projects/ngx-datatable/src/lib/components/body/body.component.ts index e817a08ff..eb7c70e8d 100644 --- a/projects/ngx-datatable/src/lib/components/body/body.component.ts +++ b/projects/ngx-datatable/src/lib/components/body/body.component.ts @@ -35,23 +35,26 @@ import { @Component({ selector: 'datatable-body', template: ` - + @if (loadingIndicator) {
- - - - + @if (!customIndicator?.hasChildNodes()) { + + } + } + @if (ghostLoadingIndicator && (!rowCount || !virtualization || !scrollbarV)) { + + + } - - - - - - - - - - + + } + @for (group of temp; track rowTrackingFn(i, group); let i = $index) { + - - - - - - + } @else { + @if (isRow(group)) { + + + } + } + + + @if (isRow(group)) { + + + } + + + @if (isGroup(group)) { + + @for (row of group.value; track rowTrackingFn(i, row); let i = $index) { + + + } + } + + } + @if (summaryRow && summaryPosition === 'bottom') { + - - - - - - - + + } + + } + @if (!rows?.length && !loadingIndicator && !ghostLoadingIndicator) { -
+ @if (!customEmptyContent?.children.length) { +
+ }
- + } `, changeDetection: ChangeDetectionStrategy.OnPush, diff --git a/projects/ngx-datatable/src/lib/components/body/ghost-loader/ghost-loader.component.html b/projects/ngx-datatable/src/lib/components/body/ghost-loader/ghost-loader.component.html index a102466fc..afc1f212a 100644 --- a/projects/ngx-datatable/src/lib/components/body/ghost-loader/ghost-loader.component.html +++ b/projects/ngx-datatable/src/lib/components/body/ghost-loader/ghost-loader.component.html @@ -1,17 +1,12 @@
-
- -
-
- - -
+ @for (item of [].constructor(pageSize); track item) { +
+ @for (col of columns; track col) { + @if (!col.ghostCellTemplate) { +
+ } @else {} + + } +
+ }
diff --git a/projects/ngx-datatable/src/lib/components/body/summary/summary-row.component.ts b/projects/ngx-datatable/src/lib/components/body/summary/summary-row.component.ts index 10fc98093..82ad16cda 100644 --- a/projects/ngx-datatable/src/lib/components/body/summary/summary-row.component.ts +++ b/projects/ngx-datatable/src/lib/components/body/summary/summary-row.component.ts @@ -29,17 +29,18 @@ function noopSumFunc(cells: any[]): void { @Component({ selector: 'datatable-summary-row', template: ` - - + @if (summaryRow && _internalColumns) { + + + } `, host: { class: 'datatable-summary-row' diff --git a/projects/ngx-datatable/src/lib/components/datatable.component.html b/projects/ngx-datatable/src/lib/components/datatable.component.html index adc4cf261..73c4f1a49 100644 --- a/projects/ngx-datatable/src/lib/components/datatable.component.html +++ b/projects/ngx-datatable/src/lib/components/datatable.component.html @@ -1,33 +1,34 @@
- - + @if (headerHeight) { + + + }
- - + @if (footerHeight) { + + + }
diff --git a/projects/ngx-datatable/src/lib/components/footer/footer.component.ts b/projects/ngx-datatable/src/lib/components/footer/footer.component.ts index 89cce7bec..38e24a099 100644 --- a/projects/ngx-datatable/src/lib/components/footer/footer.component.ts +++ b/projects/ngx-datatable/src/lib/components/footer/footer.component.ts @@ -9,37 +9,38 @@ import { PagerPageEvent } from '../../types/public.types'; [ngClass]="{ 'selected-count': selectedMessage }" [style.height.px]="footerHeight" > - - -
- - {{ selectedCount?.toLocaleString() }} {{ selectedMessage }} / - - {{ rowCount?.toLocaleString() }} {{ totalMessage }} -
- - + @if (footerTemplate) { + + + } @else { +
+ @if (selectedMessage) { + {{ selectedCount?.toLocaleString() }} {{ selectedMessage }} / + } + {{ rowCount?.toLocaleString() }} {{ totalMessage }} +
+ + + }
`, host: { diff --git a/projects/ngx-datatable/src/lib/components/footer/pager.component.ts b/projects/ngx-datatable/src/lib/components/footer/pager.component.ts index f1c0008a8..9f1ebf66e 100644 --- a/projects/ngx-datatable/src/lib/components/footer/pager.component.ts +++ b/projects/ngx-datatable/src/lib/components/footer/pager.component.ts @@ -16,17 +16,18 @@ import { Page } from '../../types/internal.types'; -
  • - - {{ pg.text }} - -
    • + @for (pg of pages; track pg) { +
  • + + {{ pg.text }} + +
    • + }
  • diff --git a/projects/ngx-datatable/src/lib/components/header/header-cell.component.ts b/projects/ngx-datatable/src/lib/components/header/header-cell.component.ts index 95f293c48..60b8db8d2 100644 --- a/projects/ngx-datatable/src/lib/components/header/header-cell.component.ts +++ b/projects/ngx-datatable/src/lib/components/header/header-cell.component.ts @@ -25,25 +25,30 @@ import { selector: 'datatable-header-cell', template: `
    - - - - - + @if (isTarget) { + + + } + @if (isCheckboxable) { + + } + @if (column.headerTemplate) { + + + } @else { + + + - - - + }
    `, diff --git a/projects/ngx-datatable/src/lib/components/header/header.component.ts b/projects/ngx-datatable/src/lib/components/header/header.component.ts index e4bc45f1f..1adc56614 100644 --- a/projects/ngx-datatable/src/lib/components/header/header.component.ts +++ b/projects/ngx-datatable/src/lib/components/header/header.component.ts @@ -44,47 +44,46 @@ import { [style.width.px]="_columnGroupWidths.total" class="datatable-header-inner" > -
    - - -
    + @for (colGroup of _columnsByPin; track colGroup.type) { +
    + @for (column of colGroup.columns; track column.$$id) { + + + } +
    + } `, host: { @@ -236,14 +235,6 @@ export class DataTableHeaderComponent implements OnDestroy, OnChanges { return '100%'; } - trackByGroups(index: number, colGroup: PinnedColumns): string { - return colGroup.type; - } - - columnTrackingFn(index: number, column: TableColumn): string { - return column.$$id; - } - onColumnResized(width: number, column: TableColumn): void { this.resize.emit(this.makeResizeEvent(width, column)); } diff --git a/src/app/basic/row-grouping.component.ts b/src/app/basic/row-grouping.component.ts index 02c11a29b..50b5fc259 100644 --- a/src/app/basic/row-grouping.component.ts +++ b/src/app/basic/row-grouping.component.ts @@ -57,7 +57,7 @@ import { title="Expand/Collapse Group" (click)="toggleExpandGroup(group)" > - Age: {{ group.value[0].age }} + Age: {{ group ? group.value[0].age : '' }}