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

Standalone-first: Current ABP templates use standalone APIs (app.config.ts, app.routes.ts, and createRoutes()). Extension examples register contributors through route-level lazy loading — loadChildren returns routes from createRoutes({ ... }), not NgModules. Legacy NgModule projects can pass the same contributor options to SomeModule.forLazy({ ... }) instead. See ABP Now Supports Angular Standalone Applications for the forLazy() → createRoutes() migration.

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)" 
      /> 

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.

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.