mirror of https://github.com/abpframework/abp.git
Yağmur Çelik
9 months ago
committed by
GitHub
GitHub
11 changed files with 320 additions and 97 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/row-detail-image.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) |
|||
|
After Width: | Height: | Size: 7.1 KiB |
@ -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'; |
|||
@ -0,0 +1,4 @@ |
|||
export interface RowDetailContext<R = any> { |
|||
row: R; |
|||
expanded: boolean; |
|||
} |
|||
Loading…
Reference in new issue