Add extensible table row detail feature #24636

fahrigedik · 2026-01-12T19:48:22Z

Description

Introduces the ExtensibleTableRowDetailComponent for expandable row details in extensible tables. Updates the extensible table to support row detail templates via both direct input and content child component, adds toggle logic and emits rowDetailToggle events. Documentation and exports are updated accordingly.

Resolves #24635 (write the related issue number if available)

TODO: Describe what this PR has changed, add screenshot or animated GIF if available, write if it is a breaking change, and how to fix the breaking changes for existing applications if so.

Checklist

I fully tested it as developer / designer and created unit / integration tests
I documented it (or no need to document or I will create a separate documentation issue)

How to test it?

you have to change branch issue-24635-test on abp
you have to run dev-app on abp repository.
you have to open tenants page and open row-detail.

Introduces the ExtensibleTableRowDetailComponent for expandable row details in extensible tables. Updates the extensible table to support row detail templates via both direct input and content child component, adds toggle logic and emits rowDetailToggle events. Documentation and exports are updated accordingly.

Copilot

Pull request overview

This pull request introduces an expandable row detail feature for the ExtensibleTableComponent in ABP Framework's Angular UI. It enables users to click an expand/collapse chevron icon to reveal additional content below each table row.

Changes:

Adds new ExtensibleTableRowDetailComponent to encapsulate row detail templates
Extends ExtensibleTableComponent with row detail inputs, outputs, and toggle functionality
Updates template to include row detail rendering with ngx-datatable-row-detail
Provides comprehensive documentation with usage examples

Reviewed changes

Copilot reviewed 7 out of 7 changed files in this pull request and generated 15 comments.

Show a summary per file

File	Description
extensible-table-row-detail.component.ts	New component to define row detail templates with configurable height
extensible-table-row-detail/index.ts	Barrel export for the new row detail component
extensible-table.component.ts	Adds row detail support with inputs, outputs, ViewChild reference, and toggle method
extensible-table.component.html	Integrates row detail template rendering and expand/collapse column
index.ts (components)	Exports the new row detail component
public-api.ts	Exposes the row detail component in public API
extensible-table-row-detail.md	Comprehensive documentation with API reference and usage examples

...ages/components/extensible/src/lib/components/extensible-table/extensible-table.component.ts

Copilot · 2026-01-12T19:56:22Z

...ages/components/extensible/src/lib/components/extensible-table/extensible-table.component.ts

+  styles: [`
+    :host ::ng-deep .ngx-datatable.material .datatable-body .datatable-row-detail {
+      background: none;
+      padding: 0;
+    }
+  `],


The inline styles use :host ::ng-deep which is a deprecated Angular feature. The ::ng-deep combinator is deprecated and may be removed in future Angular versions. Consider using ViewEncapsulation.None if you need to style child component elements, or apply these styles at a global level in your theme. If these styles must remain component-scoped, document that this is a temporary solution pending a better approach.

docs/en/framework/ui/angular/extensible-table-row-detail.md

Copilot · 2026-01-12T19:56:22Z

...ages/components/extensible/src/lib/components/extensible-table/extensible-table.component.ts

+  get effectiveRowDetailTemplate(): TemplateRef<any> | undefined {
+    return this.rowDetailComponent?.template() ?? this.rowDetailTemplate;
+  }
+
+  /** Gets the effective row detail height */
+  get effectiveRowDetailHeight(): string | number {
+    return this.rowDetailComponent?.rowHeight() ?? this.rowDetailHeight;
+  }


According to ABP Framework guidelines, public and protected members should be virtual to support extensibility and allow inheritance-based customization. The getters effectiveRowDetailTemplate and effectiveRowDetailHeight should be marked as virtual to allow derived classes to override this behavior.

Copilot · 2026-01-12T19:56:24Z

docs/en/framework/ui/angular/extensible-table-row-detail.md

+<img alt="Extensible Table Row Detail Example" src="./images/extensible-table-row-detail-example.png" width="800px" style="max-width:100%">
+


The documentation references an image file "./images/extensible-table-row-detail-example.png" that is not included in this pull request. This will result in a broken image in the documentation. The image file should be added to the appropriate location or the image reference should be removed until the image is available.

Suggested change

