refactor: ensure that rows are always defined internally (#192)

BREAKING CHANGE: The datatable no longer accepts
`undefined` as a value of the `count` input.

The TypeScript type never allowed `undefined` but it previously worked anyway.
Now passing `undefined` will lead to an error.
Instead of `undefined` just pass `0` which has the same effect.

Author: spike-rabbit

projects/ngx-datatable/src/lib/components/body/body.component.ts

@@ -73,7 +73,7 @@ import { DatatableBodyRowDirective } from './body-row.directive';
       (select)="select.emit($event)"
       (activate)="activate.emit($event)"
     >
-      @if (rows?.length) {
+      @if (rows.length) {
         <datatable-scroller
           [scrollbarV]="scrollbarV"
           [scrollbarH]="scrollbarH"
@@ -314,9 +314,6 @@ export class DataTableBodyComponent<TRow extends Row = any> implements OnInit, O
     if (val !== this._offset) {
       this._offset = val;
       if (!this.scrollbarV || (this.scrollbarV && !this.virtualization)) {
-        if (!isNaN(this._offset) && this.ghostLoadingIndicator) {
-          this.rows = [];
-        }
         this.recalcLayout();
       }
     }
@@ -728,7 +725,7 @@ export class DataTableBodyComponent<TRow extends Row = any> implements OnInit, O
    * @returns the CSS3 style to be applied
    */
   bottomSummaryRowsStyles = computed(() => {
-    if (!this.scrollbarV || !this.rows || !this.rows.length || !this.rowsToRender()) {
+    if (!this.scrollbarV || !this.rows.length || !this.rowsToRender()) {
       return null;
     }
 
@@ -787,7 +784,7 @@ export class DataTableBodyComponent<TRow extends Row = any> implements OnInit, O
     this.rowHeightsCache().clearCache();
 
     // Initialize the tree only if there are rows inside the tree.
-    if (this.rows && this.rows.length) {
+    if (this.rows.length) {
       const rowExpansions = new Set<TRow>();
       if (this.rowDetail) {
         for (const row of this.rows) {

projects/ngx-datatable/src/lib/components/body/summary/summary-row.component.spec.ts

@@ -56,13 +56,15 @@ describe('DataTableSummaryRowComponent', () => {
 
   describe('Visibility', () => {
     it('should not be visible when there are no columns', () => {
+      component.columns = [];
       component.rows = rows;
       triggerChange();
       expect(element.query(By.css('datatable-body-row'))).toBeNull();
     });
 
     it('should not be visible when there are no rows', () => {
       component.columns = columns;
+      component.rows = [];
       triggerChange();
       expect(element.query(By.css('datatable-body-row'))).toBeNull();
     });

projects/ngx-datatable/src/lib/components/body/summary/summary-row.component.ts

@@ -51,7 +51,7 @@ export class DataTableSummaryRowComponent implements OnChanges {
   summaryRow: any = {};
 
   ngOnChanges() {
-    if (!this.columns || !this.rows) {
+    if (!this.columns.length || !this.rows.length) {
       return;
     }
     this.updateInternalColumns();

projects/ngx-datatable/src/lib/components/datatable.component.ts

@@ -119,7 +119,7 @@ export class DatatableComponent<TRow extends Row = any>
    * Rows that are displayed in the table.
    */
   @Input() set rows(val: TRow[] | null | undefined) {
-    this._rows = val;
+    this._rows = val ?? [];
     if (val) {
       // This will ensure that datatable detects changes on doing like this rows = [...rows];
       if (val.length) {
@@ -311,7 +311,7 @@ export class DatatableComponent<TRow extends Row = any>
     this._ghostLoadingIndicator = val;
     if (val && this.scrollbarV && !this.externalPaging) {
       // in case where we don't have predefined total page length
-      this.rows = [...(this.rows ?? []), undefined]; // undefined row will render ghost cell row at the end of the page
+      this.rows = [...this.rows, undefined]; // undefined row will render ghost cell row at the end of the page
     }
   }
   get ghostLoadingIndicator(): boolean {
@@ -692,9 +692,9 @@ export class DatatableComponent<TRow extends Row = any>
   _limit: number | undefined;
   _count = 0;
   _offset = 0;
-  _rows: TRow[] | null | undefined;
+  _rows: TRow[];
   _groupRowsBy: keyof TRow;
-  _internalRows: TRow[];
+  _internalRows: TRow[] = [];
   _internalColumns: TableColumnInternal<TRow>[];
   _columns: TableColumn[];
   _subscriptions: Subscription[] = [];
@@ -1056,10 +1056,6 @@ export class DatatableComponent<TRow extends Row = any>
    */
   calcRowCount(): number {
     if (!this.externalPaging) {
-      if (!this.rows) {
-        return 0;
-      }
-
       if (this.groupedRows) {
         return this.groupedRows.length;
       } else if (this.treeFromRelation != null && this.treeToRelation != null) {

src/app/paging/paging-virtual.component.ts

@@ -50,7 +50,7 @@ import { Employee } from '../data.model';
   imports: [DatatableComponent]
 })
 export class VirtualPagingComponent {
-  totalElements: number;
+  totalElements = 0;
   pageNumber: number;
   rows: Employee[];
   cache: Record<string, boolean> = {};