json

//[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:

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>`	-