Skip to content

Commit 2cc3f59

Browse files
yagmurcelkyagmurcelk
authored
Merge pull request #24636 from abpframework/issue-24635
Add extensible table row detail feature
2 parents 17f02bd + 6391840 commit 2cc3f59

File tree

11 files changed

+320
-97
lines changed

11 files changed

+320
-97
lines changed

‎docs/en/framework/ui/angular/data-table-column-extensions.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -342,4 +342,5 @@ export const identityEntityPropContributors = {
342342
343343
## See Also
344344
345+
- [Extensible Table Row Detail](extensible-table-row-detail.md)
345346
- [Customizing Application Modules Guide](../../architecture/modularity/extending/customizing-application-modules-guide.md)

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

Lines changed: 189 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,189 @@
1+
```json
2+
//[doc-seo]
3+
{
4+
"Description": "Learn how to add expandable row details to data tables using the Extensible Table Row Detail component in ABP Framework Angular UI."
5+
}
6+
```
7+
8+
# Extensible Table Row Detail for Angular UI
9+
10+
## Introduction
11+
12+
The `<abp-extensible-table-row-detail>` component allows you to add expandable row details to any `<abp-extensible-table>`. When users click the expand icon, additional content is revealed below the row.
13+
14+
<img alt="Extensible Table Row Detail Example" src="./images/row-detail-image.png" width="800px" style="max-width:100%">
15+
16+
## Quick Start
17+
18+
### Step 1. Import the Component
19+
20+
Import `ExtensibleTableRowDetailComponent` in your component:
21+
22+
```typescript
23+
import {
24+
ExtensibleTableComponent,
25+
ExtensibleTableRowDetailComponent
26+
} from '@abp/ng.components/extensible';
27+
28+
@Component({
29+
// ...
30+
imports: [
31+
ExtensibleTableComponent,
32+
ExtensibleTableRowDetailComponent,
33+
],
34+
})
35+
export class MyComponent { }
36+
```
37+
38+
### Step 2. Add Row Detail Template
39+
40+
Place `<abp-extensible-table-row-detail>` inside `<abp-extensible-table>` with an `ng-template`:
41+
42+
```html
43+
<abp-extensible-table [data]="data.items" [recordsTotal]="data.totalCount" [list]="list">
44+
<abp-extensible-table-row-detail>
45+
<ng-template let-row="row" let-expanded="expanded">
46+
<div class="p-3">
47+
<h5>{%{{{ row.name }}}%}</h5>
48+
<p>ID: {%{{{ row.id }}}%}</p>
49+
<p>Status: {%{{{ row.isActive ? 'Active' : 'Inactive' }}}%}</p>
50+
</div>
51+
</ng-template>
52+
</abp-extensible-table-row-detail>
53+
</abp-extensible-table>
54+
```
55+
56+
An expand/collapse chevron icon will automatically appear in the first column of each row.
57+
58+
## API
59+
60+
### ExtensibleTableRowDetailComponent
61+
62+
| Input | Type | Default | Description |
63+
|-------|------|---------|-------------|
64+
| `rowHeight` | `string` &#124; `number` | `'100%'` | Height of the expanded row detail area |
65+
66+
### Template Context Variables
67+
68+
| Variable | Type | Description |
69+
|----------|------|-------------|
70+
| `row` | `R` | The current row data object |
71+
| `expanded` | `boolean` | Whether the row is currently expanded |
72+
73+
## Usage Examples
74+
75+
### Basic Example
76+
77+
Display additional information when a row is expanded:
78+
79+
```html
80+
<abp-extensible-table [data]="data.items" [list]="list">
81+
<abp-extensible-table-row-detail>
82+
<ng-template let-row="row">
83+
<div class="p-3 border rounded m-2">
84+
<strong>Details for: {%{{{ row.name }}}%}</strong>
85+
<pre>{%{{{ row | json }}}%}</pre>
86+
</div>
87+
</ng-template>
88+
</abp-extensible-table-row-detail>
89+
</abp-extensible-table>
90+
```
91+
92+
### With Custom Row Height
93+
94+
Specify a fixed height for the detail area:
95+
96+
```html
97+
<abp-extensible-table-row-detail [rowHeight]="200">
98+
<ng-template let-row="row">
99+
<div class="p-3">Fixed 200px height content</div>
100+
</ng-template>
101+
</abp-extensible-table-row-detail>
102+
```
103+
104+
### Using Expanded State
105+
106+
Apply conditional styling based on expansion state:
107+
108+
```html
109+
<abp-extensible-table-row-detail>
110+
<ng-template let-row="row" let-expanded="expanded">
111+
<div class="p-3" [class.fade-in]="expanded">
112+
<p>This row is {%{{{ expanded ? 'expanded' : 'collapsed' }}}%}</p>
113+
</div>
114+
</ng-template>
115+
</abp-extensible-table-row-detail>
116+
```
117+
118+
### With Badges and Localization
119+
120+
```html
121+
<abp-extensible-table-row-detail>
122+
<ng-template let-row="row">
123+
<div class="p-3 bg-light border rounded m-2">
124+
<div class="row">
125+
<div class="col-md-6">
126+
<p class="mb-1"><strong>{%{{{ 'MyModule::Name' | abpLocalization }}}%}</strong></p>
127+
<p class="text-muted">{%{{{ row.name }}}%}</p>
128+
</div>
129+
<div class="col-md-6">
130+
<p class="mb-1"><strong>{%{{{ 'MyModule::Status' | abpLocalization }}}%}</strong></p>
131+
<p>
132+
@if (row.isActive) {
133+
<span class="badge bg-success">{%{{{ 'AbpUi::Yes' | abpLocalization }}}%}</span>
134+
} @else {
135+
<span class="badge bg-secondary">{%{{{ 'AbpUi::No' | abpLocalization }}}%}</span>
136+
}
137+
</p>
138+
</div>
139+
</div>
140+
</div>
141+
</ng-template>
142+
</abp-extensible-table-row-detail>
143+
```
144+
145+
## Alternative: Direct Template Input
146+
147+
For simpler use cases, you can use the `rowDetailTemplate` input on `<abp-extensible-table>` directly:
148+
149+
```html
150+
<abp-extensible-table
151+
[data]="data.items"
152+
[list]="list"
153+
[rowDetailTemplate]="detailTemplate"
154+
/>
155+
156+
<ng-template #detailTemplate let-row="row">
157+
<div class="p-3">{%{{{ row.name }}}%}</div>
158+
</ng-template>
159+
```
160+
161+
## Events
162+
163+
### rowDetailToggle
164+
165+
The `rowDetailToggle` output emits when a row is expanded or collapsed:
166+
167+
```html
168+
<abp-extensible-table
169+
[data]="data.items"
170+
[list]="list"
171+
(rowDetailToggle)="onRowToggle($event)"
172+
>
173+
<abp-extensible-table-row-detail>
174+
<ng-template let-row="row">...</ng-template>
175+
</abp-extensible-table-row-detail>
176+
</abp-extensible-table>
177+
```
178+
179+
```typescript
180+
onRowToggle(row: MyDto) {
181+
console.log('Row toggled:', row);
182+
}
183+
```
184+
185+
## See Also
186+
187+
- [Data Table Column Extensions](data-table-column-extensions.md)
188+
- [Entity Action Extensions](entity-action-extensions.md)
189+
- [Extensions Overview](extensions-overall.md)

‎docs/en/framework/ui/angular/images/row-detail-image.png‎

7.14 KB
Loading

‎npm/ng-packs/packages/components/extensible/src/lib/components/extensible-table/extensible-table-row-detail/extensible-table-row-detail.component.ts‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import { Component, contentChild, input, TemplateRef } from '@angular/core';
2+
3+
@Component({
4+
selector: 'abp-extensible-table-row-detail',
5+
template: '',
6+
})
7+
export class ExtensibleTableRowDetailComponent<R = any> {
8+
readonly rowHeight = input<string | number>('100%');
9+
readonly template = contentChild(TemplateRef<{ row: R; expanded: boolean }>);
10+
}

‎npm/ng-packs/packages/components/extensible/src/lib/components/extensible-table/extensible-table-row-detail/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export * from './extensible-table-row-detail.component';

0 commit comments

Comments
 (0)