<img alt="Extensible Table Row Detail Example" src="./images/extensible-table-row-detail-example.png" width="800px" style="max-width:100%">

Copilot · 2026-01-12T19:56:24Z

...ages/components/extensible/src/lib/components/extensible-table/extensible-table.component.ts

  @Input() tableHeight: number;

+  // Row detail configuration (supports both direct template and child component)
+  @Input() rowDetailTemplate?: TemplateRef<{ row: R; expanded: boolean }>;


The template context type in rowDetailTemplate uses an inline type definition. For better type safety and reusability, consider defining a separate interface or type alias for the row detail template context, such as 'RowDetailContext' or 'ExtensibleTableRowDetailContext'. This would improve code maintainability and allow consumers to import and use the type definition.

Copilot · 2026-01-12T19:56:24Z

...ages/components/extensible/src/lib/components/extensible-table/extensible-table.component.ts

+  // Row detail configuration (supports both direct template and child component)
+  @Input() rowDetailTemplate?: TemplateRef<{ row: R; expanded: boolean }>;
+  @Input() rowDetailHeight: string | number = '100%';
+  @Output() rowDetailToggle = new EventEmitter<R>();


The comment on line 139 states "supports both direct template and child component", but it would be clearer to specify that when both are provided, the child component takes precedence (as implemented in the effectiveRowDetailTemplate getter). This should be documented in the JSDoc comment or in the component documentation to help users understand the precedence order.

Copilot · 2026-01-12T19:56:25Z

...ages/components/extensible/src/lib/components/extensible-table/extensible-table.component.ts

+  toggleExpandRow(row: R): void {
+    this.table?.rowDetail?.toggleExpandRow(row);
+    this.rowDetailToggle.emit(row);
+  }


According to ABP Framework guidelines, all public methods should be virtual to support extensibility. The toggleExpandRow method should be marked as virtual to allow derived classes to customize the expand/collapse behavior.

...es/components/extensible/src/lib/components/extensible-table/extensible-table.component.html

sumeyyeKurtulus · 2026-01-15T05:27:44Z

...onents/extensible-table/extensible-table-row-detail/extensible-table-row-detail.component.ts

@@ -0,0 +1,10 @@
+import { Component, contentChild, input, TemplateRef } from '@angular/core';


Since we still support the module usage in the packages, it is better to import this component ExtensibleTableRowDetailComponent in extensible module.

sumeyyeKurtulus · 2026-01-15T05:28:29Z

...es/components/extensible/src/lib/components/extensible-table/extensible-table.component.html

+  <ngx-datatable-column [width]="50" [resizeable]="false" [sortable]="false" [draggable]="false"
+    [canAutoResize]="false">
+    <ng-template let-row="row" let-expanded="expanded" ngx-datatable-cell-template>
+      <a href="javascript:void(0)" class="text-decoration-none text-muted"


We can use href="#" with (click)="toggleExpandRow(row); $event.preventDefault()" or better yet, use a <button> element styled as a link for better accessibility and security.

sumeyyeKurtulus · 2026-01-15T05:32:16Z

docs/en/framework/ui/angular/extensible-table-row-detail.md

