@libs-ui/components-table 0.2.356-21 → 0.2.356-22

package/README.md

@@ -12,6 +12,7 @@
 - ✅ **Virtual Scrolling**: Tối ưu hiệu năng cho danh sách hàng ngàn bản ghi.
 - ✅ **Phân trang (Pagination)**: Hỗ trợ cả `scroll-infinity` và `click-pagination`.
 - ✅ **Custom Template**: Tùy biến hiển thị từng row và cell thông qua cấu hình `colTemplateConfig`.
+- ✅ **Collapse/Expand Row**: Hỗ trợ mở rộng xem chi tiết dữ liệu cấp dưới (Hierarchical/Sub-table) bằng giao diện có thể tuỳ biến cao.
 - ✅ **Sorting**: Tích hợp sẵn logic sắp xếp dữ liệu.
 - ✅ **Checkbox Selection**: Hỗ trợ chọn một hoặc nhiều hàng cùng lúc.
 - ✅ **Angular Signals**: Hoạt động mượt mà với Signal-based state management.
@@ -78,6 +79,57 @@ Ghim các cột quan trọng bên trái bằng cách sử dụng `headerLeft`. C
   [httpRequestData]="userRequestConfig" />
 ```
 
+### 3. Hierarchical Data (Collapse/Expand Row)
+
+Sử dụng `configTemplateItemCollapseExpand` để cấu hình hiển thị nội dung chi tiết mở rộng bên dưới mỗi hàng. Rất hữu ích cho các Sub-table (bảng con), Report nhiều lớp, v.v.
+
+```html
+<libs_ui-components-table
+  [headerRight]="headerConfig"
+  [newData]="tableData"
+  [configTemplateItemCollapseExpand]="configCollapseExpand" />
+```
+
+```typescript
+// Cấu hình Collapse/Expand Template
+readonly configCollapseExpand: IConfigTemplateItemCollapseExpand = {
+  // Biến dùng để nhận diện nội dung mở rộng mảng object chứa dữ liệu
+  fieldGetDataExpand: 'expand_data', 
+  colTemplateConfig: [
+    {
+      cssWrapper: 'flex w-full',
+      fieldsConfig: [
+        {
+          field: 'details',
+          parseValue: (data) => {
+            // Un-wrap Signal và trả về HTML động tuỳ ý hoặc Component con
+            const details = data.value() || [];
+            let htmlInner = '';
+            details.forEach(d => {
+               htmlInner += `<div>Row Child Detail: \${d.name}</div>`;
+            });
+            return of(\`<div class="p-4 bg-gray-50">\${htmlInner}</div>\`);
+          }
+        }
+      ]
+    }
+  ]
+};
+
+// Dữ liệu cần có cờ \`specificExpand\` để điều hướng state ẩn/hiện,
+// và trường thông tin \`expand_data\` như đã định nghĩa ở trên.
+readonly tableData = {
+  data: convertObjectToSignal([
+    { 
+       id: 1, 
+       name: 'Task Parent 1', 
+       specificExpand: false, // Quản lý state đóng mở
+       expand_data: [{ details: [ {name: 'Sub Task A'}, {name: 'Sub Task B'} ] }] 
+    }
+  ])
+};
+```
+
 ## API Documentation
 
 ### Inputs

package/package.json

@@ -1,39 +1,39 @@
 {
   "name": "@libs-ui/components-table",
-  "version": "0.2.356-21",
+  "version": "0.2.356-22",
   "peerDependencies": {
     "@angular/common": ">=18.0.0",
     "@angular/core": ">=18.0.0",
-    "@libs-ui/components-buttons-button": "0.2.356-21",
+    "@libs-ui/components-buttons-button": "0.2.356-22",
     "@iharbeck/ngx-virtual-scroller": "15.2.0",
-    "@libs-ui/interfaces-types": "0.2.356-21",
-    "@libs-ui/components-buttons-sort": "0.2.356-21",
-    "@libs-ui/components-popover": "0.2.356-21",
-    "@libs-ui/components-avatar": "0.2.356-21",
-    "@libs-ui/components-dropdown": "0.2.356-21",
-    "@libs-ui/components-line-clamp": "0.2.356-21",
-    "@libs-ui/components-list": "0.2.356-21",
-    "@libs-ui/components-switch": "0.2.356-21",
-    "@libs-ui/services-http-request": "0.2.356-21",
+    "@libs-ui/interfaces-types": "0.2.356-22",
+    "@libs-ui/components-buttons-sort": "0.2.356-22",
+    "@libs-ui/components-popover": "0.2.356-22",
+    "@libs-ui/components-avatar": "0.2.356-22",
+    "@libs-ui/components-dropdown": "0.2.356-22",
+    "@libs-ui/components-line-clamp": "0.2.356-22",
+    "@libs-ui/components-list": "0.2.356-22",
+    "@libs-ui/components-switch": "0.2.356-22",
+    "@libs-ui/services-http-request": "0.2.356-22",
     "rxjs": "~7.8.0",
-    "@libs-ui/components-checkbox-group": "0.2.356-21",
-    "@libs-ui/components-checkbox-single": "0.2.356-21",
-    "@libs-ui/components-scroll-overlay": "0.2.356-21",
-    "@libs-ui/components-spinner": "0.2.356-21",
-    "@libs-ui/icons": "0.2.356-21",
-    "@libs-ui/pipes-call-function-in-template": "0.2.356-21",
-    "@libs-ui/pipes-check-selected-by-key": "0.2.356-21",
-    "@libs-ui/utils": "0.2.356-21",
+    "@libs-ui/components-checkbox-group": "0.2.356-22",
+    "@libs-ui/components-checkbox-single": "0.2.356-22",
+    "@libs-ui/components-scroll-overlay": "0.2.356-22",
+    "@libs-ui/components-spinner": "0.2.356-22",
+    "@libs-ui/icons": "0.2.356-22",
+    "@libs-ui/pipes-call-function-in-template": "0.2.356-22",
+    "@libs-ui/pipes-check-selected-by-key": "0.2.356-22",
+    "@libs-ui/utils": "0.2.356-22",
     "@ngx-translate/core": "^15.0.0",
-    "@libs-ui/components-buttons-status": "0.2.356-21",
-    "@libs-ui/pipes-clone-object": "0.2.356-21",
-    "@libs-ui/pipes-security-trust": "0.2.356-21",
-    "@libs-ui/components-badge": "0.2.356-21",
-    "@libs-ui/pipes-convert-object-to-signal": "0.2.356-21",
-    "@libs-ui/pipes-get-value-of-object": "0.2.356-21",
-    "@libs-ui/components-component-outlet": "0.2.356-21",
-    "@libs-ui/components-pagination": "0.2.356-21",
-    "@libs-ui/components-scroll-measure-items-direction-horizontal": "0.2.356-21"
+    "@libs-ui/components-buttons-status": "0.2.356-22",
+    "@libs-ui/pipes-clone-object": "0.2.356-22",
+    "@libs-ui/pipes-security-trust": "0.2.356-22",
+    "@libs-ui/components-badge": "0.2.356-22",
+    "@libs-ui/pipes-convert-object-to-signal": "0.2.356-22",
+    "@libs-ui/pipes-get-value-of-object": "0.2.356-22",
+    "@libs-ui/components-component-outlet": "0.2.356-22",
+    "@libs-ui/components-pagination": "0.2.356-22",
+    "@libs-ui/components-scroll-measure-items-direction-horizontal": "0.2.356-22"
   },
   "sideEffects": false,
   "module": "fesm2022/libs-ui-components-table.mjs",