abp/docs/en/framework/ui/angular/extensions-overall.md

//[doc-seo]
{
    "Description": "Discover how to enhance your Angular UI with extensions for actions, data tables, toolbars, and forms in the ABP Framework."
}

Angular UI Extensions

Angular UI extensions system allows you to add a new action to the actions menu, a new column to the data table, a new action to the toolbar of a page, and add a new field to the create and/or edit forms.

See the documents below for the details:

• Entity Action Extensions
• Data Table Column (or Entity Prop) Extensions
• Page Toolbar Extension
• Dynamic Form (or Form Prop) Extensions

Extensible Table Component

Using ngx-datatable in extensible table.

      <abp-extensible-table
         actionsText="Your Action"
         [data]="items"
         [recordsTotal]="totalCount"
         [actionsColumnWidth]="38"
         [actionsTemplate]="customAction"
         [list]="list"
         (tableActivate)="onTableSelect($event)" 
      /> 

Input / Output	Description	Type
actionsText	Column name of the action column.	string
data	Items shown in your table.	Array<any>
list	Instance of ListService.	ListService
actionsColumnWidth	Width of your action column.	number
actionsTemplate	Template of the action (for example, an ng-template).	TemplateRef<any>
recordsTotal	Total count of records.	number
tableActivate	Output fired when a cell or row is focused via keyboard or mouse click.	EventEmitter

Multiple Selection

The extensible table supports both single-row and multi-row selection. Use the selectable input to enable selection, and selectionType to control the selection mode.

<abp-extensible-table
  [data]="items"
  [recordsTotal]="totalCount"
  [list]="list"
  [selectable]="true"
  [selectionType]="'multiClick'"
  [selected]="selectedRows"
  (selectionChange)="onSelectionChange($event)"
/>

When selectionType is 'single', each row displays a radio button and the header does not show a "select all" checkbox. For all other selection types (e.g. 'multiClick', 'checkbox'), each row shows a checkbox and the header includes a "select all" checkbox.

Input / Output	Description	Type	Default
selectable	Enables the row selection column.	boolean	false
selectionType	Controls the selection mode. Accepts SelectionType values such as 'single', 'multi', 'multiClick', 'checkbox', or 'cell'.	`SelectionType	string`
selected	The currently selected rows.	any[]	[]
selectionChange	Output fired when the selection changes.	EventEmitter<any[]>	-

Infinite Scroll

The extensible table supports infinite scrolling as an alternative to pagination. When enabled, the table emits a loadMore event as the user scrolls near the bottom, allowing you to load additional data on demand. Pagination is hidden while infinite scroll is active.

<abp-extensible-table
  [data]="items"
  [recordsTotal]="totalCount"
  [list]="list"
  [infiniteScroll]="true"
  [isLoading]="isLoading"
  [tableHeight]="500"
  [scrollThreshold]="10"
  (loadMore)="onLoadMore()"
/>

In your component, append newly fetched data to the existing items array when loadMore fires:

onLoadMore(): void {
  if (this.isLoading) return;
  this.isLoading = true;
  // fetch next page and append results
  this.myService.getList({ skipCount: this.items.length, maxResultCount: 10 }).subscribe(result => {
    this.items = [...this.items, ...result.items];
    this.isLoading = false;
  });
}

Note: When infiniteScroll is true, set a fixed tableHeight so the table has a scrollable viewport. Pagination is automatically hidden.

Input / Output	Description	Type	Default
infiniteScroll	Enables infinite scroll mode (hides pagination).	boolean	false
isLoading	Indicates that more data is being fetched. Prevents duplicate loadMore events and shows a loading indicator.	boolean	false
tableHeight	Fixed height of the table in pixels when infiniteScroll is enabled.	number	-
scrollThreshold	Distance from the bottom (in pixels) at which loadMore is triggered.	number	10
loadMore	Output fired when the user scrolls near the bottom of the table (only when infiniteScroll is true and isLoading is false).	EventEmitter<void>	-