+```json
+//[doc-seo]
+{
+    "Description": "Learn how to add expandable row details to data tables using the Extensible Table Row Detail component in ABP Framework Angular UI."


This document is not referenced in another one, so we can make a reference here to make it visible.

sumeyyeKurtulus

Hello @fahrigedik thank you for adding such update. Other than my comments and some of the notes provided by the co-pilot, this PR is mergable.

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

…/extensible-table/extensible-table.component.html Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

…ertion (!) but doesn't specify the static option Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Registered ExtensibleTableRowDetailComponent in ExtensibleModule and updated documentation to reference the new row detail feature. Also improved accessibility and semantics by replacing the expand/collapse anchor with a button in the extensible table component template.

github-actions · 2026-01-15T12:52:17Z

Images automagically compressed by Calibre's image-actions ✨

Compression reduced images by 73.4%, saving 23.0 KB.

Filename	Before	After	Improvement	Visual comparison
`docs/en/framework/ui/angular/images/row-detail-image.png`	31.3 KB	8.3 KB	73.4%	View diff

Introduced a RowDetailContext interface for row detail templates to improve type safety and clarity. Updated rowDetailTemplate and related methods to use the new context type. Also added documentation regarding deprecated ::ng-deep usage in styles.

…o issue-24635

github-actions · 2026-01-15T13:08:11Z

Images automagically compressed by Calibre's image-actions ✨

Compression reduced images by 7.8%, saving 670 B.

Filename	Before	After	Improvement	Visual comparison
`docs/en/framework/ui/angular/images/row-detail-image.png`	8.3 KB	7.7 KB	7.8%	View diff

github-actions · 2026-01-16T05:50:39Z

Images automagically compressed by Calibre's image-actions ✨

Compression reduced images by 7.1%, saving 557 B.

Filename	Before	After	Improvement	Visual comparison
`docs/en/framework/ui/angular/images/row-detail-image.png`	7.7 KB	7.1 KB	7.1%	View diff

fahrigedik added this to the 10.2-preview milestone Jan 12, 2026

fahrigedik requested review from Copilot, sumeyyeKurtulus and yagmurcelk January 12, 2026 19:48

Copilot started reviewing on behalf of fahrigedik January 12, 2026 19:49 View session

Copilot AI reviewed Jan 12, 2026

View reviewed changes

github-actions bot added the ui-angular label Jan 13, 2026

abpframework deleted a comment from Copilot AI Jan 15, 2026

sumeyyeKurtulus reviewed Jan 15, 2026

View reviewed changes

Update docs/en/framework/ui/angular/extensible-table-row-detail.md

677cc0a

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

abpframework deleted a comment from Copilot AI Jan 15, 2026

The toggleExpandRow method uses optional chaining on table

abb68b3

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

abpframework deleted a comment from Copilot AI Jan 15, 2026

Copilot AI mentioned this pull request Jan 15, 2026

[WIP] Add extensible table row detail feature #24660

Closed

abpframework deleted a comment from Copilot AI Jan 15, 2026

fahrigedik and others added 5 commits January 15, 2026 15:22

Update npm/ng-packs/packages/components/extensible/src/lib/components…

41e3ef8

…/extensible-table/extensible-table.component.html Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

The @ViewChild decorator for 'table' uses the definite assignment ass…

5c00d36

…ertion (!) but doesn't specify the static option Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Add ExtensibleTableRowDetailComponent to module and docs

66cdfa2

Optimised images with calibre/image-actions

6e63bb0

fahrigedik added 2 commits January 15, 2026 16:04

Merge branch 'issue-24635' of https://github.com/abpframework/abp int…

2bcafa7

…o issue-24635

fahrigedik requested a review from sumeyyeKurtulus January 15, 2026 13:06

Optimised images with calibre/image-actions

94c0b60

sumeyyeKurtulus and others added 2 commits January 16, 2026 08:49

fix: document escape character errors

3113cbe

Optimised images with calibre/image-actions

6391840

sumeyyeKurtulus approved these changes Jan 16, 2026

View reviewed changes

yagmurcelk approved these changes Jan 19, 2026

View reviewed changes

yagmurcelk merged commit 2cc3f59 into dev Jan 19, 2026
1 check passed

yagmurcelk deleted the issue-24635 branch January 19, 2026 08:37

		<img alt="Extensible Table Row Detail Example" src="./images/extensible-table-row-detail-example.png" width="800px" style="max-width:100%">

		@@ -0,0 +1,10 @@
		import { Component, contentChild, input, TemplateRef } from '@angular/core';

Add extensible table row detail feature #24636

Add extensible table row detail feature #24636

Uh oh!

Conversation

fahrigedik commented Jan 12, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Checklist

How to test it?

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Copilot AI Jan 12, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Copilot AI Jan 12, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 12, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 12, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 12, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 12, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

sumeyyeKurtulus Jan 15, 2026

Choose a reason for hiding this comment

Uh oh!

sumeyyeKurtulus Jan 15, 2026

Choose a reason for hiding this comment

Uh oh!

sumeyyeKurtulus Jan 15, 2026

Choose a reason for hiding this comment

Uh oh!

sumeyyeKurtulus left a comment

Choose a reason for hiding this comment

Uh oh!

github-actions bot commented Jan 15, 2026

Uh oh!

github-actions bot commented Jan 15, 2026

Uh oh!

github-actions bot commented Jan 16, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

fahrigedik commented Jan 12, 2026 •

edited

Loading