mirror of https://github.com/abpframework/abp.git
Browse Source
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.pull/24660/head
Fahri Gedik
7 months ago
7 changed files with 311 additions and 96 deletions
@ -0,0 +1,189 @@ |
|||
```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." |
|||
} |
|||
``` |
|||
|
|||
# Extensible Table Row Detail for Angular UI |
|||
|
|||
## Introduction |
|||
|
|||
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. |
|||
|
|||
<img alt="Extensible Table Row Detail Example" src="./images/extensible-table-row-detail-example.png" width="800px" style="max-width:100%"> |
|||
|
|||
## Quick Start |
|||
|
|||
### Step 1. Import the Component |
|||
|
|||
Import `ExtensibleTableRowDetailComponent` in your component: |
|||
|
|||
```typescript |
|||
import { |
|||
ExtensibleTableComponent, |
|||
ExtensibleTableRowDetailComponent |
|||
} from '@abp/ng.components/extensible'; |
|||
|
|||
@Component({ |
|||
// ... |
|||
imports: [ |
|||
ExtensibleTableComponent, |
|||
ExtensibleTableRowDetailComponent, |
|||
], |
|||
}) |
|||
export class MyComponent { } |
|||
``` |
|||
|
|||
### Step 2. Add Row Detail Template |
|||
|
|||
Place `<abp-extensible-table-row-detail>` inside `<abp-extensible-table>` with an `ng-template`: |
|||
|
|||
```html |
|||
<abp-extensible-table [data]="data.items" [recordsTotal]="data.totalCount" [list]="list"> |
|||
<abp-extensible-table-row-detail> |
|||
<ng-template let-row="row" let-expanded="expanded"> |
|||
<div class="p-3"> |
|||
<h5>{{ row.name }}</h5> |
|||
<p>ID: {{ row.id }}</p> |
|||
<p>Status: {{ row.isActive ? 'Active' : 'Inactive' }}</p> |
|||
</div> |
|||
</ng-template> |
|||
</abp-extensible-table-row-detail> |
|||
</abp-extensible-table> |
|||
``` |
|||
|
|||
An expand/collapse chevron icon will automatically appear in the first column of each row. |
|||
|
|||
## API |
|||
|
|||
### ExtensibleTableRowDetailComponent |
|||
|
|||
| Input | Type | Default | Description | |
|||
|-------|------|---------|-------------| |
|||
| `rowHeight` | `string \| number` | `'100%'` | Height of the expanded row detail area | |
|||
|
|||
### Template Context Variables |
|||
|
|||
| Variable | Type | Description | |
|||
|----------|------|-------------| |
|||
| `row` | `R` | The current row data object | |
|||
| `expanded` | `boolean` | Whether the row is currently expanded | |
|||
|
|||
## Usage Examples |
|||
|
|||
### Basic Example |
|||
|
|||
Display additional information when a row is expanded: |
|||
|
|||
```html |
|||
<abp-extensible-table [data]="data.items" [list]="list"> |
|||
<abp-extensible-table-row-detail> |
|||
<ng-template let-row="row"> |
|||
<div class="p-3 border rounded m-2"> |
|||
<strong>Details for: {{ row.name }}</strong> |
|||
<pre>{{ row | json }}</pre> |
|||
</div> |
|||
</ng-template> |
|||
</abp-extensible-table-row-detail> |
|||
</abp-extensible-table> |
|||
``` |
|||
|
|||
### With Custom Row Height |
|||
|
|||
Specify a fixed height for the detail area: |
|||
|
|||
```html |
|||
<abp-extensible-table-row-detail [rowHeight]="200"> |
|||
<ng-template let-row="row"> |
|||
<div class="p-3">Fixed 200px height content</div> |
|||
</ng-template> |
|||
</abp-extensible-table-row-detail> |
|||
``` |
|||
|
|||
### Using Expanded State |
|||
|
|||
Apply conditional styling based on expansion state: |
|||
|
|||
```html |
|||
<abp-extensible-table-row-detail> |
|||
<ng-template let-row="row" let-expanded="expanded"> |
|||
<div class="p-3" [class.fade-in]="expanded"> |
|||
<p>This row is {{ expanded ? 'expanded' : 'collapsed' }}</p> |
|||
</div> |
|||
</ng-template> |
|||
</abp-extensible-table-row-detail> |
|||
``` |
|||
|
|||
### With Badges and Localization |
|||
|
|||
```html |
|||
<abp-extensible-table-row-detail> |
|||
<ng-template let-row="row"> |
|||
<div class="p-3 bg-light border rounded m-2"> |
|||
<div class="row"> |
|||
<div class="col-md-6"> |
|||
<p class="mb-1"><strong>{{ 'MyModule::Name' | abpLocalization }}:</strong></p> |
|||
<p class="text-muted">{{ row.name }}</p> |
|||
</div> |
|||
<div class="col-md-6"> |
|||
<p class="mb-1"><strong>{{ 'MyModule::Status' | abpLocalization }}:</strong></p> |
|||
<p> |
|||
@if (row.isActive) { |
|||
<span class="badge bg-success">{{ 'AbpUi::Yes' | abpLocalization }}</span> |
|||
} @else { |
|||
<span class="badge bg-secondary">{{ 'AbpUi::No' | abpLocalization }}</span> |
|||
} |
|||
</p> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</ng-template> |
|||
</abp-extensible-table-row-detail> |
|||
``` |
|||
|
|||
## Alternative: Direct Template Input |
|||
|
|||
For simpler use cases, you can use the `rowDetailTemplate` input on `<abp-extensible-table>` directly: |
|||
|
|||
```html |
|||
<abp-extensible-table |
|||
[data]="data.items" |
|||
[list]="list" |
|||
[rowDetailTemplate]="detailTemplate" |
|||
/> |
|||
|
|||
<ng-template #detailTemplate let-row="row"> |
|||
<div class="p-3">{{ row.name }}</div> |
|||
</ng-template> |
|||
``` |
|||
|
|||
## Events |
|||
|
|||
### rowDetailToggle |
|||
|
|||
The `rowDetailToggle` output emits when a row is expanded or collapsed: |
|||
|
|||
```html |
|||
<abp-extensible-table |
|||
[data]="data.items" |
|||
[list]="list" |
|||
(rowDetailToggle)="onRowToggle($event)" |
|||
> |
|||
<abp-extensible-table-row-detail> |
|||
<ng-template let-row="row">...</ng-template> |
|||
</abp-extensible-table-row-detail> |
|||
</abp-extensible-table> |
|||
``` |
|||
|
|||
```typescript |
|||
onRowToggle(row: MyDto) { |
|||
console.log('Row toggled:', row); |
|||
} |
|||
``` |
|||
|
|||
## See Also |
|||
|
|||
- [Data Table Column Extensions](data-table-column-extensions.md) |
|||
- [Entity Action Extensions](entity-action-extensions.md) |
|||
- [Extensions Overview](extensions-overall.md) |
|||
@ -0,0 +1,10 @@ |
|||
import { Component, contentChild, input, TemplateRef } from '@angular/core'; |
|||
|
|||
@Component({ |
|||
selector: 'abp-extensible-table-row-detail', |
|||
template: '', |
|||
}) |
|||
export class ExtensibleTableRowDetailComponent<R = any> { |
|||
readonly rowHeight = input<string | number>('100%'); |
|||
readonly template = contentChild(TemplateRef<{ row: R; expanded: boolean }>); |
|||
} |
|||
@ -0,0 +1 @@ |
|||
export * from './extensible-table-row-detail.component'; |
|||
Loading…
Reference in new issue