diff --git a/docs/en/framework/ui/angular/extensions-overall.md b/docs/en/framework/ui/angular/extensions-overall.md index 287d62b38e..03971a46c4 100644 --- a/docs/en/framework/ui/angular/extensions-overall.md +++ b/docs/en/framework/ui/angular/extensions-overall.md @@ -32,10 +32,78 @@ Using [ngx-datatable](https://github.com/swimlane/ngx-datatable) in extensible t /> ```` - * ` actionsText : ` ** Column name of action column. **Type** : string - * ` data : ` Items shows in your table. **Type** : Array - * ` list : ` Instance of ListService. **Type** : ListService - * `actionsColumnWidth : ` Width of your action column. **Type** : number - * ` actionsTemplate : ` Template of the action when "click this button" or whatever. Generally ng-template. **Type** : TemplateRef - * ` recordsTotal : ` Count of the record total. **Type** : number - * ` tableActivate : ` The Output(). A cell or row was focused via the keyboard or a mouse click. **Type** : EventEmitter() +| Input / Output | Description | Type | +|---------------------|----------------------------------------------------------------------------------------------|---------------------| +| `actionsText` | Column name of the action column. | `string` | +| `data` | Items shown in your table. | `Array` | +| `list` | Instance of `ListService`. | `ListService` | +| `actionsColumnWidth`| Width of your action column. | `number` | +| `actionsTemplate` | Template of the action (for example, an `ng-template`). | `TemplateRef` | +| `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. + +````ts + +```` + +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`| `'multiClick'` | +| `selected` | The currently selected rows. | `any[]` | `[]` | +| `selectionChange` | Output fired when the selection changes. | `EventEmitter` | - | + +### 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. + +````ts + +```` + +In your component, append newly fetched data to the existing `items` array when `loadMore` fires: + +````ts +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` | - |