v20.3.3 - Release

* Remove deprecated Angular Animations.

* Allow for string object id. Move common functions to util folders. Fix template data returning in selected row data.

* Version tick. README improvments.

Author: CodyTolene

README.md

@@ -1,11 +1,14 @@
-<p align="center">
+<div align="center">
   <a href="https://www.ProAngular.com" target="_blank">
     <img src="https://raw.githubusercontent.com/ProAngular/pro-table/refs/heads/main/public/images/pro-angular-logo.png" />
   </a>
   <h1 align="center">
     <a href="https://www.ProAngular.com" target="_blank">Pro Angular</a>: Table Component
   </h1>
-</p>
+  <p align="center">
+    An abstraction of Angular Material’s table that speeds up development time and gives you quick access to features such as type safe columns, row selection, copy on click, expandable rows, intent based sorting, and more!
+  </p>
+</div>
 
 <!---------------------------------------------------------------------------->
 <!---------------------------------------------------------------------------->
@@ -63,14 +66,15 @@ https://www.ProAngular.com/demos/pro-table
 
 ## Description <a name="description"></a>
 
-`@proangular/pro-table` is a **type-safe, Angular 20–first abstraction** over
-Angular Material’s table. It’s designed for apps using **standalone components,
-signals, and the new control-flow syntax** so you can wire up robust data grids
-quickly without giving up control of your data model or rendering. The component
-keeps Material’s performance and accessibility surface, while adding
-strongly-typed columns, selection, copy-on-click, expandable detail rows, and a
-clean sorting contract that **emits intent** instead of mutating your data for
-you.
+`@proangular/pro-table` is a **type-safe, Angular abstraction** over Angular
+Material’s table. It’s designed for apps using **standalone components, signals,
+and the new control-flow syntax** so you can wire up data grids quickly without
+giving up control of your data model or rendering.
+
+The component keeps Material’s performance, accessibility, and theming surface,
+while adding strongly-typed columns, selection, copy-on-click, expandable detail
+rows, and a clean sorting contract that **emits intent** instead of mutating
+data.
 
 ### Why it’s useful (technical)
 
@@ -100,7 +104,7 @@ you.
   values. These affordances reduce the “glue code” you normally write around
   `MatTable`.
 
-- **Built for Angular 20 patterns**  
+- **Built for Angular 20+ patterns**  
   Uses **OnPush** change detection, `@if/@for/@let` in templates, and small
   reactive streams (`BehaviorSubject/ReplaySubject` + `shareReplay`) to keep
   updates efficient. The example shows **signals** + `effect()` integrating

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@proangular/pro-table",
-  "version": "20.3.2",
+  "version": "20.3.3",
   "description": "A rich, dynamic, and versatile table component based on Angular Material.",
   "author": "Pro Angular <webmaster@proangular.com>",
   "homepage": "https://www.proangular.com",

package.json

@@ -55,7 +55,7 @@
             column.minWidthPx ? column.minWidthPx + 'px' : undefined
           "
         >
-          @let data = getData(dataSourceItem, column.key);
+          @let data = getData(dataSourceItem, column.key, placeholderEmptyData);
           @switch (getTypeOf(data)) {
             @case ('datetime') {
               <span [title]="data | dateTime: 'MM/dd/yyyy, hh:mm a (ZZZZ)'">
@@ -107,37 +107,36 @@
         </td>
       </ng-container>
     }
-    <ng-container matColumnDef="expandedDetail">
+    <ng-container matColumnDef="expandableRow">
       <td
         mat-cell
         *matCellDef="let rowObjectData"
         [attr.colspan]="columnKeys?.length ?? 1"
       >
         <div
           class="expandable-row-details"
-          [@collapseAnimation]="
-            isRowExpanded(rowObjectData, expandableObject)
-              ? 'expanded'
-              : 'collapsed'
-          "
+          [class.open]="isRowExpanded(rowObjectData, expandableObject)"
         >
-          @if (
-            expandableObject && isRowExpanded(rowObjectData, expandableObject)
-          ) {
-            <div [@exitAnimation]>
-              <ng-container
-                *ngTemplateOutlet="
-                  expandableObject.templateRef;
-                  context: isNonEmptyObject(expandableObject.context)
-                    ? expandableObject.context
-                    : null
-                "
-              ></ng-container>
-            </div>
-          }
+          <div>
+            @if (
+              expandableObject && isRowExpanded(rowObjectData, expandableObject)
+            ) {
+              <div animate.leave="exp-leave">
+                <ng-container
+                  *ngTemplateOutlet="
+                    expandableObject.templateRef;
+                    context: isNonEmptyObject(expandableObject.context)
+                      ? expandableObject.context
+                      : null
+                  "
+                ></ng-container>
+              </div>
+            }
+          </div>
         </div>
       </td>
     </ng-container>
+
     <tr mat-header-row *matHeaderRowDef="columnKeys; sticky: stickyHeader"></tr>
     <tr
       mat-row
@@ -148,7 +147,7 @@
     <tr
       mat-row
       class="expandable-row"
-      *matRowDef="let rowObjectData; columns: ['expandedDetail']"
+      *matRowDef="let rowObjectData; columns: ['expandableRow']"
     ></tr>
     <tr class="empty" *matNoDataRow>
       <td [attr.colspan]="columnKeys?.length || 0">

src/app/public/table/table-animations.ts

@@ -61,14 +61,22 @@ table {
 
     > div.expandable-row-details {
       background-color: inherit;
-      display: flex;
+      display: grid;
+      grid-template-rows: 0fr;
       overflow: hidden;
       width: 100%;
+      transition: grid-template-rows 100ms ease-in;
 
       > div {
+        overflow: hidden;
         width: 100%;
       }
     }
+
+    > div.expandable-row-details.open {
+      grid-template-rows: 1fr;
+      transition: grid-template-rows 100ms ease-out;
+    }
   }
 }
 
@@ -109,3 +117,17 @@ p.loading {
     background: var(--mat-table-background-color);
   }
 }
+
+/* Animations */
+
+@keyframes exp-leave-hold {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 1;
+  }
+}
+.exp-leave {
+  animation: exp-leave-hold 100ms linear both;
+}