Merge pull request #22587 from davidsi02/multiselect-extensible-table

Angular - Multiselect extensible table

npm/ng-packs/packages/components/extensible/src/lib/components/extensible-table/extensible-table.component.html

@@ -3,8 +3,40 @@
   [rows]="data"
   [count]="recordsTotal"
   [list]="list"
+  [selectionType]="selectable ? _selectionType : undefined"
   (activate)="tableActivate.emit($event)"
+  (select)="onSelect($event)"
+  [selected]="selected"
 >
+@if(selectable) {
+  <ngx-datatable-column [width]="50" [sortable]="false" [canAutoResize]="false" [draggable]="false" [resizeable]="false">
+  
+    <ng-template ngx-datatable-header-template let-value="value" let-allRowsSelected="allRowsSelected"
+      let-selectFn="selectFn">
+      @if (_selectionType !== 'single') {
+      <div class="form-check">
+        <input class="form-check-input table-check" type="checkbox" [checked]="allRowsSelected"
+          (change)="selectFn(!allRowsSelected)" />
+      </div>
+      }
+    </ng-template>
+  
+    <ng-template ngx-datatable-cell-template let-value="value" let-row="row" let-isSelected="isSelected"
+      let-onCheckboxChangeFn="onCheckboxChangeFn">
+      @if(_selectionType === 'single') {
+      <div class="h-100 form-check form-check-sm form-check-custom form-check-solid">
+        <input class="form-check-input" type="radio" [checked]="isSelected" (change)="onCheckboxChangeFn($event)" />
+      </div>
+      }
+      @if (_selectionType !== 'single') {
+      <div class="h-100 form-check form-check-sm form-check-custom form-check-solid">
+        <input class="form-check-input" type="checkbox" [checked]="isSelected" (change)="onCheckboxChangeFn($event)" />
+      </div>
+      }
+    </ng-template>
+  
+  </ngx-datatable-column>
+  }
   @if (actionsTemplate || (actionList.length && hasAtLeastOnePermittedAction)) {
     <ngx-datatable-column
       [name]="actionsText | abpLocalization"

npm/ng-packs/packages/components/extensible/src/lib/components/extensible-table/extensible-table.component.ts

@@ -19,7 +19,7 @@ import { AsyncPipe, NgComponentOutlet, NgTemplateOutlet } from '@angular/common'
 import { Observable, filter, map } from 'rxjs';
 
 import { NgbTooltip } from '@ng-bootstrap/ng-bootstrap';
-import { NgxDatatableModule } from '@swimlane/ngx-datatable';
+import { NgxDatatableModule, SelectionType } from '@swimlane/ngx-datatable';
 
 import {
   ABP,
@@ -104,6 +104,17 @@ export class ExtensibleTableComponent<R = any> implements OnChanges, AfterViewIn
 
   @Output() tableActivate = new EventEmitter();
 
+  @Input() selectable = false;
+
+  @Input() set selectionType(value: SelectionType | string) {
+    this._selectionType = typeof value === 'string' ? SelectionType[value] : value;
+  }
+  _selectionType: SelectionType = SelectionType.multiClick;
+  
+  
+  @Input() selected: any[] = [];
+  @Output() selectionChange = new EventEmitter<any[]>();
+
   hasAtLeastOnePermittedAction: boolean;
 
   readonly columnWidths!: number[];
@@ -225,6 +236,12 @@ export class ExtensibleTableComponent<R = any> implements OnChanges, AfterViewIn
     return visibleActions.length > 0;
   }
 
+  onSelect({ selected }) {
+    this.selected.splice(0, this.selected.length);
+    this.selected.push(...selected);
+    this.selectionChange.emit(selected);
+  }
+
   ngAfterViewInit(): void {
     this.list?.requestStatus$?.pipe(filter(status => status === 'loading')).subscribe(() => {
         this.data = [];